# @cantinc/ui 中文文档

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

版本：0\.3\.16
npm 元数据更新时间：2025-10-05T12:03:53.538Z
中文译文更新时间：2026-11-09T01:22:35.186Z
软件包许可：MIT

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

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

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

- 包体积（解压后）：843 kB，1185 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：10 个
- 首次发布：2022-12-25T19:50:54.512Z
- 最新版本发布：2025-10-05T12:03:53.319Z
- 近 30 天下载量：157820（2026-10-09 至 2026-11-07，npm 官方下载统计）
- 已发布版本数：127（近 12 个月 0 个）

## 中文简介

Innetjs 的 UI 组件

## 安装

```sh
npm install @cantinc/ui
```

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

## README

#   @ cantinc/ ui (英语)

[![NPM](https://img.shields.io/npm/v/@cantinc/ui.svg)](https://www.npmjs.com/package/@cantinc/ui) [![downloads](https://img.shields.io/npm/dm/@cantinc/ui.svg)](https://www.npmtrends.com/@cantinc/ui) [![changelog](https://img.shields.io/badge/Changelog-%E2%8B%AE-brightgreen)](https://changelogs.xyz/@cantinc/ui) [![license](https://img.shields.io/npm/l/@cantinc/ui)](https://github.com/cantinc/ui/blob/main/LICENSE)

## 摘要

**CANT inc. (英语). 用户** 基于 [净值](https://www.npmjs.com/package/innet)。 。 。 .

这是您可以使用的 UI 组件库 [@innet/dom (英语)](https://www.npmjs.com/package/@innet/dom) 应用.

[![stars](https://img.shields.io/github/stars/d8corp/innet--jsx?style=social)](https://github.com/d8corp/innet--jsx/stargazers) [![watchers](https://img.shields.io/github/watchers/d8corp/innet--jsx?style=social)](https://github.com/d8corp/innet--jsx/watchers)

## 使用量

### 启动应用程序

在终端控制台创建下一个命令的新项目 :

```bash
npx innetjs init my-app -t fe
```

_变动 `my-app` 如果你想把它叫做另一种方式_

进入我的应用并运行:

```bash
npm start
```

转到 [当地主机 : 300](http://localhost:3000/) 在浏览器中,您可以看到默认应用程序.

### 安装

停止服务器并安装 `@cantinc/ui`

```bash
npm i @cantinc/ui
```

然后重新开始.

在文档中,您可以找到组件的示例,可以复制任意示例并输入 `src/index.tsx` 您的工程文件( e)_清除 `src` 文件夹前_) (中文(简体) ).

### 样式

图书馆的很大一部分组件有一个 `class` 道具 (英语).

提供 `class` 作为字符串添加一个.

```tsx
import innet from 'innet'
import dom from '@innet/dom'

import { Button } from '@cantinc/ui'

innet(
  <Button class='test'>
    Click me
  </Button>,
  dom,
)
```

或提供类取相.

关键是某个组件或不同状态的元素.

```tsx
import innet from 'innet'
import dom from '@innet/dom'

import { Checkbox } from '@cantinc/ui'

innet(
  <Checkbox
    class={{
      root: 'test-root',
      disabled: 'test-disabled',
      icon: 'test-icon',
    }}
  />,
  dom,
)
```

值可以是数组,字符串,也可以是返回它们的函数.

这里有更多信息 [html 类](https://www.npmjs.com/package/html-classes)。 。 。 .

```tsx
import innet from 'innet'
import dom from '@innet/dom'
import { State } from 'watch-state'

import { Button } from '@cantinc/ui'

const state = new State('foo')

innet(
  <>
    <Button
      onclick={() => { state.value = 'bar' }}
      class={{
        root: [
          'test1-root',
          'test2-root',
          ['test3-root'],
          () => `${state.value}-root`,
        ],
        content: () => ['test-content', `${state.value}-content`],
      }}>
      Click me
    </Button>
    <Button class={() => state.value} />
  </>,
  dom,
)
```

你用得着 `style` 添加内线样式的道具.

```tsx
import innet from 'innet'
import dom from '@innet/dom'
import { State } from 'watch-state'

import { Button } from '@cantinc/ui'

const color = new State('red')

const handleClick = () => {
  color.value = 'blue'
}

innet(
  <>
    <Button
      style={{
        background: () => color.value,
      }}
      onclick={handleClick}>
      Click me
    </Button>
  </>,
  dom,
)
```

## 问题

如果您发现错误或有建议,请在 [GitHub 图像](https://github.com/cantinc/ui/issues)。 。 。 .

[![issues](https://img.shields.io/github/issues-raw/cantinc/ui)](https://github.com/cantinc/ui/issues)

## 常见问题

### @cantinc/ui 是什么？

Innetjs 的 UI 组件

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

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

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

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

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

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

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

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

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

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

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

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