CSS: segmented-control ​

.instui-segmented-control — Ođđa velttojuvvon ráidu oidnánkommando dahje filtera ovttasvuođaid.

Geažisvuohta dábálaš segmenda užašla distincta aktiv-item skygga; ii leat ovdanlágan --instui-elevation-* composite. Överflow-buttoneat lea maŋimuš eatnamiid elevation3 komponenda tokenat.

TIP

JS-ovddiduvvon — Dát komponenta CSS ráidán ja bargá eanet - barggus; veahkehit dan @pantoken/interactions -is vuostá addit interaktiivalaš álbmotbargguid. Lávkái modifier table below.

Guhkkinjohka ​

Geahččat labelii fieldset ja oktan beaivválaš radio njuolga mainna checked default. Njaŋŋat radios boađejuvvot checked státas; overflow-buttoneat ferte bálvalusat mii veahkehit dálkkimisvuođa skovla.

Buktáhašvuohta ​

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

Exempla ​

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>### settings</label>
      <label class="-icon-sliders-vertical"><input type="radio" name="view">Válggat</label>
      <label class="-icon-wrench"><input type="radio" name="view">Konfig.</label>
      <label class="-icon-sliders-horizontal"><input type="radio" name="view">Útillát</label>
      <label class="-icon-monitor-cog"><input type="radio" name="view">Válgáid</label>
      <label class="-icon-settings-2"><input type="radio" name="view">Featur-flaggat</label>
    </div>
    <button class="overflow-end" aria-label="Scroll to next views" hidden></button>
  </div>
</fieldset>

Structura ​

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;

Modifisuvnnat ​

ModifisererDeskripción
.-size-lgGuske segmendat.
.-size-mdMiddje segmendat (default).
.-size-smNjuolga segmendat.

Dála ​

DálaDeskripción
.overflow-endSkrolla go lea dáhppis geahččat segmenda.
.overflow-startSkrolla go lea dábálaš geahččat segmenda.
.trackSkrollable ráidu mii innehaldá ovttasvuođaid segmendain.
.viewportKlippá segmendaráidu ja ankkerearjja overflow-kontrollat.

Pseudo-elementtat ​

Pseudo-elementDeskripción
::before—

Stáhtat ​

StateDeskripción
:disabled—

Tokenat gaskkalit ​

TokenTypeVaššun
--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——

Almmuhuvvot komponenttat ​