@dcs-tech/ui (英语)
反应 UI 组件和设计符号——窗体字段、按钮、工具提示、弹出和 原始布局,基于一个共享控制表面,所以每个控制都同意 大小、间隔和状态.
安装
npm i @dcs-tech/ui react react-dom
反应 >=18 是一个对等依赖 。 您的应用程序会带它自己的副本 .
使用
import { Button, Input, Select, Suggest, Tooltip, Typography } from '@dcs-tech/ui';
import '@dcs-tech/ui/style.css'; // tokens + component CSS, import once at the root
export const Example = () => (
<>
<Input label="Party name" tooltip="Legal name as printed on the invoice" />
<Select label="Material" options={[{ name: 'Cotton', value: 'cotton' }]} search group />
<Tooltip content="Deletes this row"><Button color="error">Delete</Button></Tooltip>
<Typography variant="body1" truncate={{ lines: 2 }}>Long text…</Typography>
</>
);
里面有什么东西
- 字段 - 输入、选择、建议、日期选择器(一天、范围或
picker="month"编号 :"year"),复选框,收音机,开关,芯片输入(包括自由文本)tags),所有共享一个 控制表面、6步大小和1个状态模型 - 图像 ——"图像选取器","图像选取器","图像选取器","图像编辑器"(剪接,缩放,旋转,
直线,翻转;每个工具都可以被允许或限制).
prepareImage应用相同的 无 UI 转换 - 重叠 - 对话(
useDialog()以证实;DialogHost如果您没有使用UIProvider, (中文(简体) ), 翻接、倒下梅努、土司 - 初级 按钮、打字、工具提示、警报(全页)
banner表单) - 导航 - 链接(
as使用路由器的链接, Pagination, CommandPalette Trigger, Page 进度(由active), NavList(用于 页面内) - 版式 ——可折叠,菲尔德Wrapper
- 名单 —— 重排列表( 拖放到重排: 活起行幻灯片, 有鼠标、 触摸或键盘)
- 复合材料 - 窗体、字段、可编辑表
- 数据 数据表(客户数据或服务器)
dataSource: 视图、搜索、过滤器、, 排序、 分组、 列选择器、 表格 / 牌 / 分割布局,toolbarActions,选择+批量 动作(表格报告onRun返回,如果它不返回,则不返回),带有图表的页眉/页脚摘要,导出为 xlsx / pdf / csv / html / json / xml)和图 (图, 列图, BarList, Donut, 进步, 传奇, 图表表,行图,漏斗,高地,树图,... 有图片菜单) - 滚动 一个滚动条规则( 稀释, 隐藏到需要时)
style.css边 逐渐消失(.scroll-fade-x编号 :.scroll-fade-y和ScrollStrip用于标签/芯片行.UIProvider启动它的倾听者;没有它,就挂起它<ScrollRule />一次 - 键 ——可变主题:
--primary-hue: 211重新插入整个调色板 从一个数字键入轻而暗的主题data-theme
数据表和图表
import { DataTable, Donut, type DataTableView } from '@dcs-tech/ui';
const view: DataTableView<Order> = {
id: 'all', rowKey: 'id',
columns: [
{ key: 'customer', header: 'Customer' },
{ key: 'amount', header: 'Amount', type: 'number', align: 'right', summable: true },
],
export: { quick: { filename: 'Orders' } },
};
<DataTable data={orders} views={[view]} tableId="orders" />; // client mode
<DataTable dataSource={source} views={[view]} tableId="orders" />; // server mode
<Donut ariaLabel="By status" slices={[{ key: 'a', label: 'Open', value: 12, slot: 1 }]} />;
表格的运行时间依赖关系( E)@tanstack/react-table, (中文(简体) ), @tanstack/react-virtual, (中文(简体) ),
@tanstack/match-sorter-utils, (中文(简体) ), exceljs 财务报告和审定财务报表 pdfmake — 装入第一个 PDF 导出)
安装软件包。 图标是图书馆自己的(IconFilter, (中文(简体) ), filterIcon,(...):这个
没有图标依赖.
文件和背景工作者
导出(数据表、图表图像、你自己的报告)通过一个文件引擎运行
UIProvider 准备 Excel 和 PDF 文件构建于 a 背景工作者这么大
导出不冻结页面.
工人船作为自己的档案和进口品 exceljs 财务报告和审定财务报表 pdfmake 按软件包名称,所以
您的捆绑者必须把它当作一个工人入口数字 :
-
维特 财务报告和审定财务报表 网页包装 5:没什么可做的. 他们跟随包裹
new Worker(new URL(…, import.meta.url))把工人捆起来. -
还有什么:从
@dcs-tech/ui/file-worker用你的捆绑机来交 转到引擎 :// file.worker.ts — bundled by your setup as a module worker import '@dcs-tech/ui/file-worker';<UIProvider fileEngine={{ createWorker: () => new Worker('/assets/file.worker.js', { type: 'module' }) }}>
如果工人无法启动,则引擎在主线上建立相同的文件取而代之.
fileEngine={{ workers: 'off' }} 总是使用主线. 大型 PDF 字体( 脚本字体)
引擎上,所以他们到达每个工人一次: fileEngine={{ pdfFonts: { fonts, vfs } }}。 。 。 .
表格验证
Form 用任意 标准Schema 图书馆——Zod 3.24+,
Varibot 1+, ArkType 2+, YAP 1.7+ — 无适配器:
import { z } from 'zod'
<Form fields={fields} defaultData={data} validation={{ schema: z.object({ name: z.string().min(1, 'Required') }), validateOnBlur: true }} />
错误按每期路径键( Q)address.city) (中文(简体) ). 只留下一个字段检查; a
提交失败 。 对于其他计划(例如1.7前的YP),
通过 validate: (schema, data) => ({ valid, errors }) 和以前一样 形式上的话(投降,重设,
其出错的土司)来自: UIProvider labels.form。 。 。 .
他们
每个颜色,大小和间隔值都是CSS自定义属性. 盖上它们
:root 导入样式表后 :
:root { --primary-hue: 264; } /* retints the entire theme */
:root { --border-radius-sm: 4px; }
大小和变体
size 在所有控件上统一: xxs | xs | small | medium | large | xl。 。 。 .
variant 每个家庭 outlined | filled | standard | underlined 用于文本
字段,则, outlined | filled | standard 用于复选框和无线电,没有用于切换.
字段宽度
一个文本字段可以填充其母给出的空间,最高可达320px. width 更改:
width | 球场是 |
|---|---|
| 未给出 | 最多320px的可用空间 |
"full" | 整行,无限制 |
"auto" | 内容广泛 |
240, (中文(简体) ), "15rem" | 确切地说,从不比其父母宽 |
在表格单元格中(layout="cell"栏决定和 width 被忽略。 与 layout="horizontal"
它显示控件大小; 标签保留其列.
列表宽度
选择或建议列表符合其内容: 绝不比其字段更窄, 最多320px( 选择) 或
480px (Suggest),并总是在屏幕上. listWidth="field" 让它正好是球场的宽度.
图标大小
仅使用图标的按钮或侧边栏会用图标大小 --icon-size-xxs . --icon-size-xl
符号,以下 --ui-scale覆盖它们 :root 以修改整个应用程序的图标大小。 一个
图标 size 留着吧.
对话框宽度
Dialog 带 size="sm | md | lg | xl | full" (420 / 560 / 720 / 960 px / 整体)
窗口)。 对于任何其他宽度, 设置 --dialog-width它是支持的方式,它获胜
结束 size数字 :
<Dialog open title="Wide" style={{ '--dialog-width': '840px' } as React.CSSProperties} />
.invoice-dialog { --dialog-width: min(1100px, 95vw); } /* <Dialog className="invoice-dialog"> */
用于侧面或上下页(placement它设置面板的宽度或最大宽度.
许可证
2026 Noyyal技术公司。 版权所有.