用途:sgds-blocks 提供可复用的 UI 区块(block),每个区块是自包含的页面版块,可放入 sgds-templates 的页面模板中拼装完整页面,无需从零编写布局代码。区块是“原料”,页面模板是“配方”。应用外壳(Application Shell)是必须的特殊区块,包含 <sgds-masthead>、<sgds-mainnav>、<sgds-footer>,是每个 SGDS 页面的必备页面框架;其余均为内容区块。
主要能力:按需求提供对应区块,包括:应用外壳(必需页面框架,含 Simple App 与 Sidebar App 两种布局)、Hero(全宽头图,含标题、描述、CTA 按钮及可选图片)、Feature(功能展示,支持图片/组件定位与网格比例)、CTA(号召性行动区,含多种样式与对齐)、Stats(统计指标,3/4/5/6 列)、Cards(卡片网格,3 列或 4 列)、Page Header(面包屑、图标加标题、描述与主 CTA)、Basic Details Card(只读实体摘要卡,键值字段加编辑操作)、Filter(筛选界面与搜索结果布局)、Form(多字段表单,含尺寸、分组与布局规则)。
使用方式:需先引入主题与样式(import "@govtechsg/sgds-web-component/themes/day.css"; import "@govtechsg/sgds-web-component/css/sgds.css"; import "@govtechsg/sgds-web-component/css/utility.css";),安装细节参见 sgds-components。区块放入页面模板内容区使用。表单编写前必须先读 reference/form.md。对 AI 代理,应先加载 sgds-utilities 技能、再加载 sgds-components 技能、再加载本技能,并阅读 reference/custom-block-rules.md,然后才写代码。
限制与约束:表单在 .sgds-container 内固定占 8 列;可配对字段(Input、Select、Datepicker、Combo-box 单选)在 lg+ 各占 6 列(sm 为 4 列);全宽字段(Textarea、Checkbox-group、Radio-group、Combo-box 多选、File-upload)始终占 12 列;网格计算需满足 sidebar_cols + form_cols + toc_cols ≤ 12;多选 combo-box 必须全宽,不得与其他组件配对。自定义区块须使用 <sgds-> 组件,样式仅用 sgds: Tailwind 工具类,排版使用语义角色令牌,图标仅用 <sgds-icon name="...">,禁止内联样式或原始 SVG。每个 <sgds-> 组件使用前需核对子元素命名、插槽要求与属性类型。其他细节以官方文档为准。