Dock

Barra de navegação inferior no estilo móvel.

Importação

import { Dock } from 'asterui'

Exemplos

Dock Básico

Navegação inferior no estilo móvel com ícones e rótulos. (Mostrado inline para demonstração; normalmente fixado na 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

Tamanhos

Diferentes tamanhos de dock de xs a lg. (Mostrado inline para demonstração)

</>

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

Apenas Ícones

Dock sem rótulos para um visual minimalista. (Mostrado inline para demonstração)

</>

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

Aplique cores personalizadas ao dock. (Mostrado inline para demonstração)

</>

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

Use filhos Dock.Item para mais controle. (Mostrado inline para demonstração)

</>

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

Propriedade	Descrição	Tipo	Padrão
items	Configuração dos itens do dock	DockItemConfig[]	-
size	Variante de tamanho	'xs' | 'sm' | 'md' | 'lg' | 'xl'	'md'
activeIndex	Índice do item ativo controlado	number	-
onChange	Callback quando item é clicado	(index: number) => void	-
children	Filhos Dock.Item (alternativa a items)	React.ReactNode	-
className	Classes CSS adicionais	string	-
data-testid	ID de teste para testes	string	-

DockItemConfig (para prop items)

Propriedade	Descrição	Tipo	Padrão
icon	Elemento de ícone	React.ReactNode	-
label	Texto do rótulo	string	-
active	Se o item está ativo (não controlado)	boolean	false
disabled	Se o item está desabilitado	boolean	false
onClick	Manipulador de clique	() => void	-
data-testid	ID de teste para testes	string	-

Dock.Item (padrão composto)

Propriedade	Descrição	Tipo	Padrão
active	Se este item está ativo	boolean	false
children	Conteúdo do item (ícone e rótulo opcional)	React.ReactNode	-
onClick	Manipulador de clique	() => void	-
disabled	Se o item está desabilitado	boolean	false
className	Classes CSS adicionais	string	-
data-testid	ID de teste para testes	string	-

Acessibilidade

• Usa elementos button semânticos para itens de navegação
• Suporta navegação por teclado
• Estado ativo é indicado visualmente
• Para suporte à área segura do iOS, adicione viewport-fit=cover à sua meta tag viewport