mirror/naive-ui
2
0
Fork 0
mirror of https://github.com/tusen-ai/naive-ui.git synced 2024-12-09 04:31:35 +08:00
Code Issues Packages Projects Releases Wiki Activity

doc(timeline)

Browse Source
This commit is contained in:
07akioni 2020-01-30 20:09:55 +08:00
parent 3f130451c2
commit 7fc112afd2
6 changed files with 133 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
demo/documentation/components/timeline/zhCN/basic.md Normal file
View File

@ -0,0 +1,31 @@
# 基本用法
```html
<n-timeline>
<n-timeline-item
content="啊"
/>
<n-timeline-item
type="success"
title="成功"
content="哪里成功"
time="2018-04-03 20:46"
/>
<n-timeline-item
type="error"
content="哪里错误"
time="2018-04-03 20:46"
/>
<n-timeline-item
type="warning"
title="警告"
content="哪里警告"
time="2018-04-03 20:46"
/>
<n-timeline-item
type="info"
title="信息"
content="是的"
time="2018-04-03 20:46"
/>
</n-timeline>
```

35
demo/documentation/components/timeline/zhCN/index.md
View File

@ -0,0 +1,35 @@
# Timeline 时间线
这个世界有两个纬度：时间、事件。
## 例子
```demo
basic
size
item-placement
```
## Props
### Timeline Props
|名称|类型|默认值|介绍|
|-|-|-|-|
|item-placement|`'left' \| 'right'`|`'left'`||
|size|`'medium' \| 'large'`|`'medium'`||
### Timeline Item Props
|名称|类型|默认值|介绍|
|-|-|-|-|
|title|`string`|`null`||
|content|`string`|`null`||
|time|`string`|`null`||
|type|`'default' \| 'success' \| 'info' \| 'warning' \| 'error'`|`'default'`||
## Slots
### Timeline Slots
|名称|参数|介绍|
|-|-|-|
|default|`()`||
### Timeline Item Props
|名称|参数|介绍|
|-|-|-|
|default|`()`||
|header|`()`||
|footer|`()`||

32
demo/documentation/components/timeline/zhCN/itemPlacement.md Normal file
View File

@ -0,0 +1,32 @@
# 方向
左，<span style="display: inline-block; transform: scaleX(-1);">右</span>
```html
<n-timeline item-placement="right">
<n-timeline-item
content="啊"
/>
<n-timeline-item
type="success"
title="成功"
content="哪里成功"
time="2018-04-03 20:46"
/>
<n-timeline-item
type="error"
content="哪里失败"
time="2018-04-03 20:46"
/>
<n-timeline-item
type="warning"
title="警告"
content="哪里警告"
time="2018-04-03 20:46"
/>
<n-timeline-item
type="info"
title="信息"
content="是的"
time="2018-04-03 20:46"
/>
</n-timeline>
```

32
demo/documentation/components/timeline/zhCN/size.md Normal file
View File

@ -0,0 +1,32 @@
# 大小
有 `medium`、`large` 大小
```html
<n-timeline size="large">
<n-timeline-item
content="啊"
/>
<n-timeline-item
type="success"
title="成功"
content="哪里成功"
time="2018-04-03 20:46"
/>
<n-timeline-item
type="error"
content="哪里错误"
time="2018-04-03 20:46"
/>
<n-timeline-item
type="warning"
title="警告"
content="哪里警告"
time="2018-04-03 20:46"
/>
<n-timeline-item
type="info"
title="信息"
content="是的"
time="2018-04-03 20:46"
/>
</n-timeline>
```

2
packages/common/Timeline/src/Timeline.vue
View File

@ -23,7 +23,7 @@ export default {
validator (value) {
return ['left', 'right'].includes(value)
},
default: 'right'
default: 'left'
},
size: {
validator (value) {

4
styles/Timeline.scss
View File

@ -45,7 +45,7 @@ $--timeline-header-margin-top: (
width: 100%;
display: flex;
flex-direction: column;
@include m(left-placement) {
@include m(right-placement) {
@include b(timeline-item) {
@include b(timeline-item-content) {
text-align: right;
@ -57,7 +57,7 @@ $--timeline-header-margin-top: (
}
}
}
@include m(right-placement) {
@include m(left-placement) {
@include b(timeline-item) {
@include b(timeline-item-content) {
margin-left: 26px;