@ arun-dev/ ui (英语)
品牌不可知论 反应组件库. 组件没有自己的颜色——所有视觉
样式解析通过语义 CSS 自定义属性从
@arun-dev/tokens。 。 。 .
安装
npm install @arun-dev/ui @arun-dev/tokens
同伴依赖性 : react >= 19, (中文(简体) ), react-dom >= 19。 。 。 .
设置——需要符号
组件读取语义符号( E)--color-bg-*, (中文(简体) ), --color-text-*, (中文(简体) ), --color-border-*,(...)时
提供时间。 在任何组件制成前, 装入一次符号和组件样式 :
import '@arun-dev/tokens/base'; // primitives + default brand
import '@arun-dev/ui/components.css'; // all component styles
要使用另一个品牌,请更换品牌层:用已公布的 @arun-dev/tokens/brands/arun,或者你自己的样式表——
由 createBrand() 从 @arun-dev/tokens/createBrand或者手写 任意
品牌 CSS 必须定义 BrandSemanticContract 类型.
单个样式表也会导出, 如果您喜欢按位加载: 每个组件一个,
以它命名 @arun-dev/ui/css/dialog, (中文(简体) ), …/css/range-slider, (中文(简体) ), …/css/fieldset 与
按钮是 …/css/btn附加时 …/css/reset, (中文(简体) ), …/css/metric 财务报告和审定财务报表 …/css/utilities。 。 。 .
构成部分
import { Button, Field, Dialog, RangeSlider } from '@arun-dev/ui';
每个组件、道具和活生生的例子都在 文档网站,并按此处分类:
| 组 | 构成部分 |
|---|---|
| 表单 | Calendar, (中文(简体) ), RangeCalendar, (中文(简体) ), Checkbox, (中文(简体) ), Combobox, (中文(简体) ), DatePicker, (中文(简体) ), DateRangePicker, (中文(简体) ), Field, (中文(简体) ), Input, (中文(简体) ), OtpInput, (中文(简体) ), RadioGroup, (中文(简体) ), RangeSlider, (中文(简体) ), Select, (中文(简体) ), Slider, (中文(简体) ), Switch, (中文(简体) ), Textarea |
| 行动 | Button, (中文(简体) ), Menu, (中文(简体) ), Menubar, (中文(简体) ), Toggle, (中文(简体) ), ToggleGroup, (中文(简体) ), Toolbar |
| 导航 | Breadcrumb, (中文(简体) ), Link, (中文(简体) ), Pagination, (中文(简体) ), Stepper, (中文(简体) ), Tabs, (中文(简体) ), TreeView |
| 重叠 | Dialog, (中文(简体) ), Drawer, (中文(简体) ), HoverCard, (中文(简体) ), Popover, (中文(简体) ), Tooltip |
| 反馈 | Alert, (中文(简体) ), Meter, (中文(简体) ), Progress, (中文(简体) ), Skeleton, (中文(简体) ), Spinner, (中文(简体) ), Toast |
| 数据显示 | Accordion, (中文(简体) ), Avatar, (中文(简体) ), Badge, (中文(简体) ), Card, (中文(简体) ), Chip, (中文(简体) ), Kbd, (中文(简体) ), Table |
| 布局和打字 | Grid, (中文(简体) ), Heading, (中文(简体) ), Paragraph, (中文(简体) ), Separator, (中文(简体) ), Stack, (中文(简体) ), Text |
软件包定义的组件的道具类型会导出—— ButtonProps, (中文(简体) ), CardProps, (中文(简体) ),
BadgeProps 和其余的——以及诸如 ButtonVariant 财务报告和审定财务报表 BadgeTone。 。 。 .
由 @arun-dev/headless —— 说
Switch, (中文(简体) ), Dialog, (中文(简体) ), Menu, (中文(简体) ), RangeSlider 以及其他有名的——取出道具类型;
以 ComponentProps<typeof Switch.Root>。 。 。 .
每个部分还接受:
className——与该部分自己的班级相配合,从不取而代之.render——要制成的元素或组件而不是默认. 辅料,className, (中文(简体) ), 事件处理器和ref被合并到它上。 它自己的道具赢了,children包括:一个要素 没有自己的孩子 拿走了这个部分, 一个宣布儿童保留他们.ref- 与任何法官合并render键.- 任何其他道具 ——分到已变出元素上,所以
id, (中文(简体) ),aria-*, (中文(简体) ),data-*活动 处理器全部到达DOM.
<Chip render={<li />}>React</Chip>
<Card render={<article />} lift>…</Card>
他们
光和暗模式来自符号层——默认情况下的系统偏好,明确覆盖
通过 data-theme="dark" 编号 : data-theme="light" 在根点上。 组件无需更改.