电网的基础
@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 提供全高的工作空间排水沟和结构边缘
创建一个主要地标。看到 仪表板框架.