JGuang
EN

标签

Tag · Ant Design

交互预览
npm install antd@6.6.5 @ant-design/icons@6.3.4 dayjs@1.11.23

标签

进行标记和分类的小标签。

何时使用

  • 用于标记事物的属性和维度。
  • 进行分类。

代码演示

  • 基本 · basic

  • 多彩标签 · colorful

  • 动态添加和删除 · control

  • 可选择标签 · checkable

  • 添加动画 · animation

  • 图标按钮 · icon

  • 预设状态的标签 · status

  • 可拖拽标签 · draggable

  • 自定义语义结构的样式和类 · style-class

API

通用属性参考：通用属性

Tag

参数说明类型默认值版本全局配置
classNames用于自定义组件内部各语义化结构的 class，支持对象或函数Record<SemanticDOM, string> | (info: { props })=> Record<SemanticDOM, string>-6.0.0
closeIcon自定义关闭按钮。5.7.0：设置为 null 或 false 时隐藏关闭按钮ReactNodefalse4.4.05.14.0
color标签色stringvariant="solid" 时为 defaultsolid 默认颜色: 6.4.0×
disabled是否禁用标签booleanfalse6.0.0×
href点击跳转的地址，指定此属性tag组件会渲染成 <a> 标签string-6.0.0×
icon设置图标ReactNode-×
onClose关闭时的回调（可通过 e.preventDefault() 来阻止默认行为）(e: React.MouseEvent<HTMLElement, MouseEvent>) => void-×
styles用于自定义组件内部各语义化结构的行内 style，支持对象或函数Record<SemanticDOM, CSSProperties> | (info: { props })=> Record<SemanticDOM, CSSProperties>-6.0.0
target相当于 a 标签的 target 属性，href 存在时生效string-6.0.0×
variant标签变体'filled' | 'solid' | 'outlined''filled'6.0.06.0.0
bordered是否带边框，请使用 variant="filled" 替代booleantrue-×

Tag.CheckableTag

参数说明类型默认值版本
checked设置标签的选中状态booleanfalse
icon设置图标ReactNode-5.27.0
onChange点击标签时触发的回调(checked) => void-

Tag.CheckableTagGroup

参数说明类型默认值版本
classNames用于自定义组件内部各语义化结构的 class，支持对象或函数Record<SemanticDOM, string> | (info: { props }) => Record<SemanticDOM, string>-
defaultValue初始选中值string | number | Array<string | number> | null-
disabled禁用选中boolean-
multiple多选模式boolean-
options选项列表。对象类型的选项支持为每一项单独设置 className 和 styleArray<{ className?: string; label: ReactNode; style?: CSSProperties; value: string | number } | string | number>-className 和 style: 6.4.0
styles用于自定义组件内部各语义化结构的行内 style，支持对象或函数Record<SemanticDOM, CSSProperties> | (info: { props }) => Record<SemanticDOM, CSSProperties>-
value选中值string | number | Array<string | number> | null-
onChange点击标签时触发的回调(value: string | number | Array<string | number> | null) => void-

Semantic DOM

Tag

语义节点原生说明版本
root根元素，包含行内块布局、自动高度、内边距、字体大小、行高、禁止换行、背景色、边框、圆角、透明度、过渡动画、文本对齐、相对定位等标签的基础样式6.0.0
icon图标元素，包含字体大小、颜色、光标样式、过渡动画等图标的显示样式6.0.0
content内容元素，包含文本内容的颜色、字体样式等内容区域的样式6.0.0
close关闭元素，包含关闭按钮的布局、光标样式、过渡动画等交互样式6.4.0

语义说明来源: vendor/components/tag/demo/_semantic.tsx

Tag.CheckableTagGroup

语义节点原生说明版本
root根元素，设置标签组的容器样式和布局—
item标签项元素，设置行内块显示、高度、内边距、字体大小、行高、背景色、边框、圆角、透明度、过渡动画、可选中状态等样式—

语义说明来源: vendor/components/tag/demo/_semantic_group.tsx

主题变量（Design Token）

类型、继承关系和原生令牌声明保持固定源码原文；默认值由原生主题计算，并可能受 ConfigProvider 覆盖。本表不伪造静态默认值。

令牌类型原生说明
defaultBgstring默认背景色
defaultColorstring默认文字颜色
solidTextColorstring默认实心标签的文本色

声明来源: vendor/components/tag/style/index.ts

import type React from 'react';

import { unit } from '@ant-design/cssinjs';

import type { CSSInterpolation } from '@ant-design/cssinjs';

import { FastColor } from '@ant-design/fast-color';

import { AggregationColor } from '../../color-picker/color';

import { isBright } from '../../color-picker/components/ColorPresets';

import { resetComponent } from '../../style';

import type { FullToken, GenerateStyle, GenStyleFn, GetDefaultToken } from '../../theme/internal';

import { genStyleHooks, mergeToken } from '../../theme/internal';

export interface ComponentToken {
  /**
   * @desc 默认背景色
   * @descEN Default background color
   */
  defaultBg: string;
  /**
   * @desc 默认文字颜色
   * @descEN Default text color
   */
  defaultColor: string;

  /**
   * @desc 默认实心标签的文本色
   * @descEN Default text color for solid tag.
   */
  solidTextColor: string;
}

export interface TagToken extends FullToken<'Tag'> {
  tagFontSize: number;
  tagLineHeight: React.CSSProperties['lineHeight'];
  tagIconSize: number | string;
  tagPaddingHorizontal: number;
  tagBorderlessBg: string;
}

原生通用属性

Tips: 以下通用属性适用于 antd 大部分组件，不支持的组件会单独说明。

参数说明类型默认值
style自定义样式CSSProperties-
className自定义类名string-
rootClassName添加在组件最外层的 classNamestring-
autoFocus自动获取焦点，仅对表单类、链接、交互容器等可聚焦元素生效booleanfalse

安装并复现示例

npm install antd@6.6.5 @ant-design/icons@6.3.4 dayjs@1.11.23

使用 ConfigProvider 和原生 App，并单独配置 dayjs 语言。每个示例在查看代码中列出完整源码文件和额外固定依赖。示例名称用于选择演示，不是组件通用属性。主题、语言与 SSR 初始化见资源安装指南。

原生类型参考

源码查看器包含未修改的原生实现和以下声明文件，继承类型仍位于原生包中。代码中的英文注释保留为源码参考。

  • vendor/components/tag/CheckableTag.tsx
  • vendor/components/tag/CheckableTagGroup.tsx
  • vendor/components/tag/index.tsx
  • vendor/components/tag/style/index.ts
  • vendor/components/tag/style/statusCmp.ts

来源与许可

https://github.com/ant-design/ant-design/tree/4a39f54842eade4e565ab336ef6097cd7e723cdd

保留原生中英文正文与可执行示例；官网专用的嵌入章节和令牌表格在本地展开。Ant Design 使用 MIT 许可，另列依赖的许可证也需保留。上传预览禁止向外发起请求，不提供后端服务。