# PanelFooter

> PanelFooter 位于 React 颜色选择器底部，显示当前颜色、最近使用的色块、复制按钮和浏览器取色器。

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

`PanelFooter` 是 React 颜色选择器底部的一栏。它显示当前颜色的预览、最多十个最近使用的颜色和一个复制按钮；在支持 EyeDropper API 的浏览器中，还有一个能从屏幕任意位置取色的按钮。[ChromaPanel](https://chroma-panel.jscrate.dev/zh/react/components/chroma-panel) 会在每个模式下方渲染它。它不接受任何 prop，显示哪些内容由面板的 `showRecentColors`、`recentColors`、`showCopyButton` 和 `showEyedropper` 这几个 prop 决定。

颜色在变更提交时才会加入历史记录，比如拖动结束的时候，而不是每一帧都加。点击最近使用的色块，可以再次选中那个颜色。取色器按钮基于 [useEyedropper](https://chroma-panel.jscrate.dev/zh/react/utils/use-eyedropper) 实现，你也可以用它做一个自己的按钮。

复制按钮按面板的 `format` prop 写入当前颜色，并把成功或失败的结果播报给辅助技术。它默认显示；如果你的界面已经有复制操作，传入 `showCopyButton={false}` 即可。

## 结构

```tsx
import { PanelFooter, pushRecent } from "chroma-panel";
```

底栏只显示一次当前颜色，旁边是最近使用的颜色记录。哪一侧的色块更多，记录这一行就在哪一侧淡出。

## 自行添加历史记录

```ts
function pushRecent(list: string[], hex: string, limit?: number): string[]
```

Adds a color to a recent list, de-duplicated and capped. Exported so your own controls can match the panel's behavior.

`pushRecent` 把颜色放到最前面，去掉列表中已有的相同颜色，并把列表长度限制在 `limit` 以内（默认为 10）。面板内部用的也是这个函数。

在面板上设置 `showRecentColors={false}` 可以完全关闭这一行，也可以用 `recentColors` 和 `onRecentColorsChange` 来控制它，详见[受控与非受控](https://chroma-panel.jscrate.dev/zh/react/handbook/controlled)。

## 相关内容

- [ChromaPanel](https://chroma-panel.jscrate.dev/zh/react/components/chroma-panel)：决定底栏显示内容的 prop
- [useEyedropper](https://chroma-panel.jscrate.dev/zh/react/utils/use-eyedropper)：取色器按钮背后的 hook
- [浏览器支持](https://chroma-panel.jscrate.dev/zh/react/handbook/browser-support)：哪些浏览器支持取色器