# @cloud-ru/ds-tag 中文文档

规范地址：https://npmcn.com/package/%40cloud-ru/ds-tag/

版本：1\.2\.2
npm 元数据更新时间：2026-11-11T15:06:11.870Z
中文译文更新时间：2026-11-11T15:29:39.030Z
软件包许可：Apache-2\.0

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

原始 npm 页面：https://www.npmjs.com/package/%40cloud-ru/ds-tag
原文对照：https://npmcn.com/package/%40cloud-ru/ds-tag/?lang=original
项目主页：https://github.com/cloud-ru-tech/snack-v2/tree/master/packages/tag
源码仓库：https://github.com/cloud-ru-tech/snack-v2

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

- 包体积（解压后）：441 kB，150 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：8 个
- 首次发布：2026-08-18T12:41:52.387Z
- 最新版本发布：2026-11-11T15:06:11.565Z
- 近 30 天下载量：11889（2026-10-10 至 2026-11-08，npm 官方下载统计）
- 已发布版本数：138（近 12 个月 138 个）

## 中文简介

. . . . . 标记 (QQ) \\\\\\\\ \\ \\ \\ \\ \\ \\ \\ \\ \\ \\ {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}塔格·罗 {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}我...

## 安装

```sh
npm install @cloud-ru/ds-tag
```

也可以使用：`pnpm add @cloud-ru/ds-tag`、`yarn add @cloud-ru/ds-tag`、`bun add @cloud-ru/ds-tag`

## README

# 标记

`@cloud-ru/ds-tag` - Пакет меток меток компонент 标记 (QQ) \\\\\\\\ \\ \\ \\ \\ \\ \\ \\ \\ \\ \\ {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}塔格·罗 {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}我...

Пакет `@cloud-ru/ds-tag` содержит:

-   ****标记**** ——одиночная. Рендерится `<span>` по,как `<a>` при `href`, \\ \\ \\ \\ \\ `onDelete`。 。 。 .
-   ****标签**** - 。 。 。 。 。 {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}你觉得呢.

## Установка

```bash
pnpm add @cloud-ru/ds-tag
```

```ts
import { Tag, TagRow } from '@cloud-ru/ds-tag'
```

## 标记

——出道出道,出道出道.

Компактная. По `<span>`页:1 `<a>` при `href`; показывает; кнопку `onDelete`. Режимы:тег也 `onDelete` игнорируется.

### Когда

-   \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \* \*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*.
-   Для (Активный,Ошибка也.
-   \# # # # # # # # # # 搜索/过滤 UI # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # `onDelete`。 。 。 .

Когда **не** : +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++.

### Анатомия

#### 大小

`xs` {\\fn黑体\\fs22\\bord1\\shad0\\3ahbe\\4ah00\\fscx67\\fscy66\\2chffffff\\3ch808080}我.., `s` - дефолт, `m` {\\fn黑体\\fs22\\bord1\\shad0\\3ahbe\\4ah00\\fscx67\\fscy66\\2chffffff\\3ch808080}你觉得呢.

#### 外观

Семантический/цвет: `neutral` - нейтральный, `primary` - акцент, `red` - ошибка/критично, `orange`编号 :`yellow` - предупреждение, `green` - успех, `blue` - инфо, `violet`编号 :`pink` - 额...

### Примеры

#### 1\. 国家

Простая с 出场

```tsx
import { Tag } from '@cloud-ru/ds-tag';

export function Basic() {
  return <Tag label='Frontend' appearance='blue' />;
}
```

#### 2\. 国家

{\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}在Delet上说

```tsx
import { Tag } from '@cloud-ru/ds-tag';

export function Removable() {
  return <Tag label='React' appearance='blue' onDelete={() => alert('remove')} />;
}
```

### 道具

**标记选项**

| Prop | 类型 | 默认 | 说明 |
| --- | --- | --- | --- |
| `appearance` | `"blue"` | `"green"` | `"neutral"` | `"orange"` | `"pink"` | `"primary"` | `"red"` | `"violet"` | `"yellow"` | —— 说 |  |
| `as` | `"a"` | —— 说 | \-=YTET -伊甸园字幕组=- 翻译: 链接 QQ 反应- router- dom) |
| `className` | `string` | —— 说 |  |
| `data-test-id` | `string` | —— 说 |  |
| `innerRef` | `((instance: HTMLAnchorElement | null) => void) | RefObject<HTMLAnchorElement> | Ref<HTMLSpanElement>` | —— 说 | (原始内容存档于2017-09-29). Ref QQ DOM-элемент.  
Используем,чтобы也 `forwardRef` (原始内容存档于2018-09-21) (英语).  
参考: реальный DOM-элемент/инстанс,который `as`。 。 。 .  
Используем,чтобы也 `forwardRef` (原始内容存档于2018-09-21) (英语). |
| `label` | `string` | —— 说 |  |
| `onDelete` | `MouseEventHandler<HTMLButtonElement>` | —— 说 | Обработчик. {\\fn黑体\\fs20\\shad2\\2aH82\\3aH20\\4aH33\\fscx95\\3cH592001\\be1}我们离开 |
| `size` | `"m"` | `"s"` | `"xs"` | —— 说 |  |
| `tabIndex` | `number` | —— 说 |  |
| `tooltip` | `TooltipProps` | —— 说 | {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}你觉得呢 |
| `truncateVariant` | `"end"` | `"middle"` | —— 说 | {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}你觉得怎么样. |

