用途:为使用 SGDS Web Components(<sgds-*> 自定义元素)提供安装、框架集成与组件参考。
安装:npm install @govtechsg/sgds-web-component 或 pnpm add @govtechsg/sgds-web-component,并在应用入口导入一次:import "@govtechsg/sgds-web-component";
框架集成:React 19+ 客户端渲染可直接使用原生标签,事件用 onsgds-blur 形式;React 18 及以下需用包装组件(如 @govtechsg/sgds-web-component/react 的 SgdsButton),事件用 onSgdsBlur 驼峰形式,方法通过 useRef 访问。Next.js 等 SSR 框架推荐使用 React 包装组件以避免水合时序问题,需加 'use client'。TypeScript 可在 .d.ts 中导入 @govtechsg/sgds-web-component/types/react 获得类型提示。Vue 3 与 Angular 原生支持 Web Components,无 SGDS 专用包装;Vue 可用 tag.startsWith("sgds-") 过滤未知元素警告。
组件范围:涵盖 Actions、Navigation、Layout、Content、Forms、Feedback、Workflow 等类别,如表单输入包含 input、textarea、select、checkbox、radio、combo-box、datepicker、file-upload、quantity-toggle;switch 属反馈组件而非表单输入。
排错:组件行为异常时可阅读 node_modules/@govtechsg/sgds-web-component 下的编译源码与 .d.ts。全局规则:不要给 <sgds-*> 元素设置显式宽度,宽度由父级布局控制,除非用户明确要求固定宽度。
限制:资料未提供各组件详细 API、收费与平台信息。