CSS: segmented-control ​

.instui-segmented-control — یک ردیف تک‌انتخابی از گزینه‌های نمایش فشرده یا فیلتر.

بخش انتخاب‌شده از یک سایهٔ متمایز برای آیتم فعال استفاده می‌کند؛ با یک ترکیب موجود --instui-elevation-* مطابقت ندارد. دکمه‌های سرریز از توکن‌های مؤلفهٔ بالادست elevation3 استفاده می‌کنند.

TIP

افزایش JS — CSS این مؤلفه به‌تنهایی رندر و کار می‌کند؛ آن را با @pantoken/interactions جفت کنید تا رفتار تعاملی اضافه شود. جدول مدیفایرها در پایین را ببینید.

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

از یک fieldset دارای برچسب و یک نام رادیویی مشترک با یک مقدار پیش‌فرض انتخاب‌شده استفاده کنید. رادیوهای بومی وضعیت انتخاب‌شان را اعلام می‌کنند؛ دکمه‌های سرریز نیاز به برچسب‌هایی دارند که جهت پیمایش را توصیف کنند.

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

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

ساختار ​

text
fieldset.instui-segmented-control
  .viewport
    button.overflow-start (0..1)
    .track
      segmented-control.segment (component, 1..n)
    button.overflow-end (0..1)
flowchart TD n0["fieldset.instui-segmented-control"]:::cssdoc-root n1(".viewport"):::cssdoc-part n2("button.overflow-start"):::cssdoc-part n3(".track"):::cssdoc-part n4(["segmented-control.segment"]):::cssdoc-component n5("button.overflow-end"):::cssdoc-part n1 -.->|0..1| n2 n3 -->|1..n| n4 n1 --> n3 n1 -.->|0..1| n5 n0 --> n1 click n4 "/api/css/segmented-control.segment.md" classDef cssdoc-root stroke-width:1px; classDef cssdoc-part stroke-width:1px; classDef cssdoc-slot stroke-width:1px; classDef cssdoc-component stroke-width:1px;

تعدیل‌کننده‌ها ​

تعدیل‌کنندهتوضیحات
.-size-lgقطعات بزرگ.
.-size-mdقطعات متوسط (پیش‌فرض).
.-size-smقطعات کوچک.

قسمت‌ها ​

قسمتتوضیحات
.overflow-endاسکرول به قطعه پنهان بعدی.
.overflow-startاسکرول به قطعه پنهان قبلی.
.trackردیف قابل اسکرول حاوی قطعات قابل انتخاب.
.viewportقطعهٔ ردیف را برش می‌دهد و کنترل‌های سرریز را لنگر می‌کند.

نیمه‌عناصر (Pseudo-elements) ​

نیمه‌عنصرتوضیحات
::before—

حالت‌ها ​

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

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

Tokenنوعمقدار
--instui-border-width-sm<length>0.0625rem
--instui-color-background-interactive-action-primary-base<color>LightDarklight-dark(#1D354F, #EEF4FD)
--instui-color-drop-shadow-shadow-color1<color>LightDarklight-dark(rgba(35,68,101,0.15), rgba(0,0,0,0.3))
--instui-color-drop-shadow-shadow-color2<color>LightDarklight-dark(rgba(35,68,101,0.1), rgba(0,0,0,0.15))
--instui-color-stroke-interactive-action-primary-base<color>LightDarklight-dark(#1D354F, #EEF4FD)
--instui-color-text-interactive-action-primary-base<color>LightDarklight-dark(#ffffff, #1D354F)
--instui-component-base-button-border-radius<length>0.75rem
--instui-component-base-button-medium-height<length>2.5rem
--instui-component-segmented-control-font-family[ <font-family-name> | <generic-font-family> ]#Atkinson Hyperlegible Next, "Helvetica Neue", Helvetica, Arial, sans-serif
--instui-component-segmented-control-font-size-lg<length>1.125rem
--instui-component-segmented-control-font-size-md<length>1rem
--instui-component-segmented-control-font-size-sm<length>0.875rem
--instui-component-segmented-control-font-weight<integer>500
--instui-component-segmented-control-height-lg<length>3rem
--instui-component-segmented-control-height-md<length>2.5rem
--instui-component-segmented-control-height-sm<length>2rem
--instui-component-segmented-control-item-gap-lg<length>0.75rem
--instui-component-segmented-control-item-gap-md<length>0.5rem
--instui-component-segmented-control-item-gap-sm<length>0.25rem
--instui-component-segmented-control-item-padding-horizontal-lg<length>1.25rem
--instui-component-segmented-control-item-padding-horizontal-md<length>1rem
--instui-component-segmented-control-item-padding-horizontal-sm<length>0.75rem
--instui-component-segmented-control-line-height<percentage>125%
--instui-component-segmented-control-track-background-color<color>LightDarklight-dark(#44709f33, #86a8d54d)
--instui-component-segmented-control-track-background-disabled-color<color>LightDarklight-dark(#DFE1E3, #334450)
--instui-component-segmented-control-track-border-radius<length>1rem
--instui-component-segmented-control-track-gap<length>0.125rem
--instui-component-segmented-control-track-padding<length>0.25rem
--instui-drop-shadow-blur-elevation3-dropshadow1<length>10px
--instui-drop-shadow-blur-elevation3-dropshadow2<length>3px
--instui-drop-shadow-spread-elevation3-dropshadow1<length>4px
--instui-drop-shadow-spread-elevation3-dropshadow2<length>0px
--instui-drop-shadow-y-elevation3-dropshadow1<length>6px
--instui-drop-shadow-y-elevation3-dropshadow2<length>2px
--instui-icon-chevron-left<image>url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m15%2018-6-6%206-6%22%2F%3E%3C%2Fsvg%3E')
--instui-icon-chevron-right<image>url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m9%2018%206-6-6-6%22%2F%3E%3C%2Fsvg%3E')
--pantoken-segmented-end-reserve——
--pantoken-segmented-font-size<length>1rem
--pantoken-segmented-overflow-shadow<color>0 2px 3px 0px light-dark(rgba(35,68,101,0.15), rgba(0,0,0,0.3)), 0 6px 10px 4px light-dark(rgba(35,68,101,0.1), rgba(0,0,0,0.15))
--pantoken-segmented-start-reserve——

زیرمولفه‌ها ​