Browse Source
* test: update snapshot * docs: add inline demo * chore: upgrage rc-stepspull/38449/head
JarvisArt
2 years ago
committed by
GitHub
GitHub
9 changed files with 1787 additions and 7 deletions
@ -0,0 +1,81 @@ |
|||||
|
--- |
||||
|
order: 15 |
||||
|
title: |
||||
|
zh-CN: 内联步骤 |
||||
|
en-US: Inline Steps |
||||
|
--- |
||||
|
|
||||
|
## zh-CN |
||||
|
|
||||
|
内联类型的步骤条，适用于列表内容场景中展示对象所在流程、当前状态的情况。 |
||||
|
|
||||
|
## en-US |
||||
|
|
||||
|
Inline type steps, suitable for displaying the process and current state of the object in the list content scene. |
||||
|
|
||||
|
```tsx |
||||
|
import type { StepsProps } from 'antd'; |
||||
|
import { Steps, List, Avatar } from 'antd'; |
||||
|
|
||||
|
const data = [ |
||||
|
{ |
||||
|
title: 'Ant Design Title 1', |
||||
|
current: 0, |
||||
|
}, |
||||
|
{ |
||||
|
title: 'Ant Design Title 2', |
||||
|
current: 1, |
||||
|
status: 'error', |
||||
|
}, |
||||
|
{ |
||||
|
title: 'Ant Design Title 3', |
||||
|
current: 2, |
||||
|
}, |
||||
|
{ |
||||
|
title: 'Ant Design Title 4', |
||||
|
current: 1, |
||||
|
}, |
||||
|
]; |
||||
|
|
||||
|
const items = [ |
||||
|
{ |
||||
|
title: 'Step 1', |
||||
|
description: 'This is a Step 1.', |
||||
|
}, |
||||
|
{ |
||||
|
title: 'Step 2', |
||||
|
description: 'This is a Step 2.', |
||||
|
}, |
||||
|
{ |
||||
|
title: 'Step 3', |
||||
|
description: 'This is a Step 3.', |
||||
|
}, |
||||
|
]; |
||||
|
|
||||
|
const App: React.FC = () => ( |
||||
|
<div> |
||||
|
<List |
||||
|
itemLayout="horizontal" |
||||
|
dataSource={data} |
||||
|
renderItem={item => ( |
||||
|
<List.Item> |
||||
|
<List.Item.Meta |
||||
|
avatar={<Avatar src="https://joeschmoe.io/api/v1/random" />} |
||||
|
title={<a href="https://ant.design">{item.title}</a>} |
||||
|
description="Ant Design, a design language for background applications, is refined by Ant UED Team" |
||||
|
/> |
||||
|
<Steps |
||||
|
style={{ marginTop: 8 }} |
||||
|
type="inline" |
||||
|
current={item.current} |
||||
|
status={item.status as StepsProps['status']} |
||||
|
items={items} |
||||
|
/> |
||||
|
</List.Item> |
||||
|
)} |
||||
|
/> |
||||
|
</div> |
||||
|
); |
||||
|
|
||||
|
export default App; |
||||
|
``` |
||||
@ -0,0 +1,124 @@ |
|||||
|
import type { CSSObject } from '@ant-design/cssinjs'; |
||||
|
import type { StepsToken } from '.'; |
||||
|
import type { GenerateStyle } from '../../theme'; |
||||
|
|
||||
|
const genStepsInlineStyle: GenerateStyle<StepsToken, CSSObject> = token => { |
||||
|
const { componentCls, inlineDotSize, inlineTitleColor, inlineTailColor } = token; |
||||
|
const containerPaddingTop = token.paddingXS + token.lineWidth; |
||||
|
const titleStyle = { |
||||
|
[`${componentCls}-item-container ${componentCls}-item-content ${componentCls}-item-title`]: { |
||||
|
color: inlineTitleColor, |
||||
|
}, |
||||
|
}; |
||||
|
|
||||
|
return { |
||||
|
[`&${componentCls}-inline`]: { |
||||
|
width: 'auto', |
||||
|
display: 'inline-flex', |
||||
|
|
||||
|
[`${componentCls}-item`]: { |
||||
|
flex: 'none', |
||||
|
|
||||
|
'&-container': { |
||||
|
padding: `${containerPaddingTop}px ${token.paddingXXS}px 0`, |
||||
|
margin: `0 ${token.marginXXS / 2}px`, |
||||
|
borderRadius: token.borderRadiusSM, |
||||
|
cursor: 'pointer', |
||||
|
'&:hover': { |
||||
|
background: token.controlItemBgHover, |
||||
|
transition: `background-color ${token.motionDurationFast}`, |
||||
|
}, |
||||
|
[`&[role='button']:hover`]: { |
||||
|
opacity: 1, |
||||
|
}, |
||||
|
}, |
||||
|
|
||||
|
'&-icon': { |
||||
|
width: inlineDotSize, |
||||
|
height: inlineDotSize, |
||||
|
marginInlineStart: `calc(50% - ${inlineDotSize / 2}px)`, |
||||
|
[`> ${componentCls}-icon`]: { |
||||
|
top: 0, |
||||
|
}, |
||||
|
[`${componentCls}-icon-dot`]: { |
||||
|
borderRadius: token.fontSizeSM / 4, |
||||
|
}, |
||||
|
}, |
||||
|
|
||||
|
'&-content': { |
||||
|
width: 'auto', |
||||
|
marginTop: token.marginXS - token.lineWidth, |
||||
|
}, |
||||
|
'&-title': { |
||||
|
color: inlineTitleColor, |
||||
|
fontSize: token.fontSizeSM, |
||||
|
lineHeight: token.lineHeightSM, |
||||
|
fontWeight: 'normal', |
||||
|
marginBottom: token.marginXXS / 2, |
||||
|
}, |
||||
|
'&-description': { |
||||
|
display: 'none', |
||||
|
}, |
||||
|
|
||||
|
'&-tail': { |
||||
|
marginInlineStart: 0, |
||||
|
top: containerPaddingTop + inlineDotSize / 2, |
||||
|
transform: `translateY(-50%)`, |
||||
|
'&:after': { |
||||
|
width: '100%', |
||||
|
height: token.lineWidth, |
||||
|
borderRadius: 0, |
||||
|
marginInlineStart: 0, |
||||
|
background: inlineTailColor, |
||||
|
}, |
||||
|
}, |
||||
|
|
||||
|
[`&:first-child ${componentCls}-item-tail`]: { |
||||
|
width: '50%', |
||||
|
marginInlineStart: '50%', |
||||
|
}, |
||||
|
[`&:last-child ${componentCls}-item-tail`]: { |
||||
|
display: 'block', |
||||
|
width: '50%', |
||||
|
}, |
||||
|
|
||||
|
'&-wait': { |
||||
|
[`${componentCls}-item-icon ${componentCls}-icon ${componentCls}-icon-dot`]: { |
||||
|
backgroundColor: token.colorBorderBg, |
||||
|
border: `${token.lineWidth}px ${token.lineType} ${inlineTailColor}`, |
||||
|
}, |
||||
|
...titleStyle, |
||||
|
}, |
||||
|
'&-finish': { |
||||
|
[`${componentCls}-item-tail::after`]: { |
||||
|
backgroundColor: inlineTailColor, |
||||
|
}, |
||||
|
[`${componentCls}-item-icon ${componentCls}-icon ${componentCls}-icon-dot`]: { |
||||
|
backgroundColor: inlineTailColor, |
||||
|
border: `${token.lineWidth}px ${token.lineType} ${inlineTailColor}`, |
||||
|
}, |
||||
|
...titleStyle, |
||||
|
}, |
||||
|
'&-error': titleStyle, |
||||
|
'&-active, &-process': { |
||||
|
[`${componentCls}-item-icon`]: { |
||||
|
width: inlineDotSize, |
||||
|
height: inlineDotSize, |
||||
|
marginInlineStart: `calc(50% - ${inlineDotSize / 2}px)`, |
||||
|
top: 0, |
||||
|
}, |
||||
|
...titleStyle, |
||||
|
}, |
||||
|
|
||||
|
[`&:not(${componentCls}-item-active) > ${componentCls}-item-container[role='button']:hover`]: |
||||
|
{ |
||||
|
[`${componentCls}-item-title`]: { |
||||
|
color: inlineTitleColor, |
||||
|
}, |
||||
|
}, |
||||
|
}, |
||||
|
}, |
||||
|
}; |
||||
|
}; |
||||
|
|
||||
|
export default genStepsInlineStyle; |
||||
Loading…
Reference in new issue