New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
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 |
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
className ${prefixCls}-${mode}
is prefered.
--- | ||
order: 3 | ||
title: | ||
zh-CN: 基本用法 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
You can use 交替展现
as chinese title.
|
||
## zh-CN | ||
|
||
基本的时间轴。 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
You can use 内容在时间轴两侧轮流出现。
as chinese description.
components/timeline/demo/right.md
Outdated
--- | ||
order: 4 | ||
title: | ||
zh-CN: 自定义时间轴点 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
You can use 右侧时间轴点
as chinese title.
components/timeline/demo/right.md
Outdated
|
||
## zh-CN | ||
|
||
可以设置为图标或其他自定义元素。 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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-" |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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` | |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Two standard should be left
and right
.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
And chinese goes to
通过设置 `mode` 可以改变时间轴和内容的相对位置
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.