Skip to content

Commit

Permalink
docs(popover): add the document and demo of the popover component
Browse files Browse the repository at this point in the history
  • Loading branch information
MimoN committed Oct 17, 2018
1 parent d72d0fd commit 7372d20
Show file tree
Hide file tree
Showing 6 changed files with 135 additions and 66 deletions.
6 changes: 6 additions & 0 deletions examples/view/demos/popover/demo-1.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
<template>
<dao-popover
content="This is the content">
<button class="dao-btn ghost">Click Here!</button>
</dao-popover>
</template>
8 changes: 8 additions & 0 deletions examples/view/demos/popover/demo-2.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
<template>
<dao-popover
content="This is the content"
placement="right"
:always="true">
<button class="dao-btn ghost">Click Here!</button>
</dao-popover>
</template>
7 changes: 7 additions & 0 deletions examples/view/demos/popover/demo-3.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
<template>
<dao-popover
content="This is the content"
trigger="hover">
<button class="dao-btn ghost">Hover Here!</button>
</dao-popover>
</template>
2 changes: 1 addition & 1 deletion examples/view/page/components/list-group/index.vue
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<template>
<div class="docs-spin">
<div>
<docs-title :name="$t('list-group')" desc="List Group 是一个用于侧边栏导航的样式，它是纯样式组件。"></docs-title>
<docs-section>
<template slot="title">默认用法</template>
Expand Down
176 changes: 112 additions & 64 deletions examples/view/page/components/popover/index.vue
View file
Original file line number Diff line number Diff line change
@@ -1,75 +1,123 @@
<template>
<div>
<div class="demo-container">
<div class="top">
<dao-popover
content="a"
placement="top-start">
<button class="dao-btn ghost">上左</button>
</dao-popover>
<dao-popover content="afgnsdjfghsdfhuieshfjfhduafyaufhdjkfhdskdjhfdsfhsdjhfushgjsghsfhgfdjkghfdjkhgfdkjghfdghfdgfdjghfdkj" placement="top">
<button class="dao-btn ghost">上边</button>
</dao-popover>
<dao-popover content="Top Right 文字提示" placement="top-end">
<button class="dao-btn ghost">上右</button>
</dao-popover>
</div>
<div class="left">
<dao-popover content="Left Top 文字提示" placement="left-start">
<button class="dao-btn ghost">左上</button>
</dao-popover><br><br>
<dao-popover content="Left Center 文字提示" placement="left">
<button class="dao-btn ghost">左边</button>
</dao-popover><br><br>
<dao-popover content="Left Bottom 文字提示" placement="left-end">
<button class="dao-btn ghost">左下</button>
</dao-popover>
</div>
<div class="right">
<dao-popover content="dgfhfdhfchcgfhddrdgljlhkuhkhkjhkjhkjhkjhkjhkjhkjhkjh" placement="right-start">
<button class="dao-btn ghost">右上</button>
</dao-popover><br><br>
<dao-popover content="Right Center 文字提示" placement="right">
<button class="dao-btn ghost">右边</button>
</dao-popover><br><br>
<dao-popover content="Right Bottom 文字提示" placement="right-end" :append-to-body="false">
<button class="dao-btn ghost">右下</button>
</dao-popover>
</div>
<div class="bottom">
<dao-popover content="Bottom Left 文字提示" placement="bottom-start">
<button class="dao-btn ghost">下左</button>
</dao-popover>
<dao-popover content="Bottom Center 文字提示" placement="bottom">
<button class="dao-btn ghost">下边</button>
</dao-popover>
<dao-popover content="Bottom Right 文字提示" placement="bottom-end">
<button class="dao-btn ghost">下右</button>
</dao-popover>
</div>
</div>
<div class="demo-container">
<dao-popover
content="Top Left 文字提示"
placement="top-start">
<button class="dao-btn ghost">slot</button>
<div slot="content">slot content</div>
</dao-popover>
</div>
<div class="demo-container">
<dao-popover
:content="test"
:always="true">
<input type="text" v-model="test">
</dao-popover>
</div>
<docs-title :name="$t('popover')" desc="Popover 是一个一般用于显示更多信息的浮层组件。"></docs-title>
<docs-section>
<template slot="title">简单用法</template>
<template slot="content">
<demo-code>
<demo1 slot="demo"></demo1>
<code-reader slot="code" file="popover/demo-1.vue"></code-reader>
<md-reader slot="desc">
简单的使用 dao-popover 组件，设定好 popover 的内容之后，就能轻易的通过点击 trigger 来看到 popover
</md-reader>
</demo-code>
</template>
</docs-section>
<docs-section>
<template slot="title">一直显示的 Popover</template>
<template slot="content">
<demo-code>
<demo2 slot="demo"></demo2>
<code-reader slot="code" file="popover/demo-2.vue"></code-reader>
<md-reader slot="desc">
通过指定 **always** 属性，可以让 popover 不需要触发 trigger，而是一直显示在界面中
</md-reader>
</demo-code>
</template>
</docs-section>
<docs-section>
<template slot="title">其他触发方式的 Popover</template>
<template slot="content">
<demo-code>
<demo3 slot="demo"></demo3>
<code-reader slot="code" file="popover/demo-3.vue"></code-reader>
<md-reader slot="desc">
通过指定 **trigger** 属性值可以通过 hover 等 click 之外的其他方式触发 popover
</md-reader>
</demo-code>
</template>
</docs-section>
<docs-section>
<template slot="title">
<docs-title name="<dao-popover/> 属性" size="sm"></docs-title>
</template>
<template slot="content">
<docs-table :rows="popoverAttrs" type="attr"></docs-table>
</template>
</docs-section>
<docs-section>
<template slot="title">
<docs-title name="<dao-popover/> 插槽" size="sm"></docs-title>
</template>
<template slot="content">
<docs-table :rows="slotArgs" type="attr"></docs-table>
</template>
</docs-section>
</div>
</template>
<script>
import Demo1 from '@demos/popover/demo-1';
import Demo2 from '@demos/popover/demo-2';
import Demo3 from '@demos/popover/demo-3';
export default {
components: {
Demo1,
Demo2,
Demo3,
},
data() {
return {
test: 'asdf',
popoverAttrs: [{
name: 'trigger',
type: 'String',
desc: 'Popover 的触发方式',
options: ['click', 'focus', 'hover'],
default: 'click',
}, {
name: 'content',
type: 'String',
desc: 'Popover 的内容文本',
options: ['-'],
default: '-',
}, {
name: 'placement',
type: 'String',
desc: 'Popover 相对于 trigger 元素的展示位置',
options: ['top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end', 'left', 'left-start', 'left-end', 'right', 'right-start', 'right-end'],
default: 'bottom',
}, {
name: 'always',
type: 'Boolean',
desc: 'Popover 是否需要一直显示',
options: ['true', 'false'],
default: 'false',
}, {
name: 'disabled',
type: 'Boolean',
desc: 'Popover 是否不可用',
options: ['true', 'false'],
default: 'false',
}, {
name: 'appendToBody',
type: 'Boolean',
desc: '是否将 Popover 展示的内容父元素改成 body，而不是和 trigger 元素在同一父 DOM 节点处',
options: ['true', 'false'],
default: 'true',
}, {
name: 'popperCls',
type: 'Array',
desc: 'appendToBody 之后为 popover 的元素添加的 class 名，一般用于单独修改某些特定 popover 的样式',
options: ['-'],
default: '-',
}],
slotArgs: [{
name: 'content',
type: 'HTML',
desc: 'Popover 内嵌 HTML 文本，将覆盖 content 参数',
options: ['-'],
default: '-',
}]
};
},
};
Expand Down
2 changes: 1 addition & 1 deletion examples/view/router.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -222,7 +222,7 @@ const components = [
component: PopoverPage,
meta: {
available: true,
docs: false,
docs: true,
test: false,
},
}, {
Expand Down

0 comments on commit 7372d20

Please sign in to comment.