You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
665 lines
40 KiB
665 lines
40 KiB
"use strict";(self.webpackChunkantd=self.webpackChunkantd||[]).push([[2600],{457114:function(u,o,t){t.r(o);var p=t(502143),m=t(968521),_=t(720719),T=t(28840),f=t(759907),a=t(828089),b=t(825673),h=t(902068),v=t(574399),k=t(863942),x=t(316073),y=t(24628),C=t(719260),w=t(956140),s=t(127179),i=t(905388),I=t(40428),E=t(606965),D=t(268696),P=t(587302),r=t(424128),Z=t(249706),O=t(795127),S=t(116846),M=t(212039),R=t(73024),A=t(553913),c=t(606641),l=t(667294),e=t(370917);function d(){var g=(0,c.eL)(),n=g.texts;return(0,e.tZ)(c.dY,null,(0,e.tZ)(l.Fragment,null,(0,e.tZ)("div",{className:"markdown"},(0,e.tZ)("p",null,n[0].value),(0,e.tZ)("h2",{id:"when-to-use"},(0,e.tZ)(r.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#when-to-use",sourceType:"a"},(0,e.tZ)("span",{className:"icon icon-link"})),"When To Use"),(0,e.tZ)("ul",null,(0,e.tZ)("li",null,(0,e.tZ)("p",null,n[1].value)),(0,e.tZ)("li",null,(0,e.tZ)("p",null,n[2].value))),(0,e.tZ)("h2",{id:"examples"},(0,e.tZ)(r.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#examples",sourceType:"a"},(0,e.tZ)("span",{className:"icon icon-link"})),"Examples")),(0,e.tZ)(i.Z,{items:[{demo:{id:"components-tag-demo-basic"},previewerProps:{title:"Basic",filename:"components/tag/demo/basic.tsx",pkgDependencyList:{"@ant-design/colors":"^7.0.0","@ant-design/cssinjs":"^1.10.1","@ant-design/icons":"^5.1.0","@ant-design/react-slick":"~1.0.0","@babel/runtime":"^7.18.3","@ctrl/tinycolor":"^3.6.0","@rc-component/color-picker":"~1.4.0","@rc-component/mutate-observer":"^1.0.0","@rc-component/tour":"~1.8.0","@rc-component/trigger":"^1.13.0",classnames:"^2.2.6","copy-to-clipboard":"^3.2.0",dayjs:"^1.11.1","qrcode.react":"^3.1.0","rc-cascader":"~3.12.0","rc-checkbox":"~3.1.0","rc-collapse":"~3.7.0","rc-dialog":"~9.1.0","rc-drawer":"~6.2.0","rc-dropdown":"~4.1.0","rc-field-form":"~1.34.0","rc-image":"~7.0.0","rc-input":"~1.1.0","rc-input-number":"~8.0.2","rc-mentions":"~2.5.0","rc-menu":"~9.10.0","rc-motion":"^2.7.3","rc-notification":"~5.0.4","rc-pagination":"~3.5.0","rc-picker":"~3.10.0","rc-progress":"~3.4.1","rc-rate":"~2.12.0","rc-resize-observer":"^1.2.0","rc-segmented":"~2.2.0","rc-select":"~14.5.0","rc-slider":"~10.1.0","rc-steps":"~6.0.0","rc-switch":"~4.1.0","rc-table":"~7.32.1","rc-tabs":"~12.9.0","rc-textarea":"~1.3.2","rc-tooltip":"~6.0.0","rc-tree":"~5.7.6","rc-tree-select":"~5.9.0","rc-upload":"~4.3.0","rc-util":"^5.32.0","scroll-into-view-if-needed":"^3.0.3","throttle-debounce":"^5.0.0"},jsx:`import { CloseCircleOutlined } from '@ant-design/icons';
|
|
import { Space, Tag } from 'antd';
|
|
import React from 'react';
|
|
const log = (e) => {
|
|
console.log(e);
|
|
};
|
|
const preventDefault = (e) => {
|
|
e.preventDefault();
|
|
console.log('Clicked! But prevent default.');
|
|
};
|
|
const App = () => (
|
|
<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 closeIcon onClose={preventDefault}>
|
|
Prevent Default
|
|
</Tag>
|
|
<Tag closeIcon={<CloseCircleOutlined />} onClose={log}>
|
|
Tag 2
|
|
</Tag>
|
|
</Space>
|
|
);
|
|
export default App;
|
|
`,description:"<p>Usage of basic Tag, and it could be closable and customize close button by set <code>closeIcon</code> property, will display default close button when <code>closeIcon</code> is setting to <code>true</code>. Closable Tag supports <code>onClose</code> events.</p>"}},{demo:{id:"components-tag-demo-colorful"},previewerProps:{title:"Colorful Tag",filename:"components/tag/demo/colorful.tsx",pkgDependencyList:{"@ant-design/colors":"^7.0.0","@ant-design/cssinjs":"^1.10.1","@ant-design/icons":"^5.1.0","@ant-design/react-slick":"~1.0.0","@babel/runtime":"^7.18.3","@ctrl/tinycolor":"^3.6.0","@rc-component/color-picker":"~1.4.0","@rc-component/mutate-observer":"^1.0.0","@rc-component/tour":"~1.8.0","@rc-component/trigger":"^1.13.0",classnames:"^2.2.6","copy-to-clipboard":"^3.2.0",dayjs:"^1.11.1","qrcode.react":"^3.1.0","rc-cascader":"~3.12.0","rc-checkbox":"~3.1.0","rc-collapse":"~3.7.0","rc-dialog":"~9.1.0","rc-drawer":"~6.2.0","rc-dropdown":"~4.1.0","rc-field-form":"~1.34.0","rc-image":"~7.0.0","rc-input":"~1.1.0","rc-input-number":"~8.0.2","rc-mentions":"~2.5.0","rc-menu":"~9.10.0","rc-motion":"^2.7.3","rc-notification":"~5.0.4","rc-pagination":"~3.5.0","rc-picker":"~3.10.0","rc-progress":"~3.4.1","rc-rate":"~2.12.0","rc-resize-observer":"^1.2.0","rc-segmented":"~2.2.0","rc-select":"~14.5.0","rc-slider":"~10.1.0","rc-steps":"~6.0.0","rc-switch":"~4.1.0","rc-table":"~7.32.1","rc-tabs":"~12.9.0","rc-textarea":"~1.3.2","rc-tooltip":"~6.0.0","rc-tree":"~5.7.6","rc-tree-select":"~5.9.0","rc-upload":"~4.3.0","rc-util":"^5.32.0","scroll-into-view-if-needed":"^3.0.3","throttle-debounce":"^5.0.0"},jsx:`import React from 'react';
|
|
import { Divider, Space, Tag } from 'antd';
|
|
const App = () => (
|
|
<>
|
|
<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;
|
|
`,description:"<p>We preset a series of colorful tag styles for use in different situations. You can also set it to a hex color string for custom color.</p>"}},{demo:{id:"components-tag-demo-colorful-inverse"},previewerProps:{debug:!0,title:"Inverse Colorful Tag",filename:"components/tag/demo/colorful-inverse.tsx",pkgDependencyList:{"@ant-design/colors":"^7.0.0","@ant-design/cssinjs":"^1.10.1","@ant-design/icons":"^5.1.0","@ant-design/react-slick":"~1.0.0","@babel/runtime":"^7.18.3","@ctrl/tinycolor":"^3.6.0","@rc-component/color-picker":"~1.4.0","@rc-component/mutate-observer":"^1.0.0","@rc-component/tour":"~1.8.0","@rc-component/trigger":"^1.13.0",classnames:"^2.2.6","copy-to-clipboard":"^3.2.0",dayjs:"^1.11.1","qrcode.react":"^3.1.0","rc-cascader":"~3.12.0","rc-checkbox":"~3.1.0","rc-collapse":"~3.7.0","rc-dialog":"~9.1.0","rc-drawer":"~6.2.0","rc-dropdown":"~4.1.0","rc-field-form":"~1.34.0","rc-image":"~7.0.0","rc-input":"~1.1.0","rc-input-number":"~8.0.2","rc-mentions":"~2.5.0","rc-menu":"~9.10.0","rc-motion":"^2.7.3","rc-notification":"~5.0.4","rc-pagination":"~3.5.0","rc-picker":"~3.10.0","rc-progress":"~3.4.1","rc-rate":"~2.12.0","rc-resize-observer":"^1.2.0","rc-segmented":"~2.2.0","rc-select":"~14.5.0","rc-slider":"~10.1.0","rc-steps":"~6.0.0","rc-switch":"~4.1.0","rc-table":"~7.32.1","rc-tabs":"~12.9.0","rc-textarea":"~1.3.2","rc-tooltip":"~6.0.0","rc-tree":"~5.7.6","rc-tree-select":"~5.9.0","rc-upload":"~4.3.0","rc-util":"^5.32.0","scroll-into-view-if-needed":"^3.0.3","throttle-debounce":"^5.0.0"},jsx:`import React from 'react';
|
|
import { Space, Tag } from 'antd';
|
|
const App = () => (
|
|
<Space size={[0, 8]} wrap>
|
|
<Tag color="magenta-inverse">magenta</Tag>
|
|
<Tag color="red-inverse">red</Tag>
|
|
<Tag color="volcano-inverse">volcano</Tag>
|
|
<Tag color="orange-inverse">orange</Tag>
|
|
<Tag color="gold-inverse">gold</Tag>
|
|
<Tag color="lime-inverse">lime</Tag>
|
|
<Tag color="green-inverse">green</Tag>
|
|
<Tag color="cyan-inverse">cyan</Tag>
|
|
<Tag color="blue-inverse">blue</Tag>
|
|
<Tag color="geekblue-inverse">geekblue</Tag>
|
|
<Tag color="purple-inverse">purple</Tag>
|
|
</Space>
|
|
);
|
|
export default App;
|
|
`,description:"<p>Internal inverse color tag</p>"}},{demo:{id:"components-tag-demo-control"},previewerProps:{title:"Add & Remove Dynamically",filename:"components/tag/demo/control.tsx",pkgDependencyList:{"@ant-design/colors":"^7.0.0","@ant-design/cssinjs":"^1.10.1","@ant-design/icons":"^5.1.0","@ant-design/react-slick":"~1.0.0","@babel/runtime":"^7.18.3","@ctrl/tinycolor":"^3.6.0","@rc-component/color-picker":"~1.4.0","@rc-component/mutate-observer":"^1.0.0","@rc-component/tour":"~1.8.0","@rc-component/trigger":"^1.13.0",classnames:"^2.2.6","copy-to-clipboard":"^3.2.0",dayjs:"^1.11.1","qrcode.react":"^3.1.0","rc-cascader":"~3.12.0","rc-checkbox":"~3.1.0","rc-collapse":"~3.7.0","rc-dialog":"~9.1.0","rc-drawer":"~6.2.0","rc-dropdown":"~4.1.0","rc-field-form":"~1.34.0","rc-image":"~7.0.0","rc-input":"~1.1.0","rc-input-number":"~8.0.2","rc-mentions":"~2.5.0","rc-menu":"~9.10.0","rc-motion":"^2.7.3","rc-notification":"~5.0.4","rc-pagination":"~3.5.0","rc-picker":"~3.10.0","rc-progress":"~3.4.1","rc-rate":"~2.12.0","rc-resize-observer":"^1.2.0","rc-segmented":"~2.2.0","rc-select":"~14.5.0","rc-slider":"~10.1.0","rc-steps":"~6.0.0","rc-switch":"~4.1.0","rc-table":"~7.32.1","rc-tabs":"~12.9.0","rc-textarea":"~1.3.2","rc-tooltip":"~6.0.0","rc-tree":"~5.7.6","rc-tree-select":"~5.9.0","rc-upload":"~4.3.0","rc-util":"^5.32.0","scroll-into-view-if-needed":"^3.0.3","throttle-debounce":"^5.0.0"},jsx:`import React, { useEffect, useRef, useState } from 'react';
|
|
import { PlusOutlined } from '@ant-design/icons';
|
|
import { Space, Input, Tag, Tooltip, theme } from 'antd';
|
|
const App = () => {
|
|
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(null);
|
|
const editInputRef = useRef(null);
|
|
useEffect(() => {
|
|
if (inputVisible) {
|
|
inputRef.current?.focus();
|
|
}
|
|
}, [inputVisible]);
|
|
useEffect(() => {
|
|
editInputRef.current?.focus();
|
|
}, [inputValue]);
|
|
const handleClose = (removedTag) => {
|
|
const newTags = tags.filter((tag) => tag !== removedTag);
|
|
console.log(newTags);
|
|
setTags(newTags);
|
|
};
|
|
const showInput = () => {
|
|
setInputVisible(true);
|
|
};
|
|
const handleInputChange = (e) => {
|
|
setInputValue(e.target.value);
|
|
};
|
|
const handleInputConfirm = () => {
|
|
if (inputValue && tags.indexOf(inputValue) === -1) {
|
|
setTags([...tags, inputValue]);
|
|
}
|
|
setInputVisible(false);
|
|
setInputValue('');
|
|
};
|
|
const handleEditInputChange = (e) => {
|
|
setEditInputValue(e.target.value);
|
|
};
|
|
const handleEditInputConfirm = () => {
|
|
const newTags = [...tags];
|
|
newTags[editInputIndex] = editInputValue;
|
|
setTags(newTags);
|
|
setEditInputIndex(-1);
|
|
setInputValue('');
|
|
};
|
|
const tagInputStyle = {
|
|
width: 78,
|
|
verticalAlign: 'top',
|
|
};
|
|
const tagPlusStyle = {
|
|
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;
|
|
`,description:"<p>Generating a set of Tags by array, you can add and remove dynamically.</p>"}},{demo:{id:"components-tag-demo-checkable"},previewerProps:{title:"Checkable",filename:"components/tag/demo/checkable.tsx",pkgDependencyList:{"@ant-design/colors":"^7.0.0","@ant-design/cssinjs":"^1.10.1","@ant-design/icons":"^5.1.0","@ant-design/react-slick":"~1.0.0","@babel/runtime":"^7.18.3","@ctrl/tinycolor":"^3.6.0","@rc-component/color-picker":"~1.4.0","@rc-component/mutate-observer":"^1.0.0","@rc-component/tour":"~1.8.0","@rc-component/trigger":"^1.13.0",classnames:"^2.2.6","copy-to-clipboard":"^3.2.0",dayjs:"^1.11.1","qrcode.react":"^3.1.0","rc-cascader":"~3.12.0","rc-checkbox":"~3.1.0","rc-collapse":"~3.7.0","rc-dialog":"~9.1.0","rc-drawer":"~6.2.0","rc-dropdown":"~4.1.0","rc-field-form":"~1.34.0","rc-image":"~7.0.0","rc-input":"~1.1.0","rc-input-number":"~8.0.2","rc-mentions":"~2.5.0","rc-menu":"~9.10.0","rc-motion":"^2.7.3","rc-notification":"~5.0.4","rc-pagination":"~3.5.0","rc-picker":"~3.10.0","rc-progress":"~3.4.1","rc-rate":"~2.12.0","rc-resize-observer":"^1.2.0","rc-segmented":"~2.2.0","rc-select":"~14.5.0","rc-slider":"~10.1.0","rc-steps":"~6.0.0","rc-switch":"~4.1.0","rc-table":"~7.32.1","rc-tabs":"~12.9.0","rc-textarea":"~1.3.2","rc-tooltip":"~6.0.0","rc-tree":"~5.7.6","rc-tree-select":"~5.9.0","rc-upload":"~4.3.0","rc-util":"^5.32.0","scroll-into-view-if-needed":"^3.0.3","throttle-debounce":"^5.0.0"},jsx:`import React, { useState } from 'react';
|
|
import { Space, Tag } from 'antd';
|
|
const { CheckableTag } = Tag;
|
|
const tagsData = ['Movies', 'Books', 'Music', 'Sports'];
|
|
const App = () => {
|
|
const [selectedTags, setSelectedTags] = useState(['Books']);
|
|
const handleChange = (tag, checked) => {
|
|
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;
|
|
`,description:`<p><code>CheckableTag</code> works like Checkbox, click it to toggle checked state.</p>
|
|
<blockquote>
|
|
<p>it is an absolute controlled component and has no uncontrolled mode.</p>
|
|
</blockquote>`}},{demo:{id:"components-tag-demo-animation"},previewerProps:{title:"Animate",filename:"components/tag/demo/animation.tsx",pkgDependencyList:{"@ant-design/colors":"^7.0.0","@ant-design/cssinjs":"^1.10.1","@ant-design/icons":"^5.1.0","@ant-design/react-slick":"~1.0.0","@babel/runtime":"^7.18.3","@ctrl/tinycolor":"^3.6.0","@rc-component/color-picker":"~1.4.0","@rc-component/mutate-observer":"^1.0.0","@rc-component/tour":"~1.8.0","@rc-component/trigger":"^1.13.0",classnames:"^2.2.6","copy-to-clipboard":"^3.2.0",dayjs:"^1.11.1","qrcode.react":"^3.1.0","rc-cascader":"~3.12.0","rc-checkbox":"~3.1.0","rc-collapse":"~3.7.0","rc-dialog":"~9.1.0","rc-drawer":"~6.2.0","rc-dropdown":"~4.1.0","rc-field-form":"~1.34.0","rc-image":"~7.0.0","rc-input":"~1.1.0","rc-input-number":"~8.0.2","rc-mentions":"~2.5.0","rc-menu":"~9.10.0","rc-motion":"^2.7.3","rc-notification":"~5.0.4","rc-pagination":"~3.5.0","rc-picker":"~3.10.0","rc-progress":"~3.4.1","rc-rate":"~2.12.0","rc-resize-observer":"^1.2.0","rc-segmented":"~2.2.0","rc-select":"~14.5.0","rc-slider":"~10.1.0","rc-steps":"~6.0.0","rc-switch":"~4.1.0","rc-table":"~7.32.1","rc-tabs":"~12.9.0","rc-textarea":"~1.3.2","rc-tooltip":"~6.0.0","rc-tree":"~5.7.6","rc-tree-select":"~5.9.0","rc-upload":"~4.3.0","rc-util":"^5.32.0","scroll-into-view-if-needed":"^3.0.3","throttle-debounce":"^5.0.0"},jsx:`import React, { useEffect, useRef, useState } from 'react';
|
|
import { PlusOutlined } from '@ant-design/icons';
|
|
import { Input, Tag, theme } from 'antd';
|
|
import { TweenOneGroup } from 'rc-tween-one';
|
|
const App = () => {
|
|
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(null);
|
|
useEffect(() => {
|
|
if (inputVisible) {
|
|
inputRef.current?.focus();
|
|
}
|
|
}, [inputVisible]);
|
|
const handleClose = (removedTag) => {
|
|
const newTags = tags.filter((tag) => tag !== removedTag);
|
|
console.log(newTags);
|
|
setTags(newTags);
|
|
};
|
|
const showInput = () => {
|
|
setInputVisible(true);
|
|
};
|
|
const handleInputChange = (e) => {
|
|
setInputValue(e.target.value);
|
|
};
|
|
const handleInputConfirm = () => {
|
|
if (inputValue && tags.indexOf(inputValue) === -1) {
|
|
setTags([...tags, inputValue]);
|
|
}
|
|
setInputVisible(false);
|
|
setInputValue('');
|
|
};
|
|
const forMap = (tag) => {
|
|
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.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;
|
|
`,description:'<p>Animating the Tag by using <a href="https://github.com/react-component/tween-one">rc-tween-one</a>.</p>'}},{demo:{id:"components-tag-demo-icon"},previewerProps:{title:"Icon",filename:"components/tag/demo/icon.tsx",pkgDependencyList:{"@ant-design/colors":"^7.0.0","@ant-design/cssinjs":"^1.10.1","@ant-design/icons":"^5.1.0","@ant-design/react-slick":"~1.0.0","@babel/runtime":"^7.18.3","@ctrl/tinycolor":"^3.6.0","@rc-component/color-picker":"~1.4.0","@rc-component/mutate-observer":"^1.0.0","@rc-component/tour":"~1.8.0","@rc-component/trigger":"^1.13.0",classnames:"^2.2.6","copy-to-clipboard":"^3.2.0",dayjs:"^1.11.1","qrcode.react":"^3.1.0","rc-cascader":"~3.12.0","rc-checkbox":"~3.1.0","rc-collapse":"~3.7.0","rc-dialog":"~9.1.0","rc-drawer":"~6.2.0","rc-dropdown":"~4.1.0","rc-field-form":"~1.34.0","rc-image":"~7.0.0","rc-input":"~1.1.0","rc-input-number":"~8.0.2","rc-mentions":"~2.5.0","rc-menu":"~9.10.0","rc-motion":"^2.7.3","rc-notification":"~5.0.4","rc-pagination":"~3.5.0","rc-picker":"~3.10.0","rc-progress":"~3.4.1","rc-rate":"~2.12.0","rc-resize-observer":"^1.2.0","rc-segmented":"~2.2.0","rc-select":"~14.5.0","rc-slider":"~10.1.0","rc-steps":"~6.0.0","rc-switch":"~4.1.0","rc-table":"~7.32.1","rc-tabs":"~12.9.0","rc-textarea":"~1.3.2","rc-tooltip":"~6.0.0","rc-tree":"~5.7.6","rc-tree-select":"~5.9.0","rc-upload":"~4.3.0","rc-util":"^5.32.0","scroll-into-view-if-needed":"^3.0.3","throttle-debounce":"^5.0.0"},jsx:`import React from 'react';
|
|
import {
|
|
FacebookOutlined,
|
|
LinkedinOutlined,
|
|
TwitterOutlined,
|
|
YoutubeOutlined,
|
|
} from '@ant-design/icons';
|
|
import { Space, Tag } from 'antd';
|
|
const App = () => (
|
|
<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;
|
|
`,description:`<p><code>Tag</code> components can contain an <code>Icon</code>. This is done by setting the <code>icon</code> property or placing an <code>Icon</code> component within the <code>Tag</code>.</p>
|
|
<p>If you want specific control over the positioning and placement of the <code>Icon</code>, then that should be done by placing the <code>Icon</code> component within the <code>Tag</code> rather than using the <code>icon</code> property.</p>`}},{demo:{id:"components-tag-demo-status"},previewerProps:{title:"Status Tag",filename:"components/tag/demo/status.tsx",pkgDependencyList:{"@ant-design/colors":"^7.0.0","@ant-design/cssinjs":"^1.10.1","@ant-design/icons":"^5.1.0","@ant-design/react-slick":"~1.0.0","@babel/runtime":"^7.18.3","@ctrl/tinycolor":"^3.6.0","@rc-component/color-picker":"~1.4.0","@rc-component/mutate-observer":"^1.0.0","@rc-component/tour":"~1.8.0","@rc-component/trigger":"^1.13.0",classnames:"^2.2.6","copy-to-clipboard":"^3.2.0",dayjs:"^1.11.1","qrcode.react":"^3.1.0","rc-cascader":"~3.12.0","rc-checkbox":"~3.1.0","rc-collapse":"~3.7.0","rc-dialog":"~9.1.0","rc-drawer":"~6.2.0","rc-dropdown":"~4.1.0","rc-field-form":"~1.34.0","rc-image":"~7.0.0","rc-input":"~1.1.0","rc-input-number":"~8.0.2","rc-mentions":"~2.5.0","rc-menu":"~9.10.0","rc-motion":"^2.7.3","rc-notification":"~5.0.4","rc-pagination":"~3.5.0","rc-picker":"~3.10.0","rc-progress":"~3.4.1","rc-rate":"~2.12.0","rc-resize-observer":"^1.2.0","rc-segmented":"~2.2.0","rc-select":"~14.5.0","rc-slider":"~10.1.0","rc-steps":"~6.0.0","rc-switch":"~4.1.0","rc-table":"~7.32.1","rc-tabs":"~12.9.0","rc-textarea":"~1.3.2","rc-tooltip":"~6.0.0","rc-tree":"~5.7.6","rc-tree-select":"~5.9.0","rc-upload":"~4.3.0","rc-util":"^5.32.0","scroll-into-view-if-needed":"^3.0.3","throttle-debounce":"^5.0.0"},jsx:`import React from 'react';
|
|
import {
|
|
CheckCircleOutlined,
|
|
ClockCircleOutlined,
|
|
CloseCircleOutlined,
|
|
ExclamationCircleOutlined,
|
|
MinusCircleOutlined,
|
|
SyncOutlined,
|
|
} from '@ant-design/icons';
|
|
import { Divider, Space, Tag } from 'antd';
|
|
const App = () => (
|
|
<>
|
|
<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;
|
|
`,description:"<p>We preset five different colors, you can set color property such as <code>success</code>,<code>processing</code>,<code>error</code>,<code>default</code> and <code>warning</code> to indicate specific status.</p>"}},{demo:{id:"components-tag-demo-borderless"},previewerProps:{title:"borderless",filename:"components/tag/demo/borderless.tsx",pkgDependencyList:{"@ant-design/colors":"^7.0.0","@ant-design/cssinjs":"^1.10.1","@ant-design/icons":"^5.1.0","@ant-design/react-slick":"~1.0.0","@babel/runtime":"^7.18.3","@ctrl/tinycolor":"^3.6.0","@rc-component/color-picker":"~1.4.0","@rc-component/mutate-observer":"^1.0.0","@rc-component/tour":"~1.8.0","@rc-component/trigger":"^1.13.0",classnames:"^2.2.6","copy-to-clipboard":"^3.2.0",dayjs:"^1.11.1","qrcode.react":"^3.1.0","rc-cascader":"~3.12.0","rc-checkbox":"~3.1.0","rc-collapse":"~3.7.0","rc-dialog":"~9.1.0","rc-drawer":"~6.2.0","rc-dropdown":"~4.1.0","rc-field-form":"~1.34.0","rc-image":"~7.0.0","rc-input":"~1.1.0","rc-input-number":"~8.0.2","rc-mentions":"~2.5.0","rc-menu":"~9.10.0","rc-motion":"^2.7.3","rc-notification":"~5.0.4","rc-pagination":"~3.5.0","rc-picker":"~3.10.0","rc-progress":"~3.4.1","rc-rate":"~2.12.0","rc-resize-observer":"^1.2.0","rc-segmented":"~2.2.0","rc-select":"~14.5.0","rc-slider":"~10.1.0","rc-steps":"~6.0.0","rc-switch":"~4.1.0","rc-table":"~7.32.1","rc-tabs":"~12.9.0","rc-textarea":"~1.3.2","rc-tooltip":"~6.0.0","rc-tree":"~5.7.6","rc-tree-select":"~5.9.0","rc-upload":"~4.3.0","rc-util":"^5.32.0","scroll-into-view-if-needed":"^3.0.3","throttle-debounce":"^5.0.0"},jsx:`import { Divider, Space, Tag } from 'antd';
|
|
import React from 'react';
|
|
const App = () => (
|
|
<>
|
|
<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;
|
|
`,description:"<p>borderless.</p>"}},{demo:{id:"components-tag-demo-borderlesslayout"},previewerProps:{debug:!0,title:"borderless in layout",filename:"components/tag/demo/borderlessLayout.tsx",pkgDependencyList:{"@ant-design/colors":"^7.0.0","@ant-design/cssinjs":"^1.10.1","@ant-design/icons":"^5.1.0","@ant-design/react-slick":"~1.0.0","@babel/runtime":"^7.18.3","@ctrl/tinycolor":"^3.6.0","@rc-component/color-picker":"~1.4.0","@rc-component/mutate-observer":"^1.0.0","@rc-component/tour":"~1.8.0","@rc-component/trigger":"^1.13.0",classnames:"^2.2.6","copy-to-clipboard":"^3.2.0",dayjs:"^1.11.1","qrcode.react":"^3.1.0","rc-cascader":"~3.12.0","rc-checkbox":"~3.1.0","rc-collapse":"~3.7.0","rc-dialog":"~9.1.0","rc-drawer":"~6.2.0","rc-dropdown":"~4.1.0","rc-field-form":"~1.34.0","rc-image":"~7.0.0","rc-input":"~1.1.0","rc-input-number":"~8.0.2","rc-mentions":"~2.5.0","rc-menu":"~9.10.0","rc-motion":"^2.7.3","rc-notification":"~5.0.4","rc-pagination":"~3.5.0","rc-picker":"~3.10.0","rc-progress":"~3.4.1","rc-rate":"~2.12.0","rc-resize-observer":"^1.2.0","rc-segmented":"~2.2.0","rc-select":"~14.5.0","rc-slider":"~10.1.0","rc-steps":"~6.0.0","rc-switch":"~4.1.0","rc-table":"~7.32.1","rc-tabs":"~12.9.0","rc-textarea":"~1.3.2","rc-tooltip":"~6.0.0","rc-tree":"~5.7.6","rc-tree-select":"~5.9.0","rc-upload":"~4.3.0","rc-util":"^5.32.0","scroll-into-view-if-needed":"^3.0.3","throttle-debounce":"^5.0.0"},jsx:`import { Divider, Space, Tag, theme } from 'antd';
|
|
import React from 'react';
|
|
const App = () => {
|
|
const { token } = theme.useToken();
|
|
return (
|
|
<div
|
|
style={{
|
|
backgroundColor: token.colorBgLayout,
|
|
padding: 16,
|
|
}}
|
|
>
|
|
<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="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>
|
|
</div>
|
|
);
|
|
};
|
|
export default App;
|
|
`,description:"<p>borderless in layout background.</p>"}},{demo:{id:"components-tag-demo-customize"},previewerProps:{debug:!0,title:"Customize close",filename:"components/tag/demo/customize.tsx",pkgDependencyList:{"@ant-design/colors":"^7.0.0","@ant-design/cssinjs":"^1.10.1","@ant-design/icons":"^5.1.0","@ant-design/react-slick":"~1.0.0","@babel/runtime":"^7.18.3","@ctrl/tinycolor":"^3.6.0","@rc-component/color-picker":"~1.4.0","@rc-component/mutate-observer":"^1.0.0","@rc-component/tour":"~1.8.0","@rc-component/trigger":"^1.13.0",classnames:"^2.2.6","copy-to-clipboard":"^3.2.0",dayjs:"^1.11.1","qrcode.react":"^3.1.0","rc-cascader":"~3.12.0","rc-checkbox":"~3.1.0","rc-collapse":"~3.7.0","rc-dialog":"~9.1.0","rc-drawer":"~6.2.0","rc-dropdown":"~4.1.0","rc-field-form":"~1.34.0","rc-image":"~7.0.0","rc-input":"~1.1.0","rc-input-number":"~8.0.2","rc-mentions":"~2.5.0","rc-menu":"~9.10.0","rc-motion":"^2.7.3","rc-notification":"~5.0.4","rc-pagination":"~3.5.0","rc-picker":"~3.10.0","rc-progress":"~3.4.1","rc-rate":"~2.12.0","rc-resize-observer":"^1.2.0","rc-segmented":"~2.2.0","rc-select":"~14.5.0","rc-slider":"~10.1.0","rc-steps":"~6.0.0","rc-switch":"~4.1.0","rc-table":"~7.32.1","rc-tabs":"~12.9.0","rc-textarea":"~1.3.2","rc-tooltip":"~6.0.0","rc-tree":"~5.7.6","rc-tree-select":"~5.9.0","rc-upload":"~4.3.0","rc-util":"^5.32.0","scroll-into-view-if-needed":"^3.0.3","throttle-debounce":"^5.0.0"},jsx:`import React from 'react';
|
|
import { CloseCircleOutlined } from '@ant-design/icons';
|
|
import { Tag } from 'antd';
|
|
const App = () => (
|
|
<>
|
|
<Tag closable closeIcon="\u5173 \u95ED">
|
|
Tag1
|
|
</Tag>
|
|
<Tag closable closeIcon={<CloseCircleOutlined />}>
|
|
Tag2
|
|
</Tag>
|
|
</>
|
|
);
|
|
export default App;
|
|
`,description:"<p>The close icon can be customized using <code>closeIcon</code>.</p>"}},{demo:{id:"components-tag-demo-draggable"},previewerProps:{title:"Draggable Tag",filename:"components/tag/demo/draggable.tsx",pkgDependencyList:{"@ant-design/colors":"^7.0.0","@ant-design/cssinjs":"^1.10.1","@ant-design/icons":"^5.1.0","@ant-design/react-slick":"~1.0.0","@babel/runtime":"^7.18.3","@ctrl/tinycolor":"^3.6.0","@rc-component/color-picker":"~1.4.0","@rc-component/mutate-observer":"^1.0.0","@rc-component/tour":"~1.8.0","@rc-component/trigger":"^1.13.0",classnames:"^2.2.6","copy-to-clipboard":"^3.2.0",dayjs:"^1.11.1","qrcode.react":"^3.1.0","rc-cascader":"~3.12.0","rc-checkbox":"~3.1.0","rc-collapse":"~3.7.0","rc-dialog":"~9.1.0","rc-drawer":"~6.2.0","rc-dropdown":"~4.1.0","rc-field-form":"~1.34.0","rc-image":"~7.0.0","rc-input":"~1.1.0","rc-input-number":"~8.0.2","rc-mentions":"~2.5.0","rc-menu":"~9.10.0","rc-motion":"^2.7.3","rc-notification":"~5.0.4","rc-pagination":"~3.5.0","rc-picker":"~3.10.0","rc-progress":"~3.4.1","rc-rate":"~2.12.0","rc-resize-observer":"^1.2.0","rc-segmented":"~2.2.0","rc-select":"~14.5.0","rc-slider":"~10.1.0","rc-steps":"~6.0.0","rc-switch":"~4.1.0","rc-table":"~7.32.1","rc-tabs":"~12.9.0","rc-textarea":"~1.3.2","rc-tooltip":"~6.0.0","rc-tree":"~5.7.6","rc-tree-select":"~5.9.0","rc-upload":"~4.3.0","rc-util":"^5.32.0","scroll-into-view-if-needed":"^3.0.3","throttle-debounce":"^5.0.0"},jsx:`import { DndContext, PointerSensor, closestCenter, useSensor, useSensors } from '@dnd-kit/core';
|
|
import {
|
|
SortableContext,
|
|
arrayMove,
|
|
horizontalListSortingStrategy,
|
|
useSortable,
|
|
} from '@dnd-kit/sortable';
|
|
import { Tag } from 'antd';
|
|
import React, { useState } from 'react';
|
|
const DraggableTag = (props) => {
|
|
const { tag } = props;
|
|
const { listeners, setNodeRef, transform, transition, isDragging } = useSortable({
|
|
id: tag.id,
|
|
});
|
|
const commonStyle = {
|
|
cursor: 'move',
|
|
transition: 'unset', // Prevent element from shaking after drag
|
|
};
|
|
|
|
const style = transform
|
|
? {
|
|
...commonStyle,
|
|
transform: \`translate3d(\${transform.x}px, \${transform.y}px, 0)\`,
|
|
transition: isDragging ? 'unset' : transition, // Improve performance/visual effect when dragging
|
|
}
|
|
: commonStyle;
|
|
return (
|
|
<Tag style={style} ref={setNodeRef} {...listeners}>
|
|
{tag.text}
|
|
</Tag>
|
|
);
|
|
};
|
|
const App = () => {
|
|
const [items, setItems] = useState([
|
|
{
|
|
id: 1,
|
|
text: 'Tag 1',
|
|
},
|
|
{
|
|
id: 2,
|
|
text: 'Tag 2',
|
|
},
|
|
{
|
|
id: 3,
|
|
text: 'Tag 3',
|
|
},
|
|
]);
|
|
const sensors = useSensors(useSensor(PointerSensor));
|
|
const handleDragEnd = (event) => {
|
|
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;
|
|
`,description:'<p>Draggable tags using <a href="https://dndkit.com">dnd kit</a>.</p>'}},{demo:{id:"components-tag-demo-component-token"},previewerProps:{debug:!0,title:"Component Token",filename:"components/tag/demo/component-token.tsx",pkgDependencyList:{"@ant-design/colors":"^7.0.0","@ant-design/cssinjs":"^1.10.1","@ant-design/icons":"^5.1.0","@ant-design/react-slick":"~1.0.0","@babel/runtime":"^7.18.3","@ctrl/tinycolor":"^3.6.0","@rc-component/color-picker":"~1.4.0","@rc-component/mutate-observer":"^1.0.0","@rc-component/tour":"~1.8.0","@rc-component/trigger":"^1.13.0",classnames:"^2.2.6","copy-to-clipboard":"^3.2.0",dayjs:"^1.11.1","qrcode.react":"^3.1.0","rc-cascader":"~3.12.0","rc-checkbox":"~3.1.0","rc-collapse":"~3.7.0","rc-dialog":"~9.1.0","rc-drawer":"~6.2.0","rc-dropdown":"~4.1.0","rc-field-form":"~1.34.0","rc-image":"~7.0.0","rc-input":"~1.1.0","rc-input-number":"~8.0.2","rc-mentions":"~2.5.0","rc-menu":"~9.10.0","rc-motion":"^2.7.3","rc-notification":"~5.0.4","rc-pagination":"~3.5.0","rc-picker":"~3.10.0","rc-progress":"~3.4.1","rc-rate":"~2.12.0","rc-resize-observer":"^1.2.0","rc-segmented":"~2.2.0","rc-select":"~14.5.0","rc-slider":"~10.1.0","rc-steps":"~6.0.0","rc-switch":"~4.1.0","rc-table":"~7.32.1","rc-tabs":"~12.9.0","rc-textarea":"~1.3.2","rc-tooltip":"~6.0.0","rc-tree":"~5.7.6","rc-tree-select":"~5.9.0","rc-upload":"~4.3.0","rc-util":"^5.32.0","scroll-into-view-if-needed":"^3.0.3","throttle-debounce":"^5.0.0"},jsx:`import { CloseCircleOutlined, SyncOutlined } from '@ant-design/icons';
|
|
import { ConfigProvider, Space, Tag } from 'antd';
|
|
import React from 'react';
|
|
export default () => (
|
|
<ConfigProvider
|
|
theme={{
|
|
components: {
|
|
Tag: {
|
|
defaultBg: '#f9f0ff',
|
|
defaultColor: '#4b34d3',
|
|
},
|
|
},
|
|
}}
|
|
>
|
|
<Space size={[0, 8]} wrap>
|
|
<Tag>
|
|
<a href="https://github.com/ant-design/ant-design/issues/1862">Link</a>
|
|
</Tag>
|
|
<Tag closable color="magenta">
|
|
Tag 2
|
|
</Tag>
|
|
<Tag icon={<CloseCircleOutlined />} color="error">
|
|
error
|
|
</Tag>
|
|
<Tag color="red-inverse">red</Tag>
|
|
<Tag bordered={false} color="magenta">
|
|
magenta
|
|
</Tag>
|
|
<Tag icon={<SyncOutlined spin />} color="processing">
|
|
processing
|
|
</Tag>
|
|
</Space>
|
|
</ConfigProvider>
|
|
);
|
|
`,description:"<p>Component Token Debug.</p>"}}]}),(0,e.tZ)("div",{className:"markdown"},(0,e.tZ)("h2",{id:"api"},(0,e.tZ)(r.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#api",sourceType:"a"},(0,e.tZ)("span",{className:"icon icon-link"})),"API"),(0,e.tZ)("h3",{id:"tag"},(0,e.tZ)(r.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#tag",sourceType:"a"},(0,e.tZ)("span",{className:"icon icon-link"})),"Tag"),(0,e.tZ)(a.Z,{className:"component-api-table"},(0,e.tZ)("thead",null,(0,e.tZ)("tr",null,(0,e.tZ)("th",null,n[3].value),(0,e.tZ)("th",null,n[4].value),(0,e.tZ)("th",null,n[5].value),(0,e.tZ)("th",null,n[6].value),(0,e.tZ)("th",null,n[7].value))),(0,e.tZ)("tbody",null,(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[8].value),(0,e.tZ)("td",null,n[9].value,(0,e.tZ)("code",null,n[10].value),n[11].value,(0,e.tZ)("code",null,n[12].value)),(0,e.tZ)("td",null,n[13].value),(0,e.tZ)("td",null,n[14].value),(0,e.tZ)("td",null,n[15].value)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[16].value),(0,e.tZ)("td",null,n[17].value),(0,e.tZ)("td",null,n[18].value),(0,e.tZ)("td",null,n[19].value),(0,e.tZ)("td",null)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[20].value),(0,e.tZ)("td",null,n[21].value),(0,e.tZ)("td",null,n[22].value),(0,e.tZ)("td",null,n[23].value),(0,e.tZ)("td",null)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[24].value),(0,e.tZ)("td",null,n[25].value),(0,e.tZ)("td",null,n[26].value),(0,e.tZ)("td",null,n[27].value),(0,e.tZ)("td",null,n[28].value)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[29].value),(0,e.tZ)("td",null,n[30].value),(0,e.tZ)("td",null,n[31].value),(0,e.tZ)("td",null,n[32].value),(0,e.tZ)("td",null)))),(0,e.tZ)("h3",{id:"tagcheckabletag"},(0,e.tZ)(r.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#tagcheckabletag",sourceType:"a"},(0,e.tZ)("span",{className:"icon icon-link"})),"Tag.CheckableTag"),(0,e.tZ)(a.Z,{className:"component-api-table"},(0,e.tZ)("thead",null,(0,e.tZ)("tr",null,(0,e.tZ)("th",null,n[33].value),(0,e.tZ)("th",null,n[34].value),(0,e.tZ)("th",null,n[35].value),(0,e.tZ)("th",null,n[36].value))),(0,e.tZ)("tbody",null,(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[37].value),(0,e.tZ)("td",null,n[38].value),(0,e.tZ)("td",null,n[39].value),(0,e.tZ)("td",null,n[40].value)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[41].value),(0,e.tZ)("td",null,n[42].value),(0,e.tZ)("td",null,n[43].value),(0,e.tZ)("td",null,n[44].value)))),(0,e.tZ)("h2",{id:"design-token"},(0,e.tZ)(r.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#design-token",sourceType:"a"},(0,e.tZ)("span",{className:"icon icon-link"})),"Design Token")),(0,e.tZ)(s.Z,{component:"Tag"})))}o.default=d}}]);
|
|
|