vue 组件标签里面套组件
带有活动线的Vue选项卡 (Vue-tabs-with-active-line)
Simple Vue 2 component, that allows you to make tabs with moving bottom line.
简单的Vue 2组件,使您可以制作带有移动底线的标签。
安装 (Install)
via NPM
通过NPM
npm install vue-tabs-with-active-line --save
用法 (Usage)
Import the component
导入组件
import Tabs from 'vue-tabs-with-active-line';
Define the data for props tabs
, currentTab
, and method for onClick
callback
定义props tabs
, currentTab
和onClick
回调方法的数据
export default {
components: {
Tabs,
},
data: () => ({
tabs: [
{ title: 'Tab 1', value: 'tab1' },
{ title: 'Tab 2', value: 'tab2' },
{ title: 'Tab 3', value: 'tab3', }
],
currentTab: 'tab1',
}),
methods: {
handleClick(newTab) {
this.currentTab = newTab;
},
},
}
</script>
here's the HTML structure generated from the data entered:
这是根据输入的数据生成HTML结构:
<nav class="tabs">
<button class="tabs__item tabs__item_active"> Tab 1 </button> <!-- active tab -->
<button class="tabs__item"> Tab 2 </button>
<button class="tabs__item"> Tab 3 </button>
<div class="tabs__active-line"></div>
</nav>
Finally, add some styles for component elements:
最后,为组件元素添加一些样式:
.tabs
- component wrapper.tabs
组件包装器.tabs__item
- button.tabs__item
按钮.tabs__item_active
- active button.tabs__item_active
活动按钮.tabs__active-line
- bottom line.tabs__active-line
底线
Be sure to add position: relative;
for .tabs
class
确保添加position: relative;
对于.tabs
类
and position: absolute;
with bottom, left, height, background-color
properties for .tabs__active-line
class
和position: absolute;
.tabs__active-line
类的bottom, left, height, background-color
属性
在下面,您将找到CSS和SCSS的基本样式 (Below you'll find basic style in CSS and SCSS)
CSS EXAMPLE
CSS示例
.tabs {
position: relative;
margin: 0 auto;
}
.tabs__item {
display: inline-block;
margin: 0 5px;
padding: 10px;
padding-bottom: 8px;
font-size: 16px;
letter-spacing: 0.8px;
color: gray;
text-decoration: none;
border: none;
background-color: transparent;
border-bottom: 2px solid transparent;
cursor: pointer;
transition: all 0.25s;
}
.tabs__item_active {
color: black;
}
.tabs__item:hover {
border-bottom: 2px solid gray;
color: black;
}
.tabs__item:focus {
outline: none;
border-bottom: 2px solid gray;
color: black;
}
.tabs__item:first-child {
margin-left: 0;
}
.tabs__item:last-child {
margin-right: 0;
}
.tabs__active-line {
position: absolute;
bottom: 0;
left: 0;
height: 2px;
background-color: black;
transition: transform 0.4s ease, width 0.4s ease;
}
SCSS Example
SCSS示例
.tabs {
position: relative;
margin: 0 auto;
&__active-line {
position: absolute;
bottom: 0;
left: 0;
height: 2px;
background-color: black;
transition: transform 0.4s ease, width 0.4s ease;
}
&__item {
display: inline-block;
margin: 0 5px;
padding: 10px;
padding-bottom: 8px;
font-size: 16px;
letter-spacing: 0.8px;
color: gray;
text-decoration: none;
border: none;
background-color: transparent;
border-bottom: 2px solid transparent;
cursor: pointer;
transition: all 0.25s;
&_active {
color: black;
}
&:hover {
border-bottom: 2px solid gray;
color: black;
}
&:focus {
outline: none;
border-bottom: 2px solid gray;
color: black;
}
&:first-child {
margin-left: 0;
}
&:last-child {
margin-right: 0;
}
}
}
道具 (Props)
tabs
(tabs
)
type: Array
, required: true
类型: Array
,必需: true
The array must contain objects with the following properties:
数组必须包含具有以下属性的对象:
-
title
- required, typestring
. Title of tabtitle
必需,输入string
。 标签标题 -
value
- required, typestring
. Value of tabvalue
-必需,键入string
。 标签的价值 -
disabled
- optional, typestring
. Disabled attributedisabled
可选,键入string
。 禁用属性
currentTab
(currentTab
)
type: String
, required: true
.
类型: String
,必填: true
。
Required: true
必填:true
onClick
(onClick
)
type: Function
, required: true
.
类型: Function
,必需: true
。
Returns new tab value when clicked
单击时返回新的选项卡值
wrapperClass
(wrapperClass
)
type: String
, required: false
.
类型: String
,必填: false
。
Custom class for container
容器的自定义类
tabClass
(tabClass
)
type: String
, required: false
.
类型: String
,必填: false
。
Custom class for tab item
选项卡项目的自定义类
tabActiveClass
(tabActiveClass
)
type: String
, required: false
.
类型: String
,必填: false
。
Custom class for active tab item
活动标签项目的自定义类别
lineClass
(lineClass
)
type: String
, required: false
.
类型: String
,必填: false
。
Custom class for active line
活动线路的自定义类别
如何在本地运行 (How to run it locally)
Clone repository:
git clone [email protected]:karambafe/vue-tabs-with-active-line.git
克隆存储库:
git clone [email protected] :karambafe/vue-tabs-with-active-line.git
Install cli-service-global:
npm install -g @vue/cli-service-global
Vue CLI 3 docs安装cli-service-global:
npm install -g @vue/cli-service-global
Vue CLI 3文档Run any vue file with hot reload and static server:
vue serve demo-src/App.vue
使用热重载和静态服务器运行任何vue文件:
vue serve demo-src/App.vue
vue 组件标签里面套组件