Skip to content

Commit

Permalink
Merge pull request #567 from DaoCloud/docs/dao-tab
Browse files Browse the repository at this point in the history 
add docs、demo for dao-tab
  • Loading branch information
@olivewind
olivewind authored Sep 19, 2018
2 parents cde60e8 + c0295ef commit f5455cd
Show file tree
Hide file tree
Showing 7 changed files with 217 additions and 152 deletions.
71 changes: 0 additions & 71 deletions docs/dao-tab.md
View file

This file was deleted.

10 changes: 10 additions & 0 deletions examples/view/demos/tab/demo-1.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
<template>
<dao-tab>
<dao-tab-item heading="标签1">
<h1>标签1 内容</h1>
</dao-tab-item>
<dao-tab-item heading="标签2">
<h1>标签2 内容</h1>
</dao-tab-item>
</dao-tab>
</template>
10 changes: 10 additions & 0 deletions examples/view/demos/tab/demo-2.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
<template>
<dao-tab direction="right">
<dao-tab-item heading="标签1">
<h1>标签1 内容</h1>
</dao-tab-item>
<dao-tab-item heading="heading2">
<h1>heading2 内容</h1>
</dao-tab-item>
</dao-tab>
</template>
42 changes: 42 additions & 0 deletions examples/view/demos/tab/demo-3.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
<template>
<div class="demo">
<div class="show-block">
<button class="dao-btn btn-sm blue" @click.stop="changeTab">go to heading2 </button>
<span>当前 tab：{{currentTab}}</span>
</div>
<dao-tab :currentTab.sync="currentTab">
<dao-tab-item heading="标签1">
<h1>标签1 内容</h1>
</dao-tab-item>
<dao-tab-item heading="heading2">
<h1>heading2 内容</h1>
</dao-tab-item>
<dao-tab-item heading="哈哈哈">
<h1>哈哈哈我是 哈哈哈 的内容</h1>
</dao-tab-item>
</dao-tab>
</div>
</template>
<script>
export default {
name: 'Demo3',
data() {
return {
currentTab: '',
};
},
methods: {
changeTab() {
this.currentTab = 'heading2';
},
},
};
</script>
<style lang="scss" scoped>
.show-block {
margin-bottom: 20px;
.dao-btn {
margin-right: 10px;
}
}
</style>
36 changes: 36 additions & 0 deletions examples/view/demos/tab/demo-4.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
<template>
<div class="demo4">
<div class="show-block">第 {{ count }} 次切换，切换到: {{ toTab }}。</div>
<dao-tab :currentTab.sync="currentTab" @changeTab="onTabChange">
<dao-tab-item heading="标签1">
<h1>标签1 内容</h1>
</dao-tab-item>
<dao-tab-item heading="heading2">
<h1>heading2 内容</h1>
</dao-tab-item>
</dao-tab>
</div>
</template>
<script>
export default {
name: 'Demo4',
data() {
return {
currentTab: '标签1',
count: 0,
toTab: '',
};
},
methods: {
onTabChange(heading) {
this.count += 1;
this.toTab = heading;
},
},
};
</script>
<style lang="scss" scoped>
.show-block {
margin-bottom: 20px;
}
</style>
198 changes: 118 additions & 80 deletions examples/view/page/components/tab/index.vue
View file
Original file line number Diff line number Diff line change
@@ -1,94 +1,132 @@
<template>
<div>
<dao-setting-layout v-for="(demo, index) in demos" :key="index">
<div slot="layout-title">{{demo.desc}}</div>
<dao-setting-section>
<template v-if="demo.showbtn">
<div slot="section-title">
允许通过编程的方式切换 tab
<br>
currentTab: {{demo.currentTab}}
</div>
<br><br>
<button class="dao-btn blue" @click="demo.currentTab = 'heading3'"> go to heading3</button>
<br><br>
</template>
<dao-tab
:currentTab.sync="demo.currentTab"
:direction="demo.direction" @changeTab="onChangeTab">
<dao-tab-item
v-for="(tab, index) in demo.tabs" :key="index"
:heading="tab.heading">
<h2>{{tab.content}}</h2>
</dao-tab-item>
</dao-tab>
</dao-setting-section>
</dao-setting-layout>
<docs-title :name="$t('tab')" desc="方便您通过选项卡方便的切换视图。"></docs-title>
<docs-section>
<template slot="title">基本用法</template>
<template slot="content">
<demo-code>
<demo1 slot="demo"></demo1>
<code-reader slot="code" file="tab/demo-1.vue"></code-reader>
</demo-code>
</template>
</docs-section>
<docs-section>
<template slot="title">更改选项卡方向</template>
<template slot="content">
<demo-code>
<demo2 slot="demo"></demo2>
<code-reader slot="code" file="tab/demo-2.vue"></code-reader>
<md-reader slot="desc">
可以通过`direction`属性来更改选项卡的的方向
</md-reader>
</demo-code>
</template>
</docs-section>
<docs-section>
<template slot="title">动态切换选项卡</template>
<template slot="content">
<demo-code>
<demo3 slot="demo"></demo3>
<code-reader slot="code" file="tab/demo-3.vue"></code-reader>
<md-reader slot="desc">
可以通过改变`currentTab`属性动态切换选项卡
</md-reader>
</demo-code>
</template>
</docs-section>
<docs-section>
<template slot="title">事件绑定</template>
<template slot="content">
<demo-code>
<demo4 slot="demo"></demo4>
<code-reader slot="code" file="tab/demo-4.vue"></code-reader>
<md-reader slot="desc">
currentTab 改变时会触发`changeTab`事件。
</md-reader>
</demo-code>
</template>
</docs-section>
<docs-section>
<template slot="title">
<docs-title name="<dao-tab/> 属性" size="sm"></docs-title>
</template>
<template slot="content">
<docs-table :rows="tabAttrs" type="attr"></docs-table>
</template>
</docs-section>
<docs-section>
<template slot="title">
<docs-title name="<dao-tab/> 事件" size="sm"></docs-title>
</template>
<template slot="content">
<docs-table :rows="tabEvents" type="event"></docs-table>
</template>
</docs-section>
<docs-section>
<template slot="title">
<docs-title name="<dao-tab-item/> 属性" size="sm"></docs-title>
</template>
<template slot="content">
<docs-table :rows="tabItemAttrs" type="attr"></docs-table>
</template>
</docs-section>
<docs-section>
<template slot="title">
<docs-title name="<dao-tab-item/> 插槽" size="sm"></docs-title>
</template>
<template slot="content">
<docs-table :rows="tabItemSlotAttrs" type="slot"></docs-table>
</template>
</docs-section>
</div>
</template>

