Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

add docs、demo for dao-tab #567

Merged
merged 1 commit into from
Sep 19, 2018
Merged

add docs、demo for dao-tab #567

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
71 changes: 0 additions & 71 deletions docs/dao-tab.md
View file
Open in desktop

This file was deleted.

10 changes: 10 additions & 0 deletions examples/view/demos/tab/demo-1.vue
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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