SuperAPI AI 工具集

sgds-components-masthead

通用与其它

查看项目

更新于 10-15 21:54

技能介绍

用途:<sgds-masthead> 用于渲染新加坡政府官方横幅,按新加坡政府设计系统(SGDS)要求,所有 .gov.sg 数字服务的每个页面都必须包含该横幅。

主要能力:横幅分为两层。横幅条始终可见,展示新加坡国徽、“A Singapore Government Agency Website”身份文字,以及“How to identify”按钮;辨识面板默认隐藏,用户激活后展开,内含两条说明:官方网站链接以 .gov.sg 结尾(附可信网站列表链接),以及安全网站使用 HTTPS(解释锁形图标)。切换按钮使用 role="button"、tabindex="0" 和 aria-expanded,支持键盘通过 Enter 与 Space 操作。

使用方式:必须作为页面最顶部元素,位于主导航和所有其他内容之上,每个页面都要有,不仅限于首页。标准用法:<sgds-masthead></sgds-masthead>。若需要全屏宽度布局(如流式网格页面),添加 fluid 属性:<sgds-masthead fluid></sgds-masthead>;默认受 max-width 约束,可省略 fluid 或设为 fluid="false"。

API:属性 fluid 为 boolean,默认 false,作用是移除最大宽度限制使横幅延展至全屏宽度。该组件没有公开插槽,国徽、文字与辨识面板均由内部渲染,不可通过插槽自定义;也没有公开事件,“How to identify”的切换完全由内部状态管理。

适用场景:任何 .gov.sg 数字服务页面。对 AI 代理而言,这是强制合规要求,不可选、不可仅用于首页,且应位于主导航之上;唯一与组件相关的决策是是否使用 fluid 适配全宽布局。不要建议自建政府横幅,应始终使用该组件。

限制与前置条件:安装与框架集成(React 19+ 与 React ≤18、Vue、Angular)参见 sgds-components-setup;框架或应用结构由开发者负责,要求仅是渲染页面中没有任何元素位于横幅之上。其余细节资料未提供。