用途:sgds-patterns 是 SGDS(新加坡政府设计系统)中可复用 UI 模式的目录,模式为生产就绪模板,把 SGDS 组件与工具类组合起来解决常见界面需求。当前资料仅列出排版(Typography)类别模式。
主要能力:覆盖页面与区块标题(Heading,6 个模式,含可选 overline)、大型展示排版(Display,12 个)、卡片标题与子节标题(Content,6 个)、有序与无序列表(List,三种尺寸,各 6 个)、长文本正文段落(Paragraph,3 个)。模式文件命名遵循 stories/patterns/[Category]/[Subcategory]/[PatternName]-[variant].stories.js,变体后缀表示字重(-light)、对齐(-center)或尺寸(如 display-sm、body-md)。
使用方式:先安装 sgds-getting-started(Inter 字体、基础 CSS 引入、组件注册)、了解 sgds-utilities(间距、排版、颜色、网格等)和 sgds-components。找到所需模式后,从参考文件中的 GitHub 链接获取原始 HTML 模板,提取 const XxxTemplate 部分,替换占位文本并按需调整工具类;若含交互元素(按钮、表单、下拉等),结合 sgds-components 使用。模板可从 https://raw.githubusercontent.com/GovTechSG/sgds-web-component/master/stories/patterns/Typography/ 路径获取。
适用场景:需要为文字设置样式、构建多字段表单与校验、创建登录页/空状态/数据表/搜索界面,或用 SGDS 展示通知、评价、数据可视化时。
限制:资料仅提供排版类别模式详情,表单、布局等类别的具体模式数量与内容暂未提供;使用前需先满足三个前置技能的要求。