test/ant-design
1
0
Fork 0
mirror of https://gitee.com/ant-design/ant-design.git synced 2024-11-29 18:50:00 +08:00
Code Issues Actions 48 Packages Projects Releases Wiki Activity

demo: update wrap="wrap" => wrap (#48409)

Browse Source
This commit is contained in:
lijianan 2024-04-12 12:10:38 +08:00 committed by GitHub
parent a09b9dd820
commit d34ab00717
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
38 changed files with 52 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.dumi/pages/index/components/Theme/ColorPicker.tsx
View File

@ -91,7 +91,7 @@ const ThemeColorPicker: React.FC<ColorPickerProps> = ({ value, onChange, id }) =
}, [value]); }, [value]);
return ( return (
<Flex gap="large" align="center" wrap="wrap"> <Flex gap="large" align="center" wrap>
<Input <Input
value={typeof value === 'string' ? value : value?.toHexString()} value={typeof value === 'string' ? value : value?.toHexString()}
onChange={(event) => onChange?.(event.target.value)} onChange={(event) => onChange?.(event.target.value)}

2
.dumi/pages/index/components/Theme/ThemePicker.tsx
View File

@ -84,7 +84,7 @@ const ThemePicker: React.FC<ThemePickerProps> = (props) => {
const { styles } = useStyle(); const { styles } = useStyle();
const [locale] = useLocale(locales); const [locale] = useLocale(locales);
return ( return (
<Flex gap="large" wrap="wrap"> <Flex gap="large" wrap>
{(Object.keys(THEMES) as (keyof typeof THEMES)[]).map<React.ReactNode>((theme, index) => ( {(Object.keys(THEMES) as (keyof typeof THEMES)[]).map<React.ReactNode>((theme, index) => (
<Flex vertical gap="small" justify="center" align="center" key={theme}> <Flex vertical gap="small" justify="center" align="center" key={theme}>
<label <label

3
.dumi/theme/builtins/Previewer/CodePreviewer.tsx
View File

@ -405,8 +405,7 @@ createRoot(document.getElementById('container')).render(<Demo />);
dangerouslySetInnerHTML={{ __html: description }} dangerouslySetInnerHTML={{ __html: description }}
/> />
)} )}
<Flex wrap gap="middle" className="code-box-actions">
<Flex wrap="wrap" gap="middle" className="code-box-actions">
{showOnlineUrl && ( {showOnlineUrl && (
<Tooltip title={<FormattedMessage id="app.demo.online" />}> <Tooltip title={<FormattedMessage id="app.demo.online" />}>
<a <a

2
components/button/demo/basic.tsx
View File

@ -2,7 +2,7 @@ import React from 'react';
import { Button, Flex } from 'antd'; import { Button, Flex } from 'antd';
const App: React.FC = () => ( const App: React.FC = () => (
<Flex gap="small" wrap="wrap"> <Flex gap="small" wrap>
<Button type="primary">Primary Button</Button> <Button type="primary">Primary Button</Button>
<Button>Default Button</Button> <Button>Default Button</Button>
<Button type="dashed">Dashed Button</Button> <Button type="dashed">Dashed Button</Button>

2
components/button/demo/chinese-chars-loading.tsx
View File

@ -7,7 +7,7 @@ const Text2 = () => <span>部署</span>;
const Text3 = () => <>Submit</>; const Text3 = () => <>Submit</>;
const App: React.FC = () => ( const App: React.FC = () => (
<Flex wrap="wrap" gap="small"> <Flex wrap gap="small">
<Button> <Button>
<span> <span>
<span>部署</span> <span>部署</span>

6
components/button/demo/component-token.tsx
View File

@ -24,12 +24,12 @@ const App: React.FC = () => (
}} }}
> >
<Flex gap="small" vertical> <Flex gap="small" vertical>
<Flex wrap="wrap" gap="small"> <Flex wrap gap="small">
<Button type="text">TEXT</Button> <Button type="text">TEXT</Button>
<Button type="primary">CONTAINED</Button> <Button type="primary">CONTAINED</Button>
<Button>OUTLINED</Button> <Button>OUTLINED</Button>
</Flex> </Flex>
<Flex wrap="wrap" gap="small"> <Flex wrap gap="small">
<Button type="text" disabled> <Button type="text" disabled>
TEXT TEXT
</Button> </Button>
@ -38,7 +38,7 @@ const App: React.FC = () => (
</Button> </Button>
<Button disabled>OUTLINED</Button> <Button disabled>OUTLINED</Button>
</Flex> </Flex>
<Flex wrap="wrap" gap="small"> <Flex wrap gap="small">
<Button type="text" size="small"> <Button type="text" size="small">
TEXT TEXT
</Button> </Button>

2
components/button/demo/danger.tsx
View File

@ -2,7 +2,7 @@ import React from 'react';
import { Button, Flex } from 'antd'; import { Button, Flex } from 'antd';
const App: React.FC = () => ( const App: React.FC = () => (
<Flex wrap="wrap" gap="small"> <Flex wrap gap="small">
<Button type="primary" danger> <Button type="primary" danger>
Primary Primary
</Button> </Button>

4
components/button/demo/debug-icon.tsx
View File

@ -19,7 +19,7 @@ const App: React.FC = () => {
</Divider> </Divider>
<ConfigProvider componentSize={size}> <ConfigProvider componentSize={size}>
<Flex gap="small" vertical> <Flex gap="small" vertical>
<Flex gap="small" wrap="wrap"> <Flex gap="small" wrap>
<Tooltip title="search"> <Tooltip title="search">
<Button type="primary" shape="circle" icon={<SearchOutlined />} /> <Button type="primary" shape="circle" icon={<SearchOutlined />} />
</Tooltip> </Tooltip>
@ -34,7 +34,7 @@ const App: React.FC = () => {
</Tooltip> </Tooltip>
<Button icon={<SearchOutlined />}>Search</Button> <Button icon={<SearchOutlined />}>Search</Button>
</Flex> </Flex>
<Flex gap="small" wrap="wrap"> <Flex gap="small" wrap>
<Tooltip title="search"> <Tooltip title="search">
<Button shape="circle" icon={<SearchOutlined />} /> <Button shape="circle" icon={<SearchOutlined />} />
</Tooltip> </Tooltip>

2
components/button/demo/ghost.tsx
View File

@ -2,7 +2,7 @@ import React from 'react';
import { Button, Flex } from 'antd'; import { Button, Flex } from 'antd';
const App: React.FC = () => ( const App: React.FC = () => (
<Flex wrap="wrap" gap="small" className="site-button-ghost-wrapper"> <Flex wrap gap="small" className="site-button-ghost-wrapper">
<Button type="primary" ghost> <Button type="primary" ghost>
Primary Primary
</Button> </Button>

4
components/button/demo/icon-position.tsx
View File

@ -17,7 +17,7 @@ const App: React.FC = () => {
Preview Preview
</Divider> </Divider>
<Flex gap="small" vertical> <Flex gap="small" vertical>
<Flex wrap="wrap" gap="small"> <Flex wrap gap="small">
<Tooltip title="search"> <Tooltip title="search">
<Button type="primary" shape="circle" icon={<SearchOutlined />} /> <Button type="primary" shape="circle" icon={<SearchOutlined />} />
</Tooltip> </Tooltip>
@ -34,7 +34,7 @@ const App: React.FC = () => {
Search Search
</Button> </Button>
</Flex> </Flex>
<Flex wrap="wrap" gap="small"> <Flex wrap gap="small">
<Tooltip title="search"> <Tooltip title="search">
<Button shape="circle" icon={<SearchOutlined />} /> <Button shape="circle" icon={<SearchOutlined />} />
</Tooltip> </Tooltip>

4
components/button/demo/icon.tsx
View File

@ -4,7 +4,7 @@ import { Button, Flex, Tooltip } from 'antd';
const App: React.FC = () => ( const App: React.FC = () => (
<Flex gap="small" vertical> <Flex gap="small" vertical>
<Flex wrap="wrap" gap="small"> <Flex wrap gap="small">
<Tooltip title="search"> <Tooltip title="search">
<Button type="primary" shape="circle" icon={<SearchOutlined />} /> <Button type="primary" shape="circle" icon={<SearchOutlined />} />
</Tooltip> </Tooltip>
@ -19,7 +19,7 @@ const App: React.FC = () => (
</Tooltip> </Tooltip>
<Button icon={<SearchOutlined />}>Search</Button> <Button icon={<SearchOutlined />}>Search</Button>
</Flex> </Flex>
<Flex wrap="wrap" gap="small"> <Flex wrap gap="small">
<Tooltip title="search"> <Tooltip title="search">
<Button shape="circle" icon={<SearchOutlined />} /> <Button shape="circle" icon={<SearchOutlined />} />
</Tooltip> </Tooltip>

4
components/button/demo/loading.tsx
View File

@ -23,7 +23,7 @@ const App: React.FC = () => {
return ( return (
<Flex gap="small" vertical> <Flex gap="small" vertical>
<Flex gap="small" align="center" wrap="wrap"> <Flex gap="small" align="center" wrap>
<Button type="primary" loading> <Button type="primary" loading>
Loading Loading
</Button> </Button>
@ -32,7 +32,7 @@ const App: React.FC = () => {
</Button> </Button>
<Button type="primary" icon={<PoweroffOutlined />} loading /> <Button type="primary" icon={<PoweroffOutlined />} loading />
</Flex> </Flex>
<Flex gap="small" wrap="wrap"> <Flex gap="small" wrap>
<Button type="primary" loading={loadings[0]} onClick={() => enterLoading(0)}> <Button type="primary" loading={loadings[0]} onClick={() => enterLoading(0)}>
Click me! Click me!
</Button> </Button>

2
components/button/demo/noSpace.tsx
View File

@ -2,7 +2,7 @@ import React from 'react';
import { Button, Flex } from 'antd'; import { Button, Flex } from 'antd';
const App: React.FC = () => ( const App: React.FC = () => (
<Flex gap="middle" wrap="wrap"> <Flex gap="middle" wrap>
<Button type="primary" autoInsertSpace={false}> <Button type="primary" autoInsertSpace={false}>
确定 确定
</Button> </Button>

4
components/button/demo/size.tsx
View File

@ -18,7 +18,7 @@ const App: React.FC = () => {
Preview Preview
</Divider> </Divider>
<Flex gap="small" align="flex-start" vertical> <Flex gap="small" align="flex-start" vertical>
<Flex gap="small" wrap="wrap"> <Flex gap="small" wrap>
<Button type="primary" size={size}> <Button type="primary" size={size}>
Primary Primary
</Button> </Button>
@ -30,7 +30,7 @@ const App: React.FC = () => {
<Button type="link" size={size}> <Button type="link" size={size}>
Link Link
</Button> </Button>
<Flex gap="small" wrap="wrap"> <Flex gap="small" wrap>
<Button type="primary" icon={<DownloadOutlined />} size={size} /> <Button type="primary" icon={<DownloadOutlined />} size={size} />
<Button type="primary" shape="circle" icon={<DownloadOutlined />} size={size} /> <Button type="primary" shape="circle" icon={<DownloadOutlined />} size={size} />
<Button type="primary" shape="round" icon={<DownloadOutlined />} size={size} /> <Button type="primary" shape="round" icon={<DownloadOutlined />} size={size} />

2
components/flex/demo/wrap.tsx
View File

@ -2,7 +2,7 @@ import React from 'react';
import { Button, Flex } from 'antd'; import { Button, Flex } from 'antd';
const Demo: React.FC = () => ( const Demo: React.FC = () => (
<Flex wrap="wrap" gap="small"> <Flex wrap gap="small">
{Array.from({ length: 24 }, (_, i) => ( {Array.from({ length: 24 }, (_, i) => (
<Button key={i} type="primary"> <Button key={i} type="primary">
Button Button

2
components/layout/demo/basic.tsx
View File

@ -41,7 +41,7 @@ const layoutStyle = {
}; };
const App: React.FC = () => ( const App: React.FC = () => (
<Flex gap="middle" wrap="wrap"> <Flex gap="middle" wrap>
<Layout style={layoutStyle}> <Layout style={layoutStyle}>
<Header style={headerStyle}>Header</Header> <Header style={headerStyle}>Header</Header>
<Content style={contentStyle}>Content</Content> <Content style={contentStyle}>Content</Content>

2
components/progress/demo/circle-mini.tsx
View File

@ -2,7 +2,7 @@ import React from 'react';
import { Flex, Progress } from 'antd'; import { Flex, Progress } from 'antd';
const App: React.FC = () => ( const App: React.FC = () => (
<Flex wrap="wrap" gap="small"> <Flex wrap gap="small">
<Progress type="circle" percent={30} size={80} /> <Progress type="circle" percent={30} size={80} />
<Progress type="circle" percent={70} size={80} status="exception" /> <Progress type="circle" percent={70} size={80} status="exception" />
<Progress type="circle" percent={100} size={80} /> <Progress type="circle" percent={100} size={80} />

2
components/progress/demo/circle-steps.tsx
View File

@ -10,7 +10,7 @@ const App: React.FC = () => {
<Slider min={2} max={10} value={stepsCount} onChange={setStepsCount} /> <Slider min={2} max={10} value={stepsCount} onChange={setStepsCount} />
<Typography.Title level={5}>Custom gap:</Typography.Title> <Typography.Title level={5}>Custom gap:</Typography.Title>
<Slider step={4} min={0} max={40} value={stepsGap} onChange={setStepsGap} /> <Slider step={4} min={0} max={40} value={stepsGap} onChange={setStepsGap} />
<Flex wrap="wrap" gap="middle" style={{ marginTop: 16 }}> <Flex wrap gap="middle" style={{ marginTop: 16 }}>
<Progress <Progress
type="dashboard" type="dashboard"
steps={8} steps={8}

2
components/progress/demo/circle.tsx
View File

@ -2,7 +2,7 @@ import React from 'react';
import { Flex, Progress } from 'antd'; import { Flex, Progress } from 'antd';
const App: React.FC = () => ( const App: React.FC = () => (
<Flex gap="small" wrap="wrap"> <Flex gap="small" wrap>
<Progress type="circle" percent={75} /> <Progress type="circle" percent={75} />
<Progress type="circle" percent={70} status="exception" /> <Progress type="circle" percent={70} status="exception" />
<Progress type="circle" percent={100} /> <Progress type="circle" percent={100} />

2
components/progress/demo/dashboard.tsx
View File

@ -2,7 +2,7 @@ import React from 'react';
import { Flex, Progress } from 'antd'; import { Flex, Progress } from 'antd';
const App: React.FC = () => ( const App: React.FC = () => (
<Flex gap="small" wrap="wrap"> <Flex gap="small" wrap>
<Progress type="dashboard" percent={75} /> <Progress type="dashboard" percent={75} />
<Progress type="dashboard" percent={75} gapDegree={30} /> <Progress type="dashboard" percent={75} gapDegree={30} />
</Flex> </Flex>

2
components/progress/demo/format.tsx
View File

@ -2,7 +2,7 @@ import React from 'react';
import { Flex, Progress } from 'antd'; import { Flex, Progress } from 'antd';
const App: React.FC = () => ( const App: React.FC = () => (
<Flex gap="small" wrap="wrap"> <Flex gap="small" wrap>
<Progress type="circle" percent={75} format={(percent) => `${percent} Days`} /> <Progress type="circle" percent={75} format={(percent) => `${percent} Days`} />
<Progress type="circle" percent={100} format={() => 'Done'} /> <Progress type="circle" percent={100} format={() => 'Done'} />
</Flex> </Flex>

4
components/progress/demo/gradient-line.tsx
View File

@ -17,12 +17,12 @@ const App: React.FC = () => (
<Flex vertical gap="middle"> <Flex vertical gap="middle">
<Progress percent={99.9} strokeColor={twoColors} /> <Progress percent={99.9} strokeColor={twoColors} />
<Progress percent={50} status="active" strokeColor={{ from: '#108ee9', to: '#87d068' }} /> <Progress percent={50} status="active" strokeColor={{ from: '#108ee9', to: '#87d068' }} />
<Flex gap="small" wrap="wrap"> <Flex gap="small" wrap>
<Progress type="circle" percent={90} strokeColor={twoColors} /> <Progress type="circle" percent={90} strokeColor={twoColors} />
<Progress type="circle" percent={100} strokeColor={twoColors} /> <Progress type="circle" percent={100} strokeColor={twoColors} />
<Progress type="circle" percent={93} strokeColor={conicColors} /> <Progress type="circle" percent={93} strokeColor={conicColors} />
</Flex> </Flex>
<Flex gap="small" wrap="wrap"> <Flex gap="small" wrap>
<Progress type="dashboard" percent={90} strokeColor={twoColors} /> <Progress type="dashboard" percent={90} strokeColor={twoColors} />
<Progress type="dashboard" percent={100} strokeColor={twoColors} /> <Progress type="dashboard" percent={100} strokeColor={twoColors} />
<Progress type="dashboard" percent={93} strokeColor={conicColors} /> <Progress type="dashboard" percent={93} strokeColor={conicColors} />

2
components/progress/demo/linecap.tsx
View File

@ -4,7 +4,7 @@ import { Flex, Progress } from 'antd';
const App: React.FC = () => ( const App: React.FC = () => (
<Flex vertical gap="small"> <Flex vertical gap="small">
<Progress strokeLinecap="butt" percent={75} /> <Progress strokeLinecap="butt" percent={75} />
<Flex wrap="wrap" gap="small"> <Flex wrap gap="small">
<Progress strokeLinecap="butt" type="circle" percent={75} /> <Progress strokeLinecap="butt" type="circle" percent={75} />
<Progress strokeLinecap="butt" type="dashboard" percent={75} /> <Progress strokeLinecap="butt" type="dashboard" percent={75} />
</Flex> </Flex>

2
components/progress/demo/segment.tsx
View File

@ -6,7 +6,7 @@ const App: React.FC = () => (
<Tooltip title="3 done / 3 in progress / 4 to do"> <Tooltip title="3 done / 3 in progress / 4 to do">
<Progress percent={60} success={{ percent: 30 }} /> <Progress percent={60} success={{ percent: 30 }} />
</Tooltip> </Tooltip>
<Flex gap="small" wrap="wrap"> <Flex gap="small" wrap>
<Tooltip title="3 done / 3 in progress / 4 to do"> <Tooltip title="3 done / 3 in progress / 4 to do">
<Progress percent={60} success={{ percent: 30 }} type="circle" /> <Progress percent={60} success={{ percent: 30 }} type="circle" />
</Tooltip> </Tooltip>

6
components/progress/demo/size.tsx
View File

@ -8,17 +8,17 @@ const App: React.FC = () => (
<Progress percent={50} size="small" /> <Progress percent={50} size="small" />
<Progress percent={50} size={[300, 20]} /> <Progress percent={50} size={[300, 20]} />
</Flex> </Flex>
<Flex align="center" wrap="wrap" gap={30}> <Flex align="center" wrap gap={30}>
<Progress type="circle" percent={50} /> <Progress type="circle" percent={50} />
<Progress type="circle" percent={50} size="small" /> <Progress type="circle" percent={50} size="small" />
<Progress type="circle" percent={50} size={20} /> <Progress type="circle" percent={50} size={20} />
</Flex> </Flex>
<Flex align="center" wrap="wrap" gap={30}> <Flex align="center" wrap gap={30}>
<Progress type="dashboard" percent={50} /> <Progress type="dashboard" percent={50} />
<Progress type="dashboard" percent={50} size="small" /> <Progress type="dashboard" percent={50} size="small" />
<Progress type="dashboard" percent={50} size={20} /> <Progress type="dashboard" percent={50} size={20} />
</Flex> </Flex>
<Flex align="center" wrap="wrap" gap={30}> <Flex align="center" wrap gap={30}>
<Progress steps={3} percent={50} /> <Progress steps={3} percent={50} />
<Progress steps={3} percent={50} size="small" /> <Progress steps={3} percent={50} size="small" />
<Progress steps={3} percent={50} size={20} /> <Progress steps={3} percent={50} size={20} />

2
components/qr-code/demo/status.tsx
View File

@ -4,7 +4,7 @@ import { Flex, QRCode } from 'antd';
const value = 'https://ant.design'; const value = 'https://ant.design';
const App: React.FC = () => ( const App: React.FC = () => (
<Flex gap="middle" wrap="wrap"> <Flex gap="middle" wrap>
<QRCode value={value} status="loading" /> <QRCode value={value} status="loading" />
<QRCode value={value} status="expired" onRefresh={() => console.log('refresh')} /> <QRCode value={value} status="expired" onRefresh={() => console.log('refresh')} />
<QRCode value={value} status="scanned" /> <QRCode value={value} status="scanned" />

4
components/tag/demo/borderless.tsx
View File

@ -3,7 +3,7 @@ import { Divider, Flex, Tag } from 'antd';
const App: React.FC = () => ( const App: React.FC = () => (
<> <>
<Flex gap="4px 0" wrap="wrap"> <Flex gap="4px 0" wrap>
<Tag bordered={false}>Tag 1</Tag> <Tag bordered={false}>Tag 1</Tag>
<Tag bordered={false}>Tag 2</Tag> <Tag bordered={false}>Tag 2</Tag>
<Tag bordered={false} closable> <Tag bordered={false} closable>
@ -14,7 +14,7 @@ const App: React.FC = () => (
</Tag> </Tag>
</Flex> </Flex>
<Divider /> <Divider />
<Flex gap="4px 0" wrap="wrap"> <Flex gap="4px 0" wrap>
<Tag bordered={false} color="processing"> <Tag bordered={false} color="processing">
processing processing
</Tag> </Tag>

4
components/tag/demo/borderlessLayout.tsx
View File

@ -5,7 +5,7 @@ const App: React.FC = () => {
const { token } = theme.useToken(); const { token } = theme.useToken();
return ( return (
<div style={{ backgroundColor: token.colorBgLayout, padding: token.padding }}> <div style={{ backgroundColor: token.colorBgLayout, padding: token.padding }}>
<Flex gap="4px 0" wrap="wrap"> <Flex gap="4px 0" wrap>
<Tag bordered={false}>Tag 1</Tag> <Tag bordered={false}>Tag 1</Tag>
<Tag bordered={false}>Tag 2</Tag> <Tag bordered={false}>Tag 2</Tag>
<Tag bordered={false} closable> <Tag bordered={false} closable>
@ -16,7 +16,7 @@ const App: React.FC = () => {
</Tag> </Tag>
</Flex> </Flex>
<Divider /> <Divider />
<Flex gap="4px 0" wrap="wrap"> <Flex gap="4px 0" wrap>
<Tag bordered={false} color="magenta"> <Tag bordered={false} color="magenta">
magenta magenta
</Tag> </Tag>

2
components/tag/demo/checkable.tsx
View File

@ -14,7 +14,7 @@ const App: React.FC = () => {
}; };
return ( return (
<Flex gap={4} wrap="wrap" align="center"> <Flex gap={4} wrap align="center">
<span>Categories:</span> <span>Categories:</span>
{tagsData.map<React.ReactNode>((tag) => ( {tagsData.map<React.ReactNode>((tag) => (
<Tag.CheckableTag <Tag.CheckableTag

2
components/tag/demo/colorful-inverse.tsx
View File

@ -2,7 +2,7 @@ import React from 'react';
import { Flex, Tag } from 'antd'; import { Flex, Tag } from 'antd';
const App: React.FC = () => ( const App: React.FC = () => (
<Flex gap="4px 0" wrap="wrap"> <Flex gap="4px 0" wrap>
<Tag color="magenta-inverse">magenta</Tag> <Tag color="magenta-inverse">magenta</Tag>
<Tag color="red-inverse">red</Tag> <Tag color="red-inverse">red</Tag>
<Tag color="volcano-inverse">volcano</Tag> <Tag color="volcano-inverse">volcano</Tag>

4
components/tag/demo/colorful.tsx
View File

@ -4,7 +4,7 @@ import { Divider, Flex, Tag } from 'antd';
const App: React.FC = () => ( const App: React.FC = () => (
<> <>
<Divider orientation="left">Presets</Divider> <Divider orientation="left">Presets</Divider>
<Flex gap="4px 0" wrap="wrap"> <Flex gap="4px 0" wrap>
<Tag color="magenta">magenta</Tag> <Tag color="magenta">magenta</Tag>
<Tag color="red">red</Tag> <Tag color="red">red</Tag>
<Tag color="volcano">volcano</Tag> <Tag color="volcano">volcano</Tag>
@ -18,7 +18,7 @@ const App: React.FC = () => (
<Tag color="purple">purple</Tag> <Tag color="purple">purple</Tag>
</Flex> </Flex>
<Divider orientation="left">Custom</Divider> <Divider orientation="left">Custom</Divider>
<Flex gap="4px 0" wrap="wrap"> <Flex gap="4px 0" wrap>
<Tag color="#f50">#f50</Tag> <Tag color="#f50">#f50</Tag>
<Tag color="#2db7f5">#2db7f5</Tag> <Tag color="#2db7f5">#2db7f5</Tag>
<Tag color="#87d068">#87d068</Tag> <Tag color="#87d068">#87d068</Tag>

2
components/tag/demo/component-token.tsx
View File

@ -6,7 +6,7 @@ const App: React.FC = () => (
<ConfigProvider <ConfigProvider
theme={{ components: { Tag: { defaultBg: '#f9f0ff', defaultColor: '#4b34d3' } } }} theme={{ components: { Tag: { defaultBg: '#f9f0ff', defaultColor: '#4b34d3' } } }}
> >
<Flex gap="4px 0" wrap="wrap"> <Flex gap="4px 0" wrap>
<Tag> <Tag>
<a href="https://github.com/ant-design/ant-design/issues/1862">Link</a> <a href="https://github.com/ant-design/ant-design/issues/1862">Link</a>
</Tag> </Tag>

2
components/tag/demo/control.tsx
View File

@ -71,7 +71,7 @@ const App: React.FC = () => {
}; };
return ( return (
<Flex gap="4px 0" wrap="wrap"> <Flex gap="4px 0" wrap>
{tags.map<React.ReactNode>((tag, index) => { {tags.map<React.ReactNode>((tag, index) => {
if (editInputIndex === index) { if (editInputIndex === index) {
return ( return (

2
components/tag/demo/customize.tsx
View File

@ -3,7 +3,7 @@ import { CloseCircleOutlined } from '@ant-design/icons';
import { Flex, Tag } from 'antd'; import { Flex, Tag } from 'antd';
const App: React.FC = () => ( const App: React.FC = () => (
<Flex gap="4px 0" wrap="wrap"> <Flex gap="4px 0" wrap>
<Tag closable closeIcon="关 闭"> <Tag closable closeIcon="关 闭">
Tag1 Tag1
</Tag> </Tag>

2
components/tag/demo/draggable.tsx
View File

@ -68,7 +68,7 @@ const App: React.FC = () => {
return ( return (
<DndContext sensors={sensors} onDragEnd={handleDragEnd} collisionDetection={closestCenter}> <DndContext sensors={sensors} onDragEnd={handleDragEnd} collisionDetection={closestCenter}>
<SortableContext items={items} strategy={horizontalListSortingStrategy}> <SortableContext items={items} strategy={horizontalListSortingStrategy}>
<Flex gap="4px 0" wrap="wrap"> <Flex gap="4px 0" wrap>
{items.map<React.ReactNode>((item) => ( {items.map<React.ReactNode>((item) => (
<DraggableTag tag={item} key={item.id} /> <DraggableTag tag={item} key={item.id} />
))} ))}

2
components/tag/demo/icon.tsx
View File

@ -8,7 +8,7 @@ import {
import { Flex, Tag } from 'antd'; import { Flex, Tag } from 'antd';
const App: React.FC = () => ( const App: React.FC = () => (
<Flex gap="4px 0" wrap="wrap"> <Flex gap="4px 0" wrap>
<Tag icon={<TwitterOutlined />} color="#55acee"> <Tag icon={<TwitterOutlined />} color="#55acee">
Twitter Twitter
</Tag> </Tag>

4
components/tag/demo/status.tsx
View File

@ -12,7 +12,7 @@ import { Divider, Flex, Tag } from 'antd';
const App: React.FC = () => ( const App: React.FC = () => (
<> <>
<Divider orientation="left">Without icon</Divider> <Divider orientation="left">Without icon</Divider>
<Flex gap="4px 0" wrap="wrap"> <Flex gap="4px 0" wrap>
<Tag color="success">success</Tag> <Tag color="success">success</Tag>
<Tag color="processing">processing</Tag> <Tag color="processing">processing</Tag>
<Tag color="error">error</Tag> <Tag color="error">error</Tag>
@ -20,7 +20,7 @@ const App: React.FC = () => (
<Tag color="default">default</Tag> <Tag color="default">default</Tag>
</Flex> </Flex>
<Divider orientation="left">With icon</Divider> <Divider orientation="left">With icon</Divider>
<Flex gap="4px 0" wrap="wrap"> <Flex gap="4px 0" wrap>
<Tag icon={<CheckCircleOutlined />} color="success"> <Tag icon={<CheckCircleOutlined />} color="success">
success success
</Tag> </Tag>

2
components/upload/demo/avatar.tsx
View File

@ -49,7 +49,7 @@ const App: React.FC = () => {
); );
return ( return (
<Flex gap="middle" wrap="wrap"> <Flex gap="middle" wrap>
<Upload <Upload
name="avatar" name="avatar"
listType="picture-card" listType="picture-card"