Segmented

Bascule en ligne pour basculer entre des options mutuellement exclusives.

Import

import { Segmented } from 'asterui'

Exemples

Utilisation basique

Contrôle segmenté simple pour le basculement de vue.

</>

ListGridTable

Selected: List

import { Segmented } from 'asterui'
import { useState } from 'react'

function App() {
  const [view, setView] = useState('List')
  
  return (
      <div>
        <Segmented value={view} onChange={(v) => setView(v as string)}>
          <Segmented.Item value="List">List</Segmented.Item>
          <Segmented.Item value="Grid">Grid</Segmented.Item>
          <Segmented.Item value="Table">Table</Segmented.Item>
        </Segmented>
        <p className="mt-2 text-sm text-base-content/70">Selected: {view}</p>
      </div>
    )
}

export default App

Éléments désactivés

Les éléments individuels peuvent être désactivés.

</>

DailyWeeklyMonthlyYearly

Selected: week

import { Segmented } from 'asterui'
import { useState } from 'react'

function App() {
  const [period, setPeriod] = useState('week')
  
  return (
      <div>
        <Segmented value={period} onChange={(v) => setPeriod(v as string)}>
          <Segmented.Item value="day">Daily</Segmented.Item>
          <Segmented.Item value="week">Weekly</Segmented.Item>
          <Segmented.Item value="month">Monthly</Segmented.Item>
          <Segmented.Item value="year" disabled>Yearly</Segmented.Item>
        </Segmented>
        <p className="mt-2 text-sm text-base-content/70">Selected: {period}</p>
      </div>
    )
}

export default App

Tailles

Quatre options de taille disponibles.

</>

SML

SML

SML

SML

import { Segmented, Space } from 'asterui'

function App() {
  return (
      <Space direction="vertical" gap="md">
        <Segmented size="xs" defaultValue="M">
          <Segmented.Item value="S">S</Segmented.Item>
          <Segmented.Item value="M">M</Segmented.Item>
          <Segmented.Item value="L">L</Segmented.Item>
        </Segmented>
        <Segmented size="sm" defaultValue="M">
          <Segmented.Item value="S">S</Segmented.Item>
          <Segmented.Item value="M">M</Segmented.Item>
          <Segmented.Item value="L">L</Segmented.Item>
        </Segmented>
        <Segmented size="md" defaultValue="M">
          <Segmented.Item value="S">S</Segmented.Item>
          <Segmented.Item value="M">M</Segmented.Item>
          <Segmented.Item value="L">L</Segmented.Item>
        </Segmented>
        <Segmented size="lg" defaultValue="M">
          <Segmented.Item value="S">S</Segmented.Item>
          <Segmented.Item value="M">M</Segmented.Item>
          <Segmented.Item value="L">L</Segmented.Item>
        </Segmented>
      </Space>
    )
}

export default App

Mode bloc

Pleine largeur avec options de taille égale.

</>

LeftCenterRight

import { Segmented } from 'asterui'
import { useState } from 'react'

function App() {
  const [align, setAlign] = useState('Center')
  
  return (
      <div className="w-full max-w-md">
        <Segmented value={align} onChange={(v) => setAlign(v as string)} block>
          <Segmented.Item value="Left">Left</Segmented.Item>
          <Segmented.Item value="Center">Center</Segmented.Item>
          <Segmented.Item value="Right">Right</Segmented.Item>
        </Segmented>
      </div>
    )
}

export default App

Désactivé

État désactivé pour l'ensemble du contrôle.

</>

Option AOption BOption C

import { Segmented } from 'asterui'

function App() {
  return (
      <Segmented defaultValue="A" disabled>
        <Segmented.Item value="A">Option A</Segmented.Item>
        <Segmented.Item value="B">Option B</Segmented.Item>
        <Segmented.Item value="C">Option C</Segmented.Item>
      </Segmented>
    )
}

export default App

Avec icônes

Options avec icônes et étiquettes.

</>

ListGrid

View: list

import { Segmented } from 'asterui'
import { Bars3Icon, Squares2X2Icon } from '@aster-ui/icons'
import { useState } from 'react'

function App() {
  const [view, setView] = useState('list')
  
  return (
      <div>
        <Segmented value={view} onChange={(v) => setView(v as string)}>
          <Segmented.Item value="list" icon={<Bars3Icon size="sm" />}>
            List
          </Segmented.Item>
          <Segmented.Item value="grid" icon={<Squares2X2Icon size="sm" />}>
            Grid
          </Segmented.Item>
        </Segmented>
        <p className="mt-2 text-sm text-base-content/70">View: {view}</p>
      </div>
    )
}

export default App

API

Segmented

Propriété	Description	Type	Défaut
value	Valeur actuellement sélectionnée (contrôlée)	string | number	-
defaultValue	Valeur sélectionnée par défaut (non contrôlée)	string | number	-
onChange	Callback lorsque la sélection change	(value: string | number) => void	-
size	Taille du contrôle	'xs' | 'sm' | 'md' | 'lg'	'md'
block	Prendre toute la largeur du conteneur	boolean	false
disabled	Désactiver toutes les options	boolean	false
className	Classe CSS supplémentaire	string	-
children	Composants Segmented.Item	ReactNode	-

Segmented.Item

Propriété	Description	Type	Défaut
value	Valeur de l’option (requise)	string | number	-
disabled	Désactiver cette option	boolean	false
icon	Icône avant l’étiquette	ReactNode	-
children	Contenu de l’étiquette	ReactNode	-
className	Classe CSS supplémentaire	string	-

Quand utiliser

• Bascules de vue : Basculer entre les vues Liste/Grille/Tableau
• Périodes temporelles : Filtres Jour/Semaine/Mois/Année
• Sélecteurs de taille : Options S/M/L/XL
• Alignement : Contrôles Gauche/Centre/Droite
• Bascules de mode : Bascules de thème Clair/Sombre

Segmented vs Radio.Group

Segmented	Radio.Group
Changements d’état de l’interface utilisateur immédiats	Valeurs de champs de formulaire
Apparence compacte, semblable à un bouton	Boutons radio traditionnels
Options toujours visibles	Peut avoir de nombreuses options
2-5 options généralement	N’importe quel nombre d’options