mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-05 19:41:42 +08:00
tabs almost
This commit is contained in:
zhuxiang
parent
b9716a4dab
commit
522830aac5
@ -21,5 +21,7 @@
|
||||
"badge-group": "./packages/badge-group/index.js",
|
||||
"badge": "./packages/badge/index.js",
|
||||
"search": "./packages/search/index.js",
|
||||
"step": "./packages/step/index.js"
|
||||
"step": "./packages/step/index.js",
|
||||
"tabs": "./packages/tabs/index.js",
|
||||
"tab": "./packages/tab/index.js"
|
||||
}
|
||||
|
||||
60
docs/examples-docs/tab.md
Normal file
60
docs/examples-docs/tab.md
Normal file
@ -0,0 +1,60 @@
|
||||
## Tab 组件
|
||||
|
||||
### 基础用法
|
||||
|
||||
```html
|
||||
<zan-tabs>
|
||||
<zan-tab tab-key="0" title="选项一">内容一</zan-tab>
|
||||
<zan-tab tab-key="1" title="选项二">内容二</zan-tab>
|
||||
<zan-tab tab-key="2" title="选项三">内容三</zan-tab>
|
||||
<zan-tab tab-key="3" title="选项四">内容四</zan-tab>
|
||||
<zan-tab tab-key="4" title="选项五">内容五</zan-tab>
|
||||
</zan-tabs>
|
||||
```
|
||||
|
||||
### 自定义样式用法
|
||||
|
||||
```html
|
||||
<zan-tabs active-tab-key="2" tabs-class-name="custom-tabwrap" tab-class-name="custom-tab">
|
||||
<zan-tab tab-key="0" title="选项一" tab-pane-class-name="custom-pane">内容一</zan-tab>
|
||||
<zan-tab tab-key="1" title="选项二" tab-pane-class-name="custom-pane">内容二</zan-tab>
|
||||
<zan-tab tab-key="2" title="选项三" tab-pane-class-name="custom-pane">内容三</zan-tab>
|
||||
<zan-tab tab-key="3" title="选项四" tab-pane-class-name="custom-pane">内容四</zan-tab>
|
||||
<zan-tab tab-key="4" title="选项五" tab-pane-class-name="custom-pane">内容五</zan-tab>
|
||||
</zan-tabs>
|
||||
<style>
|
||||
.page-tab {
|
||||
padding: 0 15px;
|
||||
}
|
||||
.custom-tabwrap .zan-tab-active{
|
||||
color: #20a0ff;
|
||||
}
|
||||
.custom-tabwrap .zan-tabs-nav-bar{
|
||||
background: #20a0ff;
|
||||
}
|
||||
.custom-tab {
|
||||
font-weight: bold;
|
||||
}
|
||||
.custom-pane {
|
||||
text-align: center;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
|
||||
### zan-tabs API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 必须 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| active-key | 激活的badge的索引 | string | '0'但必须子badge里的mark是有0位索引 | |
|
||||
|
||||
|
||||
### z-badge API
|
||||
| 参数 | 说明 | 类型 | 默认值 | 必须 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| mark | badge的唯一key值 | string | '' | required |
|
||||
| title | badge的文案标题 | string | '' | required |
|
||||
| info | 当前badge的提示消息数量 | string | '' | |
|
||||
| url | 跳转链接 | string | 全连接直接跳转或者hash | |
|
||||
49
docs/examples/tab.vue
Normal file
49
docs/examples/tab.vue
Normal file
@ -0,0 +1,49 @@
|
||||
<template>
|
||||
<div class="page-tab">
|
||||
<h1 class="page-title">Tab</h1>
|
||||
|
||||
<h2 class="page-sub-title">基础用法line</h2>
|
||||
<zan-tabs>
|
||||
<zan-tab tab-key="0" title="选项一">内容一</zan-tab>
|
||||
<zan-tab tab-key="1" title="选项二">内容二</zan-tab>
|
||||
<zan-tab tab-key="2" title="选项三">内容三</zan-tab>
|
||||
<zan-tab tab-key="3" title="选项四">内容四</zan-tab>
|
||||
<zan-tab tab-key="4" title="选项五">内容五</zan-tab>
|
||||
</zan-tabs>
|
||||
|
||||
<h2 class="page-sub-title" style="margin-top: 50px;">基础用法card</h2>
|
||||
<zan-tabs class-type="card">
|
||||
<zan-tab tab-key="0" title="选项一">内容一</zan-tab>
|
||||
<zan-tab tab-key="1" title="选项二">内容二</zan-tab>
|
||||
|
||||
</zan-tabs>
|
||||
|
||||
<h2 class="page-sub-title" style="margin-top: 50px;">自定义样式用法</h2>
|
||||
<zan-tabs active-tab-key="2" tabs-class-name="custom-tabwrap" tab-class-name="custom-tab">
|
||||
<zan-tab tab-key="0" title="选项一" tab-pane-class-name="custom-pane"><div class="test">内容一</div></zan-tab>
|
||||
<zan-tab tab-key="1" title="选项二" tab-pane-class-name="custom-pane">内容二</zan-tab>
|
||||
<zan-tab tab-key="2" title="选项三" tab-pane-class-name="custom-pane">内容三</zan-tab>
|
||||
<zan-tab tab-key="3" title="选项四" tab-pane-class-name="custom-pane">内容四</zan-tab>
|
||||
<zan-tab tab-key="4" title="选项五" tab-pane-class-name="custom-pane">内容五</zan-tab>
|
||||
</zan-tabs>
|
||||
</div>
|
||||
</template>
|
||||
<style>
|
||||
.page-tab {
|
||||
padding: 0 15px;
|
||||
}
|
||||
.custom-tabwrap .zan-tab-active{
|
||||
color: #20a0ff;
|
||||
}
|
||||
.custom-tabwrap .zan-tabs-nav-bar{
|
||||
background: #20a0ff;
|
||||
}
|
||||
.custom-tab {
|
||||
font-weight: bold;
|
||||
}
|
||||
.custom-pane {
|
||||
text-align: center;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
}
|
||||
</style>
|
||||
8
packages/tab/CHANGELOG.md
Normal file
8
packages/tab/CHANGELOG.md
Normal file
@ -0,0 +1,8 @@
|
||||
## 0.0.2 (2017-01-20)
|
||||
|
||||
* 改了bug A
|
||||
* 加了功能B
|
||||
|
||||
## 0.0.1 (2017-01-10)
|
||||
|
||||
* 第一版
|
||||
26
packages/tab/README.md
Normal file
26
packages/tab/README.md
Normal file
@ -0,0 +1,26 @@
|
||||
# @youzan/<%= name %>
|
||||
|
||||
!!! 请在此处填写你的文档最简单描述 !!!
|
||||
|
||||
[![version][version-image]][download-url]
|
||||
[![download][download-image]][download-url]
|
||||
|
||||
[version-image]: http://npm.qima-inc.com/badge/v/@youzan/<%= name %>.svg?style=flat-square
|
||||
[download-image]: http://npm.qima-inc.com/badge/d/@youzan/<%= name %>.svg?style=flat-square
|
||||
[download-url]: http://npm.qima-inc.com/package/@youzan/<%= name %>
|
||||
|
||||
## Demo
|
||||
|
||||
## Usage
|
||||
|
||||
## API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| className | 自定义额外类名 | string | '' | '' |
|
||||
|
||||
|
||||
|
||||
|
||||
## License
|
||||
[MIT](https://opensource.org/licenses/MIT)
|
||||
2
packages/tab/index.js
Normal file
2
packages/tab/index.js
Normal file
@ -0,0 +1,2 @@
|
||||
import Tab from './src/tab';
|
||||
export default Tab;
|
||||
10
packages/tab/package.json
Normal file
10
packages/tab/package.json
Normal file
@ -0,0 +1,10 @@
|
||||
{
|
||||
"name": "<%= name %>",
|
||||
"version": "<%= version %>",
|
||||
"description": "<%= description %>",
|
||||
"main": "./lib/index.js",
|
||||
"author": "<%= author %>",
|
||||
"license": "<%= license %>",
|
||||
"devDependencies": {},
|
||||
"dependencies": {}
|
||||
}
|
||||
37
packages/tab/src/tab.vue
Normal file
37
packages/tab/src/tab.vue
Normal file
@ -0,0 +1,37 @@
|
||||
<template>
|
||||
<div class="zan-tabs-pane" :class="classNames">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'zan-tab',
|
||||
props: {
|
||||
// 对应 Tabs 组件的 activeKey
|
||||
tabKey: {
|
||||
type: [Number, String],
|
||||
required: true
|
||||
},
|
||||
// 选项卡头显示文字
|
||||
title: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
tabPaneClassName: {
|
||||
type: String
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
classNames() {
|
||||
return [
|
||||
{'is-select': this.tabKey == this.$parent.switchActiveTabKey},
|
||||
this.tabPaneClassName
|
||||
];
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.$parent.tabCreate(this.tabKey, this.title);
|
||||
}
|
||||
};
|
||||
</script>
|
||||
86
packages/tab/src/tabs.vue
Normal file
86
packages/tab/src/tabs.vue
Normal file
@ -0,0 +1,86 @@
|
||||
<template>
|
||||
<div class="zan-tabs">
|
||||
<div class="zan-tabs-nav" :class="classNames">
|
||||
<div class="zan-tabs-nav-bar" :style="navBarStyle"></div>
|
||||
<div
|
||||
v-for="tab in tabs"
|
||||
class="zan-tab J-tab-key"
|
||||
:class="[{'zan-tab-active': tab.tabKey == switchActiveTabKey}, tabClassName]"
|
||||
:data-key="tab.tabKey"
|
||||
@click="handleTabClick(tab.tabKey)"
|
||||
>
|
||||
{{ tab.title }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="zan-tabs-content"><slot></slot></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'zan-tabs',
|
||||
props: {
|
||||
// 外部传入的激活的tab标签
|
||||
activeTabKey: {
|
||||
type: [Number, String],
|
||||
default: 0
|
||||
},
|
||||
// 是默认的line还是card
|
||||
classType: {
|
||||
type: String,
|
||||
default: 'line'
|
||||
},
|
||||
// nav的wrap的样式
|
||||
tabsClassName: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// 每个nav里tab的样式
|
||||
tabClassName: {
|
||||
type: String
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
tabs: [],
|
||||
isReady: false,
|
||||
switchActiveTabKey: this.activeTabKey
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
classNames () {
|
||||
return [ `zan-tabs-${this.classType}`, this.tabsClassName ]
|
||||
},
|
||||
navBarStyle () {
|
||||
if(!this.isReady) return;
|
||||
let tabKey = this.switchActiveTabKey;
|
||||
let selectors = `.J-tab-key[data-key="${tabKey}"]`;
|
||||
let elem = this.$el.querySelector(selectors) || {};
|
||||
let w = `${elem.offsetWidth || 0}px`;
|
||||
let x = `${elem.offsetLeft || 0}px`;
|
||||
return {
|
||||
width: w,
|
||||
transform: `translate3d(${x}, 0px, 0px)`
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
tabCreate (tabKey, title) {
|
||||
this.tabs.push({
|
||||
tabKey: tabKey,
|
||||
title: title
|
||||
});
|
||||
},
|
||||
handleTabClick(tabKey) {
|
||||
this.switchActiveTabKey = tabKey;
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
//页面载入完成
|
||||
this.$nextTick(() => {
|
||||
// 可以开始触发在computed中关于nav-bar的css动画
|
||||
this.isReady = true;
|
||||
})
|
||||
}
|
||||
};
|
||||
</script>
|
||||
3
packages/tabs/index.js
Normal file
3
packages/tabs/index.js
Normal file
@ -0,0 +1,3 @@
|
||||
import Tabs from '../tab/src/tabs';
|
||||
|
||||
export default Tabs;
|
||||
@ -19,3 +19,4 @@
|
||||
@import './steps.css';
|
||||
@import './tag.css';
|
||||
@import './checkbox.css';
|
||||
@import './tab.css';
|
||||
|
||||
100
packages/zanui-css/src/tab.css
Normal file
100
packages/zanui-css/src/tab.css
Normal file
@ -0,0 +1,100 @@
|
||||
@import "./common/var.css";
|
||||
@import "./mixins/border_retina.css";
|
||||
@component-namespace zan {
|
||||
@b tabs {
|
||||
position: relative;
|
||||
}
|
||||
@b tabs-line {
|
||||
height: 44px;
|
||||
background-color: $c-white;
|
||||
&::after {
|
||||
@mixin border-retina (top);
|
||||
@mixin border-retina (bottom);
|
||||
}
|
||||
@b tabs-nav-bar {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
@b tabs-card {
|
||||
height: 28px;
|
||||
margin: 0 15px;
|
||||
background-color: $c-white;
|
||||
border-radius: 2px;
|
||||
border: 1px solid #666666;
|
||||
overflow: hidden;
|
||||
.zan-tabs-nav-bar {
|
||||
display: none;
|
||||
}
|
||||
.zan-tab {
|
||||
color: #666666;
|
||||
line-height: 28px;
|
||||
border-right: 1px solid #666666;
|
||||
&:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
&.zan-tab-active {
|
||||
background-color: #666666;
|
||||
color: $c-white;
|
||||
}
|
||||
}
|
||||
}
|
||||
@b tabs-nav {
|
||||
display: flex;
|
||||
transition: transform .5s cubic-bezier(.645, .045, .355, 1);
|
||||
position: relative;
|
||||
/*float: left*/
|
||||
&::after, &::before {
|
||||
display: table;
|
||||
content: " "
|
||||
}
|
||||
&::after {
|
||||
clear: both
|
||||
}
|
||||
}
|
||||
@b tabs-nav-bar {
|
||||
z-index: 1;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
height: 2px;
|
||||
background-color: #f13e3a;
|
||||
transition: transform .3s cubic-bezier(.645, .045, .355, 1);
|
||||
transform-origin: 0 0;
|
||||
}
|
||||
@b tab {
|
||||
color: $c-black;
|
||||
font-size: 14px;
|
||||
line-height: 44px;
|
||||
flex: 1;
|
||||
display: inline-block;
|
||||
box-sizing: border-box;
|
||||
transition: color .3s cubic-bezier(.645, .045, .355, 1);
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
}
|
||||
@b tab-active {
|
||||
color: #FF4444;
|
||||
}
|
||||
@b tabs-pane {
|
||||
display: none;
|
||||
@when select {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -21,6 +21,8 @@ import BadgeGroup from '../packages/badge-group/index.js';
|
||||
import Badge from '../packages/badge/index.js';
|
||||
import Search from '../packages/search/index.js';
|
||||
import Step from '../packages/step/index.js';
|
||||
import Tabs from '../packages/tabs/index.js';
|
||||
import Tab from '../packages/tab/index.js';
|
||||
|
||||
const install = function(Vue) {
|
||||
if (install.installed) return;
|
||||
@ -46,6 +48,8 @@ const install = function(Vue) {
|
||||
Vue.component(Badge.name, Badge);
|
||||
Vue.component(Search.name, Search);
|
||||
Vue.component(Step.name, Step);
|
||||
Vue.component(Tabs.name, Tabs);
|
||||
Vue.component(Tab.name, Tab);
|
||||
};
|
||||
|
||||
// auto install
|
||||
@ -78,5 +82,7 @@ module.exports = {
|
||||
BadgeGroup,
|
||||
Badge,
|
||||
Search,
|
||||
Step
|
||||
Step,
|
||||
Tabs,
|
||||
Tab
|
||||
};
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user