1. Erste Schritte
2. Komponenten
3. Segmentsteuerung

Segmentsteuerung 1.2.0

Das <velin-segmented-control> Komponente ist eine Toggle-Gruppe mit aria-pressed auf jedem Segment. Markiere den Standard mit dem selected attribute. Added in 0.7.5. English: Segmentsteuerung

Wann verwenden

• Exklusive Auswahl in einer kompakten Toggle-Gruppe mit <velin-segmented-control> (aria-pressed auf Segmenten).
• Ansichtsmodi oder kurze Optionssets, bei denen eine Segmentsteuerung besser passt als Radios oder Tabs.

Wann nicht

• Independent actions that can all stay available — use Button-Gruppe.
• Multi-page navigation — use Navs & Tabs.

Beispiel

<velin-segmented-control aria-label="View">
  <button type="button" selected>List</button>
  <button type="button">Grid</button>
</velin-segmented-control>

Import

Lade das Bundle einmal und nutze dann das Custom Element in deinem Markup:

<script type="module" src="../../dist/velinstyle-components.min.js"></script>
<velin-segmented-control>…</velin-segmented-control>

Barrierefreiheit

• Beschrifte das Control (Beispiele nutzen aria-label on <velin-segmented-control>).
• Jedes Segment nutzt aria-pressed; mark the default with the selected attribute.

Verwandt

• Button-Gruppe
• Navs & Tabs
• Rating