ant-design/components/progress/demo/info-position.tsx

34 lines
1.1 KiB
TypeScript
Raw Normal View History

feat: progress add inside and bottom text position (#48157) * 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>
2024-05-10 10:22:32 +08:00
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;