主题
Item 导航项
Side Navigation 的原子项。两种子类型（parent / child）× 完整状态矩阵（20 个具体状态）。不是按钮——语义是「导航」（role="link"），与 Button 按钮 互不替代。
v1 实现范围
- ✅
kind="parent"— icon + label + badge dot，3 active × 4 interaction = 12 状态 - ✅
kind="child"— label + badge dot，2 active × 4 interaction = 8 状态 - ⏳
kind="menu"— popout menu 容器内的项 · v1.4 - ⏳
kind="label"— section header 分组标题 · 待定 - ⏳ badge 联动动画 · v1.1
Playground
拨开关、改字段、复制代码。容器宽度可调，模拟真实使用场景（PC sider parent 164px / child 132px / atom 默认 200px）。
Kind
Active
State
Disabled
Icon
Label
Badge
Container w
200pxPC sider: 164 (parent) / 132 (child) · atom 默认 200<Item kind="parent" label="用餐人员" icon="general/home" />Parent · 状态矩阵（3 active × 4 interaction）
active
default
hover
pressed
disabled
off
white
green
Child · 状态矩阵（2 active × 4 interaction）
active
default
hover
pressed
disabled
off
green
Label 截断
label 过长时 CSS truncate，badge 紧贴尾部。
用法
vue
<!-- Parent -->
<Item kind="parent" icon="general/home" label="首页" />
<Item kind="parent" icon="user/user-group" label="人员管理" badge />
<!-- Parent 的 3 个 active 态 -->
<Item kind="parent" icon="general/home" label="未激活" />
<Item kind="parent" icon="general/home" label="子级被选中" active="white" />
<Item kind="parent" icon="general/home" label="当前页（无子级）" active="green" />
<!-- Child -->
<Item kind="child" label="用餐人员" active="green" />
<Item kind="child" label="部门管理" badge />
<!-- 自定义 badge 颜色 -->
<Item kind="parent" icon="general/notification" label="通知" badge="theme" />
<!-- 禁用 -->
<Item kind="parent" icon="general/home" label="首页" disabled />与 Button 的区别
| Item | Button | |
|---|---|---|
| 语义 | 导航 navigate | 操作 action |
| HTML | <button role="link"> | <button> |
| 选中态 | 有（active=green/white） | 无（仅 active 高亮） |
| 形状 | 行式（full-width row） | 内容包裹（hug content） |
| 嵌套结构 | parent + 多个 child | 不嵌套 |
| 颜色变体 | 仅 theme green active | 6 色（theme / warning / error / white-sec/ter/qua） |
Props
| Prop | 类型 | 默认 | 说明 |
|---|---|---|---|
kind | 'parent' | 'child' | — | 必传。parent 带 icon + label + badge，child 仅 label + badge |
label | string | — | 必传。主文字，过长自动 truncate |
icon | string | — | 仅 kind="parent" 生效，eg 'general/home' |
active | 'off' | 'green' | 'white' | 'off' | 'white' 仅 parent 生效（child 传 white 视为 off） |
state | 'default' | 'hover' | 'pressed' | 'default' | demo escape hatch（实际交互走 :hover :active） |
disabled | boolean | false | 禁用，pointer-events:none + 18% opacity |
badge | boolean | BadgeColor | false | true 显示红点；指定颜色见 Badge |