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
41 KiB
665 lines
41 KiB
"use strict";(self.webpackChunkantd=self.webpackChunkantd||[]).push([[633],{256227:function(u,o,t){t.r(o);var p=t(502143),m=t(968521),_=t(720719),T=t(28840),f=t(759907),c=t(828089),b=t(825673),v=t(902068),h=t(574399),k=t(863942),x=t(316073),C=t(24628),E=t(719260),I=t(956140),i=t(127179),s=t(905388),w=t(40428),y=t(606965),D=t(268696),P=t(587302),r=t(424128),O=t(249706),Z=t(795127),S=t(116846),M=t(212039),R=t(73024),A=t(553913),a=t(606641),l=t(667294),e=t(370917);function d(){var g=(0,a.eL)(),n=g.texts;return(0,e.tZ)(a.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:"\u4F55\u65F6\u4F7F\u7528"},(0,e.tZ)(r.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#\u4F55\u65F6\u4F7F\u7528",sourceType:"a"},(0,e.tZ)("span",{className:"icon icon-link"})),"\u4F55\u65F6\u4F7F\u7528"),(0,e.tZ)("ul",null,(0,e.tZ)("li",null,n[1].value),(0,e.tZ)("li",null,n[2].value)),(0,e.tZ)("h2",{id:"\u4EE3\u7801\u6F14\u793A"},(0,e.tZ)(r.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#\u4EE3\u7801\u6F14\u793A",sourceType:"a"},(0,e.tZ)("span",{className:"icon icon-link"})),"\u4EE3\u7801\u6F14\u793A")),(0,e.tZ)(s.Z,{items:[{demo:{id:"components-tag-demo-basic"},previewerProps:{title:"\u57FA\u672C",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>\u57FA\u672C\u6807\u7B7E\u7684\u7528\u6CD5\uFF0C\u53EF\u4EE5\u901A\u8FC7\u8BBE\u7F6E <code>closeIcon</code> \u53D8\u4E3A\u53EF\u5173\u95ED\u6807\u7B7E\u5E76\u81EA\u5B9A\u4E49\u5173\u95ED\u6309\u94AE\uFF0C\u8BBE\u7F6E\u4E3A <code>true</code> \u65F6\u5C06\u4F7F\u7528\u9ED8\u8BA4\u5173\u95ED\u6309\u94AE\u3002\u53EF\u5173\u95ED\u6807\u7B7E\u5177\u6709 <code>onClose</code> \u4E8B\u4EF6\u3002</p>"}},{demo:{id:"components-tag-demo-colorful"},previewerProps:{title:"\u591A\u5F69\u6807\u7B7E",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>\u6211\u4EEC\u6DFB\u52A0\u4E86\u591A\u79CD\u9884\u8BBE\u8272\u5F69\u7684\u6807\u7B7E\u6837\u5F0F\uFF0C\u7528\u4F5C\u4E0D\u540C\u573A\u666F\u4F7F\u7528\u3002\u5982\u679C\u9884\u8BBE\u503C\u4E0D\u80FD\u6EE1\u8DB3\u4F60\u7684\u9700\u6C42\uFF0C\u53EF\u4EE5\u8BBE\u7F6E\u4E3A\u5177\u4F53\u7684\u8272\u503C\u3002</p>"}},{demo:{id:"components-tag-demo-colorful-inverse"},previewerProps:{debug:!0,title:"\u53CD\u8272\u591A\u5F69\u6807\u7B7E",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>\u5185\u90E8\u53CD\u8272\u6807\u7B7E</p>"}},{demo:{id:"components-tag-demo-control"},previewerProps:{title:"\u52A8\u6001\u6DFB\u52A0\u548C\u5220\u9664",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>\u7528\u6570\u7EC4\u751F\u6210\u4E00\u7EC4\u6807\u7B7E\uFF0C\u53EF\u4EE5\u52A8\u6001\u6DFB\u52A0\u548C\u5220\u9664\u3002</p>"}},{demo:{id:"components-tag-demo-checkable"},previewerProps:{title:"\u53EF\u9009\u62E9\u6807\u7B7E",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>\u53EF\u901A\u8FC7 <code>CheckableTag</code> \u5B9E\u73B0\u7C7B\u4F3C Checkbox \u7684\u6548\u679C\uFF0C\u70B9\u51FB\u5207\u6362\u9009\u4E2D\u6548\u679C\u3002</p>
|
|
<blockquote>
|
|
<p>\u8BE5\u7EC4\u4EF6\u4E3A\u5B8C\u5168\u53D7\u63A7\u7EC4\u4EF6\uFF0C\u4E0D\u652F\u6301\u975E\u53D7\u63A7\u7528\u6CD5\u3002</p>
|
|
</blockquote>`}},{demo:{id:"components-tag-demo-animation"},previewerProps:{title:"\u6DFB\u52A0\u52A8\u753B",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>\u4F7F\u7528 <a href="https://github.com/react-component/tween-one">rc-tween-one</a> \u7ED9\u6807\u7B7E\u589E\u52A0\u6DFB\u52A0\u6216\u5220\u9664\u52A8\u753B\u3002</p>'}},{demo:{id:"components-tag-demo-icon"},previewerProps:{title:"\u56FE\u6807\u6309\u94AE",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>\u5F53\u9700\u8981\u5728 <code>Tag</code> \u5185\u5D4C\u5165 <code>Icon</code> \u65F6\uFF0C\u53EF\u4EE5\u8BBE\u7F6E <code>icon</code> \u5C5E\u6027\uFF0C\u6216\u8005\u76F4\u63A5\u5728 <code>Tag</code> \u5185\u4F7F\u7528 <code>Icon</code> \u7EC4\u4EF6\u3002</p>
|
|
<p>\u5982\u679C\u60F3\u63A7\u5236 <code>Icon</code> \u5177\u4F53\u7684\u4F4D\u7F6E\uFF0C\u53EA\u80FD\u76F4\u63A5\u4F7F\u7528 <code>Icon</code> \u7EC4\u4EF6\uFF0C\u800C\u975E <code>icon</code> \u5C5E\u6027\u3002</p>`}},{demo:{id:"components-tag-demo-status"},previewerProps:{title:"\u9884\u8BBE\u72B6\u6001\u7684\u6807\u7B7E",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>\u9884\u8BBE\u4E94\u79CD\u72B6\u6001\u989C\u8272\uFF0C\u53EF\u4EE5\u901A\u8FC7\u8BBE\u7F6E <code>color</code> \u4E3A <code>success</code>\u3001 <code>processing</code>\u3001<code>error</code>\u3001<code>default</code>\u3001<code>warning</code> \u6765\u4EE3\u8868\u4E0D\u540C\u7684\u72B6\u6001\u3002</p>"}},{demo:{id:"components-tag-demo-borderless"},previewerProps:{title:"\u65E0\u8FB9\u6846",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>\u65E0\u8FB9\u6846\u6A21\u5F0F\u3002</p>"}},{demo:{id:"components-tag-demo-borderlesslayout"},previewerProps:{debug:!0,title:"\u6DF1\u8272\u80CC\u666F\u4E2D\u65E0\u8FB9\u6846",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>\u6DF1\u8272\u80CC\u666F\u4E2D\u7684\u65E0\u8FB9\u6846\u6A21\u5F0F\u3002</p>"}},{demo:{id:"components-tag-demo-customize"},previewerProps:{debug:!0,title:"\u81EA\u5B9A\u4E49\u5173\u95ED\u6309\u94AE",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>\u53EF\u7528 <code>closeIcon</code> \u81EA\u5B9A\u4E49\u5173\u95ED\u6309\u94AE\u3002</p>"}},{demo:{id:"components-tag-demo-draggable"},previewerProps:{title:"\u53EF\u62D6\u62FD\u6807\u7B7E",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>\u4F7F\u7528 <a href="https://dndkit.com">dnd kit</a> \u5B9E\u73B0\u7684\u53EF\u62D6\u62FD\u6807\u7B7E\u3002</p>'}},{demo:{id:"components-tag-demo-component-token"},previewerProps:{debug:!0,title:"\u7EC4\u4EF6 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)(c.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),n[13].value),(0,e.tZ)("td",null,n[14].value),(0,e.tZ)("td",null,n[15].value),(0,e.tZ)("td",null,n[16].value)),(0,e.tZ)("tr",null,(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,n[20].value),(0,e.tZ)("td",null)),(0,e.tZ)("tr",null,(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,n[24].value),(0,e.tZ)("td",null)),(0,e.tZ)("tr",null,(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)("td",null,n[29].value)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[30].value),(0,e.tZ)("td",null,n[31].value,(0,e.tZ)("code",null,n[32].value),n[33].value),(0,e.tZ)("td",null,n[34].value),(0,e.tZ)("td",null,n[35].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)(c.Z,{className:"component-api-table"},(0,e.tZ)("thead",null,(0,e.tZ)("tr",null,(0,e.tZ)("th",null,n[36].value),(0,e.tZ)("th",null,n[37].value),(0,e.tZ)("th",null,n[38].value),(0,e.tZ)("th",null,n[39].value))),(0,e.tZ)("tbody",null,(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[40].value),(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)("tr",null,(0,e.tZ)("td",null,n[44].value),(0,e.tZ)("td",null,n[45].value),(0,e.tZ)("td",null,n[46].value),(0,e.tZ)("td",null,n[47].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)(i.Z,{component:"Tag"})))}o.default=d}}]);
|
|
|