# @apliteni/apliteni-ui 中文文档 规范地址：https://npmcn.com/package/%40apliteni/apliteni-ui/ 版本：0\.162\.0 npm 元数据更新时间：2026-11-05T11:09:15.236Z 中文译文更新时间：2026-11-06T10:36:45.583Z 软件包许可：MIT 本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。 原始 npm 页面：https://www.npmjs.com/package/%40apliteni/apliteni-ui 原文对照：https://npmcn.com/package/%40apliteni/apliteni-ui/?lang=original 项目主页：https://ui.apli.tech/ 源码仓库：https://github.com/apliteni/apliteni-ui ## 关键信息（来自 npm 元数据） - 包体积（解压后）：1.2 MB，106 个文件 - 模块格式：ES Module - TypeScript 类型：包内自带 - Node.js 要求：\>=20 - 运行依赖：0 个 - peer 依赖：stylelint \>=16 - 首次发布：2026-07-21T18:18:56.547Z - 最新版本发布：2026-11-05T11:09:14.849Z - 近 30 天下载量：12289（2026-10-07 至 2026-11-05，npm 官方下载统计） - 已发布版本数：184（近 12 个月 184 个） ## 中文简介 Appliteni 共享设计系统 & UI 工具包——指代,反应组件和甲板主题. ## 安装 ```sh npm install @apliteni/apliteni-ui ``` 也可以使用：`pnpm add @apliteni/apliteni-ui`、`yarn add @apliteni/apliteni-ui`、`bun add @apliteni/apliteni-ui` ## README # 校对:soup [![npm](https://img.shields.io/npm/v/@apliteni/apliteni-ui?color=cb3837&logo=npm&logoColor=white)](https://www.npmjs.com/package/@apliteni/apliteni-ui) [![license: MIT](https://img.shields.io/npm/l/@apliteni/apliteni-ui?color=3b9dff)](https://npmcn.com/package/%40apliteni/apliteni-ui/LICENSE) [![live: ui.apli.tech](https://img.shields.io/badge/live-ui.apli.tech-9b5dff)](https://ui.apli.tech/) Appliteni设计系统和UI工具包提供共享设计符号,React组件, 战略甲板、文本门户、, `/account` 和未来产品 表面 . 套装船代号,组件CSS和反应组件一起. 服务器发送的页面 不使用组件框架的,仍可取 CSS 、 符号和内置 弦,或写工具箱 `.ui-*` 手工上课。 根项的帮助者会出版.. `icon`, (中文(简体) ), `prism`, (中文(简体) ), `sun`, (中文(简体) ), `moon`, (中文(简体) ), `brand`, (中文(简体) ), `esc`, (中文(简体) ), `safeUrl` 和共同的逻辑——服务 都一样. 每一部分都写在书中 **[技术](https://ui.apli.tech/)**。 。 。 . ## 安装 该套件发布于公共npm注册. 您不需要范围配置或 npm 符号 : ```bash 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为规则. | ## 用这个 ```tsx 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` 组件提供完整的产品布局:铁路、页体和 上面的条,当你要求一个, 所以没有产品重建它。 这个 [组件目录](https://npmcn.com/package/%40apliteni/apliteni-ui/docs/components.md#component-catalog) 列出它和所有其他组件. 账户和个人设置应采用一种模式,而不是在产品上,而不是在网页上 他们自己的——见 [准则/账户和设置](https://npmcn.com/package/%40apliteni/apliteni-ui/guidelines/account-and-settings.md)。 。 。 . ### 字体 套件定义了两个字体家族,但没有捆绑,所以主机页面必须加载. 弹出是 `--font-display`,用于标题,品牌标记和大型读取. IBM Plex 桑斯 实值 `--font-sans`,用于表格、字段、段落、聊天和大多数应用程序文本。 两者 家庭抚养体重300-700. ```html ``` 如果一个家族不加载,浏览器会使用它的系统倒回堆栈. 包里没有 显示此倒计时信息. ## Lint 应用程序样式 包装一个样式林特配置 `@apliteni/apliteni-ui/stylelint`它拒绝 生色, 一个生色 `px`, (中文(简体) ), `rem` 或者说 `em` 间距值,以及一个 `.ui-*` 工具包 课。 安装样式林特,然后扩展配置 : ```bash npm install --save-dev stylelint ``` ```json { "extends": ["@apliteni/apliteni-ui/stylelint"] } ``` 使用语义色彩符号, 如 `var(--text)` 和一个间隔符,例如 `var(--space-4)` 从 `@apliteni/apliteni-ui/tokens`。只用 注释,将核准的例外命名为 `--`数字 : ```css /* stylelint-disable color-no-hex -- an approved brand colour */ ``` ## 主题和口音 设定主题为 `` 与 `data-theme="dark|light"`。您可以单独设置重音 与 `data-accent`数字 : ```html ``` 口音只改变口音家族: `--accent`, (中文(简体) ), `--purple*`, (中文(简体) ), `--glow-purple`, (中文(简体) ), `--ring` 财务报告和审定财务报表 `--grad-*`。表面、文字和信号颜色保持不变。 绿色仍然是活的 颜色和粉红色仍然是危险的颜色。 结果,每个口音都在这两个主题上起作用 无需修改组件。 运出口音是 **星云** (纯和 默认), **凤凰** (温伯), **海洋** (赞美)和 **翡翠** (贾德. 两种属性都超越了默认值. 如果两者都不存在,套件使用暗星云. 若为 仅限 `data-accent` 工具箱使用带有阴暗主题的口音。 缺席 `data-theme` 已经 _没有_ " 遵循系统 " :工具包没有 `prefers-color-scheme` 规则。 如果主机想要遵循操作系统的偏好,则它的 JavaScript 必须 选择主题并添加属性。 见 [没有属性意味着黑暗](https://npmcn.com/package/%40apliteni/apliteni-ui/docs/components.md#an-absent-attribute-means-dark)。 。 。 . ## 规则 这个 **准则** 解释一个页面可能包含哪些内容,选择哪个组件,设置哪个 它必须支持,以及如何处理颜色和措辞。 套装符合这些规则. 准则船在包件中作为Markdown, 也可以作为故事书提供 节. - [准则/概览.md](https://npmcn.com/package/%40apliteni/apliteni-ui/guidelines/overview.md) ——索引,套装规则尚未达到. - [准则/网页.md](https://npmcn.com/package/%40apliteni/apliteni-ui/guidelines/the-page.md) 在设计屏幕之前先读一下这个. - [故事书准则](https://ui.apli.tech/storybook/?path=/story/guidelines-overview--overview) ——有活标本的同页. ## 文档 | 页次 | 它的答案是什么 | | --- | --- | | [基金会](https://npmcn.com/package/%40apliteni/apliteni-ui/docs/foundations.md) | 道具和地上:宽度,断口,相距,类型,颜色,高地,焦点环,自带地上. | | [组件](https://npmcn.com/package/%40apliteni/apliteni-ui/docs/components.md) | 包:要导入什么,主题,组件目录,每个组件保证什么. | | [反应/README.md](https://npmcn.com/package/%40apliteni/apliteni-ui/react/README.md) | 反应组件及其道具. | | [捐款额](https://github.com/apliteni/apliteni-ui/blob/main/docs/contributing.md) | 搞好套件:寄存器的布局,"故事","准则集","站点","变更日志"和"发布". | ## 贡献 使用节点20或更新. 安装 [强克](https://jqlang.github.io/jq/),然后运行 : ```bash 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`编辑 [准则](https://npmcn.com/package/%40apliteni/apliteni-ui/guidelines/overview.md) 定义设计规则. 打开一个问题, 从 `main`,并在您的公关中链接这个问题。 如果你改变一个 已发布文件,包括这个 README, 将版本撞入 `package.json` 财务报告和审定财务报表 `package-lock.json`,并添加条目到 `site/changelog.mjs`合并该版本的凸起 启动发布工作流程。 不要按下标签或手动发布. [一般事务人员(其他职等)](https://github.com/apliteni/apliteni-ui/blob/main/AGENTS.md) 描述审查、数据处理和释放检查. ## 许可证 [麻省理工学院](https://npmcn.com/package/%40apliteni/apliteni-ui/LICENSE) 阿普利特尼,为 **代码**. Apliteni 名称、标志和商标 是商标,是 **没有** 麻省理工学院许可证涵盖的范围——见 [贸易商](https://npmcn.com/package/%40apliteni/apliteni-ui/TRADEMARK.md)。 。 。 . ## 常见问题 ### @apliteni/apliteni-ui 是什么？ Appliteni 共享设计系统 & UI 工具包——指代,反应组件和甲板主题\. ### 如何安装 @apliteni/apliteni-ui？ 在项目目录运行 npm install @apliteni/apliteni-ui，或使用 pnpm add / yarn add / bun add。 ### @apliteni/apliteni-ui 支持 TypeScript 吗？ 支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。 ### @apliteni/apliteni-ui 支持 ESM 还是 CommonJS？ 以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。 ### @apliteni/apliteni-ui 需要什么版本的 Node\.js？ package\.json 的 engines 字段要求 Node\.js \>=20。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。 ### @apliteni/apliteni-ui 可以商用吗？ @apliteni/apliteni-ui 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。 ### @apliteni/apliteni-ui 的下载量有多少？ 根据 npm 官方下载统计，@apliteni/apliteni-ui 在 2026/10/07 – 2026/11/05 这 30 天内被下载 12,289 次，日均约 410 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。 ### @apliteni/apliteni-ui 还在维护吗？ 最新版本 0\.162\.0 发布于 2026/11/05（今天）；至今共发布 184 个版本，其中过去 12 个月发布了 184 个；首次发布于 2026/07/22。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。