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