- 组件总览
- 通用
- 布局
- 导航
- 数据录入
- 数据展示
- 反馈
- 其他
进行标记和分类的小标签。
基本标签的用法，可以通过添加 closable 变为可关闭标签。可关闭标签具有 onClose 事件。
import { Space, Tag } from 'antd';
import React from 'react';
const log = (e: React.MouseEvent<HTMLElement>) => {
console.log(e);
};
const preventDefault = (e: React.MouseEvent<HTMLElement>) => {
e.preventDefault();
console.log('Clicked! But prevent default.');
};
const App: React.FC = () => (
<Space size={[0, 8]} wrap>
<Tag>Tag 1</Tag>
<Tag>
<a href="https://github.com/ant-design/ant-design/issues/1862">Link</a>
</Tag>
<Tag closable onClose={log}>
Tag 2
</Tag>
<Tag closable onClose={preventDefault}>
Prevent Default
</Tag>
</Space>
);
export default App;
用数组生成一组标签，可以动态添加和删除。
import React, { useEffect, useRef, useState } from 'react';
import { PlusOutlined } from '@ant-design/icons';
import type { InputRef } from 'antd';
import { Space, Input, Tag, Tooltip, theme } from 'antd';
const App: React.FC = () => {
const { token } = theme.useToken();
const [tags, setTags] = useState(['Unremovable', 'Tag 2', 'Tag 3']);
const [inputVisible, setInputVisible] = useState(false);
const [inputValue, setInputValue] = useState('');
const [editInputIndex, setEditInputIndex] = useState(-1);
const [editInputValue, setEditInputValue] = useState('');
const inputRef = useRef<InputRef>(null);
const editInputRef = useRef<InputRef>(null);
useEffect(() => {
if (inputVisible) {
inputRef.current?.focus();
}
}, [inputVisible]);
useEffect(() => {
editInputRef.current?.focus();
}, [inputValue]);
const handleClose = (removedTag: string) => {
const newTags = tags.filter((tag) => tag !== removedTag);
console.log(newTags);
setTags(newTags);
};
const showInput = () => {
setInputVisible(true);
};
const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
setInputValue(e.target.value);
};
const handleInputConfirm = () => {
if (inputValue && tags.indexOf(inputValue) === -1) {
setTags([...tags, inputValue]);
}
setInputVisible(false);
setInputValue('');
};
const handleEditInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
setEditInputValue(e.target.value);
};
const handleEditInputConfirm = () => {
const newTags = [...tags];
newTags[editInputIndex] = editInputValue;
setTags(newTags);
setEditInputIndex(-1);
setInputValue('');
};
const tagInputStyle: React.CSSProperties = {
width: 78,
verticalAlign: 'top',
};
const tagPlusStyle: React.CSSProperties = {
background: token.colorBgContainer,
borderStyle: 'dashed',
};
return (
<Space size={[0, 8]} wrap>
<Space size={[0, 8]} wrap>
{tags.map((tag, index) => {
if (editInputIndex === index) {
return (
<Input
ref={editInputRef}
key={tag}
size="small"
style={tagInputStyle}
value={editInputValue}
onChange={handleEditInputChange}
onBlur={handleEditInputConfirm}
onPressEnter={handleEditInputConfirm}
/>
);
}
const isLongTag = tag.length > 20;
const tagElem = (
<Tag
key={tag}
closable={index !== 0}
style={{ userSelect: 'none' }}
onClose={() => handleClose(tag)}
>
<span
onDoubleClick={(e) => {
if (index !== 0) {
setEditInputIndex(index);
setEditInputValue(tag);
e.preventDefault();
}
}}
>
{isLongTag ? `${tag.slice(0, 20)}...` : tag}
</span>
</Tag>
);
return isLongTag ? (
<Tooltip title={tag} key={tag}>
{tagElem}
</Tooltip>
) : (
tagElem
);
})}
</Space>
{inputVisible ? (
<Input
ref={inputRef}
type="text"
size="small"
style={tagInputStyle}
value={inputValue}
onChange={handleInputChange}
onBlur={handleInputConfirm}
onPressEnter={handleInputConfirm}
/>
) : (
<Tag style={tagPlusStyle} onClick={showInput}>
<PlusOutlined /> New Tag
</Tag>
)}
</Space>
);
};
export default App;
使用 rc-tween-one 给标签增加添加或删除动画。
import React, { useEffect, useRef, useState } from 'react';
import { PlusOutlined } from '@ant-design/icons';
import type { InputRef } from 'antd';
import { Input, Tag, theme } from 'antd';
import { TweenOneGroup } from 'rc-tween-one';
const App: React.FC = () => {
const { token } = theme.useToken();
const [tags, setTags] = useState(['Tag 1', 'Tag 2', 'Tag 3']);
const [inputVisible, setInputVisible] = useState(false);
const [inputValue, setInputValue] = useState('');
const inputRef = useRef<InputRef>(null);
useEffect(() => {
if (inputVisible) {
inputRef.current?.focus();
}
}, [inputVisible]);
const handleClose = (removedTag: string) => {
const newTags = tags.filter((tag) => tag !== removedTag);
console.log(newTags);
setTags(newTags);
};
const showInput = () => {
setInputVisible(true);
};
const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
setInputValue(e.target.value);
};
const handleInputConfirm = () => {
if (inputValue && tags.indexOf(inputValue) === -1) {
setTags([...tags, inputValue]);
}
setInputVisible(false);
setInputValue('');
};
const forMap = (tag: string) => {
const tagElem = (
<Tag
closable
onClose={(e) => {
e.preventDefault();
handleClose(tag);
}}
>
{tag}
</Tag>
);
return (
<span key={tag} style={{ display: 'inline-block' }}>
{tagElem}
</span>
);
};
const tagChild = tags.map(forMap);
const tagPlusStyle = {
background: token.colorBgContainer,
borderStyle: 'dashed',
};
return (
<>
<div style={{ marginBottom: 16 }}>
<TweenOneGroup
enter={{
scale: 0.8,
opacity: 0,
type: 'from',
duration: 100,
}}
onEnd={(e) => {
if (e.type === 'appear' || e.type === 'enter') {
(e.target as any).style = 'display: inline-block';
}
}}
leave={{ opacity: 0, width: 0, scale: 0, duration: 200 }}
appear={false}
>
{tagChild}
</TweenOneGroup>
</div>
{inputVisible ? (
<Input
ref={inputRef}
type="text"
size="small"
style={{ width: 78 }}
value={inputValue}
onChange={handleInputChange}
onBlur={handleInputConfirm}
onPressEnter={handleInputConfirm}
/>
) : (
<Tag onClick={showInput} style={tagPlusStyle}>
<PlusOutlined /> New Tag
</Tag>
)}
</>
);
};
export default App;
预设五种状态颜色，可以通过设置 color 为 success、 processing、error、default、warning 来代表不同的状态。
import React from 'react';
import {
CheckCircleOutlined,
ClockCircleOutlined,
CloseCircleOutlined,
ExclamationCircleOutlined,
MinusCircleOutlined,
SyncOutlined,
} from '@ant-design/icons';
import { Divider, Space, Tag } from 'antd';
const App: React.FC = () => (
<>
<Divider orientation="left">Without icon</Divider>
<Space size={[0, 8]} wrap>
<Tag color="success">success</Tag>
<Tag color="processing">processing</Tag>
<Tag color="error">error</Tag>
<Tag color="warning">warning</Tag>
<Tag color="default">default</Tag>
</Space>
<Divider orientation="left">With icon</Divider>
<Space size={[0, 8]} wrap>
<Tag icon={<CheckCircleOutlined />} color="success">
success
</Tag>
<Tag icon={<SyncOutlined spin />} color="processing">
processing
</Tag>
<Tag icon={<CloseCircleOutlined />} color="error">
error
</Tag>
<Tag icon={<ExclamationCircleOutlined />} color="warning">
warning
</Tag>
<Tag icon={<ClockCircleOutlined />} color="default">
waiting
</Tag>
<Tag icon={<MinusCircleOutlined />} color="default">
stop
</Tag>
</Space>
</>
);
export default App;
使用 dnd kit 实现的可拖拽标签。
import React, { useState } from 'react';
import { Tag } from 'antd';
import { DndContext, PointerSensor, useSensor, useSensors, closestCenter } from '@dnd-kit/core';
import {
arrayMove,
useSortable,
SortableContext,
horizontalListSortingStrategy,
} from '@dnd-kit/sortable';
import type { FC } from 'react';
import type { DragEndEvent } from '@dnd-kit/core/dist/types/index';
type Item = {
id: number;
text: string;
};
type DraggableTagProps = {
tag: Item;
};
const DraggableTag: FC<DraggableTagProps> = (props) => {
const { tag } = props;
const { listeners, setNodeRef, transform, transition, isDragging } = useSortable({ id: tag.id });
const commonStyle = {
cursor: 'move',
transition: 'unset', // 防止拖拽完毕之后元素抖动
};
const style = transform
? {
...commonStyle,
transform: `translate3d(${transform.x}px, ${transform.y}px, 0)`,
transition: isDragging ? 'unset' : transition, // 处理拖拽中的元素不跟手的问题
}
: commonStyle;
return (
<Tag style={style} ref={setNodeRef} {...listeners}>
{tag.text}
</Tag>
);
};
const App = () => {
const [items, setItems] = useState<Item[]>([
{
id: 1,
text: 'Tag 1',
},
{
id: 2,
text: 'Tag 2',
},
{
id: 3,
text: 'Tag 3',
},
]);
const sensors = useSensors(useSensor(PointerSensor));
const handleDragEnd = (event: DragEndEvent) => {
const { active, over } = event;
if (!over) return;
if (active.id !== over.id) {
setItems((data) => {
const oldIndex = data.findIndex((item) => item.id === active.id);
const newIndex = data.findIndex((item) => item.id === over.id);
return arrayMove(data, oldIndex, newIndex);
});
}
};
return (
<DndContext sensors={sensors} onDragEnd={handleDragEnd} collisionDetection={closestCenter}>
<SortableContext items={items} strategy={horizontalListSortingStrategy}>
{items.map((item) => (
<DraggableTag tag={item} key={item.id} />
))}
</SortableContext>
</DndContext>
);
};
export default App;
我们添加了多种预设色彩的标签样式，用作不同场景使用。如果预设值不能满足你的需求，可以设置为具体的色值。
import React from 'react';
import { Divider, Space, Tag } from 'antd';
const App: React.FC = () => (
<>
<Divider orientation="left">Presets</Divider>
<Space size={[0, 8]} wrap>
<Tag color="magenta">magenta</Tag>
<Tag color="red">red</Tag>
<Tag color="volcano">volcano</Tag>
<Tag color="orange">orange</Tag>
<Tag color="gold">gold</Tag>
<Tag color="lime">lime</Tag>
<Tag color="green">green</Tag>
<Tag color="cyan">cyan</Tag>
<Tag color="blue">blue</Tag>
<Tag color="geekblue">geekblue</Tag>
<Tag color="purple">purple</Tag>
</Space>
<Divider orientation="left">Custom</Divider>
<Space size={[0, 8]} wrap>
<Tag color="#f50">#f50</Tag>
<Tag color="#2db7f5">#2db7f5</Tag>
<Tag color="#87d068">#87d068</Tag>
<Tag color="#108ee9">#108ee9</Tag>
</Space>
</>
);
export default App;
可通过 CheckableTag 实现类似 Checkbox 的效果，点击切换选中效果。
该组件为完全受控组件，不支持非受控用法。
import React, { useState } from 'react';
import { Space, Tag } from 'antd';
const { CheckableTag } = Tag;
const tagsData = ['Movies', 'Books', 'Music', 'Sports'];
const App: React.FC = () => {
const [selectedTags, setSelectedTags] = useState<string[]>(['Books']);
const handleChange = (tag: string, checked: boolean) => {
const nextSelectedTags = checked
? [...selectedTags, tag]
: selectedTags.filter((t) => t !== tag);
console.log('You are interested in: ', nextSelectedTags);
setSelectedTags(nextSelectedTags);
};
return (
<>
<span style={{ marginRight: 8 }}>Categories:</span>
<Space size={[0, 8]} wrap>
{tagsData.map((tag) => (
<CheckableTag
key={tag}
checked={selectedTags.includes(tag)}
onChange={(checked) => handleChange(tag, checked)}
>
{tag}
</CheckableTag>
))}
</Space>
</>
);
};
export default App;
当需要在 Tag 内嵌入 Icon 时，可以设置 icon 属性，或者直接在 Tag 内使用 Icon 组件。
如果想控制 Icon 具体的位置，只能直接使用 Icon 组件，而非 icon 属性。
import React from 'react';
import {
FacebookOutlined,
LinkedinOutlined,
TwitterOutlined,
YoutubeOutlined,
} from '@ant-design/icons';
import { Space, Tag } from 'antd';
const App: React.FC = () => (
<Space size={[0, 8]} wrap>
<Tag icon={<TwitterOutlined />} color="#55acee">
Twitter
</Tag>
<Tag icon={<YoutubeOutlined />} color="#cd201f">
Youtube
</Tag>
<Tag icon={<FacebookOutlined />} color="#3b5999">
Facebook
</Tag>
<Tag icon={<LinkedinOutlined />} color="#55acee">
LinkedIn
</Tag>
</Space>
);
export default App;
无边框模式。
import { Divider, Space, Tag } from 'antd';
import React from 'react';
const App: React.FC = () => (
<>
<Space size={[0, 'small']} wrap>
<Tag bordered={false}>Tag 1</Tag>
<Tag bordered={false}>Tag 2</Tag>
<Tag bordered={false} closable>
Tag 3
</Tag>
<Tag bordered={false} closable>
Tag 4
</Tag>
</Space>
<Divider />
<Space size={[0, 'small']} wrap>
<Tag bordered={false} color="processing">
processing
</Tag>
<Tag bordered={false} color="success">
success
</Tag>
<Tag bordered={false} color="error">
error
</Tag>
<Tag bordered={false} color="warning">
warning
</Tag>
<Tag bordered={false} color="magenta">
magenta
</Tag>
<Tag bordered={false} color="red">
red
</Tag>
<Tag bordered={false} color="volcano">
volcano
</Tag>
<Tag bordered={false} color="orange">
orange
</Tag>
<Tag bordered={false} color="gold">
gold
</Tag>
<Tag bordered={false} color="lime">
lime
</Tag>
<Tag bordered={false} color="green">
green
</Tag>
<Tag bordered={false} color="cyan">
cyan
</Tag>
<Tag bordered={false} color="blue">
blue
</Tag>
<Tag bordered={false} color="geekblue">
geekblue
</Tag>
<Tag bordered={false} color="purple">
purple
</Tag>
</Space>
</>
);
export default App;
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| closable | 标签是否可以关闭（点击默认关闭） | boolean | false | |
| closeIcon | 自定义关闭按钮 | ReactNode | - | 4.4.0 |
| color | 标签色 | string | - | |
| icon | 设置图标 | ReactNode | - | |
| bordered | 是否有边框 | boolean | true | 5.4.0 |
| onClose | 关闭时的回调（可通过 e.preventDefault() 来阻止默认行为） | (e) => void | - |
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| checked | 设置标签的选中状态 | boolean | false |
| onChange | 点击标签时触发的回调 | (checked) => void | - |