# @gridui/disclosure 中文文档

规范地址：https://npmcn.com/package/%40gridui/disclosure/

版本：1\.1\.0
npm 元数据更新时间：2026-11-01T06:25:54.348Z
中文译文更新时间：2026-11-01T06:59:36.376Z
软件包许可：UNLICENSED

本文由上游 README 机器翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40gridui/disclosure
原文对照：https://npmcn.com/package/%40gridui/disclosure/?lang=original

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：15.7 kB，8 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：3 个
- peer 依赖：react ^19\.2\.0，react-dom ^19\.2\.0
- 首次发布：2026-10-31T02:43:55.040Z
- 最新版本发布：2026-11-01T06:25:54.167Z
- 已发布版本数：5（近 12 个月 5 个）

## 中文简介

GridUI React披露

## 安装

```sh
npm install @gridui/disclosure
```

也可以使用：`pnpm add @gridui/disclosure`、`yarn add @gridui/disclosure`、`bun add @gridui/disclosure`

## README

# @gridui /披露

核心家庭。公共API: `Disclosure`， `DisclosureProps`， `DisclosureSpace`， `DisclosureSpacing`.

从 `@gridui/disclosure` 和负载 `@gridui/disclosure/styles.css` 后的主题。 此家族使用的任何组合依赖项的加载样式。应用程序拥有自己的路由、标签、状态持久化和品牌。

