校对:soup
Appliteni设计系统和UI工具包提供共享设计符号,React组件,
战略甲板、文本门户、, /account 和未来产品
表面 .
套装船代号,组件CSS和反应组件一起. 服务器发送的页面
不使用组件框架的,仍可取 CSS 、 符号和内置
弦,或写工具箱 .ui-* 手工上课。 根项的帮助者会出版..
icon, (中文(简体) ), prism, (中文(简体) ), sun, (中文(简体) ), moon, (中文(简体) ), brand, (中文(简体) ), esc, (中文(简体) ), safeUrl 和共同的逻辑——服务
都一样.
每一部分都写在书中 技术。 。 。 .
安装
该套件发布于公共npm注册. 您不需要范围配置或 npm 符号 :
npm install @apliteni/apliteni-ui react react-dom
使用18版或更新的版本自行安装回放和回放 DOM 。 工具箱没有声明
作为常规或同伴依赖的软件包。 因此 npm 不安装它们或警告
当他们失踪时 如果失踪,请输入 @apliteni/apliteni-ui/react 失败
以未找到的模块错误构建时间或运行时间.
React 组件是这个包的子路径,而不是单独的包. 你得到一个 安装,一个版本和一个版本的针.
| 导入 | 这是什么 |
|---|---|
@apliteni/apliteni-ui/css | 键和每个组件样式表。 在应用程序根导入一次 . |
@apliteni/apliteni-ui | 帮助者和共同逻辑: icon, (中文(简体) ), prism, (中文(简体) ), sun, (中文(简体) ), moon, (中文(简体) ), brand, (中文(简体) ), esc, (中文(简体) ), safeUrl,运动和下降,图表,页码和过滤器帮助. |
@apliteni/apliteni-ui/react | React 组件, TypeScript类型包含在内. |
@apliteni/apliteni-ui/react/css | 他们的外壳风格. |
@apliteni/apliteni-ui/inline | CSS 与字符串相同,用于内含它的服务器. |
@apliteni/apliteni-ui/guidelines/* | UI以Markdown为规则. |
用这个
import '@apliteni/apliteni-ui/css';
import '@apliteni/apliteni-ui/react/css';
import { AppShell, DataTable, Modal } from '@apliteni/apliteni-ui/react';
import { icon } from '@apliteni/apliteni-ui';
这个 AppShell 组件提供完整的产品布局:铁路、页体和
上面的条,当你要求一个, 所以没有产品重建它。 这个
组件目录 列出它和所有其他组件.
账户和个人设置应采用一种模式,而不是在产品上,而不是在网页上
他们自己的——见 准则/账户和设置。 。 。 .
字体
套件定义了两个字体家族,但没有捆绑,所以主机页面必须加载.
弹出是 --font-display,用于标题,品牌标记和大型读取. IBM Plex 桑斯
实值 --font-sans,用于表格、字段、段落、聊天和大多数应用程序文本。 两者
家庭抚养体重300-700.
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=IBM+Plex+Sans:wght@300;400;500;600;700&display=swap">
如果一个家族不加载,浏览器会使用它的系统倒回堆栈. 包里没有 显示此倒计时信息.
Lint 应用程序样式
包装一个样式林特配置 @apliteni/apliteni-ui/stylelint它拒绝
生色, 一个生色 px, (中文(简体) ), rem 或者说 em 间距值,以及一个 .ui-* 工具包
课。 安装样式林特,然后扩展配置 :
npm install --save-dev stylelint
{
"extends": ["@apliteni/apliteni-ui/stylelint"]
}
使用语义色彩符号, 如 var(--text) 和一个间隔符,例如
var(--space-4) 从 @apliteni/apliteni-ui/tokens。只用
注释,将核准的例外命名为 --数字 :
/* stylelint-disable color-no-hex -- an approved brand colour */
主题和口音
设定主题为 <html> 与 data-theme="dark|light"。您可以单独设置重音
与 data-accent数字 :
<html data-theme="dark" data-accent="phoenix">
口音只改变口音家族: --accent, (中文(简体) ), --purple*, (中文(简体) ), --glow-purple, (中文(简体) ), --ring
财务报告和审定财务报表 --grad-*。表面、文字和信号颜色保持不变。 绿色仍然是活的
颜色和粉红色仍然是危险的颜色。 结果,每个口音都在这两个主题上起作用
无需修改组件。 运出口音是 星云 (纯和
默认), 凤凰 (温伯), 海洋 (赞美)和 翡翠 (贾德.
两种属性都超越了默认值. 如果两者都不存在,套件使用暗星云. 若为
仅限 data-accent 工具箱使用带有阴暗主题的口音。 缺席
data-theme 已经 没有 " 遵循系统 " :工具包没有 prefers-color-scheme
规则。 如果主机想要遵循操作系统的偏好,则它的 JavaScript 必须
选择主题并添加属性。 见
没有属性意味着黑暗。 。 。 .
规则
这个 准则 解释一个页面可能包含哪些内容,选择哪个组件,设置哪个 它必须支持,以及如何处理颜色和措辞。 套装符合这些规则. 准则船在包件中作为Markdown, 也可以作为故事书提供 节.
文档
| 页次 | 它的答案是什么 |
|---|---|
| 基金会 | 道具和地上:宽度,断口,相距,类型,颜色,高地,焦点环,自带地上. |
| 组件 | 包:要导入什么,主题,组件目录,每个组件保证什么. |
| 反应/README.md | 反应组件及其道具. |
| 捐款额 | 搞好套件:寄存器的布局,"故事","准则集","站点","变更日志"和"发布". |
贡献
使用节点20或更新. 安装 强克,然后运行 :
npm ci
npm run storybook
npm test && npm test -w react && npm run build-storybook && node site/build.mjs
在打开 PR 之前运行最后的命令 .
只有当所有三个条件都属实时,才添加一个一般的可堆肥包组件: 列出至少两个使用或要求使用它的产品; 现有组件不能 在不复制标记或逻辑的情况下提供;并且它没有包含特定域的数据或 规则。 如果缺少任何条件,请从现有组件中创建 UI 并添加一个 故事书展示.
要添加一个组件, 请将基于符号的 CSS 输入 src/styles/中包含 CSS
src/index.css 和在两个 styles 地图和 cssText 内 src/inline.js设置
反应组件在 react/src/每个人需要测试 和故事使用共享
课程和标志。 共享逻辑, React 组件从根条目中取出
src/logic/ 从 src/index.js编辑 准则
定义设计规则.
打开一个问题, 从 main,并在您的公关中链接这个问题。 如果你改变一个
已发布文件,包括这个 README, 将版本撞入 package.json 财务报告和审定财务报表
package-lock.json,并添加条目到 site/changelog.mjs合并该版本的凸起
启动发布工作流程。 不要按下标签或手动发布.
一般事务人员(其他职等) 描述审查、数据处理和释放检查.
许可证
麻省理工学院 阿普利特尼,为 代码. Apliteni 名称、标志和商标 是商标,是 没有 麻省理工学院许可证涵盖的范围——见 贸易商。 。 。 .