Skip to content

Commit bc6fcd3

Browse files
superluckyfirsuperluckyfir
committed
Add tabs and tab-pane components
1 parent 92e8d50 commit bc6fcd3

File tree

23 files changed

+595
-135
lines changed

23 files changed

+595
-135
lines changed

‎README.md

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,9 @@
3838
[Pagination 分页](http://mvui.savoygu.com/#/pagination
3939
)
4040

41+
[Tabs 标签页](http://mvui.savoygu.com/#/tabs
42+
)
43+
4144
...
4245

4346
comming soon

‎components.json

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,5 +14,7 @@
1414
"checkbox-group": "./packages/checkbox-group/index.js",
1515
"badge": "./packages/badge/index.js",
1616
"card": "./packages/card/index.js",
17-
"pagination": "./packages/pagination/index.js"
17+
"pagination": "./packages/pagination/index.js",
18+
"tabs": "./packages/tabs/index.js",
19+
"tab-pane": "./packages/tab-pane/index.js"
1820
}

‎document/docs/badge.md

Lines changed: 29 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,37 @@
11
<script>
2-
export default {
3-
data () {
4-
return {
5-
right: false,
6-
gap: false
7-
}
8-
},
9-
mounted () {
10-
this.$nextTick(_ => {
11-
let demos = document.querySelectorAll('.source')
12-
demos[2].style.padding = '0'
13-
})
14-
}
2+
export default {
3+
data () {
4+
return {
5+
right: false,
6+
gap: false
7+
}
8+
},
9+
mounted () {
10+
this.$nextTick(_ => {
11+
let demos = document.querySelectorAll('.source')
12+
demos[2].style.padding = '0'
13+
})
1514
}
15+
}
1616
</script>
1717
<style lang="scss">
18-
.demo-badge {
19-
.block {
20-
padding: 30px 24px;
21-
overflow: hidden;
22-
border-bottom: 1px solid #eff2f6;
23-
&:last-child {
24-
border-bottom: none;
25-
}
26-
}
27-
.demonstration {
28-
display: block;
29-
color: #8492a6;
30-
font-size: 14px;
31-
text-align: center;
32-
margin-bottom: 20px;
18+
.demo-badge {
19+
.block {
20+
padding: 30px 24px;
21+
overflow: hidden;
22+
border-bottom: 1px solid #eff2f6;
23+
&:last-child {
24+
border-bottom: none;
3325
}
3426
}
27+
.demonstration {
28+
display: block;
29+
color: #8492a6;
30+
font-size: 14px;
31+
text-align: center;
32+
margin-bottom: 20px;
33+
}
34+
}
3535
</style>
3636
## Badge 徽章
3737

@@ -98,7 +98,7 @@
9898
<mv-badge is-new caption="521"></mv-badge>
9999
<mv-badge is-new color="blue" caption="521"></mv-badge>
100100
<mv-badge is-new color="red" caption="521"></mv-badge>
101-
101+
102102
<mv-badge caption="521 已读"></mv-badge>
103103
<mv-badge is-new caption="521 已读"></mv-badge>
104104
<mv-badge is-new color="blue" caption="521 已读"></mv-badge>

‎document/docs/breadcrumb.md

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,22 @@
11
<script>
2-
export default {
3-
mounted () {
4-
this.$nextTick(_ => {
5-
let firstDemo = document.querySelector('.source')
6-
firstDemo.style.padding = '0'
7-
})
8-
}
2+
export default {
3+
mounted () {
4+
this.$nextTick(_ => {
5+
let firstDemo = document.querySelector('.source')
6+
firstDemo.style.padding = '0'
7+
})
98
}
9+
}
1010
</script>
1111
<style>
12-
.demo-breadcrumb .block {
13-
padding: 30px 24px;
14-
overflow: hidden;
15-
border-bottom: 1px solid #eff2f6;
16-
}
17-
.demo-breadcrumb .block:last-child {
18-
border-bottom: none;
19-
}
12+
.demo-breadcrumb .block {
13+
padding: 30px 24px;
14+
overflow: hidden;
15+
border-bottom: 1px solid #eff2f6;
16+
}
17+
.demo-breadcrumb .block:last-child {
18+
border-bottom: none;
19+
}
2020
</style>
2121
## Breadcrumb 面包屑
2222

‎document/docs/chip.md

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<script>
2-
export default {
2+
export default {
33
data () {
44
return {
55
chipGroup0: {tag:'联系人Chip标签', image: require('../../document/assets/user.jpg')},
@@ -16,25 +16,25 @@ export default {
1616
demos[2].style.padding = '0'
1717
})
1818
}
19-
}
19+
}
2020
</script>
2121

2222
<style>
23-
.demo-chip .block {
24-
padding: 30px 24px;
25-
overflow: hidden;
26-
border-bottom: 1px solid #eff2f6;
27-
}
28-
.demo-chip .block:last-child {
29-
border-bottom: none;
30-
}
31-
.demo-chip .demonstration {
32-
display: block;
33-
color: #8492a6;
34-
font-size: 14px;
35-
text-align: center;
36-
margin-bottom: 20px;
37-
}
23+
.demo-chip .block {
24+
padding: 30px 24px;
25+
overflow: hidden;
26+
border-bottom: 1px solid #eff2f6;
27+
}
28+
.demo-chip .block:last-child {
29+
border-bottom: none;
30+
}
31+
.demo-chip .demonstration {
32+
display: block;
33+
color: #8492a6;
34+
font-size: 14px;
35+
text-align: center;
36+
margin-bottom: 20px;
37+
}
3838
</style>
3939

4040
## Chip 消息块

‎document/docs/grid.md

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
<style>
22
.grid-example {
3-
margin: 7px 0;
4-
line-height: 50px;
5-
font-size: 14px;
6-
color: white;
7-
text-align: center;
8-
background-color: tomato;
9-
border: 1px solid #eee;
3+
margin: 7px 0;
4+
line-height: 50px;
5+
font-size: 14px;
6+
color: white;
7+
text-align: center;
8+
background-color: tomato;
9+
border: 1px solid #eee;
1010
}
1111
</style>
1212
## Grid 栅格系统

‎document/docs/icon.md

Lines changed: 35 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,43 @@
11
<script>
2-
export default {
3-
mounted () {
4-
this.$nextTick(_ => {
5-
let firstDemo = document.querySelector('.source')
6-
firstDemo.style.padding = '0'
7-
let blocks = document.querySelectorAll('.source .block')
8-
let maxHeight = 0
9-
for (let i = 0, len = blocks.length; i < len; i++) {
10-
maxHeight = Math.max(maxHeight, blocks[i].clientHeight)
11-
}
12-
[].slice.call(blocks, 0).forEach(block => {
13-
block.style.height = maxHeight + 'px'
14-
})
15-
})
2+
export default {
3+
mounted () {
4+
this.$nextTick(_ => {
5+
let firstDemo = document.querySelector('.source')
6+
firstDemo.style.padding = '0'
7+
let blocks = document.querySelectorAll('.source .block')
8+
let maxHeight = 0
9+
for (let i = 0, len = blocks.length; i < len; i++) {
10+
maxHeight = Math.max(maxHeight, blocks[i].clientHeight)
1611
}
12+
[].slice.call(blocks, 0).forEach(block => {
13+
block.style.height = maxHeight + 'px'
14+
})
15+
})
1716
}
17+
}
1818
</script>
1919
<style>
20-
.demo-icon .block{
21-
padding: 30px 0;
22-
text-align: center;
23-
border-right: solid 1px #EFF2F6;
24-
border-bottom: solid 1px #EFF2F6;
25-
float: left;
26-
width: 50%;
27-
box-sizing: border-box;
28-
}
29-
.demo-icon .block:nth-child(2n) {
30-
border-right: none;
31-
}
32-
.demo-icon .block:nth-last-child(1) {
33-
border-bottom: none;
34-
}
35-
.demo-icon .demonstration {
36-
display: block;
37-
color: #8492a6;
38-
font-size: 14px;
39-
margin-bottom: 20px;
40-
}
20+
.demo-icon .block{
21+
padding: 30px 0;
22+
text-align: center;
23+
border-right: solid 1px #EFF2F6;
24+
border-bottom: solid 1px #EFF2F6;
25+
float: left;
26+
width: 50%;
27+
box-sizing: border-box;
28+
}
29+
.demo-icon .block:nth-child(2n) {
30+
border-right: none;
31+
}
32+
.demo-icon .block:nth-last-child(1) {
33+
border-bottom: none;
34+
}
35+
.demo-icon .demonstration {
36+
display: block;
37+
color: #8492a6;
38+
font-size: 14px;
39+
margin-bottom: 20px;
40+
}
4141
</style>
4242
## Icon 图标
4343

‎document/docs/input.md

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
<script>
2-
export default {
3-
data () {
4-
return {
5-
hobby: ''
6-
}
7-
}
2+
export default {
3+
data () {
4+
return {
5+
hobby: ''
6+
}
87
}
8+
}
99
</script>
1010
## Input 输入框
1111

‎document/docs/pagination.md

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -93,10 +93,10 @@
9393
### Attributes
9494
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
9595
|---------- |-------- |---------- |------------- |-------- |
96-
| currentPage | 当前页 | number | — | — |
97-
| pageCount | 总页数 | number | — | — |
98-
| pageRange | 中间页码个数 | number | — | 5 |
99-
| edgePages | 边缘页码个数 | number | — | 1 |
96+
| current-page | 当前页 | number | — | — |
97+
| page-count | 总页数 | number | — | — |
98+
| page-range | 中间页码个数 | number | — | 5 |
99+
| edge-pages | 边缘页码个数 | number | — | 1 |
100100

101101
### Events
102102
| 事件名称 | 说明 | 回调参数 |

‎document/docs/radio.md

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -16,22 +16,22 @@
1616
}
1717
},
1818
methods: {
19-
chooseNext () {
20-
let next = this.gaps.indexOf(this.withGap) + 1
21-
next = next === this.gaps.length ? 0 : next
22-
this.withGap = this.gaps[next]
23-
},
24-
loopSwitch () {
25-
this.rgTimer = setInterval(_ => {
26-
let next = this.radioGroups.indexOf(this.radioGroup) + 1
27-
next = next === this.radioGroups.length ? 0 : next
28-
this.radioGroup = this.radioGroups[next]
29-
}, 500)
30-
},
31-
shutdownSwitch () {
32-
clearInterval(this.rgTimer)
33-
this.rgTimer = null
34-
}
19+
chooseNext () {
20+
let next = this.gaps.indexOf(this.withGap) + 1
21+
next = next === this.gaps.length ? 0 : next
22+
this.withGap = this.gaps[next]
23+
},
24+
loopSwitch () {
25+
this.rgTimer = setInterval(_ => {
26+
let next = this.radioGroups.indexOf(this.radioGroup) + 1
27+
next = next === this.radioGroups.length ? 0 : next
28+
this.radioGroup = this.radioGroups[next]
29+
}, 500)
30+
},
31+
shutdownSwitch () {
32+
clearInterval(this.rgTimer)
33+
this.rgTimer = null
34+
}
3535
},
3636
mounted () {
3737
this.loopSwitch()

0 commit comments

Comments
 (0)