# @cruglobal/cornerstone-components 中文文档

规范地址：https://npmcn.com/package/%40cruglobal/cornerstone-components/

版本：0\.11\.0
npm 元数据更新时间：2026-11-11T03:25:19.612Z
中文译文更新时间：2026-11-11T09:30:37.249Z
软件包许可：MIT

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

原始 npm 页面：https://www.npmjs.com/package/%40cruglobal/cornerstone-components
原文对照：https://npmcn.com/package/%40cruglobal/cornerstone-components/?lang=original
项目主页：https://cruglobal.github.io/cornerstone-design-system
源码仓库：https://github.com/CruGlobal/cornerstone-design-system

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

- 包体积（解压后）：19 MB，2250 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- Node.js 要求：\>=22
- 运行依赖：13 个
- 首次发布：2026-08-28T20:22:06.088Z
- 最新版本发布：2026-11-11T03:25:19.230Z
- 近 30 天下载量：2433（2026-10-11 至 2026-11-09，npm 官方下载统计）
- 已发布版本数：13（近 12 个月 13 个）

## 中文简介

Cornerstone设计系统的自定义元素库.

## 安装

```sh
npm install @cruglobal/cornerstone-components
```

也可以使用：`pnpm add @cruglobal/cornerstone-components`、`yarn add @cruglobal/cornerstone-components`、`bun add @cruglobal/cornerstone-components`

## README

# 角石组件

