mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-22 22:48:29 +08:00
5098e6e209
* feat: progress add inside and bottom text position * feat: change progress percent position api * fix: change to follow coding standards * docs: reset i18n zh file * fix: change to follow coding standards * fix: change to follow coding standards * docs: reset i18n file * fix: change to follow coding standards * docs: reset i18n file * feat: progress inner text get brighten color * feat: update progress snapshots * fix: progress bottom layout center * feat: update steps snapshots * feat: update progress snapshots * feat: update config provider snapshots * feat: progress inner text add negate color * feat: update progress snapshots * feat: progress inner text add light bg color * feat: progress inner text add light bg color * feat: change progress percentPosition api * feat: change progress component test * feat: update progress line component snapshot * feat: progress component outer start layout text adapt * feat: progress line change to flex layout * feat: update progress snapshots * feat: update progress line style * feat: update progress line style * fix: progress line reset height use inline block * fix: change progress is line type * fix: change progress is line type * fix: delete progress outer styles * fix: change progress line type layout * fix: progress add outer style * feat: update progress snapshots * fix: change progress text bright color * fix: optimized code volume * fix: progress delete after style on inner layout * fix: update progress test file --------- Co-authored-by: lijianan <574980606@qq.com> Co-authored-by: afc163 <afc163@gmail.com>
34 lines
1.1 KiB
TypeScript
34 lines
1.1 KiB
TypeScript
import React from 'react';
|
|
import { Flex, Progress } from 'antd';
|
|
|
|
const App: React.FC = () => (
|
|
<Flex gap="small" vertical>
|
|
<Progress
|
|
percent={0}
|
|
percentPosition={{ align: 'center', type: 'inner' }}
|
|
size={[200, 20]}
|
|
strokeColor="#E6F4FF"
|
|
/>
|
|
<Progress percent={10} percentPosition={{ align: 'center', type: 'inner' }} size={[300, 20]} />
|
|
<Progress
|
|
percent={50}
|
|
percentPosition={{ align: 'start', type: 'inner' }}
|
|
size={[300, 20]}
|
|
strokeColor="#B7EB8F"
|
|
/>
|
|
<Progress
|
|
percent={60}
|
|
percentPosition={{ align: 'end', type: 'inner' }}
|
|
size={[300, 20]}
|
|
strokeColor="#001342"
|
|
/>
|
|
<Progress percent={100} percentPosition={{ align: 'center', type: 'inner' }} size={[400, 20]} />
|
|
<Progress percent={60} percentPosition={{ align: 'start', type: 'outer' }} />
|
|
<Progress percent={100} percentPosition={{ align: 'start', type: 'outer' }} />
|
|
<Progress percent={60} percentPosition={{ align: 'center', type: 'outer' }} size="small" />
|
|
<Progress percent={100} percentPosition={{ align: 'center', type: 'outer' }} />
|
|
</Flex>
|
|
);
|
|
|
|
export default App;
|