# @dev-tcloud/tcloud-ui 中文文档

规范地址：https://npmcn.com/package/%40dev-tcloud/tcloud-ui/

版本：8\.2\.8
npm 元数据更新时间：2026-11-12T14:11:37.093Z
中文译文更新时间：2026-11-14T13:37:34.576Z
软件包许可：未声明

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

原始 npm 页面：https://www.npmjs.com/package/%40dev-tcloud/tcloud-ui
原文对照：https://npmcn.com/package/%40dev-tcloud/tcloud-ui/?lang=original

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

- 包体积（解压后）：4.2 MB，93 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：4 个
- peer 依赖：@angular/core ^21\.0\.0，monaco-editor ^0\.55\.1，@angular/forms ^21\.0\.0，@angular/common ^21\.0\.0，@angular/router ^21\.0\.0，@angular/elements ^21\.0\.0
- 首次发布：2023-01-12T17:55:06.394Z
- 最新版本发布：2026-11-12T14:11:36.680Z
- 近 30 天下载量：2033（2026-10-12 至 2026-11-10，npm 官方下载统计）
- 已发布版本数：376（近 12 个月 169 个）

## 中文简介

为了方便在Angular开发出TCloud特征. 模块为标准开发维护了tcloud风格.

## 安装

```sh
npm install @dev-tcloud/tcloud-ui
```

也可以使用：`pnpm add @dev-tcloud/tcloud-ui`、`yarn add @dev-tcloud/tcloud-ui`、`bun add @dev-tcloud/tcloud-ui`

## README

# 塔卢德 - 乌伊

为了方便在Angular开发出TCloud特征. 模块为标准开发维护了tcloud风格.

## 安装指令

从 npm 安装 dev- tloud/ tloud- ui

```bash
npm install @dev-tcloud/tcloud-ui --save
```

## 维尔索斯

| 角质 | 维尔桑 |
| --- | --- |
| 角数 19 | 5.x.x (中文(简体) ) |
| 角数 18 | 4.x.x (中文(简体) ) |
| 角 17 | 3.x.x (中文(简体) ) |
| 角 16 | 2.x.x (中文(简体) ) |
| 角 15 | 1.x.x (中文(简体) ) |
| 角数 14 | 0.x.x (中文(简体) ) |

## tcloud-ui 模块

-   紫外线
-   TCloudUiTab 菜单
-   紫外线
-   TCloudUiLine 循环模块
-   TCloudUi 多功能选择模块
-   TCloudUiDataList 模块
-   TCloudUi 多功能输入模块
-   TCloudUiChoices Issues 模块
-   TCloudUi 输入搜索模块
-   TCloudUi NotFound 模块
-   TCloudUi Table 模块
-   TCloudUi 数字标准模块
-   TCloudUi 滚动框程序
-   TCloudUiFilters 模块
-   紫外线
-   TCloudUi 数据拾取器
-   TCloudUiDatecooker 时间组件
-   TCloudUi 多元性Values 模块
-   TCloudUi 输入软件
-   克卢德-维尼欢迎模块
-   紫外线
-   TCloudUi 重排项目
-   TCloudUiLabel 托肯模块
-   TCloudUiLine StepTitle 模块

## tcluuui 指令

-   TCloudUi 工具指南
-   TCloudUi 对齐指令
-   TCloudUiHover家长指导
-   TCloudUiEl 密码
-   密度指令
-   TCloudNg 检查访问指令
-   TCloudNg FeatureFlags 指令
-   TCloud 检查访问指令
-   TCloudUiIp 任务指令
-   高光指令
-   仅限指令

## tcloud-ui服务

-   TCloudUi 记录转换服务
-   TCloudUiSearch 对象服务
-   TCloudUi 图形
-   TCloudUi海关服务
-   TCloud 检查访问服务

## 使用实例

### 独立(建议)

`main.ts`

```typescript
import { bootstrapApplication } from '@angular/platform-browser';
import { provideTCloudUi } from '@dev-tcloud/tcloud-ui';
import { AppComponent } from './app/app.component';

bootstrapApplication(AppComponent, {
  providers: [
    provideTCloudUi()
  ]
});
```

