ForgeForge

Toolbar

Toolbar 家族：Breadcrumbs · Search & Filter Toolbar 预设组合 · Toolbar 底层容器 · ToolbarPillTabs · PageTitleToolbar · 7 个 Toolbar* 子控件。

Interactive Demo

全部 Toolbar 子控件真实联动：ToolbarSelectDropdown / ToolbarDatepicker / ToolbarFilterButton / ToolbarShowSelect 均可点击展开。

Import

import {
  Breadcrumbs,
  Toolbar, ToolbarSearchInput, ToolbarSelectDropdown, ToolbarDatepicker,
  ToolbarFilterButton, ToolbarShowSelect, ToolbarActions,
  ToolbarKebabButton, ToolbarFavoriteButton, ToolbarPillTabs,
  PageTitleToolbar,
} from "@forge-ui/react";

All wired up

Show

Search & Filter Toolbar

Figma 预设变体：双行组合 —— 第一行搜索 + 一组筛选 + 主按钮，第二行 PillTabs + 同款筛选。直接抄即可，下方 Toolbar (low-level) 是底层容器。

Usage

Search. . .
Show
1// Row 1: 搜索 + 一组筛选 + 主按钮
2<Toolbar
3  left={<ToolbarSearchInput />}
4  right={
5    <ToolbarActions>
6      <ToolbarSelectDropdown placeholder="Select..." />
7      <ToolbarDatepicker />
8      <ToolbarFilterButton />
9      <ToolbarShowSelect value="1" />
10      <Button color="purple" iconLeft={icon}>Primary</Button>
11    </ToolbarActions>
12  }
13/>
14 
15// Row 2: 胶囊 Tab + 同款筛选组
16<Toolbar
17  left={<ToolbarPillTabs color="purple" tabs={tabs} />}
18  right={
19    <ToolbarActions>
20      <ToolbarSelectDropdown placeholder="Select..." />
21      <ToolbarDatepicker />
22      <ToolbarFilterButton />
23    </ToolbarActions>
24  }
25/>

底层 props 与下方 Toolbar 一致，搭配的子控件 API 见「Toolbar Controls」。

Toolbar (low-level)

底层 left + right 两槽容器。需要自由组装时用，开箱即用预设见上方 Search & Filter Toolbar。

Usage

Search. . .
1<Toolbar
2  left={<ToolbarSearchInput />}
3  right={
4    <ToolbarActions>
5      <ToolbarSelectDropdown placeholder="Select..." />
6      <ToolbarFilterButton />
7    </ToolbarActions>
8  }
9/>

API

AttributeTypeDefaultDescription
leftReactNode—左侧插槽，常放 SearchInput 或 PillTabs。
rightReactNode—右侧插槽，常用 ToolbarActions 包一组控件。
classNamestring—额外 className。

ToolbarPillTabs

胶囊 Tab，常用于 Toolbar left 槽作为分类切换。

Usage

通过 tabs 传入数组，active: true 标记选中项。

1<ToolbarPillTabs color="purple" tabs={[
2  { label: "All", active: true },
3  { label: "Drafts" },
4  { label: "Published" },
5]} />

API

AttributeTypeDefaultDescription
tabs{ label: string; active?: boolean }[]—胶囊 Tab 列表。
color'purple' | 'blue' | 'black''purple'active 状态主色。
onChange(index: number) => void—点击 Tab 时回调，参数为下标。

PageTitleToolbar

带大标题的 Toolbar，通常放在页面顶部，支持 Breadcrumbs / Subtitle / Actions 三个槽。

Usage

title 必填，其余均可选。breadcrumbs + subtitle 可并存。

Dashboard
Lorem ipsum dolor si amet
Workspace/Projects/Dashboard
1<PageTitleToolbar
2  title="Dashboard"
3  subtitle="Lorem ipsum dolor sit amet"
4  breadcrumbs={<Breadcrumbs items={crumbs} />}
5  actions={
6    <ToolbarActions>
7      <ToolbarDatepicker />
8      <ToolbarFilterButton />
9      <Button color="purple" iconLeft={icon}>Primary</Button>
10    </ToolbarActions>
11  }
12/>

API

