组件 · 导航 · 原生 HTML 与 React
侧栏导航 Rail
窄的图标侧栏导航（插件侧边栏左边那一条）。
演示
<nav class="xxd-rail" aria-label="主导航"><a href="#" aria-current="page"><i data-xxd-icon="House"></i>首页</a><a href="#"><i data-xxd-icon="Bookmark"></i>收藏</a></nav>export function RailDemo() {
return <Rail current="/" items={[{ href: "/", label: "首页", icon: "House" }, { href: "/saved", label: "收藏", icon: "Bookmark" }]} />;
}属性与类名
| 属性 / 类名 | 说明 |
|---|---|
| 类名 | xxd-rail xxd-rail__spacer |
键盘与读屏
- <nav aria-label>；当前项 aria-current="page"
- 只有图标时每项都要有 aria-label 和 tooltip
规则
- 图标 20px、标签 10px
- 激活改颜色和底色，不改线宽