Dock 底部栏

Dock 用来承载移动端底部导航和轻量操作入口。当前组件保持 Rue 自己的视觉基底，同时补上更顺手的导航 API：可以用activeIndex，也可以切到更语义化的activeKey/onSelect模式。

何时使用

需要一个固定在底部的轻量导航，让用户在 3 到 5 个主入口之间快速切换。
需要同时支持基础的索引式控制和新的 key 式控制。
需要在同一套视觉里混合按钮、链接、禁用项和自定义 children。

# 基础导航

展示基础 Dock 演示，可以使用 activeIndex 控制。

# Key 模式与禁用项

activeKey / onSelect 更适合导航语义，items 里也可以直接声明 disabled、href 和 target。

当前选中：inbox

# 组合写法与根节点

支持 Dock.Item / Dock.Label 组合；当需要更细粒度结构时，children 写法更直接。

当前区块：activity

# 尺寸体系

展示 xs / sm / md / lg / xl 演示，并把它们重组到一个尺寸对照区。

Extra Small

Small

Medium

Large

Extra Large

# 自定义外观

展示自定义色示例。Dock 不强行定义额外主题 API，仍然优先通过 className 融入业务表面层。

# Dock 自动渲染（items 数组）

展示 items 数组示例，并组织为 key 驱动、默认值和项级类名都可直接声明。

当前 key：inbox

API

当前页面展示的是 Dock 在 Rue 里的推荐用法与可用能力。

Dock

属性	说明	类型	默认值
`as`	根节点语义，可直接输出 div 或 nav	`'div' \| 'nav'`	`'div'`
`size`	Dock 尺寸，支持 xs-xl 与 small / middle / large 别名	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'small' \| 'middle' \| 'medium' \| 'large'`	`-`
`items`	数据驱动渲染，每项可配置 key、icon、label、href、disabled 等	`DockItemData[]`	`-`
`activeIndex`	支持基础的受控索引写法	`number`	`-`
`defaultActiveIndex`	索引模式下的默认选中项	`number`	`-`
`activeKey`	推荐的受控选中 key	`string \| number \| null`	`-`
`defaultActiveKey`	推荐的非受控默认 key	`string \| number \| null`	`-`
`onChange`	索引变化回调，保持回调签名，同时附带上下文	`(index, context) => void`	`-`
`onSelect`	key 变化回调，适合导航场景	`(key, context) => void`	`-`
`className`	附加到 dock 根节点的类名	`string`	`-`

Dock.Item

属性	说明	类型	默认值
`as`	单项渲染标签，可选 button、a、div	`'button' \| 'a' \| 'div'`	`'button'`
`active`	激活态，追加 dock-active	`boolean`	`false`
`disabled`	禁用单项；链接和 div 也会输出禁用语义	`boolean`	`false`
`href / target / rel`	链接语义；target="_blank" 时会自动补充 rel	`string`	`-`
`htmlType`	button 根节点时的原生 type	`'button' \| 'submit' \| 'reset'`	`'button'`
`ariaLabel`	仅图标项时可补充可访问名称	`string`	`-`
`className`	附加到单项根节点的类名	`string`	`-`

items 项配置

属性	说明	类型	默认值
`key`	数据驱动模式下的唯一标识，供 activeKey / onSelect 使用	`string \| number`	`index`
`icon`	图标节点	`any`	`-`
`label`	标签节点，会自动包裹为 Dock.Label	`any`	`-`
`iconClassName / labelClassName`	分别控制图标容器与标签的附加样式	`string`	`-`
`onClick`	单项点击回调，签名为 (event, context) => void	`function`	`-`
`disabled`	禁用当前项，保持当前视觉但阻止交互	`boolean`	`false`

FAQ

activeKey 和 activeIndex 应该优先选哪个？

新页面建议优先用activeKey，因为它更贴近导航语义，也更方便和路由、菜单数据对齐。如果你当前已经是索引式状态，可以使用activeIndex也没有问题。

什么时候用 items，什么时候用 Dock.Item？

结构规整、希望统一从数据渲染时，优先用items。如果单项内部结构更复杂，或者需要同时混用a、button、div，就直接用Dock.Item。

为什么没有额外提供 tone / variant 这类视觉 API？

Dock 更像布局型导航容器，视觉通常要贴合页面表面层一起定。这里优先补的是导航和交互语义，让className继续承担颜色与背景融合，避免把视觉层做得过重。