Timeline design change feature #11490
Conversation
added a new prop to timeline called mode where you can send 'alternate' to change the timeline design and 'right' to flip horizontally.
|
Deploy preview for ant-design ready! Built with commit 603ab8a |
|
The demo seems to overflow, could you optimize it?
|
components/timeline/Timeline.tsx
Outdated
| ...restProps | ||
| } = this.props; | ||
| const pendingNode = typeof pending === 'boolean' ? null : pending; | ||
| const classString = classNames(prefixCls, { | ||
| [`${prefixCls}-pending`]: !!pending, | ||
| [`${prefixCls}-reverse`]: !!reverse, | ||
| }, className); | ||
| }, className, | ||
| mode); |
There was a problem hiding this comment.
className ${prefixCls}-${mode} is prefered.
| --- | ||
| order: 3 | ||
| title: | ||
| zh-CN: 基本用法 |
There was a problem hiding this comment.
You can use 交替展现 as chinese title.
|
|
||
| ## zh-CN | ||
|
|
||
| 基本的时间轴。 |
There was a problem hiding this comment.
You can use 内容在时间轴两侧轮流出现。 as chinese description.
components/timeline/demo/right.md
Outdated
| --- | ||
| order: 4 | ||
| title: | ||
| zh-CN: 自定义时间轴点 |
There was a problem hiding this comment.
You can use 右侧时间轴点 as chinese title.
components/timeline/demo/right.md
Outdated
|
|
||
| ## zh-CN | ||
|
|
||
| 可以设置为图标或其他自定义元素。 |
There was a problem hiding this comment.
You can use 时间轴点可以在内容的右边。 as chinese description.
Codecov Report
@@ Coverage Diff @@
## feature-3.8.0 #11490 +/- ##
=================================================
+ Coverage 91.87% 92.37% +0.49%
=================================================
Files 199 199
Lines 5061 5521 +460
Branches 1416 1611 +195
=================================================
+ Hits 4650 5100 +450
- Misses 405 416 +11
+ Partials 6 5 -1
Continue to review full report at Codecov.
|
Preventing from text to overflow the designed area.
| @@ -109,7 +109,7 @@ exports[`renders ./components/timeline/demo/alternate.md correctly 1`] = ` | |||
|
|
|||
| exports[`renders ./components/timeline/demo/basic.md correctly 1`] = ` | |||
| <ul | |||
| class="ant-timeline" | |||
| class="ant-timeline ant-timeline-" | |||
components/timeline/index.zh-CN.md
Outdated
| @@ -32,6 +32,7 @@ title: Timeline | |||
| | pending | 指定最后一个幽灵节点是否存在或内容 | boolean\|string\|ReactNode | false | | |||
| | pendingDot | 当最后一个幽灵节点存在時，指定其时间图点 | \|string\|ReactNode | `<Icon type="loading" />` | | |||
| | reverse | 节点排序 | boolean | false | | |||
| | mode | By sending `alternate` the timeline will distribute the nodes to the left and right. | `standard` \| `alternate` | `standard` | | |||
There was a problem hiding this comment.
Two standard should be left and right.
There was a problem hiding this comment.
And chinese goes to
通过设置 `mode` 可以改变时间轴和内容的相对位置
There was a problem hiding this comment.
wow sorry, bad copy & paste.
|
@jrvboesch Nice job!!! 😀 |
added a new prop to timeline called mode where you can send 'alternate' to change the timeline design and 'right' to flip horizontally.