mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-01-18 14:13:37 +08:00
Code Issues Actions 28 Packages Projects Releases Wiki Activity

demo: update Progress demo (#47494)

Browse Source
This commit is contained in:
lijianan 2024-02-20 15:02:22 +08:00 committed by GitHub
parent d9cee1ceac
commit e939962c55
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
16 changed files with 3166 additions and 3439 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3259
components/progress/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

File diff suppressed because it is too large Load Diff

3197
components/progress/__tests__/__snapshots__/demo.test.ts.snap
View File

File diff suppressed because it is too large Load Diff

8
components/progress/demo/circle-micro.tsx
View File

@ -1,8 +1,8 @@
import React from 'react';
import { Progress } from 'antd';
import { Flex, Progress } from 'antd';
const App: React.FC = () => (
<>
<Flex align="center" gap="small">
<Progress
type="circle"
trailColor="#e6f4ff"
@ -11,8 +11,8 @@ const App: React.FC = () => (
size={14}
format={(number) => `进行中，已完成${number}%`}
/>
<span style={{ marginLeft: 8 }}>代码发布</span>
</>
<span>代码发布</span>
</Flex>
);
export default App;

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

@ -1,12 +1,12 @@
import React from 'react';
import { Progress, Space } from 'antd';
import { Flex, Progress } from 'antd';
const App: React.FC = () => (
<Space wrap>
<Flex wrap="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} />
</Space>
</Flex>
);
export default App;

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

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

5
components/progress/demo/component-token.tsx
View File

@ -4,10 +4,7 @@ import { ConfigProvider, Progress, Space } from 'antd';
const App: React.FC = () => (
<ConfigProvider
theme={{
token: {
marginXXS: 20,
fontSizeSM: 24,
},
token: { marginXXS: 20, fontSizeSM: 24 },
components: {
Progress: {
defaultColor: '#bae0ff',

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

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

14
components/progress/demo/dynamic.tsx
View File

@ -1,6 +1,6 @@
import React, { useState } from 'react';
import { MinusOutlined, PlusOutlined } from '@ant-design/icons';
import { Button, Progress } from 'antd';
import { Button, Flex, Progress } from 'antd';
const App: React.FC = () => {
const [percent, setPercent] = useState<number>(0);
@ -26,16 +26,16 @@ const App: React.FC = () => {
};
return (
<>
<div style={{ marginBottom: 10 }}>
<Progress percent={percent} />
<Progress type="circle" percent={percent} />
</div>
<Flex vertical gap="small">
<Flex vertical gap="small">
<Progress percent={percent} type="line" />
<Progress percent={percent} type="circle" />
</Flex>
<Button.Group>
<Button onClick={decline} icon={<MinusOutlined />} />
<Button onClick={increase} icon={<PlusOutlined />} />
</Button.Group>
</>
</Flex>
);
};

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

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

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

@ -1,24 +1,33 @@
import React from 'react';
import { Progress, Space } from 'antd';
import { Flex, Progress } from 'antd';
import type { ProgressProps } from 'antd';
const twoColors = { '0%': '#108ee9', '100%': '#87d068' };
const conicColors = { '0%': '#87d068', '50%': '#ffe58f', '100%': '#ffccc7' };
const twoColors: ProgressProps['strokeColor'] = {
'0%': '#108ee9',
'100%': '#87d068',
};
const conicColors: ProgressProps['strokeColor'] = {
'0%': '#87d068',
'50%': '#ffe58f',
'100%': '#ffccc7',
};
const App: React.FC = () => (
<div style={{ display: 'flex', flexDirection: 'column', rowGap: 16 }}>
<Flex vertical gap="middle">
<Progress percent={99.9} strokeColor={twoColors} />
<Progress percent={50} status="active" strokeColor={{ from: '#108ee9', to: '#87d068' }} />
<Space wrap>
<Flex gap="small" wrap="wrap">
<Progress type="circle" percent={90} strokeColor={twoColors} />
<Progress type="circle" percent={100} strokeColor={twoColors} />
<Progress type="circle" percent={93} strokeColor={conicColors} />
</Space>
<Space wrap>
</Flex>
<Flex gap="small" wrap="wrap">
<Progress type="dashboard" percent={90} strokeColor={twoColors} />
<Progress type="dashboard" percent={100} strokeColor={twoColors} />
<Progress type="dashboard" percent={93} strokeColor={conicColors} />
</Space>
</div>
</Flex>
</Flex>
);
export default App;

6
components/progress/demo/line-mini.tsx
View File

@ -1,13 +1,13 @@
import React from 'react';
import { Progress } from 'antd';
import { Flex, Progress } from 'antd';
const App: React.FC = () => (
<div style={{ width: 170 }}>
<Flex vertical gap="small" style={{ width: 180 }}>
<Progress percent={30} size="small" />
<Progress percent={50} size="small" status="active" />
<Progress percent={70} size="small" status="exception" />
<Progress percent={100} size="small" />
</div>
</Flex>
);
export default App;

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

@ -1,14 +1,14 @@
import React from 'react';
import { Progress } from 'antd';
import { Flex, Progress } from 'antd';
const App: React.FC = () => (
<>
<Flex gap="small" vertical>
<Progress percent={30} />
<Progress percent={50} status="active" />
<Progress percent={70} status="exception" />
<Progress percent={100} />
<Progress percent={50} showInfo={false} />
</>
</Flex>
);
export default App;

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

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

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

@ -1,20 +1,20 @@
import React from 'react';
import { Progress, Tooltip, Space } from 'antd';
import { Flex, Progress, Tooltip } from 'antd';
const App: React.FC = () => (
<>
<Flex gap="small" vertical>
<Tooltip title="3 done / 3 in progress / 4 to do">
<Progress percent={60} success={{ percent: 30 }} />
</Tooltip>
<Space wrap>
<Flex gap="small" wrap="wrap">
<Tooltip title="3 done / 3 in progress / 4 to do">
<Progress percent={60} success={{ percent: 30 }} type="circle" />
</Tooltip>
<Tooltip title="3 done / 3 in progress / 4 to do">
<Progress percent={60} success={{ percent: 30 }} type="dashboard" />
</Tooltip>
</Space>
</>
</Flex>
</Flex>
);
export default App;

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

@ -1,36 +1,30 @@
import React from 'react';
import { Progress, Space } from 'antd';
import { Flex, Progress } from 'antd';
const App: React.FC = () => (
<>
<Space direction="vertical">
<Flex vertical gap="middle">
<Flex vertical gap="small" style={{ width: 300 }}>
<Progress percent={50} />
<Progress percent={50} size="small" />
<Progress percent={50} size={[300, 20]} />
</Space>
<br />
<br />
<Space size={30}>
</Flex>
<Flex align="center" wrap="wrap" gap={30}>
<Progress type="circle" percent={50} />
<Progress type="circle" percent={50} size="small" />
<Progress type="circle" percent={50} size={20} />
</Space>
<br />
<br />
<Space size={30}>
</Flex>
<Flex align="center" wrap="wrap" gap={30}>
<Progress type="dashboard" percent={50} />
<Progress type="dashboard" percent={50} size="small" />
<Progress type="dashboard" percent={50} size={20} />
</Space>
<br />
<br />
<Space size={30} wrap>
</Flex>
<Flex align="center" wrap="wrap" gap={30}>
<Progress steps={3} percent={50} />
<Progress steps={3} percent={50} size="small" />
<Progress steps={3} percent={50} size={20} />
<Progress steps={3} percent={50} size={[20, 30]} />
</Space>
</>
</Flex>
</Flex>
);
export default App;

11
components/progress/demo/steps.tsx
View File

@ -1,17 +1,14 @@
import React from 'react';
import { red, green } from '@ant-design/colors';
import { Progress } from 'antd';
import { green, red } from '@ant-design/colors';
import { Flex, Progress } from 'antd';
const App: React.FC = () => (
<>
<Flex gap="small" vertical>
<Progress percent={50} steps={3} />
<br />
<Progress percent={30} steps={5} />
<br />
<Progress percent={100} steps={5} size="small" strokeColor={green[6]} />
<br />
<Progress percent={60} steps={5} strokeColor={[green[6], green[6], red[5]]} />
</>
</Flex>
);
export default App;