wangxueliang
7 years ago
18 changed files with 436 additions and 9 deletions
@ -0,0 +1,58 @@
|
||||
import classNames from 'classnames' |
||||
import PropTypes from '../_util/vue-types' |
||||
import { getOptionProps, initDefaultProps, filterEmpty, getComponentFromProp } from '../_util/props-util' |
||||
import { cloneElement } from '../_util/vnode' |
||||
import TimelineItem from './TimelineItem' |
||||
import Icon from '../icon' |
||||
|
||||
export const TimelineProps = { |
||||
prefixCls: PropTypes.string, |
||||
className: PropTypes.string, |
||||
/** 指定最后一个幽灵节点是否存在或内容 */ |
||||
pending: PropTypes.any, |
||||
} |
||||
|
||||
export default { |
||||
name: 'Timeline', |
||||
props: initDefaultProps(TimelineProps, { |
||||
prefixCls: 'ant-timeline', |
||||
}), |
||||
render () { |
||||
const { prefixCls, ...restProps } = getOptionProps(this) |
||||
const pending = getComponentFromProp(this, 'pending') |
||||
const pendingNode = typeof pending === 'boolean' ? null : pending |
||||
const classString = classNames(prefixCls, { |
||||
[`${prefixCls}-pending`]: !!pending, |
||||
}) |
||||
// Remove falsy items |
||||
const falsylessItems = filterEmpty(this.$slots.default) |
||||
const items = falsylessItems.map((item, idx) => { |
||||
return cloneElement(item, { |
||||
props: { |
||||
last: falsylessItems.length - 1 === idx, |
||||
}, |
||||
}) |
||||
}) |
||||
const pendingItem = (pending) ? ( |
||||
<TimelineItem |
||||
pending={!!pending} |
||||
> |
||||
<Icon slot='dot' type='loading' /> |
||||
{pendingNode} |
||||
</TimelineItem> |
||||
) : null |
||||
const timelineProps = { |
||||
props: { |
||||
...restProps, |
||||
}, |
||||
class: classString, |
||||
on: this.$listeners, |
||||
} |
||||
return ( |
||||
<ul {...timelineProps}> |
||||
{items} |
||||
{pendingItem} |
||||
</ul> |
||||
) |
||||
}, |
||||
} |
||||
@ -0,0 +1,52 @@
|
||||
import classNames from 'classnames' |
||||
import PropTypes from '../_util/vue-types' |
||||
import { getOptionProps, initDefaultProps, getComponentFromProp } from '../_util/props-util' |
||||
|
||||
export const TimeLineItemProps = { |
||||
prefixCls: PropTypes.string, |
||||
className: PropTypes.string, |
||||
color: PropTypes.string, |
||||
dot: PropTypes.any, |
||||
pending: PropTypes.bool, |
||||
last: PropTypes.bool, |
||||
} |
||||
|
||||
export default { |
||||
name: 'TimelineItem', |
||||
props: initDefaultProps(TimeLineItemProps, { |
||||
prefixCls: 'ant-timeline', |
||||
color: 'blue', |
||||
last: false, |
||||
pending: false, |
||||
}), |
||||
render () { |
||||
const { prefixCls, color = '', last, pending, ...restProps } = getOptionProps(this) |
||||
const dot = getComponentFromProp(this, 'dot') |
||||
const itemClassName = classNames({ |
||||
[`${prefixCls}-item`]: true, |
||||
[`${prefixCls}-item-last`]: last, |
||||
[`${prefixCls}-item-pending`]: pending, |
||||
}) |
||||
|
||||
const dotClassName = classNames({ |
||||
[`${prefixCls}-item-head`]: true, |
||||
[`${prefixCls}-item-head-custom`]: dot, |
||||
[`${prefixCls}-item-head-${color}`]: true, |
||||
}) |
||||
|
||||
return ( |
||||
<li {...restProps} class={itemClassName}> |
||||
<div class={`${prefixCls}-item-tail`} /> |
||||
<div |
||||
class={dotClassName} |
||||
style={{ borderColor: /blue|red|green/.test(color) ? null : color }} |
||||
> |
||||
{dot} |
||||
</div> |
||||
<div class={`${prefixCls}-item-content`}> |
||||
{this.$slots.default} |
||||
</div> |
||||
</li> |
||||
) |
||||
}, |
||||
} |
||||
@ -0,0 +1,22 @@
|
||||
<cn> |
||||
#### 基本用法 |
||||
基本的时间轴。 |
||||
</cn> |
||||
|
||||
<us> |
||||
#### Basic |
||||
Basic timeline. |
||||
</us> |
||||
|
||||
```html |
||||
<template> |
||||
<a-timeline> |
||||
<a-timeline-item>Create a services site 2015-09-01</a-timeline-item> |
||||
<a-timeline-item>Solve initial network problems 2015-09-01</a-timeline-item> |
||||
<a-timeline-item>Technical testing 2015-09-01</a-timeline-item> |
||||
<a-timeline-item>Network problems being solved 2015-09-01</a-timeline-item> |
||||
</a-timeline> |
||||
</template> |
||||
``` |
||||
|
||||
|
||||
@ -0,0 +1,31 @@
|
||||
<cn> |
||||
#### 圆圈颜色 |
||||
圆圈颜色，绿色用于已完成、成功状态，红色表示告警或错误状态，蓝色可表示正在进行或其他默认状态。 |
||||
</cn> |
||||
|
||||
<us> |
||||
#### Color |
||||
Set the color of circles. `green` means completed or success status, `red` means warning or error, and `blue` means ongoing or other default status. |
||||
</us> |
||||
|
||||
```html |
||||
<template> |
||||
<a-timeline> |
||||
<a-timeline-item color="green">Create a services site 2015-09-01</a-timeline-item> |
||||
<a-timeline-item color="green">Create a services site 2015-09-01</a-timeline-item> |
||||
<a-timeline-item color="red"> |
||||
<p>Solve initial network problems 1</p> |
||||
<p>Solve initial network problems 2</p> |
||||
<p>Solve initial network problems 3 2015-09-01</p> |
||||
</a-timeline-item> |
||||
<a-timeline-item> |
||||
<p>Technical testing 1</p> |
||||
<p>Technical testing 2</p> |
||||
<p>Technical testing 3 2015-09-01</p> |
||||
</a-timeline-item> |
||||
</a-timeline> |
||||
</template> |
||||
``` |
||||
|
||||
|
||||
|
||||
@ -0,0 +1,26 @@
|
||||
<cn> |
||||
#### 自定义时间轴点 |
||||
基本的时间轴。 |
||||
</cn> |
||||
|
||||
<us> |
||||
#### Custom |
||||
Set a node as an icon or other custom element. |
||||
</us> |
||||
|
||||
```html |
||||
<template> |
||||
<a-timeline> |
||||
<a-timeline-item>Create a services site 2015-09-01</a-timeline-item> |
||||
<a-timeline-item>Solve initial network problems 2015-09-01</a-timeline-item> |
||||
<a-timeline-item color="red"> |
||||
<a-icon slot="dot" type="clock-circle-o" style="fontSize: '16px'" /> |
||||
Technical testing 2015-09-01 |
||||
</a-timeline-item> |
||||
<a-timeline-item>Network problems being solved 2015-09-01</a-timeline-item> |
||||
</a-timeline> |
||||
</template> |
||||
``` |
||||
|
||||
|
||||
|
||||
@ -0,0 +1,54 @@
|
||||
<script> |
||||
import Basic from './basic.md' |
||||
import Color from './color.md' |
||||
import Pending from './pending.md' |
||||
import Custom from './custom.md' |
||||
import CN from '../index.zh-CN.md' |
||||
import US from '../index.en-US.md' |
||||
|
||||
const md = { |
||||
cn: `# 时间轴 |
||||
垂直展示的时间流信息。 |
||||
## 何时使用 |
||||
在操作需要较长时间才能完成时，为用户显示该操作的当前进度和状态。 |
||||
|
||||
- 当有一系列信息需按时间排列时，可正序和倒序。 |
||||
- 需要有一条时间轴进行视觉上的串联时。。 |
||||
## 代码演示`, |
||||
us: `# Data Display |
||||
Vertical display timeline. |
||||
|
||||
- When a series of information needs to be ordered by time (ascend or descend). |
||||
- When you need a timeline to make a visual connection. |
||||
## Examples |
||||
`, |
||||
} |
||||
export default { |
||||
category: 'Components', |
||||
subtitle: '时间轴', |
||||
type: 'Data Display', |
||||
title: 'Timeline', |
||||
render () { |
||||
return ( |
||||
<div> |
||||
<md cn={md.cn} us={md.us}/> |
||||
<br/> |
||||
<Basic /> |
||||
<br/> |
||||
<Color /> |
||||
<br/> |
||||
<Pending /> |
||||
<br/> |
||||
<Custom /> |
||||
<br/> |
||||
<api> |
||||
<template slot='cn'> |
||||
<CN/> |
||||
</template> |
||||
<US/> |
||||
</api> |
||||
</div> |
||||
) |
||||
}, |
||||
} |
||||
</script> |
||||
@ -0,0 +1,23 @@
|
||||
<cn> |
||||
#### 最后一个 |
||||
当任务状态正在发生，还在记录过程中，可用幽灵节点来表示当前的时间节点。（用于时间正序排列） |
||||
</cn> |
||||
|
||||
<us> |
||||
#### Last node |
||||
When the timeline is incomplete and ongoing, put a ghost node at last. set `pending={true}` or `pending={a React Element}`. Used in ascend chronological order. |
||||
</us> |
||||
|
||||
```html |
||||
<template> |
||||
<a-timeline pending="Recording..."> |
||||
<a-timeline-item>Create a services site 2015-09-01</a-timeline-item> |
||||
<a-timeline-item>Solve initial network problems 2015-09-01</a-timeline-item> |
||||
<a-timeline-item>Technical testing 2015-09-01</a-timeline-item> |
||||
</a-timeline> |
||||
</template> |
||||
``` |
||||
|
||||
|
||||
|
||||
|
||||
@ -0,0 +1,27 @@
|
||||
## API |
||||
|
||||
```` html |
||||
<Timeline> |
||||
<Timeline.Item>step1 2015-09-01</Timeline.Item> |
||||
<Timeline.Item>step2 2015-09-01</Timeline.Item> |
||||
<Timeline.Item>step3 2015-09-01</Timeline.Item> |
||||
<Timeline.Item>step4 2015-09-01</Timeline.Item> |
||||
</Timeline> |
||||
```` |
||||
|
||||
### Timeline |
||||
|
||||
Timeline |
||||
|
||||
| Property | Description | Type | Default | |
||||
| -------- | ----------- | ---- | ------- | |
||||
| pending | Set the last ghost node's existence or its content | boolean\|string\|slot | `false` | |
||||
|
||||
### Timeline.Item |
||||
|
||||
Node of timeline |
||||
|
||||
| Property | Description | Type | Default | |
||||
| -------- | ----------- | ---- | ------- | |
||||
| color | Set the circle's color to `blue`, `red`, `green` or other custom colors | string | `blue` | |
||||
| dot | Customize timeline dot | string\|slot | - | |
||||
@ -0,0 +1,9 @@
|
||||
import Timeline from './Timeline' |
||||
|
||||
export { TimelineProps } from './Timeline' |
||||
export { TimeLineItemProps } from './TimelineItem' |
||||
import TimelineItem from './TimelineItem' |
||||
|
||||
Timeline.Item = TimelineItem |
||||
|
||||
export default Timeline |
||||
@ -0,0 +1,27 @@
|
||||
## API |
||||
|
||||
```` html |
||||
<Timeline> |
||||
<Timeline.Item>创建服务现场 2015-09-01</Timeline.Item> |
||||
<Timeline.Item>初步排除网络异常 2015-09-01</Timeline.Item> |
||||
<Timeline.Item>技术测试异常 2015-09-01</Timeline.Item> |
||||
<Timeline.Item>网络异常正在修复 2015-09-01</Timeline.Item> |
||||
</Timeline> |
||||
```` |
||||
|
||||
### Timeline |
||||
|
||||
时间轴。 |
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | |
||||
| --- | --- | --- | --- | |
||||
| pending | 指定最后一个幽灵节点是否存在或内容 | boolean\|string\|slot | false | |
||||
|
||||
### Timeline.Item |
||||
|
||||
时间轴的每一个节点。 |
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | |
||||
| --- | --- | --- | --- | |
||||
| color | 指定圆圈颜色 `blue, red, green`，或自定义的色值 | string | blue | |
||||
| dot | 自定义时间轴点 | string\|slot | - | |
||||
@ -0,0 +1,2 @@
|
||||
import '../../style/index.less' |
||||
import './index.less' |
||||
@ -0,0 +1,93 @@
|
||||
@import "../../style/themes/default"; |
||||
@import "../../style/mixins/index"; |
||||
|
||||
@timeline-prefix-cls: ~"@{ant-prefix}-timeline"; |
||||
@timeline-color: @border-color-split; |
||||
|
||||
.@{timeline-prefix-cls} { |
||||
.reset-component; |
||||
list-style: none; |
||||
margin: 0; |
||||
padding: 0; |
||||
|
||||
&-item { |
||||
position: relative; |
||||
padding: 0 0 20px; |
||||
list-style: none; |
||||
margin: 0; |
||||
font-size: @font-size-base; |
||||
|
||||
&-tail { |
||||
position: absolute; |
||||
left: 4px; |
||||
top: 0.75em; |
||||
height: 100%; |
||||
border-left: 2px solid @timeline-color; |
||||
} |
||||
|
||||
&-pending &-head { |
||||
font-size: @font-size-sm; |
||||
} |
||||
|
||||
&-pending &-tail { |
||||
display: none; |
||||
} |
||||
|
||||
&-head { |
||||
position: absolute; |
||||
width: 10px; |
||||
height: 10px; |
||||
background-color: @component-background; |
||||
border-radius: 100px; |
||||
border: 2px solid transparent; |
||||
|
||||
&-blue { |
||||
border-color: @primary-color; |
||||
color: @primary-color; |
||||
} |
||||
&-red { |
||||
border-color: @error-color; |
||||
color: @error-color; |
||||
} |
||||
&-green { |
||||
border-color: @success-color; |
||||
color: @success-color; |
||||
} |
||||
} |
||||
|
||||
&-head-custom { |
||||
position: absolute; |
||||
text-align: center; |
||||
line-height: 1; |
||||
margin-top: 0; |
||||
border: 0; |
||||
height: auto; |
||||
border-radius: 0; |
||||
padding: 3px 0; |
||||
transform: translate(-50%, -50%); |
||||
top: 5px; |
||||
left: 5px; |
||||
width: auto; |
||||
} |
||||
|
||||
&-content { |
||||
padding: 0 0 0 18px; |
||||
position: relative; |
||||
top: -(@font-size-base * @line-height-base - @font-size-base) + 1px; |
||||
} |
||||
|
||||
&-last { |
||||
.@{timeline-prefix-cls}-item-tail { |
||||
border-left: 2px dotted @timeline-color; |
||||
display: none; |
||||
} |
||||
.@{timeline-prefix-cls}-item-content { |
||||
min-height: 48px; |
||||
} |
||||
} |
||||
} |
||||
|
||||
&&-pending &-item-last &-item-tail { |
||||
display: block; |
||||
} |
||||
} |
||||
Loading…
Reference in new issue