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]);
return (
<Flex gap="large" align="center" wrap="wrap">
<Flex gap="large" align="center" wrap>
<Input
value={typeof value === 'string' ? value : value?.toHexString()}
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 [locale] = useLocale(locales);
return (
<Flex gap="large" wrap="wrap">
<Flex gap="large" wrap>
{(Object.keys(THEMES) as (keyof typeof THEMES)[]).map<React.ReactNode>((theme, index) => (
<Flex vertical gap="small" justify="center" align="center" key={theme}>
<label

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

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

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

@ -2,7 +2,7 @@ import React from 'react';
import { Button, Flex } from 'antd';
const App: React.FC = () => (
<Flex gap="small" wrap="wrap">
<Flex gap="small" wrap>
<Button type="primary">Primary Button</Button>
<Button>Default 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 App: React.FC = () => (
<Flex wrap="wrap" gap="small">
<Flex wrap gap="small">
<Button>
<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 wrap="wrap" gap="small">
<Flex wrap gap="small">
<Button type="text">TEXT</Button>
<Button type="primary">CONTAINED</Button>
<Button>OUTLINED</Button>
</Flex>
<Flex wrap="wrap" gap="small">
<Flex wrap gap="small">
<Button type="text" disabled>
TEXT
</Button>
@ -38,7 +38,7 @@ const App: React.FC = () => (
</Button>
<Button disabled>OUTLINED</Button>
</Flex>
<Flex wrap="wrap" gap="small">
<Flex wrap gap="small">
<Button type="text" size="small">
TEXT
</Button>

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

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

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

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

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

@ -2,7 +2,7 @@ import React from 'react';
import { Button, Flex } from 'antd';
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>
Primary
</Button>

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

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

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

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

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

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

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

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

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

@ -18,7 +18,7 @@ const App: React.FC = () => {
Preview
</Divider>
<Flex gap="small" align="flex-start" vertical>
<Flex gap="small" wrap="wrap">
<Flex gap="small" wrap>
<Button type="primary" size={size}>
Primary
</Button>
@ -30,7 +30,7 @@ const App: React.FC = () => {
<Button type="link" size={size}>
Link
</Button>
<Flex gap="small" wrap="wrap">
<Flex gap="small" wrap>
<Button type="primary" icon={<DownloadOutlined />} size={size} />
<Button type="primary" shape="circle" 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';
const Demo: React.FC = () => (
<Flex wrap="wrap" gap="small">
<Flex wrap gap="small">
{Array.from({ length: 24 }, (_, i) => (
<Button key={i} type="primary">
Button

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

@ -41,7 +41,7 @@ const layoutStyle = {
};
const App: React.FC = () => (
<Flex gap="middle" wrap="wrap">
<Flex gap="middle" wrap>
<Layout style={layoutStyle}>
<Header style={headerStyle}>Header</Header>
<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';
const App: React.FC = () => (
<Flex wrap="wrap" gap="small">
<Flex wrap gap="small">
<Progress type="circle" percent={30} size={80} />
<Progress type="circle" percent={70} size={80} status="exception" />
<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} />
<Typography.Title level={5}>Custom gap:</Typography.Title>
<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
type="dashboard"
steps={8}

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

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

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

@ -2,7 +2,7 @@ import React from 'react';
import { Flex, Progress } from 'antd';
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={100} format={() => 'Done'} />
</Flex>

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

@ -17,12 +17,12 @@ const App: React.FC = () => (
<Flex vertical gap="middle">
<Progress percent={99.9} strokeColor={twoColors} />
<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={100} strokeColor={twoColors} />
<Progress type="circle" percent={93} strokeColor={conicColors} />
</Flex>
<Flex gap="small" wrap="wrap">
<Flex gap="small" wrap>
<Progress type="dashboard" percent={90} strokeColor={twoColors} />
<Progress type="dashboard" percent={100} strokeColor={twoColors} />
<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 = () => (
<Flex vertical gap="small">
<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="dashboard" percent={75} />
</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">
<Progress percent={60} success={{ percent: 30 }} />
</Tooltip>
<Flex gap="small" wrap="wrap">
<Flex gap="small" wrap>
<Tooltip title="3 done / 3 in progress / 4 to do">
<Progress percent={60} success={{ percent: 30 }} type="circle" />
</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={[300, 20]} />
</Flex>
<Flex align="center" wrap="wrap" gap={30}>
<Flex align="center" wrap gap={30}>
<Progress type="circle" percent={50} />
<Progress type="circle" percent={50} size="small" />
<Progress type="circle" percent={50} size={20} />
</Flex>
<Flex align="center" wrap="wrap" gap={30}>
<Flex align="center" wrap gap={30}>
<Progress type="dashboard" percent={50} />
<Progress type="dashboard" percent={50} size="small" />
<Progress type="dashboard" percent={50} size={20} />
</Flex>
<Flex align="center" wrap="wrap" gap={30}>
<Flex align="center" wrap gap={30}>
<Progress steps={3} percent={50} />
<Progress steps={3} percent={50} size="small" />
<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 App: React.FC = () => (
<Flex gap="middle" wrap="wrap">
<Flex gap="middle" wrap>
<QRCode value={value} status="loading" />
<QRCode value={value} status="expired" onRefresh={() => console.log('refresh')} />
<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 = () => (
<>
<Flex gap="4px 0" wrap="wrap">
<Flex gap="4px 0" wrap>
<Tag bordered={false}>Tag 1</Tag>
<Tag bordered={false}>Tag 2</Tag>
<Tag bordered={false} closable>
@ -14,7 +14,7 @@ const App: React.FC = () => (
</Tag>
</Flex>
<Divider />
<Flex gap="4px 0" wrap="wrap">
<Flex gap="4px 0" wrap>
<Tag bordered={false} color="processing">
processing
</Tag>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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