# @addaab/ads 中文文档

规范地址：https://npmcn.com/package/%40addaab/ads/

版本：1\.4\.1
npm 元数据更新时间：2026-11-04T12:12:24.694Z
中文译文更新时间：2026-11-06T16:04:25.092Z
软件包许可：UNLICENSED

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

原始 npm 页面：https://www.npmjs.com/package/%40addaab/ads
原文对照：https://npmcn.com/package/%40addaab/ads/?lang=original
源码仓库：https://dev.azure.com/Epinova-Sweden/Adda/_git/ADDA%20Design%20System

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

- 包体积（解压后）：3.7 MB，845 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：1 个
- peer 依赖：react \>=18，react-dom \>=18，@stencil/react-output-target ^1\.6\.2
- 首次发布：2026-10-01T08:26:32.649Z
- 最新版本发布：2026-11-04T12:12:24.478Z
- 近 30 天下载量：2783（2026-10-05 至 2026-11-03，npm 官方下载统计）
- 已发布版本数：14（近 12 个月 14 个）

## 中文简介

Adda Design System——指使,网络组件,回放包装和CSS. AI代理:读取AGENTS.md(设置+规则),docs/组件.md(组件API)和docs/tokens.md(设计符号).

## 安装

```sh
npm install @addaab/ads
```

也可以使用：`pnpm add @addaab/ads`、`yarn add @addaab/ads`、`bun add @addaab/ads`

## README

# Adda 设计系统`@addaab/ads`(中文(简体) )

设计代号,Stencil网络组件,生成了React包装,以及CSS——作为可安装的包被运出.

## 对于AI代理(Claude Code, Claude Design, Lovebable, v0, Cursor.)

在用这个软件包生成代码之前读取这些代码( 内有它们) :

