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

docs(popover): add the document and demo of the popover component #602

Merged
merged 2 commits into from
Oct 18, 2018
Merged

docs(popover): add the document and demo of the popover component #602

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
7372d20
docs(popover): add the document and demo of the popover component
Oct 16, 2018
0547712
删除旧的文档
Oct 17, 2018
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
6 changes: 6 additions & 0 deletions examples/view/demos/popover/demo-1.vue
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
40 changes: 0 additions & 40 deletions project/dao-popover.md
View file
Open in desktop

This file was deleted.