看到 [组件所有权](https://npmcn.com/package/docs/component-ownership.md) 和 [版本历史](https://npmcn.com/package/%40gridui/disclosure/.changeset/history/).

## 信息披露

使用 `summaryClassName` 自定义摘要和 `contentClassName` 安排 通过公共api。 `summaryProps` 转发本机摘要属性， 事件和refs，用于焦点管理或可访问关系。 `label` 拥有 它的内容; `children`， `dangerouslySetInnerHTML`, `className` 被排除在外 从 `summaryProps`。汇总类继续合并 `summaryClassName`. 原生切换行为和响应填充保持不变。

`Disclosure` 是共同的母语吗？ `details`/`summary` 块分段控制 紧凑的表格-单元格信息。它转发原生细节、道具和refs， 包括 `open`， `name`, `onToggle`，不添加水合物或更换 本地键盘行为。它的 `label` 提供总结；放链接和其他 交互内容在正文中，而不是在标签中。

根和摘要填充其包含内容的宽度。摘要有一个 2.75rem最小高度，并使用本地链接颜色和共享焦点处理。 只有摘要切换披露；主体链接保留自己的动作。 没有外部边距、边框、固定高度或溢出剪切。 主体不强制排版、颜色、网格或分隔符。调用者 在其中组合自己的Stack、Grid、源文本或DataTable。根使用 `type-body`;使用 `className="type-data"` 或者 `type-supporting` 对于紧凑的上下文。

| 道具 | 默认的 | 责任 |
| --- | --- | --- |
| `summaryPaddingBlock` | 24 | 标签上方和下方的可点击空间 |
| `summaryPaddingInline` | 24 | 行内两侧的可点击空间 |
| `contentPadding` | 24 | 身体插图;0允许边缘对齐的表和网格 |

每个都接受主题间距比例 `0 / 4 / 8 / 16 / 24 / 32 / 48 / 64`，或者 `{ base, md?, lg? }` 在共享的40rem和64rem断点处。省略了大小 继承前面的断点。紧凑单元格通常使用block 8， inline 0， 内容为0，因为表格已经拥有单元格填充。最小总结 当填充为零时，高度仍然适用。封闭的物体对高度没有贡献。

保持披露在一个直接的范围内 `GridItem` 对于框架网格和 `fillLastRow`. 使用 `GridItem span="full"` 张成所有列。网格拥有单元格背景和 接缝;披露只拥有内部空间。打开一件物品会增加 行高度，但不会拉伸相邻的关闭摘要或同步 开放的状态。本地的 `name` 在需要时可以选择加入互斥组。

主体内的DataTable保持自己的水平滚动区域。在一张桌子上 cell， Disclosure填充cell的内容框和长文本换行；扩张可以 更改行高和浏览器的自动列分配。它不能 跨兄弟单元格或呈现整个表的详细信息行。不介绍无效 `details` 下面的儿童 `table` 或者 `tr`，或将块披露封装在 仅用于短语的元素，例如 `span` 或者 `small`.

## 共享标题行和正文布局

默认的披露仍然是一个块。当父母安排必须放置一个 摘要旁边的独立链接或控件，用 `className="contents"`。设计身体的样式 `contentClassName` 所以它占据了 它自己的全宽行；不需要私有后代选择器：

```tsx
<div className="grid grid-cols-[minmax(0,1fr)_auto] items-start gap-gridui-16">
    <a href="/index/">Index</a>
    <Disclosure
        label="Sources"
        className="contents"
        summaryClassName="w-auto justify-self-end"
        summaryProps={{ id: "sources-summary", "aria-controls": "sources-list" }}
        contentClassName="col-span-full"
        summaryPaddingBlock={8}
        summaryPaddingInline={0}
        contentPadding={0}
    >
        <ul id="sources-list">
            <li><a href="/guide/">Guide</a></li>
        </ul>
    </Disclosure>
</div>
```

原生DOM仍然存在 `details > summary + div`;公共机构是家长 网格项，并在其中保留一个有效列表。组件使浏览器的页面扁平化 `::details-content` 的包装器，因此它不会拦截 身体的网格位置。单独导入的网格可以使用 自己的 `asChild` 周围的API `ul`，其中GridItem组成每个本机 `li`. 披露不需要 `asChild` 模式或替换其语义根。 在摘要之外保留独立的标题动作，这样它们就可以保留自己的动作 激活的行为。

呼叫者也可以用 `contentClassName="contents"`;它的孩子 然后拥有它们的位置和间距，因为内容框没有填充区域。 封闭体即使在细节或主体使用内容或之后也保持隐藏 样式表提供了一个显示实用程序。本地封闭内容可见性 保存浏览器搜索；组件不能替换为 `display: none`. 包装器只有在打开时才会变平，没有JavaScript、效果和过渡 定时或动作偏好例外。

对于应用程序拥有的焦点恢复，传递一个本机摘要引用 `summaryProps={{ ref: summaryRef }}`。reftarget实际可聚焦摘要； 披露不会为调用者添加焦点策略或查询内部后代。 `name` 和 `open` 保留原生细节道具，以及 `onToggle` 保持原生 事件的细节。

## 验证

UI浏览器fixture验证共享的标题行、扁平的封闭体、 本机摘要refs，任务组合，SSR不需要JavaScript，响应 间距，全汇总宽度，多列 行, `span="full"`， `fillLastRow`，独立扩展，宽嵌套表， 控件中的嵌套网格、表格单元格包装、键盘激活、焦点和单击 摘要的尾部空白横跨视口/外观/运动矩阵。

## 常见问题

### @gridui/disclosure 是什么？

GridUI React披露

### 如何安装 @gridui/disclosure？

在项目目录运行 npm install @gridui/disclosure，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（^19\.2\.0）、react-dom（^19\.2\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @gridui/disclosure 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @gridui/disclosure 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @gridui/disclosure 可以商用吗？

@gridui/disclosure 使用 UNLICENSED 许可。作者声明为 UNLICENSED，即不授予公开使用许可（与公共领域的 Unlicense 不同）。使用前需获得作者授权。以上为概括，不构成法律意见，请以许可原文为准。

### @gridui/disclosure 还在维护吗？

最新版本 1\.1\.0 发布于 2026/11/01（2 天前）；至今共发布 5 个版本，其中过去 12 个月发布了 5 个；首次发布于 2026/10/31。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。