Timeline design change feature #11490
Merged
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); |
afc163
Jul 30, 2018
Member
className ${prefixCls}-${mode} is prefered.
className ${prefixCls}-${mode} is prefered.
| --- | ||
| order: 3 | ||
| title: | ||
| zh-CN: 基本用法 |
afc163
Jul 30, 2018
•
Member
You can use 交替展现 as chinese title.
You can use 交替展现 as chinese title.
|
|
||
| ## zh-CN | ||
|
|
||
| 基本的时间轴。 |
afc163
Jul 30, 2018
Member
You can use 内容在时间轴两侧轮流出现。 as chinese description.
You can use 内容在时间轴两侧轮流出现。 as chinese description.
components/timeline/demo/right.md
Outdated
| --- | ||
| order: 4 | ||
| title: | ||
| zh-CN: 自定义时间轴点 |
afc163
Jul 30, 2018
Member
You can use 右侧时间轴点 as chinese title.
You can use 右侧时间轴点 as chinese title.
components/timeline/demo/right.md
Outdated
|
|
||
| ## zh-CN | ||
|
|
||
| 可以设置为图标或其他自定义元素。 |
afc163
Jul 30, 2018
•
Member
You can use 时间轴点可以在内容的右边。 as chinese description.
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-" | |||
afc163
Jul 31, 2018
Member
oops
oops
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` | | |||
afc163
Jul 31, 2018
Member
Two standard should be left and right.
Two standard should be left and right.
afc163
Jul 31, 2018
Member
And chinese goes to
通过设置 `mode` 可以改变时间轴和内容的相对位置
And chinese goes to
通过设置 `mode` 可以改变时间轴和内容的相对位置
jrvboesch
Jul 31, 2018
Author
Contributor
wow sorry, bad copy & paste.
wow sorry, bad copy & paste.
|
@jrvboesch Nice job!!! |
afc163
merged commit f4d631d
into
ant-design:feature-3.8.0
20 checks passed
20 checks passed
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
added a new prop to timeline called mode where you can send 'alternate' to change the timeline design and 'right' to flip horizontally.