mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-01-18 14:13:37 +08:00
Code Issues Actions 28 Packages Projects Releases Wiki Activity

✨ Timeline supports color gray item now (#17731)

Browse Source
This commit is contained in:
偏右 2019-07-19 14:08:39 +08:00 committed by zombieJ
parent 1147ae6949
commit 4852e0ef09
6 changed files with 71 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/timeline/TimelineItem.tsx
View File

@ -46,7 +46,7 @@ const TimelineItem: React.SFC<TimeLineItemProps> = props => (
<div className={`${prefixCls}-item-tail`} />
<div
className={dotClassName}
style={{ borderColor: /blue|red|green/.test(color) ? undefined : color }}
style={{ borderColor: /blue|red|green|gray/.test(color) ? undefined : color }}
>
{dot}
</div>

48
components/timeline/__tests__/__snapshots__/demo.test.js.snap
View File

@ -270,7 +270,7 @@ exports[`renders ./components/timeline/demo/color.md correctly 1`] = `
</div>
</li>
<li
class="ant-timeline-item ant-timeline-item-last"
class="ant-timeline-item"
>
<div
class="ant-timeline-item-tail"
@ -292,6 +292,52 @@ exports[`renders ./components/timeline/demo/color.md correctly 1`] = `
</p>
</div>
</li>
<li
class="ant-timeline-item"
>
<div
class="ant-timeline-item-tail"
/>
<div
class="ant-timeline-item-head ant-timeline-item-head-gray"
/>
<div
class="ant-timeline-item-content"
>
<p>
Technical testing 1
</p>
<p>
Technical testing 2
</p>
<p>
Technical testing 3 2015-09-01
</p>
</div>
</li>
<li
class="ant-timeline-item ant-timeline-item-last"
>
<div
class="ant-timeline-item-tail"
/>
<div
class="ant-timeline-item-head ant-timeline-item-head-gray"
/>
<div
class="ant-timeline-item-content"
>
<p>
Technical testing 1
</p>
<p>
Technical testing 2
</p>
<p>
Technical testing 3 2015-09-01
</p>
</div>
</li>
</ul>
`;

14
components/timeline/demo/color.md
View File

@ -7,11 +7,11 @@ title:
## zh-CN
圆圈颜色，绿色用于已完成、成功状态，红色表示告警或错误状态，蓝色可表示正在进行或其他默认状态。
圆圈颜色，绿色用于已完成、成功状态，红色表示告警或错误状态，蓝色可表示正在进行或其他默认状态，灰色表示未完成或失效状态。
## en-US
Set the color of circles. `green` means completed or success status, `red` means warning or error, and `blue` means ongoing or other default status.
Set the color of circles. `green` means completed or success status, `red` means warning or error, and `blue` means ongoing or other default status, `gray` for unfinished or disabled status.
```jsx
import { Timeline } from 'antd';
@ -30,6 +30,16 @@ ReactDOM.render(
<p>Technical testing 2</p>
<p>Technical testing 3 2015-09-01</p>
</Timeline.Item>
<Timeline.Item color="gray">
<p>Technical testing 1</p>
<p>Technical testing 2</p>
<p>Technical testing 3 2015-09-01</p>
</Timeline.Item>
<Timeline.Item color="gray">
<p>Technical testing 1</p>
<p>Technical testing 2</p>
<p>Technical testing 3 2015-09-01</p>
</Timeline.Item>
</Timeline>,
mountNode,
);

2
components/timeline/index.en-US.md
View File

@ -39,6 +39,6 @@ Node of timeline
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| color | Set the circle's color to `blue`, `red`, `green` or other custom colors | string | `blue` | |
| color | Set the circle's color to `blue`, `red`, `green`, `gray` or other custom colors | string | `blue` | |
| dot | Customize timeline dot | string\|ReactNode | - | |
| position | Customize node position | `left` \| `right` | - | 3.17.0 |

10
components/timeline/index.zh-CN.md
View File

@ -38,8 +38,8 @@ title: Timeline
时间轴的每一个节点。
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| -------- | ----------------------------------------------- | ----------------- | ------ | ------ |
| color | 指定圆圈颜色 `blue, red, green`，或自定义的色值 | string | blue | |
| dot | 自定义时间轴点 | string\|ReactNode | - | |
| position | 自定义节点位置 | `left` \| `right` | - | 3.17.0 |
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| color | 指定圆圈颜色 `blue, red, green, gray`，或自定义的色值 | string | blue | |
| dot | 自定义时间轴点 | string\|ReactNode | - | |
| position | 自定义节点位置 | `left` \| `right` | - | 3.17.0 |

5
components/timeline/style/index.less
View File

@ -55,6 +55,11 @@
color: @success-color;
border-color: @success-color;
}
&-gray {
color: @disabled-color;
border-color: @disabled-color;
}
}
&-head-custom {