@gridui/grid

中文文档
2.3.0发布于 2026/11/01UNLICENSEDTypeScriptES Module

GridUI React网格

中文使用文档

电网的基础

看到 使用手册 和 网格的合同 用于实际使用。

@gridui/grid 拥有Container, Grid, GridItem, Split, Stack, Row, PageFrame, FrameSection, FrameSection, frame chrome, rails, textures, FrameRegion/FrameRegionRow用于合成边缘几何; 以及用于结构边界的公共FrameBoundary原语。它不知道网站路由或域名状态。 加载它的显式 styles.css 导出后的主题和之前的风格组成的家庭。 主题提供令牌值; @gridui/style-utils/responsive 提供了 无反应间隔和断点值计算。

对二维轨道使用网格,对线性轨道使用分割 区域序列。分裂的 direction 和 seam 接受标量或响应 值;它只拥有直接子区域之间的接缝。把功能 控件和表在这些区域内,使其自己的边界保持完整。 看到 线性区域 查看完整的合同。

接受FrameSection和FrameFooter tone="neutral" | "brand" | "warning" | "danger". 非中性色调重复使用主题的公共 paletteClass 背景合同; 前景、静音文本、边框、控件和焦点颜色。Theme拥有两者 调色板值及其范围语义映射;网格拥有区域几何。 嵌套的非中性色调建立了自己的调色板; tone="neutral" 继续 继承周围的环境。使用 paletteClass("neutral") 从 @gridui/theme 在本机内容表面上显式重置为已注册的应用程序 中性色,不添加部分或边界。

FrameSection拥有自己的前置分隔符和内联框架边缘。使用 boundary="none" 和 edges="none" 当一个封闭区域拥有它们时。 FrameSection和FrameFooter都接受这些主要的边界样式:

boundary外观
line (默认)一条细规
band主题色12px带顶部和底部规则
stripe相同的波段几何形状,连续135度的品牌彩色条纹
space透明40px间距,没有规则或填充
none没有边界元素或额外的间距

--gridui-band-size 拥有条带和条带高度; --gridui-boundary-space-size 拥有空格高度。条纹和空间默认为无边缘装饰。 Band仍然默认为节点。集 decoration 明确地选择一个边缘处理。

<FrameSection boundary="stripe">Next chapter</FrameSection>
<FrameSection boundary="space">Related reading</FrameSection>

在分段缝处,非中性调优先于中性调;之间的 两个非中性色调,下半部分提供颜色。下半部分 仍然绘制唯一的分隔符。这可以跨React节组工作 更改任一区域的内容调色板。Astro主机元素需要an application-owned适配器. 页面填充符使用 最后一节的基调为它的主线。 网格 frame="cells" 拥有外部和细胞边缘; frame="internal" 拥有接缝 在现有框架内。使用 fillLastRow 有直接的GridItem子元素 在每个断点处填充不完整的行。中不允许有明确的间隙 框架网格。要使用容器驱动的轨道计数包装列表,请使用 columns="auto" 与 minItemWidth 和可选的响应间隙。最小值是 限制为可用空间。 Grid asChild 和 GridItem asChild 保留本机 Ul /ol/li主机没有包装器元素。自适应模式不包括帧和 fillLastRow;根 asChild 也排除了 fillLastRow,保留固定的 规划师的直接项目合同。悬停/聚焦轮廓绘制在相邻的接缝和页面线条之上。 Table细胞系属于Table;功能控制边界属于它们的核心家族。

看到 网格的合同 用于几何和API。

组织来源

包根目录 src/index.ts 声明公共API,以及 src/styles.css 导入组件样式。两个入口点都不包含组件实现。

每个公共组件都有一个匹配的目录,比如 src/grid/, src/grid-item/, src/split/, src/frame-section/. 私处,风格, 而帮手则待在主人身边。 src/shared/ 只包含合作者 多组件使用:轨道规划,继承框架几何,区域 色调和共享边界/铬规则。响应间隔来自Style-utils。

跨包的浏览器fixture位于根目录 scripts/development/preview/fixtures 并使用公共出口。浏览器 规范单独存在于 scripts/testing/browser/specs.

单元测试反映了下面的这些所有者 test/unit/primitives/ 和 test/unit/frame/. 测试可以组合公共原语来保护它们的 协作。在船东的CVA中保留普通单据 style.ts. 保留 导入的并置CSS中的轨道分辨率、接缝和装饰几何 根样式表。看到 源约定. 消费者使用包根和显式样式表导出;内部文件 路径是私有的。

看到 季度发布历史 准备发行票据和消费记录。

DashboardFrame 提供全高的工作空间排水沟和结构边缘 创建一个主要地标。看到 仪表板框架.

版本与发布记录

@gridui/grid 共发布 12 个版本,首次发布于 2026/10/22;过去 12 个月发布了 12 个版本。

版本发布日期距今
2.3.0latest2026/11/012 天前
2.2.12026/11/012 天前
2.1.42026/10/313 天前
2.1.32026/10/294 天前
2.1.22026/10/295 天前
2.1.12026/10/277 天前

关于 @gridui/grid 的常见问题

@gridui/grid 是什么?

GridUI React网格

如何安装 @gridui/grid?

在项目目录运行 npm install @gridui/grid,或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖:react(^19.0.0)、react-dom(^19.0.0)。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖,Yarn 需要手动安装。

@gridui/grid 支持 TypeScript 吗?

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

@gridui/grid 支持 ESM 还是 CommonJS?

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

@gridui/grid 可以商用吗?

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

@gridui/grid 还在维护吗?

最新版本 2.3.0 发布于 2026/11/01(2 天前);至今共发布 12 个版本,其中过去 12 个月发布了 12 个;首次发布于 2026/10/22。发布频率只是参考信号:功能稳定的工具可能很少需要更新,建议结合源码仓库的 issue 和提交记录判断。