Composant · Navigation

ContentSwitcher

Stable

Bascule segmentée (`role="tablist"`) entre plusieurs vues mutuellement exclusives. La valeur sélectionnée est bindable et navigable au clavier (flèches, Home/End).

Exemples

Bascule simple

Voir le code (Svelte)

<ContentSwitcher
  items={[{"value":"list","label":"Liste"},{"value":"board","label":"Tableau"},{"value":"calendar","label":"Calendrier"}]}
  value="list"
  label="Mode d’affichage"
/>

Vue active: list

Tailles

Voir le code (Svelte)

<div class="docs-demo-stack">
  <ContentSwitcher
    items={[{"value":"all","label":"Tout"},{"value":"mine","label":"À moi"}]}
    size="sm"
    value="all"
    label="sm"
  />
  <ContentSwitcher
    items={[{"value":"all","label":"Tout"},{"value":"mine","label":"À moi"}]}
    size="md"
    value="all"
    label="md"
  />
  <ContentSwitcher
    items={[{"value":"all","label":"Tout"},{"value":"mine","label":"À moi"}]}
    size="lg"
    value="all"
    label="lg"
  />
</div>

Option désactivée

Voir le code (Svelte)

<ContentSwitcher
  items={[{"value":"draft","label":"Brouillon"},{"value":"review","label":"Revue"},{"value":"archived","label":"Archivé","disabled":true}]}
  value="draft"
  label="Statut"
/>

API

Prop	Type	Default
`items`	`{ value: string; label: string; disabled?: boolean }[]`	requis
`value`	`string` (`$bindable`)	`""`
`label`	`string`	optionnel
`size`	`"sm" \| "md" \| "lg"`	`"md"`
`onchange`	`(value: string) => void`	optionnel
`class`	`string`	optionnel

Notes d’usage

`items` est un tableau `{ value, label, disabled? }`. `value` est `$bindable` et identifie l’option active ; `onchange` reçoit la nouvelle `value` uniquement quand elle change.

Le clavier est câblé : `ArrowRight`/`ArrowLeft` cyclent (wrap), `Home`/`End` vont aux extrémités. Les items `disabled` sont ignorés à la sélection.

Le composant ne rend que la barre de bascule ; l’affichage du contenu associé est piloté côté consommateur via la `value` liée.

Tokens utilisés

--st-component-control-radius
--st-component-control-focusRing
--st-semantic-surface-subtle
--st-semantic-surface-default
--st-semantic-text-secondary
--st-semantic-text-primary
--st-semantic-border-interactive
--st-motion-fast
--st-motion-easing
--st-component-control-hoverBorder
--st-component-control-hoverBackground