##### 相关类型

-   `Appearance` =: `"blue"` | `"green"` | `"neutral"` | `"orange"` | `"pink"` | `"primary"` | `"red"` | `"violet"` | `"yellow"`
    
-   `Size` =: `"m"` | `"s"` | `"xs"`
    

## 标签

{\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}你觉得呢.

{\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}你觉得呢 `Tag` подряд. Принимает `items` {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}你觉得呢.

### Когда

-   Для:"тегов";"записи";"записи";"相";"相";"相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相.
-   {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}你觉得呢.
-   Везде,где也.

### Анатомия

#### 大小

{\\fn黑体\\fs20\\shad2\\2aH82\\3aH20\\4aH33\\fscx95\\3cH592001\\be1}你觉得怎么样 `xs`, (中文(简体) ), `s`, (中文(简体) ), `m`Наследуется `Tag`。 。 。 .

#### 外观

{\\fn黑体\\fs20\\shad2\\2aH82\\3aH20\\4aH33\\fscx95\\3cH592001\\be1}你觉得怎么样 `neutral`, (中文(简体) ), `primary`, (中文(简体) ), `red`, (中文(简体) ), `orange`, (中文(简体) ), `yellow`, (中文(简体) ), `green`, (中文(简体) ), `blue`, (中文(简体) ), `violet`, (中文(简体) ), `pink`。 。 。 .

### Примеры

#### {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}你觉得呢

行Limit=1 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

```tsx
import { TagRow } from '@cloud-ru/ds-tag';

export function RowTruncated() {
  return (
    <TagRow
      rowLimit={1}
      items={[
        { id: '1', label: 'Frontend', appearance: 'blue' },
        { id: '2', label: 'Backend', appearance: 'green' },
        { id: '3', label: 'Design', appearance: 'violet' },
        { id: '4', label: 'DevOps', appearance: 'orange' },
        { id: '5', label: 'Data', appearance: 'yellow' },
      ]}
    />
  );
}
```

### 道具

| Prop | 类型 | 默认 | 说明 |
| --- | --- | --- | --- |
| `className` | `string` | —— 说 |  |
| `data-test-id` | `string` | —— 说 |  |
| `items` | `TagRowItem[]` | —— 说 |  |
| `moreButtonLabel` | `string` | —— 说 |  |
| `onItemRemove` | `((item: string) => void)` | —— 说 |  |
| `rowLimit` | `number` | —— 说 |  |
| `size` | `"m"` | `"s"` | `"xs"` | —— 说 |  |

## 常见问题

### @cloud-ru/ds-tag 是什么？

\. \. \. \. \. 标记 \(QQ\) \\\\\\\\ \\ \\ \\ \\ \\ \\ \\ \\ \\ \\ \{\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080\}塔格·罗 \{\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080\}我\.\.\.

### 如何安装 @cloud-ru/ds-tag？

在项目目录运行 npm install @cloud-ru/ds-tag，或使用 pnpm add / yarn add / bun add。

### @cloud-ru/ds-tag 支持 TypeScript 吗？

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

### @cloud-ru/ds-tag 支持 ESM 还是 CommonJS？

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

### @cloud-ru/ds-tag 可以商用吗？

@cloud-ru/ds-tag 使用 Apache-2\.0 许可。宽松许可：允许商业使用、修改和再分发，并附带明确的专利授权；分发时需保留许可与 NOTICE 文件，修改过的文件要注明改动。以上为概括，不构成法律意见，请以许可原文为准。

### @cloud-ru/ds-tag 的下载量有多少？

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

### @cloud-ru/ds-tag 还在维护吗？

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