@basiik/ ui (英语)
Basiek设计系统的反应组件. 零运行时间依赖关系 (反应为对等). 用从 Basiek 设计符读取 CSS 变量的 CSS 模块样式,所以 Light and Dark 只是一个 CSS 交换机.
安装和使用
import '@basiiik/ui/tokens.css'; // design tokens (Light on :root)
import '@basiiik/ui/tokens.dark.css'; // optional: Dark via <html data-theme="dark">
import '@basiiik/ui/styles.css'; // component styles
import { Button } from '@basiiik/ui';
<Button variant="primary" size="md">Save</Button>
暗模式: 设置 data-theme="dark" 打开 <html>,或导入 tokens.dark-media.css 以遵循 OS 设置( 页面仍可强制 Light 使用) data-theme="light") (中文(简体) ).
库不捆绑字体 。 装入 间 自己; 符号包括一个系统font倒叠.
宣传公约(图至反应)
| 图片 | 反应道具 | 数值 |
|---|---|---|
| 样式( 初级, 二级,...) | variant | 小写 : primary, (中文(简体) ), secondary, (中文(简体) ), outline, (中文(简体) ), ghost, (中文(简体) ), danger |
| 样式( 状态颜色) | tone | neutral, (中文(简体) ), brand, (中文(简体) ), success, (中文(简体) ), warning, (中文(简体) ), danger |
| 类型/ 突出值( 下, 固体) | emphasis | subtle, (中文(简体) ), solid |
| 大小 | size | xs sm md lg xl (小为 sm中到 md, (...) (中文(简体) ) |
| 状态( Hover, 有重点, 按下) | 无 | 支助科 :hover, (中文(简体) ), :focus-visible, (中文(简体) ), :active |
| 国家=残疾人 | disabled | 本地属性 |
| 显示/引导/跟踪图标 | leadingIcon, (中文(简体) ), trailingIcon | 任何反应节点(装饰, aria-hidden(中文(简体) ) |
每个组件的精确映射,带有允许的值和所需的道具,由人工智能的代理商提供 @basiiik/mcp 服务器.
无障碍
- 土著要素首先(
<button>, (中文(简体) ),<a>, (中文(简体) ),<input>),"ARIA"仅指本土语义不够. - 每个组件都有斧头测试. 颜色对比在符号级别被验证(98个WCAG检查),因为jsdom没有布局.
- 仅需要图标控件
aria-label(由类型系统强制).
许可证:麻省理工学院.