Dock

Barra de navegación inferior estilo móvil.

Importar

import { Dock } from 'asterui'

Ejemplos

Dock Básico

Navegación inferior estilo móvil con iconos y etiquetas. (Se muestra en línea para la demostración; normalmente fijo en la parte inferior)

</>

HomeSearchFavoritesProfile

import { Dock } from 'asterui'
import { useState } from 'react'
import { HomeIcon, MagnifyingGlassIcon, HeartIcon, UserIcon } from '@aster-ui/icons'

function App() {
  const [active, setActive] = useState(0)
  
  return (
      <Dock
        items={[
          { icon: <HomeIcon size="lg" />, label: 'Home' },
          { icon: <MagnifyingGlassIcon size="lg" />, label: 'Search' },
          { icon: <HeartIcon size="lg" />, label: 'Favorites' },
          { icon: <UserIcon size="lg" />, label: 'Profile' },
        ]}
        activeIndex={active}
        onChange={setActive}
      />
    )
}

export default App

Tamaños

Diferentes tamaños de dock de xs a lg. (Se muestra en línea para la demostración)

</>

HomeSettingsAlerts

HomeSettingsAlerts

HomeSettingsAlerts

HomeSettingsAlerts

import { Dock, Space } from 'asterui'
import { useState } from 'react'
import { HomeIcon, Cog6ToothIcon, BellIcon } from '@aster-ui/icons'

function App() {
  const [active, setActive] = useState(0)
  const items = [
    { icon: <HomeIcon />, label: 'Home' },
    { icon: <Cog6ToothIcon />, label: 'Settings' },
    { icon: <BellIcon />, label: 'Alerts' },
  ]
  
  return (
      <Space direction="vertical" size="lg" className="w-full">
        <Dock size="xs" items={items} activeIndex={active} onChange={setActive} />
        <Dock size="sm" items={items} activeIndex={active} onChange={setActive} />
        <Dock size="md" items={items} activeIndex={active} onChange={setActive} />
        <Dock size="lg" items={items} activeIndex={active} onChange={setActive} />
      </Space>
    )
}

export default App

Solo Iconos

Dock sin etiquetas para una apariencia minimalista. (Se muestra en línea para la demostración)

</>

import { Dock } from 'asterui'
import { useState } from 'react'
import { HomeIcon, MagnifyingGlassIcon, PlusCircleIcon, HeartIcon, UserIcon } from '@aster-ui/icons'

function App() {
  const [active, setActive] = useState(2)
  
  return (
      <Dock
        items={[
          { icon: <HomeIcon size="lg" /> },
          { icon: <MagnifyingGlassIcon size="lg" /> },
          { icon: <PlusCircleIcon size={32} /> },
          { icon: <HeartIcon size="lg" /> },
          { icon: <UserIcon size="lg" /> },
        ]}
        activeIndex={active}
        onChange={setActive}
      />
    )
}

export default App

Estilo Personalizado

Aplica colores personalizados al dock. (Se muestra en línea para la demostración)

</>

HomeSettingsAlerts

import { Dock } from 'asterui'
import { useState } from 'react'
import { HomeIcon, Cog6ToothIcon, BellIcon } from '@aster-ui/icons'

function App() {
  const [active, setActive] = useState(0)
  
  return (
      <Dock
        className="bg-neutral text-neutral-content"
        items={[
          { icon: <HomeIcon size="lg" />, label: 'Home' },
          { icon: <Cog6ToothIcon size="lg" />, label: 'Settings' },
          { icon: <BellIcon size="lg" />, label: 'Alerts' },
        ]}
        activeIndex={active}
        onChange={setActive}
      />
    )
}

export default App

Usando Children

Usa elementos hijos Dock.Item para mayor control. (Se muestra en línea para la demostración)

</>

HomeSettings

import { Dock } from 'asterui'
import { useState } from 'react'
import { HomeIcon, Cog6ToothIcon } from '@aster-ui/icons'

function App() {
  const [active, setActive] = useState(0)
  
  return (
      <Dock>
        <Dock.Item active={active === 0} onClick={() => setActive(0)}>
          <HomeIcon size="lg" />
          <span className="dock-label">Home</span>
        </Dock.Item>
        <Dock.Item active={active === 1} onClick={() => setActive(1)}>
          <Cog6ToothIcon size="lg" />
          <span className="dock-label">Settings</span>
        </Dock.Item>
      </Dock>
    )
}

export default App

API

Dock

Propiedad	Descripción	Tipo	Predeterminado
items	Configuración de elementos del dock	DockItemConfig[]	-
size	Variante de tamaño	'xs' | 'sm' | 'md' | 'lg' | 'xl'	'md'
activeIndex	Índice del elemento activo controlado	number	-
onChange	Callback cuando se hace clic en un elemento	(index: number) => void	-
children	Elementos hijos Dock.Item (alternativa a items)	React.ReactNode	-
className	Clases CSS adicionales	string	-
data-testid	ID de prueba para pruebas	string	-

DockItemConfig (para la prop items)

Propiedad	Descripción	Tipo	Predeterminado
icon	Elemento de icono	React.ReactNode	-
label	Texto de etiqueta	string	-
active	Si el elemento está activo (no controlado)	boolean	false
disabled	Si el elemento está deshabilitado	boolean	false
onClick	Manejador de clic	() => void	-
data-testid	ID de prueba para pruebas	string	-

Dock.Item (patrón compuesto)

Propiedad	Descripción	Tipo	Predeterminado
active	Si este elemento está activo	boolean	false
children	Contenido del elemento (icono y etiqueta opcional)	React.ReactNode	-
onClick	Manejador de clic	() => void	-
disabled	Si el elemento está deshabilitado	boolean	false
className	Clases CSS adicionales	string	-
data-testid	ID de prueba para pruebas	string	-

Accesibilidad

• Usa elementos de botón semánticos para elementos de navegación
• Soporta navegación por teclado
• El estado activo se indica visualmente
• Para soporte de área segura de iOS, añade viewport-fit=cover a tu etiqueta meta viewport