Segmented

Alternância inline para alternar entre opções mutuamente exclusivas.

Importação

import { Segmented } from 'asterui'

Exemplos

Uso Básico

Controle segmentado simples para alternar visualização.

</>

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

Itens Desabilitados

Itens individuais podem ser desabilitados.

</>

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

Tamanhos

Quatro opções de tamanho disponíveis.

</>

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

Modo Bloco

Largura total com opções de tamanho igual.

</>

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

Desabilitado

Estado desabilitado para todo o controle.

</>

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

Com Ícones

Opções com ícones e rótulos.

</>

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

Propriedade	Descrição	Tipo	Padrão
value	Valor atualmente selecionado (controlado)	string | number	-
defaultValue	Valor padrão selecionado (não controlado)	string | number	-
onChange	Callback quando a seleção muda	(value: string | number) => void	-
size	Tamanho do controle	'xs' | 'sm' | 'md' | 'lg'	'md'
block	Ocupar largura total do container	boolean	false
disabled	Desabilitar todas as opções	boolean	false
className	Classe CSS adicional	string	-
children	Componentes Segmented.Item	ReactNode	-

Segmented.Item

Propriedade	Descrição	Tipo	Padrão
value	Valor da opção (obrigatório)	string | number	-
disabled	Desabilitar esta opção	boolean	false
icon	Ícone antes do rótulo	ReactNode	-
children	Conteúdo do rótulo	ReactNode	-
className	Classe CSS adicional	string	-

Quando Usar

• Alternância de visualização: Alternar entre visualizações Lista/Grade/Tabela
• Períodos de tempo: Filtros Dia/Semana/Mês/Ano
• Seletores de tamanho: Opções P/M/G/GG
• Alinhamento: Controles Esquerda/Centro/Direita
• Alternância de modo: Alternâncias de tema Claro/Escuro

Segmented vs Radio.Group

Segmented	Radio.Group
Mudanças imediatas de estado da UI	Valores de campo de formulário
Aparência compacta, tipo botão	Botões de rádio tradicionais
Opções sempre visíveis	Pode ter muitas opções
Tipicamente 2-5 opções	Qualquer número de opções