Pingo
GH

Sidebar

Sidebar 是应用级导航列，由分组（Section）与条目（Item）组成，内置选中态与键盘导航。下方预览由 pingo 引擎实时渲染——点击条目或聚焦后用方向键切换。

用法

import { Sidebar, SidebarItem, SidebarSection } from "@dopejs/pingo-ui";

root.render(
  <Sidebar defaultValue="stats" onValueChange={(value) => navigate(value)}>
    <SidebarSection title="工作区">
      <SidebarItem value="home" label="首页" />
      <SidebarItem value="stats" label="统计" />
    </SidebarSection>
    <SidebarSection title="系统">
      <SidebarItem value="settings" label="设置" />
    </SidebarSection>
  </Sidebar>,
);

Sidebar 既支持非受控（defaultValue）也支持受控（value + onValueChange）两种用法。侧栏宽度由主题 token 决定（默认 240px）。

Props

Prop 类型 默认值 说明
value string — 受控：当前选中条目的 value
defaultValue string — 非受控：初始选中条目的 value
onValueChange (value: string) => void — 选中变化回调
children PingoNode — SidebarSection 列表（必填）
className string — 追加在组件类名之后

SidebarSection

Prop 类型 默认值 说明
title string — 分组标题；省略时不渲染标题行
children PingoNode — SidebarItem 列表（必填）
className string — 追加在组件类名之后

SidebarItem

Prop 类型 默认值 说明
value string — 条目的唯一标识（必填）
label string — 条目文本，同时用作无障碍名称（必填）
icon PingoNode — 前置插槽，用于图标
className string — 追加在组件类名之后

无障碍

侧栏具备 navigation 语义；条目具备 link 语义，以 label 作为无障碍名称并暴露 selected/unselected 状态。上下方向键与 Home/End 在条目间移动，选中与焦点一起移动。

自定义侧栏宽度与配色见样式指南。

最后更新: