Segmented

Alternador en línea para cambiar entre opciones mutuamente exclusivas.

Importar

import { Segmented } from 'asterui'

Ejemplos

Uso básico

Control segmentado simple para cambio de vista.

</>

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

Elementos deshabilitados

Los elementos individuales pueden deshabilitarse.

</>

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

Tamaños

Cuatro opciones de tamaño 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

Modo bloque

Ancho completo con opciones de tamaño 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

Deshabilitado

Estado deshabilitado para el control completo.

</>

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

Con iconos

Opciones con iconos y etiquetas.

</>

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

Propiedad	Descripción	Tipo	Predeterminado
value	Valor seleccionado actualmente (controlado)	string | number	-
defaultValue	Valor seleccionado predeterminado (no controlado)	string | number	-
onChange	Callback cuando cambia la selección	(value: string | number) => void	-
size	Tamaño del control	'xs' | 'sm' | 'md' | 'lg'	'md'
block	Tomar ancho completo del contenedor	boolean	false
disabled	Deshabilitar todas las opciones	boolean	false
className	Clase CSS adicional	string	-
children	Componentes Segmented.Item	ReactNode	-

Segmented.Item

Propiedad	Descripción	Tipo	Predeterminado
value	Valor de opción (requerido)	string | number	-
disabled	Deshabilitar esta opción	boolean	false
icon	Icono antes de la etiqueta	ReactNode	-
children	Contenido de etiqueta	ReactNode	-
className	Clase CSS adicional	string	-

Cuándo usar

• Alternar vistas: Cambiar entre vistas Lista/Cuadrícula/Tabla
• Períodos de tiempo: Filtros Día/Semana/Mes/Año
• Selectores de tamaño: Opciones S/M/L/XL
• Alineación: Controles Izquierda/Centro/Derecha
• Cambios de modo: Alternadores de tema Claro/Oscuro

Segmented vs Radio.Group

Segmented	Radio.Group
Cambios inmediatos de estado de UI	Valores de campo de formulario
Apariencia compacta tipo botón	Botones de radio tradicionales
Opciones siempre visibles	Puede tener muchas opciones
Típicamente 2-5 opciones	Cualquier número de opciones