网格工具栏

安装

pnpm dlx shadcn@latest add https://yiui.dev/r/grid-toolbar.json

用法

import { Search } from "lucide-react"
import { BarField } from "@/components/ui/bar-field/bar-field"
import {
  GridToolbar,
  GridToolbarItem,
} from "@/components/ui/grid-toolbar/grid-toolbar"
import { SegmentedControl } from "@/components/ui/segmented-control/segmented-control"

;<GridToolbar aria-label="筛选">
  <GridToolbarItem grow>
    <BarField aria-label="搜索" icon={<Search />} placeholder="搜索…" />
  </GridToolbarItem>
  <GridToolbarItem>
    <SegmentedControl aria-label="状态" options={OPTIONS} />
  </GridToolbarItem>
</GridToolbar>

GridToolbar 是整行，GridToolbarItem 是其中一格。每格高度跟随工具栏，格内控件铺满整格；grow 让这一格占满剩余宽度，通常给搜索框。格子之间默认是虚线；separator="solid" 让这一格左侧用实线，表示从这里开始是另一组（比如列设置和密度之间）。宽度、换行位置、窄屏隐藏都写在 GridToolbarItem 的 className 上，比如 basis-full 让一格独占一行、hidden @min-[40rem]:flex 在窄容器里隐藏。

放进来的控件

方条输入、分段选择、方条下拉放进工具栏时会自动换成无框写法：去掉自己的边框、圆角和底色，高度铺满整格，焦点环画在格子内侧。分段选择还会把每个选项拆成一格，选中项整格铺底色，不再是圆角的滑块。单独使用时保持原样，不需要额外传参数。原理是这三个组件带了 in-data-[slot=grid-toolbar]: 样式，只在祖先是网格工具栏时生效，组件之间没有互相引用。

图标按钮用官方 Button：variant="ghost"、size="icon-lg"（默认高度）或 size="icon"（size="sm" 时），再加 h-full rounded-none focus-visible:ring-inset，就是一个方形的格子。