Skip to content

Commit

Permalink
add Tabs
Browse files Browse the repository at this point in the history
  • Loading branch information
@icarusion
icarusion committed Jun 4, 2018
1 parent 82e912b commit 3d89e9e
Show file tree
Hide file tree
Showing 4 changed files with 223 additions and 1 deletion.
70 changes: 70 additions & 0 deletions src/code/tabs.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,70 @@
let code = {};

code.import = `
"usingComponents": {
"i-tabs": "../../dist/tabs/index",
"i-tab": "../../dist/tab/index"
}
`;
code.usage = `
基本用法
<i-tabs current="{{ current }}" bindchange="handleChange">
<i-tab key="tab1" title="选项1"></i-tab>
<i-tab key="tab2" title="选项2"></i-tab>
<i-tab key="tab3" title="选项3"></i-tab>
</i-tabs>
自定义主题色
<i-tabs current="{{ current }}" color="#f759ab" bindchange="handleChange">
<i-tab key="tab1" title="选项1"></i-tab>
<i-tab key="tab2" title="选项2"></i-tab>
<i-tab key="tab3" title="选项3"></i-tab>
</i-tabs>
徽标
<i-tabs current="{{ current }}" bindchange="handleChange">
<i-tab key="tab1" title="选项1" count="3"></i-tab>
<i-tab key="tab2" title="选项2"></i-tab>
<i-tab key="tab3" title="选项3" dot></i-tab>
</i-tabs>
滚动
<i-tabs current="{{ current_scroll }}" scroll bindchange="handleChangeScroll">
<i-tab key="tab1" title="选项1"></i-tab>
<i-tab key="tab2" title="选项2"></i-tab>
<i-tab key="tab3" title="选项3"></i-tab>
<i-tab key="tab4" title="选项4"></i-tab>
<i-tab key="tab5" title="选项5"></i-tab>
<i-tab key="tab6" title="选项6"></i-tab>
<i-tab key="tab7" title="选项7"></i-tab>
<i-tab key="tab8" title="选项8"></i-tab>
<i-tab key="tab9" title="选项9"></i-tab>
</i-tabs>
`;

code.js = `
Page({
data: {
current: 'tab1',
current_scroll: 'tab1'
},
handleChange ({ detail }) {
this.setData({
current: detail.key
});
},
handleChangeScroll ({ detail }) {
this.setData({
current_scroll: detail.key
});
}
});
`;

export default code;
7 changes: 7 additions & 0 deletions src/router.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -86,6 +86,13 @@ const routers = [
},
component: (resolve) => require(['./views/components/tab-bar.vue'], resolve)
},
{
path: '/components/tabs',
meta: {
title: '标签页 Tabs'
},
component: (resolve) => require(['./views/components/tabs.vue'], resolve)
},
{
path: '*',
redirect: '/'
Expand Down
2 changes: 1 addition & 1 deletion src/views/components/tab-bar.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -100,7 +100,7 @@
</tr>
<tr>
<td>key</td>
<td>面板的唯一标识</td>
<td>标签的唯一标识</td>
<td>String</td>
<td>-</td>
</tr>
Expand Down
145 changes: 145 additions & 0 deletions src/views/components/tabs.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,145 @@
<template>
<i-article>
<article>
<h1>Tabs 标签页</h1>
<Anchor title="概述" h2></Anchor>
<p>用于让用户在不同的视图中进行切换。</p>
<Anchor title="使用指南" h2></Anchor>
<p>在 .json 中引入组件</p>
<i-code bg lang="json">{{ code.import }}</i-code>
<Anchor title="示例" h2></Anchor>
<i-code bg lang="html">{{ code.usage }}</i-code>
<br><br>
<i-code bg lang="js">{{ code.js }}</i-code>
<ad></ad>

<div class="api">
<Anchor title="API" h2></Anchor>
<Anchor title="Tabs properties" h3></Anchor>
<table>
<thead>
<tr>
<th>属性</th>
<th>说明</th>
<th>类型</th>
<th>默认值</th>
</tr>
</thead>
<tbody>
<tr>
<td>i-class</td>
<td>自定义 class 类名</td>
<td>String</td>
<td>-</td>
</tr>
<tr>
<td>current</td>
<td>当前所在的标签的 key 值</td>
<td>String</td>
<td>-</td>
</tr>
<tr>
<td>color</td>
<td>主题色</td>
<td>String</td>
<td>-</td>
</tr>
<tr>
<td>scroll</td>
<td>是否开启横向滚动</td>
<td>Boolean</td>
<td>false</td>
</tr>
<tr>
<td>fixed</td>
<td>是否固定在底部</td>
<td>Boolean</td>
<td>false</td>
</tr>
</tbody>
</table>
<Anchor title="Tabs events" h3></Anchor>
<table>
<thead>
<tr>
<th>事件名</th>
<th>说明</th>
<th>返回值</th>
</tr>
</thead>
<tbody>
<tr>
<td>bind:change</td>
<td>切换标签时触发</td>
<td>{ key }</td>
</tr>
</tbody>
</table>
<Anchor title="Tab properties" h3></Anchor>
<table>
<thead>
<tr>
<th>属性</th>
<th>说明</th>
<th>类型</th>
<th>默认值</th>
</tr>
</thead>
<tbody>
<tr>
<td>i-class</td>
<td>自定义 class 类名</td>
<td>String</td>
<td>-</td>
</tr>
<tr>
<td>key</td>
<td>标签的唯一标识</td>
<td>String</td>
<td>-</td>
</tr>
<tr>
<td>title</td>
<td>名称</td>
<td>String</td>
<td>-</td>
</tr>
<tr>
<td>dot</td>
<td>是否显示小红点</td>
<td>Boolean</td>
<td>false</td>
</tr>
<tr>
<td>count</td>
<td>徽标数</td>
<td>Number</td>
<td>0</td>
</tr>
</tbody>
</table>
</div>
</article>
</i-article>
</template>
<script>
import iArticle from '../../components/article.vue';
import iCode from 'iCode';
import Demo from '../../components/demo.vue';
import Code from '../../code/tabs';
import Anchor from '../../components/anchor.vue';
export default {
components: {
iArticle,
iCode,
Demo,
Anchor
},
data () {
return {
code: Code
}
}
}
</script>

0 comments on commit 3d89e9e

Please sign in to comment.