# ModeToolbar

> ModeToolbar 是 React 颜色选择器中切换模式的标签列表，整组只占一个 Tab 停靠点。列出两个及以上模式时，ChromaPanel 会显示它。

Source: https://chroma-panel.jscrate.dev/zh/react/components/mode-toolbar
Last updated: 2026-09-21

`ModeToolbar` 用于在 React 颜色选择器的各个模式之间切换。传入两个或更多模式时，[ChromaPanel](https://chroma-panel.jscrate.dev/zh/react/components/chroma-panel) 会加上它；只有一个模式时则会隐藏。

这个工具栏是基于 [SegmentedControl](https://chroma-panel.jscrate.dev/zh/react/components/segmented-control) 的标签列表（tablist）。只有选中的标签页在 Tab 键顺序中。方向键在模式之间移动，Home 和 End 分别跳到第一个和最后一个模式。注册一个[自定义模式](https://chroma-panel.jscrate.dev/zh/react/modes/custom)，就能加上你自己的标签页。

## 结构

```tsx
import { ModeToolbar } from "chroma-panel";
```

> **只能在面板内使用**
>
> 内置模式就是由这些基础组件搭起来的。它通过 `usePanel()` 读取颜色，所以只能放在 `ChromaPanel` 里使用，通常用在[自定义模式](https://chroma-panel.jscrate.dev/zh/react/modes/custom)中。如果要在面板之外做颜色选择器，请使用[颜色 store 和相关 hook](https://chroma-panel.jscrate.dev/zh/react/utils/use-color-store)。

## API 参考

### Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `modes` (required) | `PickerMode[]` | — | The modes to show, in tab order. |
| `activeId` (required) | `string` | — | Id of the mode currently open. |
| `onSelect` (required) | `(id: string) => void` | — | Fires with the id of the mode chosen. |

## 相关内容

- [SegmentedControl](https://chroma-panel.jscrate.dev/zh/react/components/segmented-control)：工具栏所基于的标签列表
- [自定义模式](https://chroma-panel.jscrate.dev/zh/react/modes/custom)：添加你自己的标签页
- [受控与非受控](https://chroma-panel.jscrate.dev/zh/react/handbook/controlled)：用 `mode` 控制当前打开的标签页
- [无障碍功能](https://chroma-panel.jscrate.dev/zh/react/overview/accessibility)：整个选择器的键盘支持