Cru的网络组件库: 70个组件用 [升](https://lit.dev/)。 。 。 .

-   **框架-不可知论.** 它们都是自定义元素,因此在React,Vue,Rails,WordPress或平面HTML中工作.
-   **与 CSS 自定义 .** 每个组件都暴露出CSS自定义属性和部件,以及从一集设计符来显示库主题.
-   **光阴相克.** 三个主题船: `cru` (默认), `fl` 为家庭生活和无名氏 `default`。每个都带有两种颜色方案.
-   **无障碍.** 70个部件中的59个在三台发动机和两种制导模式的试验套间对斧头进行维护。 11个没有造成任何互动.

* * *

联合国 [cruglobal.github.io/cornerstone-设计系统](https://cruglobal.github.io/cornerstone-design-system)

资料来源: [github.com/CruGlobal/角石设计系统](https://github.com/CruGlobal/cornerstone-design-system)

* * *

## 安装

```bash
npm install @cruglobal/cornerstone-components
```

导入样式表一次, 然后您使用的每个组件 :

```js
import '@cruglobal/cornerstone-components/styles/cornerstone.css';
import '@cruglobal/cornerstone-components/components/button/button.js';
```

```html
<cs-button variant="brand">Click me</cs-button>
```

如果你自己为图书馆服务 而不是捆绑它,复制 `dist/bundled` 卸出包件并装入 `cornerstone.loader.js` 自动装填器登记 `cs-*` 元素 . 这个 [安装指南](https://cruglobal.github.io/cornerstone-design-system) 覆盖两道.

* * *

## 开发者 QQ

开发者可以利用此文档从源头学习如何构建Cornerstone组件.

**你不需要用Cornerstone组件做这些!** 本页面为想为项目出力,用源做工,或创建自定义建筑的人提供.

如果这不是你想做的 [文档网站](https://cruglobal.github.io/cornerstone-design-system) 这是你想要的地方.

### 你用什么制造角石组件?

组件以 [升](https://lit.dev/),一个自定义元素基础类,提供直观的API和活性数据绑定. 构建是一个自定义的脚本, 由 : [兴建](https://esbuild.github.io/)。 。 。 .

### Npm的依赖性在哪里?

任何组件在运行时需要的.. `lit`例如——属于 `dependencies`因为它必须安装 任何人消耗这个包。 仅用于构建、测试或插入库的工具 `devDependencies`。 。 。 .

```bash
npm install -D prettier
```

### 获取还原

克隆本地重播并安装依赖.

```bash
git clone https://github.com/CruGlobal/cornerstone-design-system
cd cornerstone-components
npm install
```

### 发展中国家

一旦你复制回波,运行:

```bash
npm start
```

这个表 `src/` 并重建更改后的图书馆,服务 `dist/` 这样一页就可以装入已建文件 . 目前没有热模块重装( HMR), 因为浏览器无法提供重新注册自定义的方法 元素,但源代码的大部分修改会自动重新加载浏览器.

为了整理文件,在第二个终端同时运行文件站点:

```bash
npm run start:docs
```

启动 Astro 的 dev 服务器 `http://localhost:4321`复制当前 `dist/bundled/` 打开 启动,所以重建库并重新启动它来取取组件的更改.

### 大楼

要生成生产建设,请执行以下命令.

```bash
npm run build
```

您也可以运行 `npm run build:serve` 开始 [`http-server`](https://www.npmjs.com/package/http-server) 实例 `http://localhost:4000` 在构建完成后,可以预览出生产构建.

### 测试

`npm test` 运行 Chromium, Firefox 和 WebKit 的每个测试文件. 首先构建:测试加载组件 `dist/`。 。 。 .

CI把套房分成六个跑者 `WTR_SHARD`你可以自己开一个

```bash
WTR_SHARD=2/6 npm test
```

文件按每个文件需要多长时间处理成碎片,所以碎片一起完成。 这些时间在 `test-durations.json`。测试文件中未包含的仍在运行;当处理硬盘时,它只计算为一秒钟。 当 CI 的硬盘漂移超过一分两分时, 或者在添加了几个重测试文件后, 刷新文件 :

```bash
npm run build
npm run test:durations
```

整个套房都开着 重写 `test-durations.json` 每个文件所花费的秒数 平均在三个引擎上 提交结果。 在一个安静的机器上运行, 因为一个忙碌的机器充气 任何文件在当时运行。 测试在本次运行期间没有再测试,因此测试出站时间失败. 如果运行警告说有些文件没有通过, 在执行前只需刷新以下命令的文件: 它会取代夸大的数字 .

为了刷新一个组件的文件, 留下剩下的文件, 叫跑者自己. `npm run test:durations -- --group button` 不工作: npm 保存 `--group` 他自己和整个套房运行.

```bash
WTR_RECORD_DURATIONS=true npx web-test-runner --group button
```

这些数字比整场比赛还粗糙 在任何运行中,每个浏览器打开的第一个文件也等待浏览器启动. 在一个小组中运行每个文件都是第一个文件之一,没有其他东西是装入机器的. 使用它来获取新文件到列表中,或者替换一个被充气的失败数字,并在被打乱后进行全跑.

### 创建新组件

要安装新组件, 请运行以下命令 。 它会提示标记名称, 它必须从 `cs-`。 。 。 .

```bash
npm run create
```

生成四个文件:组件、样式表、测试文件以及文件页。 当启动dev服务器时,会找到侧边栏"Confontents"一栏中的新组件.

### 捐款

Cornerstone组件由Cru维护. 问题和bug报告受到任何人的欢迎;拉出请求来自Cru设计系统团队. 见 [捐款准则](https://npmcn.com/package/%40cruglobal/cornerstone-components/CONTRIBUTING.md)。 。 。 .

## 许可证

角石组件按下列条件提供: [MIT 许可证](https://npmcn.com/package/%40cruglobal/cornerstone-components/LICENSE.md)。 。 。 .

## 常见问题

### @cruglobal/cornerstone-components 是什么？

Cornerstone设计系统的自定义元素库\.

### 如何安装 @cruglobal/cornerstone-components？

在项目目录运行 npm install @cruglobal/cornerstone-components，或使用 pnpm add / yarn add / bun add。

### @cruglobal/cornerstone-components 支持 TypeScript 吗？

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

### @cruglobal/cornerstone-components 支持 ESM 还是 CommonJS？

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

### @cruglobal/cornerstone-components 需要什么版本的 Node\.js？

package\.json 的 engines 字段要求 Node\.js \>=22。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。

### @cruglobal/cornerstone-components 可以商用吗？

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

### @cruglobal/cornerstone-components 的下载量有多少？

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

### @cruglobal/cornerstone-components 还在维护吗？

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