<script>
import Demo1 from '@demos/tab/demo-1';
import Demo2 from '@demos/tab/demo-2';
import Demo3 from '@demos/tab/demo-3';
import Demo4 from '@demos/tab/demo-4';
export default {
name: 'DocsTab',
data() {
return {
demos: [
{
desc: 'direction: left',
tabs: [{
heading: 'heading1',
content: 'content1',
}, {
heading: 'heading2',
content: 'content2',
}, {
heading: 'heading3',
content: 'content3',
}],
direction: 'left',
},
{
desc: 'direction: right',
tabs: [{
heading: 'heading1',
content: 'content1',
}, {
heading: 'heading2',
content: 'content2',
}, {
heading: 'heading3',
content: 'content3',
}],
direction: 'right',
},
{
desc: 'currentTab: heading2',
currentTab: 'heading2',
showbtn: true,
tabs: [{
heading: 'heading1',
content: 'content1',
}, {
heading: 'heading2',
content: 'content2',
}, {
heading: 'heading3',
content: 'content3',
}],
direction: 'left',
},
],
tabAttrs: [{
name: 'direction',
type: 'String',
desc: '控制选项卡的方向',
options: ['left', 'right'],
default: 'left',
}, {
name: 'currentTab',
type: 'String',
desc: '当前选项卡显示的文字',
options: ['-'],
default: '第一个选项卡显示的文字',
}],
tabEvents: [{
name: 'changeTab',
desc: '切换选项卡触发的触发的事件',
parameter: '将要切换到的选项卡显示的文字',
}],
tabItemAttrs: [{
name: 'heading',
type: 'String',
desc: '选项卡显示的文字',
options: ['-'],
default: '-',
}],
tabItemSlotAttrs: [{
name: '-',
desc: '选项卡对应的视图',
}],
};
},
methods: {
onChangeTab(tab) {
console.log(`changeTab to ${tab}`);
},
components: {
Demo1,
Demo2,
Demo3,
Demo4,
},
};
</script>

<style lang="scss" scoped>
.helper{
padding: 10px;
}
</style>
2 changes: 1 addition & 1 deletion examples/view/router.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -254,7 +254,7 @@ const components = [
path: 'tab',
meta: {
available: true,
docs: false,
docs: true,
test: false,
},
}, {
Expand Down

0 comments on commit f5455cd

Please sign in to comment.