Dock

Barre de navigation inférieure de style mobile.

Importation

import { Dock } from 'asterui'

Exemples

Dock de base

Navigation inférieure de style mobile avec icônes et étiquettes. (Affiché en ligne pour la démo ; normalement fixé en bas)

</>

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

Tailles

Différentes tailles de dock de xs à lg. (Affiché en ligne pour la démo)

</>

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

Icônes uniquement

Dock sans étiquettes pour un look minimal. (Affiché en ligne pour la démo)

</>

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

Style personnalisé

Appliquer des couleurs personnalisées au dock. (Affiché en ligne pour la démo)

</>

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

Utilisation des enfants

Utiliser les enfants Dock.Item pour plus de contrôle. (Affiché en ligne pour la démo)

</>

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

Propriété	Description	Type	Défaut
items	Configuration des éléments du dock	DockItemConfig[]	-
size	Variante de taille	'xs' | 'sm' | 'md' | 'lg' | 'xl'	'md'
activeIndex	Index de l’élément actif contrôlé	number	-
onChange	Rappel lorsqu’un élément est cliqué	(index: number) => void	-
children	Enfants Dock.Item (alternative à items)	React.ReactNode	-
className	Classes CSS supplémentaires	string	-
data-testid	ID de test pour les tests	string	-

DockItemConfig (pour la prop items)

Propriété	Description	Type	Défaut
icon	Élément d’icône	React.ReactNode	-
label	Texte de l’étiquette	string	-
active	Si l’élément est actif (non contrôlé)	boolean	false
disabled	Si l’élément est désactivé	boolean	false
onClick	Gestionnaire de clic	() => void	-
data-testid	ID de test pour les tests	string	-

Dock.Item (modèle composé)

Propriété	Description	Type	Défaut
active	Si cet élément est actif	boolean	false
children	Contenu de l’élément (icône et étiquette optionnelle)	React.ReactNode	-
onClick	Gestionnaire de clic	() => void	-
disabled	Si l’élément est désactivé	boolean	false
className	Classes CSS supplémentaires	string	-
data-testid	ID de test pour les tests	string	-

Accessibilité

• Utilise des éléments boutons sémantiques pour les éléments de navigation
• Supporte la navigation au clavier
• L’état actif est indiqué visuellement
• Pour la prise en charge de la zone de sécurité iOS, ajoutez viewport-fit=cover à votre balise meta viewport