iter(g130): 新增栅格容器 grid

This commit is contained in:
HIsheR
2026-10-26 15:20:04 +08:00
parent 88c2515f2e
commit 23d1e063dc
13 changed files with 202 additions and 13 deletions
+16
View File
@@ -35,6 +35,7 @@ import {
form,
formItem,
inputNumber,
grid,
list,
carousel,
tree,
@@ -1289,6 +1290,21 @@ const content = h(
),
),
),
section(
'sec-grid',
'栅格容器',
'grid 铺页面骨架:columns 给固定列数,min 走 auto-fit 让列数随可用宽度自然增减(比手写断点稳),列间距统一走 gutter 不产生双倍 margin,窄屏一律降为单列。',
grid({ columns: 3, gutter: 'md' },
card({ title: '实例数' }, statistic({ value: signal(128), suffix: '台' })),
card({ title: '错误率' }, statistic({ value: signal(0.42), suffix: '%', precision: 2 })),
card({ title: '平均延迟' }, statistic({ value: signal(38), suffix: 'ms' })),
),
h('div', { class: 'out' }, '↓ min: 220px 的 auto-fit:拉窄窗口可见列数自动减少'),
grid({ min: '220px', align: 'start' },
...['ap-east-1', 'ap-south-1', 'eu-west-1', 'us-east-1'].map((zone) =>
card({ title: zone }, typography({ content: '健康检查通过', type: 'success', variant: 'paragraph' }))),
),
),
);
// 引导漫游实例:根节点需挂到 body(fixed 定位,不参与布局)