设计系统
可访问,可主题 React 组件库. WCAG 2.1 AA出框,零运行时间依赖,CSS自定义属性主题.
安装
npm install @aseguragonzalez/ui
设置
在您的应用程序入口处导入样式表 :
import '@aseguragonzalez/ui/index.css';
包装您的应用程序 ToastProvider 如果您使用土司通知:
import { ToastProvider } from '@aseguragonzalez/ui';
function App() {
return (
<ToastProvider>
<YourApp />
</ToastProvider>
);
}
使用量
import { Button, TextField } from '@aseguragonzalez/ui';
function ContactForm() {
return (
<form>
<TextField label="Name" placeholder="Your name" required />
<TextField label="Email" type="email" />
<Button variant="primary" type="submit">Send</Button>
</form>
);
}
包括什么
初级 —— HTML5 元素周围的原子包装: Button, (中文(简体) ), TextInput, (中文(简体) ), Checkbox, (中文(简体) ), Select, (中文(简体) ), Toggle, (中文(简体) ), Heading, (中文(简体) ), Text, (中文(简体) ), Label, (中文(简体) ), Alert, (中文(简体) ), Badge, (中文(简体) ), Spinner, (中文(简体) ), ProgressBar, (中文(简体) ), Tabs, (中文(简体) ), Tooltip, (中文(简体) ), Modal, (中文(简体) ), Toast还有更多.
复合材料 原始人与 Label, (中文(简体) ), Hint,以及 ErrorMessage 用于完整、可访问的形式字段: TextField, (中文(简体) ), TextAreaField, (中文(简体) ), CheckboxField, (中文(简体) ), CheckboxGroup, (中文(简体) ), SelectField, (中文(简体) ), RadioGroup, (中文(简体) ), ToggleField, (中文(简体) ), PasswordField, (中文(简体) ), DateField还有更多.
版式 —— 说 Navbar, (中文(简体) ), Sidebar, (中文(简体) ), Breadcrumb。 。 。 .
图表 —— 说 BarChart, (中文(简体) ), LineChart, (中文(简体) ), DonutChart, (中文(简体) ), ScatterPlot, (中文(简体) ), RadarChart。 。 。 .
数据 —— 说 DataTable 带有普通打字、排序和空状态.
他们
覆盖语义CSS自定义属性以匹配您的品牌——不需要类的覆盖:
:root {
--ds-color-action-primary: #7c3aed;
--ds-color-action-primary-hover: #6d28d9;
--ds-font-family-base: 'Inter', sans-serif;
}
见 医生/医生 以表示完整的参考.
文档
| 指南 | 说明 |
|---|---|
| 开始 | 安装、设置、第一个组件 |
| 他们 | 自定义 CSS 自定义属性 |
| 无障碍 | WCAG 2.1 AA 最佳做法 |
| 反应设计 | 断点、布局、移动模式 |
| UX 准则 | 表格、反馈、模式、工具提示 |
| 捐款 | 结构、脚本、添加组件 |
故事书
每个组件都有交互控制、自动生成的文件以及内置的无障碍审计:
npm run dev # → http://localhost:6006
主要原则
- 无障碍第一 轴心轴在每一个测试中运行
error模式; 违规失败套件 - 零运行时间依赖关系 仅限
react财务报告和审定财务报表react-dom作为同行依赖关系 - CSS 仅自定义属性 ——主题从不需要类重置或构建时间配置
- 严格类型脚本 ——所有公共API已全部输入;CSS模块已生成
.d.ts文件