-
-
Notifications
You must be signed in to change notification settings - Fork 49.1k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* test: update snapshot * docs: add inline demo * chore: upgrage rc-steps
- Loading branch information
Showing
9 changed files
with
1,789 additions
and
7 deletions.
There are no files selected for viewing
909 changes: 909 additions & 0 deletions
909
components/steps/__tests__/__snapshots__/demo-extend.test.ts.snap
Large diffs are not rendered by default.
Oops, something went wrong.
621 changes: 621 additions & 0 deletions
621
components/steps/__tests__/__snapshots__/demo.test.ts.snap
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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; | ||
| ``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters