CSS: segmented-control ​

.instui-segmented-control — Μία γραμμή επιλογής μονής επιλογής για συμπαγή προβολή ή επιλογές φίλτρου.

Το επιλεγμένο τμήμα χρησιμοποιεί μια διακριτή ενεργή-στοιχείο σκιά· δεν ταιριάζει με ένα υπάρχον --instui-elevation-* σύνθετο. Τα κουμπιά υπερχείλισης χρησιμοποιούν τα token του component elevation3 από το upstream.

TIP

Ενίσχυση JS — Το CSS αυτού του στοιχείου αποδίδει και λειτουργεί από μόνο του· συνδυάστε το με @pantoken/interactions για να προσθέσετε τη διαδραστική συμπεριφορά. Δείτε τον πίνακα τροποποιητών παρακάτω.

Προσβασιμότητα ​

Χρησιμοποιήστε ένα επισημασμένο fieldset και ένα κοινό όνομα radio με ένα προκαθορισμένο επιλεγμένο. Τα εγγενή 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—

Καταναλωμένα tokens ​

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——

Υποσυστατικά ​