drip-public/iview
6
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

add Timeline UI

Browse source 
add Timeline UI
This commit is contained in:
梁灏 2016-09-22 17:10:01 +08:00
parent c1dcac7aa3
commit 385cfebab6
6 changed files with 149 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
dist/styles/iview.all.css vendored
View file

File diff suppressed because one or more lines are too long

2
dist/styles/iview.css vendored
View file

File diff suppressed because one or more lines are too long

75
local/routers/tag.vue
View file

@ -6,34 +6,73 @@
<Button @click="error">error</Button>
<Button @click="update">update</Button>
<br><br>
<Progress :percent="25"></Progress>
<Progress :percent="45" status="success"></Progress>
<Progress :percent="45" status="active"></Progress>
<Progress :percent="65" status="wrong"></Progress>
<Progress :percent="100"></Progress>
<Progress :percent="25" hide-info></Progress>
<Progress :percent="percent"></Progress>
<Button-group size="large">
<Button icon="ios-plus-empty" @click="add"></Button>
<Button icon="ios-minus-empty" @click="minus"></Button>
</Button-group>
<Progress :percent="25" :stroke-width="5"></Progress>
<Progress :percent="100">
<Icon type="checkmark-circled"></Icon>
<span>成功</span>
</Progress>
<Timeline>
<Timeline-item>
<p class="time">1976年</p>
<p class="content">Apple I 问世</p>
</Timeline-item>
<Timeline-item>
<p class="time">1984年</p>
<p class="content">发布 Macintosh</p>
</Timeline-item>
<Timeline-item>
<p class="time">2007年</p>
<p class="content">发布 iPhone</p>
</Timeline-item>
<Timeline-item>
<p class="time">2010年</p>
<p class="content">发布 iPad</p>
</Timeline-item>
<Timeline-item>
<p class="time">2011年10月5日</p>
<p class="content">史蒂夫·乔布斯去世</p>
</Timeline-item>
</Timeline>
<br><br><br>
<Timeline>
<Timeline-item color="green">发布1.0版本</Timeline-item>
<Timeline-item color="green">发布2.0版本</Timeline-item>
<Timeline-item color="red">严重故障</Timeline-item>
<Timeline-item color="blue">发布3.0版本</Timeline-item>
</Timeline>
<br><br><br>
<Timeline pending>
<Timeline-item>发布1.0版本</Timeline-item>
<Timeline-item>发布2.0版本</Timeline-item>
<Timeline-item>发布3.0版本</Timeline-item>
<Timeline-item><a href="#">查看更多</a></Timeline-item>
</Timeline>
<br><br><br>
<Timeline>
<Timeline-item color="green">
<Icon type="trophy" slot="dot"></Icon>
<span>发布里程碑版本</span>
</Timeline-item>
<Timeline-item>发布1.0版本</Timeline-item>
<Timeline-item>发布2.0版本</Timeline-item>
<Timeline-item>发布3.0版本</Timeline-item>
</Timeline>
<br><br><br>
<Timeline pending>
<Timeline-item>发布1.0版本</Timeline-item>
<Timeline-item>发布2.0版本</Timeline-item>
</Timeline>
<br><br><br>
</div>
</template>
<script>
import { Tag, LoadingBar, Button, Progress, Icon } from 'iview';
import { Tag, LoadingBar, Button, Progress, Icon, Timeline } from 'iview';
const ButtonGroup = Button.Group;
const TimelineItem = Timeline.Item;
export default {
components: {
Tag,
Button,
Progress,
ButtonGroup,
Icon
Icon,
Timeline,
TimelineItem
},
props: {

2
package.json
View file

@ -1,6 +1,6 @@
{
"name": "iview",
"version": "0.0.19",
"version": "0.0.20",
"title": "iView",
"description": "A high quality UI components Library with Vue.js",
"homepage": "http://www.iviewui.com",

1
styles/components/index.less
View file

@ -16,3 +16,4 @@
@import "tag";
@import "loading-bar";
@import "progress";
@import "timeline";

87
styles/components/timeline.less Normal file
View file

@ -0,0 +1,87 @@
@timeline-prefix-cls: ~"@{css-prefix}timeline";
@timeline-color: @border-color-split;
.@{timeline-prefix-cls} {
list-style: none;
margin: 0;
padding: 0;
&-item {
margin: 0;
padding: 0 0 12px 0;
list-style: none;
position: relative;
&-tail {
height: 100%;
border-left: 2px solid @timeline-color;
position: absolute;
left: 5px;
top: 0;
}
&-pending &-tail {
display: none;
}
&-head {
width: 12px;
height: 12px;
background-color: #fff;
border-radius: 100px;
border: 2px solid transparent;
position: absolute;
&-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 {
width: 40px;
height: auto;
margin-top: 6px;
padding: 3px 0;
text-align: center;
line-height: 1;
border: 0;
border-radius: 0;
font-size: 14px;
position: absolute;
left: -14px;
.transform(translateY(-50%));
}
&-content {
padding: 0 0 10px 24px;
font-size: @font-size-base;
position: relative;
top: -4px;
}
&:last-child {
.@{timeline-prefix-cls}-item-tail {
display: none;
}
}
}
&&-pending &-item:nth-last-of-type(2) {
.@{timeline-prefix-cls}-item-tail {
border-left: 2px dotted @timeline-color;
}
.@{timeline-prefix-cls}-item-content {
min-height: 48px;
}
}
}