# @contraagent/elements 中文文档

规范地址：https://npmcn.com/package/%40contraagent/elements/

版本：0\.10\.1
npm 元数据更新时间：2026-10-31T00:58:54.202Z
中文译文更新时间：2026-11-10T19:23:23.092Z
软件包许可：MIT

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

原始 npm 页面：https://www.npmjs.com/package/%40contraagent/elements
原文对照：https://npmcn.com/package/%40contraagent/elements/?lang=original
项目主页：https://t-tani.github.io/contraagent/
源码仓库：https://github.com/t-tani/contraagent

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

- 包体积（解压后）：1.7 MB，650 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：0 个
- peer 依赖：lit ^3\.3\.3
- 首次发布：2026-10-16T11:32:32.574Z
- 最新版本发布：2026-10-31T00:58:53.917Z
- 近 30 天下载量：3343（2026-10-11 至 2026-11-09，npm 官方下载统计）
- 已发布版本数：19（近 12 个月 19 个）

## 中文简介

通用网络组件(Lit)及其部分: 设计符号,主题,状态药丸,传说,分块控制,数据表,分层图,标记矩阵,stat平板,时间道,图表(列,行,热映射,水平栏),检查表,tr

## 安装

```sh
npm install @contraagent/elements
```

也可以使用：`pnpm add @contraagent/elements`、`yarn add @contraagent/elements`、`bun add @contraagent/elements`

## README

# @ contragent/ 要素

通用网络组件( Lit) 及其从下列设计中构建的部分 符号和内置主题,状态药丸,传说,一行事实,图标,a 分块控件,一组项目的键盘焦点,一个数据表, stat 平板,时间道,一张支票表,一张笔录,以及JSON一棵树的元素,打分,代码,一棵物品和计数器的树. 这里什么都不知道反间谍的数据:一个元素 并报告读者所做的一切 `cae-*` 活动. `@contraagent/ui` 从他们那里建立反间谍监视器.

## 获得它