-   [`AGENTS.md`](https://npmcn.com/package/%40addaab/ads/AGENTS.md): 需要设置( CSS, Avenir Next 字体), 反应模式, 服务器发送的页面( 标记合同), 组件目录, 主机页面 CSS 和规则
-   [`UPGRADING.md`](https://npmcn.com/package/%40addaab/ads/UPGRADING.md):用于断开放行的迁移指南,并带有编码器. 1.0.0 重新命名为 `ads-` 前缀为 `dsa-`
-   [`docs/components.md`](https://npmcn.com/package/%40addaab/ads/docs/components.md): 每个组件的道具、事件、插槽以及 HTML 和 React 示例
-   [`docs/tokens.md`](https://npmcn.com/package/%40addaab/ads/docs/tokens.md): 设计符号和要使用的符号
-   [`llms.txt`](https://npmcn.com/package/%40addaab/ads/llms.txt):上述指数; `docs/custom-elements.json` 是自定义元素表达式

## 安装

```bash
npm install @addaab/ads
```

对于 React 包装符, 也安装它们的对等依赖性 :

```bash
npm install @stencil/react-output-target react react-dom
```

`@stencil/react-output-target` 标记为可选的对等依赖( CSS 和自定义元素消费者不需要), 但 React 包装导入 `@stencil/react-output-target/runtime` 在运行时间。 React Apps 必须明确安装它; 没有它, 您可以得到 `Cannot find module '@stencil/react-output-target/runtime'`。 。 。 .

## 前缀

| 仁爱 | 公约 | 示例 |
| --- | --- | --- |
| 自定义元素 | `dsa-` 标签 | `<dsa-button>` |
| CSS课程 | `dsa-` 贝姆 | `.dsa-button`, (中文(简体) ), `.dsa-button--primary` |
| 键入 CSS 变量 | 图片导出名称( 未更改) | `--component-color-…`, (中文(简体) ), `--alias-…` |

## 消费模式

### 1\. 虚拟+自定义要素(首选)

可树动:只导入您使用的东西,然后注册该元素.

```ts
import { defineCustomElement } from '@addaab/ads/components/dsa-button';
import '@addaab/ads/css'; // or `@addaab/ads/css/dsa-button` + `@addaab/ads/tokens/css`

defineCustomElement();
```

```html
<dsa-button variant="primary">Open account</dsa-button>
```

反应包装器呼叫 `defineCustomElement` 给你的.

### 2\. 反应(生成的包装)

反应约束由 `@stencil/react-output-target` 在斯通西尔建造期间 不要用手保护他们.

```tsx
import { DsaButton } from '@addaab/ads/react';
import '@addaab/ads/css';

<DsaButton variant="primary">Open account</DsaButton>
```

每个组件 : `import { DsaButton } from '@addaab/ads/react/dsa-button'`。 。 。 .

### 3\. 仅限CSS(vanilla HTML)

```html
<button class="dsa-button dsa-button--primary dsa-button--medium" type="button">Open account</button>
```

```ts
import '@addaab/ads/css/dsa-button';
import '@addaab/ads/tokens/css';
```

### 4\. 懒散装货机(无捆绑)

```ts
import { defineCustomElements } from '@addaab/ads/loader';
defineCustomElements();
```

优先模式1与Vite.

## 软件包出口

| 导入 | 目的 |
| --- | --- |
| `@addaab/ads/components/<name>` | 自定义元素模块( 自动定义) |
| `@addaab/ads/react` | 生成重现包装 |
| `@addaab/ads/css` | 键+全部组件 CSS |
| `@addaab/ads/css/<name>` | 单一构成部分 |
| `@addaab/ads/tokens` | 托肯・杰森 |
| `@addaab/ads/tokens/css` | 键入 CSS 变量 |
| `@addaab/ads/tokens/typography` | `.dsa-type-*` 印刷课(包括在 `@addaab/ads/css`(中文(简体) ) |
| `@addaab/ads/tokens/js` | Token作为联合来文人名单`tokens` 数组:路径、 CSS 变量、 值) |
| `@addaab/ads/AGENTS.md` | AI代理商和开发商的消费者指南 |
| `@addaab/ads/UPGRADING.md` | 打破释放的移徙指南(1.0: `ads-` → `dsa-`(中文(简体) ) |
| `@addaab/ads/codemods/migrate-to-dsa.mjs` | 1.0.0重命名的编码(`node … <dir> --write`(中文(简体) ) |
| `@addaab/ads/docs/*` | 生成的 API 引用( O)`components.md`, (中文(简体) ), `tokens.md`, (中文(简体) ), `custom-elements.json`(中文(简体) ) |
| `@addaab/ads/loader` | 装入器 |

## 轻度 DOM 策略

组件使用 **默认淡出 DOM** (单位:千美元)`shadow: false`(e) 机会均等和无障碍环境。 仅在组件需要强烈隔离时使用阴影 DOM;该组件的读取会记录原因.

## 来源贡献( F)

来源、问题跟踪和捐款文件 [Adda 设计系统](https://dev.azure.com/Epinova-Sweden/Adda/_git/ADDA%20Design%20System) Azure DevOps 重播( 重播 )`packages/ads`) (中文(简体) ). 见 [文件/检索](https://dev.azure.com/Epinova-Sweden/Adda/_git/ADDA%20Design%20System?path=/docs/RELEASING.md) 这是如何切断释放.

## 常见问题

### @addaab/ads 是什么？

Adda Design System——指使,网络组件,回放包装和CSS\. AI代理:读取AGENTS\.md\(设置\+规则\),docs/组件\.md\(组件API\)和docs/tokens\.md\(设计符号\)\.

### 如何安装 @addaab/ads？

在项目目录运行 npm install @addaab/ads，或使用 pnpm add / yarn add / bun add。

### @addaab/ads 支持 TypeScript 吗？

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

### @addaab/ads 支持 ESM 还是 CommonJS？

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

### @addaab/ads 可以商用吗？

@addaab/ads 使用 UNLICENSED 许可。作者声明为 UNLICENSED，即不授予公开使用许可（与公共领域的 Unlicense 不同）。使用前需获得作者授权。以上为概括，不构成法律意见，请以许可原文为准。

### @addaab/ads 的下载量有多少？

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

### @addaab/ads 还在维护吗？

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