# @alacris/ui 中文文档
规范地址：https://npmcn.com/package/%40alacris/ui/
版本：0\.12\.1
npm 元数据更新时间：2026-10-10T22:39:54.186Z
中文译文更新时间：2026-11-07T08:46:06.800Z
软件包许可：MIT
本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。
原始 npm 页面：https://www.npmjs.com/package/%40alacris/ui
原文对照：https://npmcn.com/package/%40alacris/ui/?lang=original
项目主页：https://bmartel.github.io/alacris/ui/
源码仓库：https://github.com/bmartel/alacris
## 关键信息（来自 npm 元数据）
- 包体积（解压后）：664 kB，101 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- Node.js 要求：\>=18
- 运行依赖：1 个
- peer 依赖：@alacris/core ^0\.11\.0
- 首次发布：2026-08-15T22:22:34.069Z
- 最新版本发布：2026-10-10T22:39:54.013Z
- 近 30 天下载量：1969（2026-10-06 至 2026-11-04，npm 官方下载统计）
- 已发布版本数：38（近 12 个月 38 个）
## 中文简介
Alacris的可主题设计系统——材料默认,71个自定义元素,只有无害环境管理,没有构建步骤.
## 安装
```sh
npm install @alacris/ui
```
也可以使用：`pnpm add @alacris/ui`、`yarn add @alacris/ui`、`bun add @alacris/ui`
## README
# 阿拉克利斯大学
一个完整的、可主题的设计系统 **[阿拉克里斯语Name](https://github.com/bmartel/alacris)** 没有别的了。 没有其它运行时间的依赖性,没有构建步骤,没有CSS框架——71个组件,一个三级的令牌系统,一个用一个样式表书写重塑整页的主题引擎,以及一个被记录的运动层.
**材料设计是默认的. 你的设计系统才是重点.** 每个可视化的决定都通过符号来流出,你可以在三个层次上超越——从"改变品牌颜色"(一行)到"这已经不是材料了".
标记是真实的自定义元素,因此在平版HTML和React,Vue,Svelte,Angular,Rails,Django,以及内部工作 [阿拉克里斯- 前进](https://github.com/bmartel/alacris-go) - 任何地方,一个标签.
**文档 :** [实时目录](https://bmartel.github.io/alacris/ui/) • 妇女 [开始](https://bmartel.github.io/alacris/ui/getting-started/)
## 安装
```bash
npm install @alacris/ui
```
这拉入 `@alacris/core` 还有 请不要在同一页上从一个CDN上再装入一份阿拉克里斯的第二份副本——两份意味着两个反应图,更新停止跨越边界.
```js
import { applyTheme } from '@alacris/ui';
applyTheme({ seed: '#0b57d0' });
```
```html
Hello
```
导入 `@alacris/ui` 登记每个组件。 对于一个更小的页面,仅导入您使用的内容——每个组件模块都是自成一体的:
```js
import { applyTheme } from '@alacris/ui/theme';
import '@alacris/ui/components/ui-button.js';
import '@alacris/ui/components/ui-text-field.js';
applyTheme({ seed: '#0b57d0' });
```
### 没有捆绑
公布的成套材料是简单的无害环境管理。 将导入地图指向一个被钉住的阿拉克里斯(UI源使用的唯一光谱符)的 CDN 构建, 并在此包上:
```html
Hello
```
永远不要混合两个版本 `@alacris/core` 在一页上——两本表示两个反应图.
## 他们
```js
import { createTheme, applyTheme, setScheme, toggleScheme } from '@alacris/ui/theme';
applyTheme({ seed: '#6750a4' });
applyTheme({ seed: '#b3261e', density: -1 });
setScheme('dark');
toggleScheme();
applyTheme(createTheme({
colors: { primary: '#0b57d0', tertiary: '#00695c' },
typography: 'google-sans',
shape: { radius: 0.5 },
overrides: { light: { 'color-surface': '#faf7f2' } },
}));
```
`applyTheme` 写入 **一个** 文档级别样式表 `--ui-*` 自定义属性,并在下次调用时替换。 方案在此之后切换 `data-ui-scheme` 打开 `` (单位:千美元)`light` | `dark` | `auto`) (中文(简体) ).
有三个地方可以干预,从最宽到最窄:
1. **重新确定系统的主题** —— 说 `applyTheme({ seed, shape, … })`每一个部分如下。 黑暗模式是自动生成的.
2. **重新剥光一个组件类型** —— 说 `ui-button { --ui-button-radius: 4px; }`。 。 。 .
3. **接触一个实例** —— 说 `ui-dialog::part(surface) { backdrop-filter: blur(8px) }`。 。 。 .
全向导 : [医生/医生](https://npmcn.com/package/%40alacris/ui/docs/theming.md)。 。 。 .
## 动议
```js
import { animate, fx, presence, withFlip } from '@alacris/ui/motion';
animate(el, fx.slideInUp, { duration: 'medium2', easing: 'emphasizedDecelerate' });
html`${presence(open, () => html`…
`, {
enter: fx.slideInUp, exit: fx.slideOutDown,
})}`;
```
时间和放松是象征,所以主题 `motion.scale` 管理CSS的过渡和JS动画,以及 `prefers-reduced-motion` 将自动获得荣誉。 全向导 : [文档/动因](https://npmcn.com/package/%40alacris/ui/docs/motion.md)。 。 。 .
## 表单
命名控件( N)`ui-text-field`, (中文(简体) ), `ui-switch`, (中文(简体) ), `ui-checkbox`, (中文(简体) ), `ui-select`,.)是形式关联自定义元素. 给一个组件 a `name` 并提交、重新发送和随后提交 `