AttributeTypeDefaultDescription
titlestring—页面大标题。
subtitlestring—副标题文本。
breadcrumbsReactNode—通常传入 <Breadcrumbs />。与 subtitle 可并存，顺序为 crumbs → title → subtitle。
actionsReactNode—右侧操作区，一般是 ToolbarActions 或 ToolbarPillTabs。

Toolbar Controls

7 个原子控件，用于 Toolbar 的 left / right 槽。每个组件独立 props，分别列出。需要联动请参考最上方 Interactive Demo。

ToolbarSearchInput

Search. . .
1<ToolbarSearchInput />
2<ToolbarSelectDropdown placeholder="Select..." />
3<ToolbarDatepicker />
4<ToolbarFilterButton />
5<ToolbarShowSelect value="1" />
6<ToolbarKebabButton />
7<ToolbarFavoriteButton />
AttributeTypeDefaultDescription
placeholderstring'Search. . .'占位文本（当前为纯展示态，无 onChange）。

ToolbarSelectDropdown

1<ToolbarSearchInput />
2<ToolbarSelectDropdown placeholder="Select..." />
3<ToolbarDatepicker />
4<ToolbarFilterButton />
5<ToolbarShowSelect value="1" />
6<ToolbarKebabButton />
7<ToolbarFavoriteButton />
AttributeTypeDefaultDescription
placeholderstring'Select. . .'未选中时显示。
valuestring—当前值（受控）。
options{ label, value }[]—下拉选项；传值后点击自动弹出列表。
onChange(value: string) => void—选项切换回调。
onClick() => void—外接 click handler，传后接管点击（不弹内置列表）。
fixedWidthbooleanfalse固定 w-20 宽度（用于 ShowSelect）。

ToolbarDatepicker

1<ToolbarSearchInput />
2<ToolbarSelectDropdown placeholder="Select..." />
3<ToolbarDatepicker />
4<ToolbarFilterButton />
5<ToolbarShowSelect value="1" />
6<ToolbarKebabButton />
7<ToolbarFavoriteButton />
AttributeTypeDefaultDescription
labelstring'Select Dates'按钮文本。
enablePopoverbooleanfalsetrue 时点击弹出内置月历（onClick 未设时生效）。
onClick() => void—外接 click handler，传后接管。
accentBgstring'bg-fg-violet'内置月历今日高亮 bg class。

ToolbarFilterButton

1<ToolbarSearchInput />
2<ToolbarSelectDropdown placeholder="Select..." />
3<ToolbarDatepicker />
4<ToolbarFilterButton />
5<ToolbarShowSelect value="1" />
6<ToolbarKebabButton />
7<ToolbarFavoriteButton />
AttributeTypeDefaultDescription
labelstring'Filters'按钮文本。
panelReactNode | (close) => ReactNode—挂载的浮层；函数形式可接收 close 用于内部 Apply/Cancel。
onClick() => void—外接 click handler。

ToolbarShowSelect

Show
1<ToolbarSearchInput />
2<ToolbarSelectDropdown placeholder="Select..." />
3<ToolbarDatepicker />
4<ToolbarFilterButton />
5<ToolbarShowSelect value="1" />
6<ToolbarKebabButton />
7<ToolbarFavoriteButton />
AttributeTypeDefaultDescription
valuestring'1'当前选中值。
options{ label, value }[]—可选项；左侧自带 'Show' 标签。
onChange(value: string) => void—切换回调。
onClick() => void—外接 click handler。

ToolbarKebabButton

1<ToolbarSearchInput />
2<ToolbarSelectDropdown placeholder="Select..." />
3<ToolbarDatepicker />
4<ToolbarFilterButton />
5<ToolbarShowSelect value="1" />
6<ToolbarKebabButton />
7<ToolbarFavoriteButton />
AttributeTypeDefaultDescription
onClick() => void—点击回调。固定 20px MenuDots 图标。

ToolbarFavoriteButton

1<ToolbarSearchInput />
2<ToolbarSelectDropdown placeholder="Select..." />
3<ToolbarDatepicker />
4<ToolbarFilterButton />
5<ToolbarShowSelect value="1" />
6<ToolbarKebabButton />
7<ToolbarFavoriteButton />
AttributeTypeDefaultDescription
onClick() => void—点击回调。固定 20px Star 图标。
看所有变体 →