CSS: segmented-control ​

.instui-segmented-control — एक एकल-चयन पंक्ति जो कॉम्पैक्ट दृश्य या फ़िल्टर विकल्पों के लिए है.

चुने गए सेगमेंट एक पृथक active-item छाया का उपयोग करता है; यह किसी मौजूदा --instui-elevation-* कंपोजिट से मेल नहीं खाता। ओवरफ़्लो बटन अपस्ट्रीम elevation3 कंपोनेंट टोकन का उपयोग करते हैं.

TIP

JS संवर्धन — यह कंपोनेंट का CSS स्वयं रेंडर और कार्य करता है; इंटरैक्टिव व्यवहार जोड़ने के लिए इसे @pantoken/interactions के साथ जोड़ें। विवरण के लिए modifier table below देखें।

एक्सेसिबिलिटी ​

लेबल किया हुआ fieldset और एक साझा radio नाम जिसका डिफ़ॉल्ट चुनाव हो, उपयोग करें। Native radios अपनी चुनी हुई स्थिति की घोषणा करते हैं; ओवरफ़्लो बटनों को उनके स्क्रॉल दिशा का वर्णन करने वाले लेबल चाहिए।

उपयोग ​

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

उदाहरण ​

html
<fieldset class="instui-segmented-control" aria-label="Course view">
  <div class="viewport">
    <button class="overflow-start" aria-label="Scroll to previous views" hidden></button>
    <div class="track">
      <label class="-icon-settings"><input type="radio" name="view" checked>सेटिंग्स</label>
      <label class="-icon-sliders-vertical"><input type="radio" name="view">विकल्प</label>
      <label class="-icon-wrench"><input type="radio" name="view">कॉन्फ़िग</label>
      <label class="-icon-sliders-horizontal"><input type="radio" name="view">उपयोगिताएँ</label>
      <label class="-icon-monitor-cog"><input type="radio" name="view">प्राथमिकताएँ</label>
      <label class="-icon-settings-2"><input type="radio" name="view">फ़ीचर फ़्लैग्स</label>
    </div>
    <button class="overflow-end" aria-label="Scroll to next views" hidden></button>
  </div>
</fieldset>

संरचना ​

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सेगमेंट पंक्ति को क्लिप करता है और ओवरफ़्लो नियंत्रणों को एंकर करता है।

स्यूडो-एलिमेंट्स ​

स्यूडो-एलिमेंटविवरण
::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——

सबकम्पोनेन्ट्स ​