Dock

移动端风格的底部导航栏。

导入

import { Dock } from 'asterui'

示例

基础 Dock

带图标和标签的移动端风格底部导航。（为演示内联显示；通常固定在底部）

</>

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

尺寸

从 xs 到 lg 的不同 dock 尺寸。（为演示内联显示）

</>

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

仅图标

没有标签的 dock，呈现简洁外观。（为演示内联显示）

</>

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

自定义样式

为 dock 应用自定义颜色。（为演示内联显示）

</>

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

使用 Children

使用 Dock.Item 子元素获得更多控制。（为演示内联显示）

</>

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

属性	描述	类型	默认值
items	Dock 项目配置	DockItemConfig[]	-
size	尺寸变体	'xs' | 'sm' | 'md' | 'lg' | 'xl'	'md'
activeIndex	受控的激活项目索引	number	-
onChange	项目被点击时的回调	(index: number) => void	-
children	Dock.Item 子元素（items 的替代方案）	React.ReactNode	-
className	额外的 CSS 类名	string	-
data-testid	用于测试的测试 ID	string	-

DockItemConfig (用于 items 属性)

属性	描述	类型	默认值
icon	图标元素	React.ReactNode	-
label	标签文本	string	-
active	项目是否激活（非受控）	boolean	false
disabled	项目是否禁用	boolean	false
onClick	点击处理器	() => void	-
data-testid	用于测试的测试 ID	string	-

Dock.Item (组合模式)

属性	描述	类型	默认值
active	此项目是否激活	boolean	false
children	项目内容（图标和可选标签）	React.ReactNode	-
onClick	点击处理器	() => void	-
disabled	项目是否禁用	boolean	false
className	额外的 CSS 类名	string	-
data-testid	用于测试的测试 ID	string	-

无障碍

• 使用语义化的 button 元素作为导航项
• 支持键盘导航
• 激活状态有视觉指示
• 对于 iOS 安全区域支持，请在 viewport meta 标签中添加 viewport-fit=cover