Lit是同级依赖. 导入模块时没有登记, 更改否 页; a `define` 登记其要素 `cae-*` 标记(和 页:1 `cae-*` ,或者您在标签名称下注册一个类 属于你自己的 一个元素会说英语,除非页面用其词来表达 `strings` 财产([字符串](https://npmcn.com/package/%40contraagent/elements/docs/strings.md)),并取出其颜色 主题一次 `adoptThemes(document)` 增加了他们的规则[他们](https://npmcn.com/package/%40contraagent/elements/docs/theming.md)) (中文(简体) ).

```ts
import '@contraagent/elements/segmented/define'; // <cae-segmented>
import '@contraagent/elements/data-table/define'; // <cae-data-table>
import '@contraagent/elements/tiles/define'; // <cae-stat-tiles>
import '@contraagent/elements/graph/define'; // <cae-layered-graph>, <cae-mark-matrix>, <cae-segmented>
import '@contraagent/elements/charts/define'; // <cae-column-chart>, <cae-line-chart>, <cae-heatmap>, <cae-state-grid>, <cae-bar-chart>
import '@contraagent/elements/code/define'; // <cae-code>
import '@contraagent/elements/tree/define'; // <cae-tree>
import '@contraagent/elements/define'; // every cae-* element
import { pill, legend, base } from '@contraagent/elements';
```

子路径是 `primitives`, (中文(简体) ), `styles`, (中文(简体) ), `themes`, (中文(简体) ), `data-table`, (中文(简体) ), `graph`, (中文(简体) ), `matrix`, (中文(简体) ), `tiles`, (中文(简体) ), `lanes`, (中文(简体) ), `charts`, (中文(简体) ), `check-table`, (中文(简体) ), `transcript`, (中文(简体) ), `json-tree`, (中文(简体) ), `markdown`, (中文(简体) ), `code`, (中文(简体) ), `tree` 财务报告和审定财务报表 `count`,则a `define` 每个元素的条目 (单位:千美元)`segmented/define`, (中文(简体) ), `data-table/define`, (中文(简体) ), `graph/define`, (中文(简体) ), `matrix/define`, (中文(简体) ), `tiles/define`, (中文(简体) ), `lanes/define`, (中文(简体) ), `charts/define`, (中文(简体) ), `check-table/define`, (中文(简体) ), `transcript/define`, (中文(简体) ), `json-tree/define`, (中文(简体) ), `markdown/define`, (中文(简体) ), `code/define`, (中文(简体) ), `tree/define`, (中文(简体) ), `count/define`) (中文(简体) ).

从 npm 注册处安装软件包 :

```
npm install @contraagent/elements
```

检查寄存器组装自己的版本( I)[用从一 离职](https://npmcn.com/package/%40contraagent/elements/#readme-use-it-from-a-checkout)) (中文(简体) ).

## 借出时用

在仓库里 `web/` (节点22,pnpm通过) `corepack enable`:

```
pnpm install && pnpm tarballs
```

`pnpm tarballs` 构建软件包并写入一个 `.tgz` 每个文件 `web/tarballs/`。然后,在您的项目中, npm 或 pnpm:

```
npm install <checkout>/web/tarballs/contraagent-elements-*.tgz
pnpm add <checkout>/web/tarballs/contraagent-elements-*.tgz
```

## 文档

-   [初级](https://npmcn.com/package/%40contraagent/elements/docs/primitives.md):音调,状态药丸,传说,一行事实,图标,分出分出控制,花出花出焦点和入窗.
-   [他们](https://npmcn.com/package/%40contraagent/elements/docs/theming.md): 颜色、字体、类型和角为 `--ca-*` 自定义属性,以及内置主题.
-   [字符串](https://npmcn.com/package/%40contraagent/elements/docs/strings.md):一个元素的词,英语中,除非主机给出自己的词.
-   [数据表](https://npmcn.com/package/%40contraagent/elements/docs/data-table.md):在真实的表格中行,用键盘到达并打开,由窗口绘制长列表.
-   [分层图](https://npmcn.com/package/%40contraagent/elements/docs/graph.md):以分层为节点,由边缘相接,以集群相接,每组由系列排列出一组标记;泛,缩放,为选择和键盘取出一张牌.
-   [标记矩阵](https://npmcn.com/package/%40contraagent/elements/docs/matrix.md):表格中标记,每系列一行,被嵌入组下各列.
-   [站牌](https://npmcn.com/package/%40contraagent/elements/docs/tiles.md):数字作为平板,每个标签,一个数起的值,事实行和链接.
-   [巷头](https://npmcn.com/package/%40contraagent/elements/docs/lanes.md):时间轴上有栏杆,每组有道道,跑行栏杆一直到现在.
-   [图表](https://npmcn.com/package/%40contraagent/elements/docs/charts.md):列(被打入或并排),行,平原系列的热图和水平条,每行有传说,工具提示和其值表.
-   [检查表](https://npmcn.com/package/%40contraagent/elements/docs/check-table.md):命名值逐一检查,每个值都带有它必须是什么,它是什么和判决.
-   [代码](https://npmcn.com/package/%40contraagent/elements/docs/code.md):一个用其语言突出的文本,其行号以及一些被标记,包裹或滚动,复制整个,并被长时剪接.
-   [树](https://npmcn.com/package/%40contraagent/elements/docs/tree.md):在树上的项目,用鼠标和键盘折叠并打开,其中被选中的一款,每款有图标和徽章.
-   [语录](https://npmcn.com/package/%40contraagent/elements/docs/transcript.md):与代理在会话中的对话:泡泡,推理,工具卡和网络搜索,随其生长而结束.
-   [构建一个页面](https://npmcn.com/package/%40contraagent/elements/docs/page.md): CI 管道的一页,来自几个元素:主题开关,stat 平板,可排序表,带有shards和再试回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回的回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回回.

每个元素的属性、事件和部件都在 `custom-elements.json`, (中文(简体) ), 与软件包一起生成源代码.

A 类 `::code` 线条引用软件包的文件 [文档网站](https://t-tani.github.io/contraagent/) 显示已设置的引用行。 这些声明及其评论载于 `dist/**/*.d.ts`。 。 。 .

## 常见问题

### @contraagent/elements 是什么？

通用网络组件\(Lit\)及其部分: 设计符号,主题,状态药丸,传说,分块控制,数据表,分层图,标记矩阵,stat平板,时间道,图表\(列,行,热映射,水平栏\),检查表,tr

### 如何安装 @contraagent/elements？

在项目目录运行 npm install @contraagent/elements，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：lit（^3\.3\.3）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @contraagent/elements 支持 TypeScript 吗？

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

### @contraagent/elements 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @contraagent/elements 可以商用吗？

@contraagent/elements 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @contraagent/elements 的下载量有多少？

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

### @contraagent/elements 还在维护吗？

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

