add timeline
wangxueliang
parent
21ea62a736
commit
6dfd2717ee
|
|
@ -142,3 +142,7 @@ export { default as version } from './version'
|
|||
export { default as Slider } from './slider'
|
||||
|
||||
export { default as Progress } from './progress'
|
||||
|
||||
import Timeline from './timeline'
|
||||
const TimelineItem = Timeline.Item
|
||||
export { Timeline, TimelineItem }
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<script>
|
||||
import Basic from './basic.md'
|
||||
import InputNumber from './input-number.md'
|
||||
// import InputNumber from './input-number.md'
|
||||
import IconSlider from './icon-slider.md'
|
||||
import TipFormatter from './tip-formatter.md'
|
||||
import Event from './event.md'
|
||||
|
|
@ -34,8 +34,6 @@ export default {
|
|||
<br/>
|
||||
<Basic />
|
||||
<br />
|
||||
<InputNumber />
|
||||
<br />
|
||||
<IconSlider />
|
||||
<br />
|
||||
<TipFormatter />
|
||||
|
|
|
|||
|
|
@ -37,3 +37,4 @@ import './date-picker/style'
|
|||
import './slider/style'
|
||||
import './table/style'
|
||||
import './progress/style'
|
||||
import './timeline/style'
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -50,8 +50,7 @@ Collapse | done
|
|||
Spin | done
|
||||
Switch | done
|
||||
Steps | done
|
||||
Progress
|
||||
Slider
|
||||
Table
|
||||
Timeline
|
||||
Progress | done
|
||||
Slider | done InputNumber做完补全demo
|
||||
Timeline | done
|
||||
Transfer
|
||||
|
|
|
|||
|
|
@ -35,5 +35,6 @@ export { default as steps } from 'antd/steps/demo/index.vue'
|
|||
export { default as calendar } from 'antd/calendar/demo/index.vue'
|
||||
export { default as datePicker } from 'antd/date-picker/demo/index.vue'
|
||||
export { default as localeProvider } from 'antd/locale-provider/demo/index.vue'
|
||||
// export { default as slider } from 'antd/slider/demo/index.vue'
|
||||
export { default as slider } from 'antd/slider/demo/index.vue'
|
||||
export { default as progress } from 'antd/progress/demo/index.vue'
|
||||
export { default as timeline } from 'antd/timeline/demo/index.vue'
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ const AsyncComp = () => {
|
|||
const hashs = window.location.hash.split('/')
|
||||
const d = hashs[hashs.length - 1]
|
||||
return {
|
||||
component: import(`../components/progress/demo/${d}`),
|
||||
component: import(`../components/timeline/demo/${d}`),
|
||||
}
|
||||
}
|
||||
export default [
|
||||
|
|
|
|||
Loading…
Reference in New Issue