Attribute	Type	Default	Description
`accent`	`'purple' \| 'blue' \| 'black'`	`'purple'`	active 态主色。
`surface`	`'default' \| 'onColoredBg'`	`'default'`	onColoredBg 用于色底 sidebar 内。
`intent`	`'default' \| 'danger'`	`'default'`	danger 为红色文案（删除场景）。
`kind`	`'single' \| 'submenu' \| 'dropdown'`	`'single'`	single 单项；submenu 二级项（缩进）；dropdown 带右侧箭头。
`state`	`'idle' \| 'hover' \| 'active' \| 'disabled'`	`'idle'`	视觉状态。
`active`	`boolean`	`—`	等价 state=active 的快捷 prop。
`lead`	`{ kind: 'icon', icon } \| { kind: 'image', src }`	`—`	左侧图标或头像。
`label`	`string`	`—`	文案。传空或不传则是图标纯模式。
`badge`	`number`	`—`	右侧红色数字徽标。
`onClick`	`() => void`	`—`	点击回调。

DropdownPanel

白底圆角浮层容器，装一组 MenuItem + DropdownDivider。

Usage

1<DropdownPanel>
2  <MenuItem lead={{ kind: "icon", icon: <HomeBoldDuotone size={20} /> }} label="Home" />
3  <MenuItem lead={{ kind: "icon", icon: <UserBoldDuotone size={20} /> }} label="Profile" />
4  <DropdownDivider />
5  <MenuItem lead={{ kind: "icon", icon: <Logout3BoldDuotone size={20} /> }} label="Log out" intent="danger" />
6</DropdownPanel>

API

Attribute	Type	Default	Description
`children`	`ReactNode`	`—`	面板内容（通常是若干 MenuItem + DropdownDivider）。
`width`	`string`	`'w-60'`	Tailwind 宽度 class。
`padding`	`string`	`'p-2'`	Tailwind padding class。

IconTrigger

圆形图标按钮，可选 badge / tooltip / 内置 panel。

Usage

hover 自动显示 tooltip。传 panel 后点击切换内置浮层。

1<IconTrigger icon={<BellBoldDuotone size={20} />} badge={3} tooltip="Notifications" />

API

Attribute	Type	Default	Description
`icon`	`ReactNode`	`—`	内部图标节点。
`accent`	`'purple' \| 'blue' \| 'black'`	`'purple'`	open 态主色背景。
`state`	`'idle' \| 'hover' \| 'open'`	`'idle'`	受控视觉状态。
`surface`	`'default' \| 'onColoredBg'`	`'default'`	在色底上采用半透明白。
`badge`	`number`	`—`	右上红色徽标。
`tooltip`	`string`	`—`	hover/open 时自动显示的 tooltip 文案。
`tooltipPosition`	`'top' \| 'bottom' \| 'left' \| 'right'`	`'right'`	tooltip 位置。
`panel`	`ReactNode \| (close) => ReactNode`	`—`	传了 panel 后内建 open 态，点击切换显隐。

KebabMenu

三点展开菜单。内部装 IconTrigger + DropdownPanel，items 传配置即可。

Usage

1<KebabMenu
2  items={[
3    { icon: <PenNewSquareBoldDuotone size={20} />, label: "Edit" },
4    { icon: <CopyBoldDuotone size={20} />, label: "Duplicate" },
5    { icon: <TrashBinTrashBoldDuotone size={20} />, label: "Delete", danger: true },
6  ]}
7/>

API

Attribute	Type	Default	Description
`items`	`KebabMenuItem[]`	`—`	菜单项 { icon?, label, onSelect?, danger? }。
`accent`	`'purple' \| 'blue' \| 'black'`	`'purple'`	触发器 open 态主色。
`surface`	`'default' \| 'onColoredBg'`	`'default'`	触发器 surface。
`align`	`'left' \| 'right'`	`'right'`	弹出面板对齐边。

看所有变体 →

Menu

MenuItem

Import

Usage

States

Danger Intent

API

DropdownPanel

Usage

API

IconTrigger

Usage

API

KebabMenu

Usage

API