TypeScript React UI 组件库
损坏 UI 是一个 TypeScript- First React UI 组件库,有插件,共享的公用设施,以及故事书文档.
用于现代前端应用的建筑有:
- 仅限无害环境管理的分发
- 可树摇动模块
- 有利于安全部门改革的架构
- 内建本地化支持
特征
- 反应用于生产接口的 UI 组件
- 核心组件的基本无障碍默认值
- DOM 和 UX 工作流程的插件架构
- 通过类型脚本公开打字
@delement/ui/typings - 可动摇的无害环境管理模块
- 有利于安全部门改革的行为
- 故事书文件和实例
为什么选择 Delement UI ?
- 常见产品接口的反应组件
- DOM/UX工作流程的插件(形式、收藏、本地化等)
- 用于React、Node、Webpack和MSW的工具包
- 通过输入的公开 API
@delement/ui/typings - 准备使用样式捆绑和每个组件样式块
安装
npm i @delement/ui
快速启动
import { Btn } from "@delement/ui/components";
export const App = () => <Btn label={"Submit"} />;
使用量
构成部分
// from directory
import { Btn, Input, DatePicker, Map, Locale, /* etc */ } from "@delement/ui/components";
// or directly
import { Btn } from "@delement/ui/components/btn";
插件
// from directory
import { Collection, Localisation, FormValidation, /* etc */ } from "@delement/ui/plugins";
// or directly
import { Collection } from "@delement/ui/plugins/collection";
组件/插件子路径使用通配符地图 package.json,包括筑巢
索引模块。 例如:
import { BlockTable } from "@delement/ui/components/blockTable";
import { FormSend } from "@delement/ui/plugins/forms";
import type { TLocalisationSource } from "@delement/ui/plugins/localisation/types";
其子组件可使用于其父母: BlockTable.Body, (中文(简体) ), BlockTable.Caption, (中文(简体) ),
BlockTable.Cell, (中文(简体) ), BlockTable.Foot, (中文(简体) ), BlockTable.Head, (中文(简体) ), BlockTable.Row, (中文(简体) ),
BlockTable.SortBtn, (中文(简体) ), Grid.Item, (中文(简体) ), Form.Block, (中文(简体) ), Form.Col, (中文(简体) ), Form.Field, (中文(简体) ),
Form.Msg 财务报告和审定财务报表 Form.Row。 。 。 .
替换以前命名的导入, 如 BlockTableBody, (中文(简体) ), GridItem 财务报告和审定财务报表 FormField
从主部件入口处取出,并有母进口和财产准入.
反应公用事业
// from directory
import { useCN, useIO /* etc */ } from "@delement/ui/utils/react";
// or directly
import { useCN } from "@delement/ui/utils/react/useCN";
服务器 HTML
getStaticMarkupForServer 返回 HTML, 不在二者中自动打印
发展与生产 SSG 财务报告和审定财务报表 SSR 模式。 这个 before, (中文(简体) ), after 财务报告和审定财务报表
getWithModifier 选项仍然可用:
import { getStaticMarkupForServer } from "@delement/ui/utils/react";
const html = await getStaticMarkupForServer(<div>Hello</div>, { mode: "SSR" });
// <!DOCTYPE html><div>Hello</div>
之前收到的缩进和换行的产量现在是现在
紧凑. 在自己的工具中应用任何可选格式. getPrettyHTML 没有
从 @delement/ui/utils; 从消费者代码中删除该导入.
故事书片段保留其内部的 HTML formatter.
常数
import { constants } from "@delement/ui/constants";
网络包装公用事业
getFilesWithContext 仍然可用于加载图标、懒惰样式和其他
模块通过 import.meta.webpackContext webpack 应用程序中:
import { getFilesWithContext } from "@delement/ui/utils/webpack";
直接的子路径也得到支持:
import { getFilesWithContext } from "@delement/ui/utils/webpack/getFilesWithContext";
Webpack 配置帮助器和插件已经从此包中删除.
样式( Bundle 或 Per- Content Cunks)
确保添加 deUI 分类到根 <html> 键.
// bundle
import styles from "@delement/ui/styles" with { type: "css" };
// or directly for components
import buttonStyles from "@delement/ui/styles/components/btn" with { type: "css" };
捐款
使用节点.js QQ24和 npm.cmd {\fn黑体\fs22\bord1\shad0\3aHBE\4aH00\fscx67\fscy66\2cHFFFFFF\3cH808080}在PowerShell {\fn黑体\fs22\bord1\shad0\3aHBE\4aH00\fscx67\fscy66\2cHFFFFFF\3cH808080}在PowerShell.
npm.cmd run lint 检查而不重写文件; 使用 npm.cmd run lint::fix 页:1
明确格式化的通行证。 运行相关 typecheck::* 和测试,然后
npm.cmd run build::package 财务报告和审定财务报表 npm.cmd run check::package 用于软件包输出
变化。 该建筑不重复林特/测试. 故事书是独立的,
明确要求检查。 出版的npm软件包不包括故事书来源,
站点输出、依赖和命令.
文档
参见更多实例和API at 我们的网站。 。 。 .