# @aseguragonzalez/ui 中文文档

规范地址：https://npmcn.com/package/%40aseguragonzalez/ui/

版本：1\.8\.8
npm 元数据更新时间：2026-10-20T13:02:58.346Z
中文译文更新时间：2026-11-06T22:45:47.623Z
软件包许可：未声明

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40aseguragonzalez/ui
原文对照：https://npmcn.com/package/%40aseguragonzalez/ui/?lang=original
项目主页：https://github.com/aseguragonzalez/ui#readme
源码仓库：https://github.com/aseguragonzalez/ui

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：424 kB，342 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：0 个
- peer 依赖：react \>=18\.0\.0，react-dom \>=18\.0\.0
- 首次发布：2026-04-30T17:33:40.347Z
- 最新版本发布：2026-10-20T13:02:57.789Z
- 近 30 天下载量：2435（2026-10-07 至 2026-11-05，npm 官方下载统计）
- 已发布版本数：22（近 12 个月 22 个）

## 中文简介

React SPA 可访问、可主题设计系统

## 安装

```sh
npm install @aseguragonzalez/ui
```

也可以使用：`pnpm add @aseguragonzalez/ui`、`yarn add @aseguragonzalez/ui`、`bun add @aseguragonzalez/ui`

## README

# 设计系统

可访问,可主题 React 组件库. WCAG 2.1 AA出框,零运行时间依赖,CSS自定义属性主题.

## 安装

```bash
npm install @aseguragonzalez/ui
```

## 设置

在您的应用程序入口处导入样式表 :

```tsx
import '@aseguragonzalez/ui/index.css';
```

包装您的应用程序 `ToastProvider` 如果您使用土司通知:

```tsx
import { ToastProvider } from '@aseguragonzalez/ui';

function App() {
  return (
    <ToastProvider>
      <YourApp />
    </ToastProvider>
  );
}
```

## 使用量

```tsx
import { Button, TextField } from '@aseguragonzalez/ui';

function ContactForm() {
  return (
    <form>
      <TextField label="Name" placeholder="Your name" required />
      <TextField label="Email" type="email" />
      <Button variant="primary" type="submit">Send</Button>
    </form>
  );
}
```

## 包括什么

**初级** —— HTML5 元素周围的原子包装: `Button`, (中文(简体) ), `TextInput`, (中文(简体) ), `Checkbox`, (中文(简体) ), `Select`, (中文(简体) ), `Toggle`, (中文(简体) ), `Heading`, (中文(简体) ), `Text`, (中文(简体) ), `Label`, (中文(简体) ), `Alert`, (中文(简体) ), `Badge`, (中文(简体) ), `Spinner`, (中文(简体) ), `ProgressBar`, (中文(简体) ), `Tabs`, (中文(简体) ), `Tooltip`, (中文(简体) ), `Modal`, (中文(简体) ), `Toast`还有更多.

**复合材料** 原始人与 `Label`, (中文(简体) ), `Hint`,以及 `ErrorMessage` 用于完整、可访问的形式字段: `TextField`, (中文(简体) ), `TextAreaField`, (中文(简体) ), `CheckboxField`, (中文(简体) ), `CheckboxGroup`, (中文(简体) ), `SelectField`, (中文(简体) ), `RadioGroup`, (中文(简体) ), `ToggleField`, (中文(简体) ), `PasswordField`, (中文(简体) ), `DateField`还有更多.

**版式** —— 说 `Navbar`, (中文(简体) ), `Sidebar`, (中文(简体) ), `Breadcrumb`。 。 。 .

**图表** —— 说 `BarChart`, (中文(简体) ), `LineChart`, (中文(简体) ), `DonutChart`, (中文(简体) ), `ScatterPlot`, (中文(简体) ), `RadarChart`。 。 。 .

**数据** —— 说 `DataTable` 带有普通打字、排序和空状态.

## 他们

覆盖语义CSS自定义属性以匹配您的品牌——不需要类的覆盖:

```css
:root {
  --ds-color-action-primary:       #7c3aed;
  --ds-color-action-primary-hover: #6d28d9;
  --ds-font-family-base:           'Inter', sans-serif;
}
```

见 [医生/医生](https://npmcn.com/package/%40aseguragonzalez/ui/docs/theming.md) 以表示完整的参考.

## 文档

| 指南 | 说明 |
| --- | --- |
| [开始](https://npmcn.com/package/%40aseguragonzalez/ui/docs/getting-started.md) | 安装、设置、第一个组件 |
| [他们](https://npmcn.com/package/%40aseguragonzalez/ui/docs/theming.md) | 自定义 CSS 自定义属性 |
| [无障碍](https://npmcn.com/package/%40aseguragonzalez/ui/docs/accessibility.md) | WCAG 2.1 AA 最佳做法 |
| [反应设计](https://npmcn.com/package/%40aseguragonzalez/ui/docs/responsive-design.md) | 断点、布局、移动模式 |
| [UX 准则](https://npmcn.com/package/%40aseguragonzalez/ui/docs/ux-guidelines.md) | 表格、反馈、模式、工具提示 |
| [捐款](https://npmcn.com/package/%40aseguragonzalez/ui/docs/contributing.md) | 结构、脚本、添加组件 |

## 故事书

每个组件都有交互控制、自动生成的文件以及内置的无障碍审计:

```bash
npm run dev   # → http://localhost:6006
```

## 主要原则

-   **无障碍第一** 轴心轴在每一个测试中运行 `error` 模式; 违规失败套件
-   **零运行时间依赖关系** 仅限 `react` 财务报告和审定财务报表 `react-dom` 作为同行依赖关系
-   **CSS 仅自定义属性** ——主题从不需要类重置或构建时间配置
-   **严格类型脚本** ——所有公共API已全部输入;CSS模块已生成 `.d.ts` 文件

## 常见问题

### @aseguragonzalez/ui 是什么？

React SPA 可访问、可主题设计系统

### 如何安装 @aseguragonzalez/ui？

在项目目录运行 npm install @aseguragonzalez/ui，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（\>=18\.0\.0）、react-dom（\>=18\.0\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @aseguragonzalez/ui 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @aseguragonzalez/ui 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @aseguragonzalez/ui 可以商用吗？

@aseguragonzalez/ui 使用 未声明 许可。package\.json 没有声明许可证。没有许可证的代码默认保留全部权利，商用前请联系作者或查看仓库中的 LICENSE 文件。以上为概括，不构成法律意见，请以许可原文为准。

### @aseguragonzalez/ui 的下载量有多少？

根据 npm 官方下载统计，@aseguragonzalez/ui 在 2026/10/07 – 2026/11/05 这 30 天内被下载 2,435 次，日均约 81 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @aseguragonzalez/ui 还在维护吗？

最新版本 1\.8\.8 发布于 2026/10/20（18 天前）；至今共发布 22 个版本，其中过去 12 个月发布了 22 个；首次发布于 2026/05/01。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。