### NG 模块

`app.module.ts`

```javascript
import { TCloudUiModule } from '@dev-tcloud/tcloud-ui';

@NgModule({
  imports: [
    ...
    TCloudUiModule
  ]
})
```

## 动画

这个库里所有的动画都是 **基于中央支助系统** (单位:千美元)`animate.enter`编号 :`animate.leave` 支助和支助服务的过渡。 没错 **没有** 需求 `@angular/animations`, (中文(简体) ), `provideAnimations()`, (中文(简体) ), 或者说 `BrowserAnimationsModule` - 没什么可配置的.

## 添加 TCloud- ui 组件样式和 tCloud 样式

### 建议:单一进口

`tcloud-styles.scss` 合计 **全部** 正式负载中的库样式表 命令(组件 + tcloud → tcloud-revitalizacao → tcloud-ui). 注册 此文件 :

angular.json (英语)

```javascript
  "styles": [
    "node_modules/@dev-tcloud/tcloud-ui/scss/tcloud-styles.scss"
  ],
```

或者,从消费者 `.scss` 文件 :

```scss
@import '@dev-tcloud/tcloud-ui/scss/tcloud-styles.scss';
```

### 遗产:个人进口

以下单个样式表仍然可用,项目不变 已经登记了 还有 **4个** 要注册的样式表,不是两个。 失踪 `tcloud-revitalizacao/tc-rev-styles.scss` 丢弃 `--size-*` 规模和组件 变成无风格.

angular.json (英语)

```javascript
  "styles": [
    "node_modules/@dev-tcloud/tcloud-ui/scss/components/styles.scss",
    "node_modules/@dev-tcloud/tcloud-ui/scss/tcloud/styles.scss",
    "node_modules/@dev-tcloud/tcloud-ui/scss/tcloud-revitalizacao/tc-rev-styles.scss",
    "node_modules/@dev-tcloud/tcloud-ui/scss/tcloud-ui/styles.scss"
  ],
```

-   `components/styles.scss` ——组件样式.
-   `tcloud/styles.scss` ——通云底风格.
-   `tcloud-revitalizacao/tc-rev-styles.scss` ——振兴层;定义 `--size-*` 规模(例如). `--size-52: 3.25rem`) (中文(简体) ).
-   `tcloud-ui/styles.scss` ——现代设计体系(`--c-*` 符号,暗模式).

在浏览器控制台中校验 : `getComputedStyle(document.documentElement).getPropertyValue('--size-52')` 必须 返回时 `3.25rem`。如果它回到空的,则 `tcloud-revitalizacao/tc-rev-styles.scss` 缺少工作表 .

## 添加日历库以使用取日期器

```javascript
  "script": [
    "node_modules/@dev-tcloud/tcloud-ui/datepicker/js/datepicker-full.min.js",
  ],
```

# 烟雾威

这个项目是用下列方式产生的: [角 CLI 函数](https://github.com/angular/angular-cli) (原始内容存档于2018-03-21). version 18.1.0.

## 常见问题

### @dev-tcloud/tcloud-ui 是什么？

为了方便在Angular开发出TCloud特征\. 模块为标准开发维护了tcloud风格\.

### 如何安装 @dev-tcloud/tcloud-ui？

在项目目录运行 npm install @dev-tcloud/tcloud-ui，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：@angular/core（^21\.0\.0）、@angular/forms（^21\.0\.0）、@angular/common（^21\.0\.0）、@angular/router（^21\.0\.0）、@angular/elements（^21\.0\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @dev-tcloud/tcloud-ui 支持 TypeScript 吗？

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

### @dev-tcloud/tcloud-ui 支持 ESM 还是 CommonJS？

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

### @dev-tcloud/tcloud-ui 可以商用吗？

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

### @dev-tcloud/tcloud-ui 的下载量有多少？

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

### @dev-tcloud/tcloud-ui 还在维护吗？

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