Chroma Panel

搜索文档

查找页面或章节

EN

Popover

查看 Markdown

单独导出的弹出层，方便你构建自己的触发器。

Popover 是 ColorInput 打开选择器时使用的浮层。把它导出，是为了让你能把选择器放在自己的触发器后面，比如一个文字按钮或一个菜单项。如果 ColorInput 渲染的色块按钮不是你想要的控件，就用它。

它根据 anchor 定位：下方空间够就显示在下方，不够就显示在上方。它会渲染到 document.body 中。打开后，焦点移入弹出层，按 Tab 也不会跑出去。按 Escape 或点击外部会调用 onClose，按 Escape 还会把焦点还给锚点元素。打开状态由你管理，所以要在 onClose 里把它设回 false。在里面放一个 ChromaPanel，任何触发器都能打开 React 颜色选择器。

结构

import { useState } from "react";
import { ChromaPanel, Popover } from "chroma-panel";
 
export function BrandColorButton() {
  const [anchor, setAnchor] = useState<HTMLButtonElement | null>(null);
  const [open, setOpen] = useState(false);
 
  return (
    <>
      <button
        ref={setAnchor}
        type="button"
        aria-haspopup="dialog"
        aria-expanded={open}
        onClick={() => setOpen(!open)}
      >
        Brand color
      </button>
      <Popover anchor={anchor} open={open} onClose={() => setOpen(false)}>
        <div role="dialog" aria-label="Brand color">
          <ChromaPanel onClose={() => setOpen(false)} />
        </div>
      </Popover>
    </>
  );
}

宽度小于 640px 时，它会变成底部面板。传入 sheetOnMobile={false}，就能在任何宽度下都使用锚定的弹出层。

API 参考

Props

PropTypeDefaultDescription
anchor*HTMLElement | null—The element to position against. Pass null while the trigger has not mounted.
open*boolean—Whether the surface is shown.
onClose*() => void—Fires on Escape, on an outside click, and on the sheet being dismissed. You own the open state, so this is where you close it.
offsetnumber8Gap in pixels between the anchor and the surface.
sheetOnMobilebooleantrueBelow 640px, render as a bottom sheet with a grab handle and a scrim. Turn off for an anchored popover at every width.
classNamestring—Class on the surface.
children*React.ReactNode—What the surface contains.
Popover：React 颜色选择器弹出层 | Chroma Panel