CSS: segmented-control.segment ​

.instui-segmented-control — یک برچسب کنترل بخش‌بندی‌شده قابل انتخاب و ورودی رادیویی بومی آن.

یک -icon-* کلاس ممکن است روی برچسب یا ورودی بومی آن قرار گیرد؛ کمکی تعامل کلاس‌های ورودی را به برچسب منتقل می‌کند تا نقاش گلیف مشترک بتواند آن را رندر کند.

دسترس‌پذیری ​

ورودی رادیویی بومی را درون برچسب نگه دارید تا وضعیت‌های انتخاب‌شده، فوکوس، غیرفعال و معنا/نحوهٔ عملکرد صفحه‌کلید همچنان در دسترس باقی بمانند.

نحوه استفاده ​

css
@import "@pantoken/plugin-custom-components/custom-components.css";

حالت‌ها ​

وضعیتتوضیحات
:checked—
:disabled—

توکن‌های مصرف‌شده ​

Tokenنوعمقدار
--instui-component-segmented-control-item-border-radius<length>0.75rem
--instui-component-segmented-control-selected-item-background-active-color<color>hsl(from light-dark(#1D354F, #EEF4FD) h s calc(l * 0.85))
--instui-component-segmented-control-selected-item-background-color<color>LightDarklight-dark(#1D354F, #EEF4FD)
--instui-component-segmented-control-selected-item-background-disabled-color<color>LightDarklight-dark(#C7CACD, #4A5B68)
--instui-component-segmented-control-selected-item-background-hover-color<color>hsl(from light-dark(#1D354F, #EEF4FD) h s calc(l + (100 - l) * 0.2))
--instui-component-segmented-control-selected-item-text-color<color>LightDarklight-dark(#ffffff, #1D354F)
--instui-component-segmented-control-selected-item-text-disabled-color<color>LightDarklight-dark(#F2F4F5, #273540)
--instui-component-segmented-control-unselected-item-background-active-color<color>hsl(from light-dark(#44709f33, #86a8d54d) h s calc(l * 0.85))
--instui-component-segmented-control-unselected-item-background-hover-color<color>hsl(from light-dark(#44709f33, #86a8d54d) h s calc(l + (100 - l) * 0.4))
--instui-component-segmented-control-unselected-item-text-color<color>LightDarklight-dark(#1D354F, #ffffff)
--instui-component-segmented-control-unselected-item-text-disabled-color<color>LightDarklight-dark(#9EA6AD, #6A7883)
--instui-focus-outline-colorauto | <color>—
--instui-focus-outline-offset<length>—
--instui-focus-outline-width<line-width>—
--pantoken-segmented-gap<length>0.5rem
--pantoken-segmented-height<length>2.5rem
--pantoken-segmented-padding<length>1rem
--pantoken-segmented-selected-shadow<color>0 2px 4px 2px light-dark(rgba(35,68,101,0.1), rgba(0,0,0,0.15)), 0 1px 2px 0 light-dark(rgba(35,68,101,0.15), rgba(0,0,0,0.3))