Skip to content

Commit 488d483

Browse files
SandZnAngusFu
SandZn
authored and
AngusFu
committed
feat: add component c-tabs
1 parent 4c7856e commit 488d483

6 files changed

Lines changed: 601 additions & 1 deletion

File tree

‎docs/layouts/component.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -87,7 +87,7 @@ export default {
8787
title: '导航',
8888
icon: 'navigation',
8989
children: [
90-
{ title: '标签页', name: 'tab' },
90+
{ title: '标签页', name: 'tabs' },
9191
{ title: '导航菜单', name: 'menu' },
9292
{ title: '面包屑', name: 'breadcrumb' },
9393
{ title: '工具栏', name: 'toolbar' },

‎src/components/tabs/index.css‎

Lines changed: 147 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,147 @@
1+
/**
2+
* c-tabs
3+
*/
4+
@import url('../../styles/variables.css');
5+
6+
.c-tabs {
7+
display: flex;
8+
}
9+
10+
.tabs-nav {
11+
position: relative;
12+
display: flex;
13+
list-style: none;
14+
transition: color cubic-bezier(0.645, 0.045, 0.355, 1);
15+
border: transparent;
16+
17+
& .tabs-nav__item {
18+
cursor: pointer;
19+
padding: 0 0.6em;
20+
line-height: 2.8em;
21+
color: var(--black);
22+
transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
23+
24+
&:hover,
25+
&.is-active {
26+
color: var(--primary-color);
27+
}
28+
29+
&.disabled {
30+
color: color(var(--gray) l(80%));
31+
cursor: not-allowed;
32+
}
33+
}
34+
35+
& .tabs-nav--item:last-child {
36+
margin-right: 0;
37+
}
38+
}
39+
40+
.c-tabs--card {
41+
display: block;
42+
border: 1px solid color(var(--gray) l(90%));
43+
44+
& .tabs-nav {
45+
background: color(var(--primary-color) l(50%) a(0.1));
46+
47+
& .tabs-nav__item {
48+
padding: 0 1em;
49+
border-left: 1px solid transparent;
50+
border-right: 1px solid transparent;
51+
52+
&.is-active {
53+
background-color: #fff;
54+
position: relative;
55+
56+
&::after {
57+
position: absolute;
58+
z-index: 1;
59+
content: '';
60+
width: 100%;
61+
height: 1px;
62+
background-color: #fff;
63+
left: 0;
64+
bottom: -1px;
65+
}
66+
}
67+
68+
&:first-child.is-active {
69+
border-right: 1px solid color(var(--gray) l(90%));
70+
}
71+
72+
&:not(:first-child).is-active {
73+
border-left-color: color(var(--gray) l(90%));
74+
border-right-color: color(var(--gray) l(90%));
75+
}
76+
}
77+
}
78+
}
79+
80+
.nav-bar__active {
81+
z-index: 1;
82+
position: absolute;
83+
box-sizing: border-box;
84+
background-color: var(--primary-color);
85+
transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
86+
}
87+
88+
.c-tabs--top {
89+
flex-direction: column;
90+
}
91+
92+
.c-tabs--bottom {
93+
flex-direction: column-reverse;
94+
}
95+
96+
.c-tabs--top .tabs-nav,
97+
.c-tabs--bottom .tabs-nav {
98+
flex-direction: row;
99+
border-bottom: 1px solid color(var(--gray) l(90%));
100+
101+
& .tabs-nav__item {
102+
margin-right: 1.5em;
103+
}
104+
105+
& .nav-bar__active {
106+
height: 2px;
107+
bottom: -1px;
108+
}
109+
}
110+
111+
.c-tabs--left {
112+
flex-direction: row;
113+
114+
& .tabs-nav {
115+
flex-direction: column;
116+
border-right: 1px solid color(var(--gray) l(90%));
117+
118+
& .nav-bar__active {
119+
width: 2px;
120+
right: -1px;
121+
}
122+
}
123+
}
124+
125+
.c-tabs--right {
126+
flex-direction: row-reverse;
127+
128+
& .tabs-nav {
129+
flex-direction: column;
130+
border-left: 1px solid color(var(--gray) l(90%));
131+
132+
& .nav-bar__active {
133+
width: 2px;
134+
left: -1px;
135+
}
136+
}
137+
}
138+
139+
.c-tabs--left > .tabs-nav__item:not(:nth-last-child(2)),
140+
.c-tabs--right > .tabs-nav__item:not(:nth-last-child(2)) {
141+
margin-bottom: 0.6em;
142+
}
143+
144+
.tab-pane__content {
145+
padding: 0.6em;
146+
flex: 1;
147+
}

‎src/components/tabs/index.md‎

Lines changed: 193 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,193 @@
1+
---
2+
title: Tabs
3+
route: /component/tabs
4+
layout: component
5+
---
6+
7+
# Tabs
8+
9+
页面内容器切换组件。
10+
11+
## 基础标签
12+
13+
给`<c-tabs>`设置属性`activeIndex`的值，可指定当前展示容器，默认值为1。
14+
15+
`activeIndex`的值不要超出`<c-tab-pane`的个数，否则重置该值为1。
16+
17+
```html
18+
<c-tabs>
19+
<c-tab-pane label="Tab1">
20+
惜诵以致愍兮，发愤以抒情。<br>
21+
所作忠而言之兮，指苍天以为正。
22+
</c-tab-pane>
23+
<c-tab-pane label="Tab2">
24+
屈原既放，三年不得复见。<br>
25+
竭知尽忠而蔽障于谗。<br>
26+
心烦虑乱，不知所从。
27+
</c-tab-pane>
28+
<c-tab-pane label="Tab3">
29+
桂树丛生兮山之幽，偃蹇连蜷兮枝相缭。<br>
30+
山气巄嵷兮石嵯峨，溪谷崭岩兮水曾波。
31+
</c-tab-pane>
32+
</c-tabs>
33+
<br><br>
34+
<c-tabs activeIndex="2">
35+
<c-tab-pane label="Tab1">
36+
惜诵以致愍兮，发愤以抒情。<br>
37+
所作忠而言之兮，指苍天以为正。
38+
</c-tab-pane>
39+
<c-tab-pane label="Tab2">
40+
屈原既放，三年不得复见。<br>
41+
竭知尽忠而蔽障于谗。<br>
42+
心烦虑乱，不知所从。
43+
</c-tab-pane>
44+
<c-tab-pane label="Tab3">
45+
桂树丛生兮山之幽，偃蹇连蜷兮枝相缭。<br>
46+
山气巄嵷兮石嵯峨，溪谷崭岩兮水曾波。
47+
</c-tab-pane>
48+
</c-tabs>
49+
```
50+
51+
## 自定义标签
52+
53+
通过添加`slot="label"`给标签添加自定义内容。
54+
55+
```html
56+
<c-tabs>
57+
<c-tab-pane>
58+
<span slot="label">
59+
<c-icon name="video" size="1em" valign="middle"></c-icon>
60+
video
61+
</span>
62+
It's not what happens to you, but how you react to it that matters.
63+
</c-tab-pane>
64+
<c-tab-pane>
65+
<span slot="label">
66+
<c-icon name="sun" size="1em" valign="middle"></c-icon>
67+
sun
68+
</span>
69+
Be the type of person you want to meet.
70+
</c-tab-pane>
71+
<c-tab-pane>
72+
<span slot="label">
73+
<c-icon name="slack" size="1em" valign="middle"></c-icon>
74+
slack
75+
</span>
76+
Imagination is more important than knowledge. <br>
77+
Knowledge is limited. <br>
78+
Imagination encircles the world.
79+
</c-tab-pane>
80+
</c-tabs>
81+
```
82+
83+
## 使标签不可用
84+
通过给`<c-tab-pane>`设置`disabled`，使当前标签页呈现不可点击状态。
85+
86+
```html
87+
<c-tabs activeIndex="2">
88+
<c-tab-pane label="video" disabled>
89+
It's not what happens to you, but how you react to it that matters.
90+
</c-tab-pane>
91+
<c-tab-pane label="sun">
92+
Be the type of person you want to meet.
93+
</c-tab-pane>
94+
<c-tab-pane label="slack">
95+
Imagination is more important than knowledge. <br>
96+
Knowledge is limited. <br>
97+
Imagination encircles the world.
98+
</c-tab-pane>
99+
</c-tabs>
100+
```
101+
102+
## 标签位置
103+
通过给`<c-tabs>`设置`position`值，更换标签位置。
104+
```html
105+
<div style="margin-bottom: 2em;">
106+
<c-radio-group
107+
:options="options"
108+
v-model="position"
109+
button
110+
/>
111+
</div>
112+
113+
<c-tabs :position="position" activeIndex="3">
114+
<c-tab-pane label="Tab1">
115+
惜诵以致愍兮，发愤以抒情。<br>
116+
所作忠而言之兮，指苍天以为正。
117+
</c-tab-pane>
118+
<c-tab-pane label="Tab2">
119+
屈原既放，三年不得复见。<br>
120+
竭知尽忠而蔽障于谗。<br>
121+
心烦虑乱，不知所从。
122+
</c-tab-pane>
123+
<c-tab-pane label="Tab3">
124+
桂树丛生兮山之幽，偃蹇连蜷兮枝相缭。<br>
125+
山气巄嵷兮石嵯峨，溪谷崭岩兮水曾波。
126+
</c-tab-pane>
127+
</c-tabs>
128+
129+
<script>
130+
export default {
131+
data(){
132+
return {
133+
position: 'top',
134+
options: [
135+
{ label: 'top', value: 'top' },
136+
{ label: 'bottom', value: 'bottom' },
137+
{ label: 'left', value: 'left' },
138+
{ label: 'right', value: 'right' }
139+
]
140+
}
141+
}
142+
}
143+
</script>
144+
```
145+
146+
## 事件捕捉
147+
`@handleClicked`可捕捉触发切换标签事件。
148+
```html
149+
<c-tabs activeIndex="2" @handleClicked="onClick">
150+
<c-tab-pane label="video" disabled>
151+
It's not what happens to you, but how you react to it that matters.
152+
</c-tab-pane>
153+
<c-tab-pane label="sun">
154+
Be the type of person you want to meet.
155+
</c-tab-pane>
156+
<c-tab-pane label="slack">
157+
Imagination is more important than knowledge. <br>
158+
Knowledge is limited. <br>
159+
Imagination encircles the world.
160+
</c-tab-pane>
161+
</c-tabs>
162+
163+
<script>
164+
export default {
165+
methods: {
166+
onClick (value) {
167+
alert(`第${value}个标签，有幸被点...`)
168+
}
169+
}
170+
}
171+
</script>
172+
```
173+
174+
## 选项卡形式标签
175+
在`<c-tabs>`上设置`mode="card"`，更换为选项卡模式（不支持位置变换）。
176+
177+
```html
178+
<c-tabs mode="card">
179+
<c-tab-pane label="九章">
180+
惜诵以致愍兮，发愤以抒情。<br>
181+
所作忠而言之兮，指苍天以为正。
182+
</c-tab-pane>
183+
<c-tab-pane label="卜居">
184+
屈原既放，三年不得复见。<br>
185+
竭知尽忠而蔽障于谗。<br>
186+
心烦虑乱，不知所从。
187+
</c-tab-pane>
188+
<c-tab-pane label="招隐士">
189+
桂树丛生兮山之幽，偃蹇连蜷兮枝相缭。<br>
190+
山气巄嵷兮石嵯峨，溪谷崭岩兮水曾波。
191+
</c-tab-pane>
192+
</c-tabs>
193+
```

0 commit comments

Comments
 (0)