Toolbar 工具栏

用于承载可交互控件的容器，并支持方向键导航。

用法

1import { Toolbar } from '@lenso/ui';

此预览复用英文版适配，不代表中文源示例已完成本地实现。

1"use client";2export { Basic } from "./source";

Local adaptation source above. Derived from HeroUI v3.2.6 source.

此预览复用英文版适配，不代表中文源示例已完成本地实现。

1"use client";2export { Vertical } from "./source";

Local adaptation source above. Derived from HeroUI v3.2.6 source.

此预览复用英文版适配，不代表中文源示例已完成本地实现。

1"use client";2export { Attached } from "./source";

Local adaptation source above. Derived from HeroUI v3.2.6 source.

此预览复用英文版适配，不代表中文源示例已完成本地实现。

1"use client";2export { WithButtonGroup } from "./source";

Local adaptation source above. Derived from HeroUI v3.2.6 source.

此预览复用英文版适配，不代表中文源示例已完成本地实现。

1"use client";2export { CustomStyles } from "./source";

Local adaptation source above. Derived from HeroUI v3.2.6 source.

若要自定义组件类，可使用 @layer components 指令。了解更多。

1@layer components {2  .toolbar {3    @apply gap-4 rounded-lg bg-surface p-3;4  }5}

HeroUI 遵循 BEM 方法论，确保组件变体与状态可复用且易于自定义。

Toolbar 使用以下 CSS 类（查看源码样式）：

Prop	类型	默认值	描述
`isAttached`	`boolean`	`false`	Toolbar 是否使用带完全圆角的 surface 背景
`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`	Toolbar 的方向
`aria-label`	`string`	-	Toolbar 的无障碍标签
`aria-labelledby`	`string`	-	用于标注该 Toolbar 的元素 id
`children`	`React.ReactNode \| (values: ToolbarRenderProps) => React.ReactNode`	-	内容或渲染 prop
`className`	`string \| (values: ToolbarRenderProps) => string`	-	额外的 CSS 类名

使用渲染 prop 模式时，会提供以下值：

Prop	类型	描述
`orientation`	`"horizontal" \| "vertical"`	当前 Toolbar 的方向