github
/
ant-design-vue
mirror of https://github.com/vueComponent/ant-design-vue
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

add popover doc

pull/4/head
tjz 2018-04-16 21:54:37 +08:00
parent 35f9b02039
commit 1a12427bfb
9 changed files with 173 additions and 155 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
components/popover/demo/arrow-point-at-center.md Normal file
View File

@ -0,0 +1,32 @@
<cn>
#### 箭头指向
设置了 `arrowPointAtCenter` 后，箭头将指向目标元素的中心。
</cn>
<us>
#### Arrow pointing
The arrow points to the center of the target element, which set `arrowPointAtCenter`.
</us>
```html
<template>
<div>
<a-popover placement="topLeft">
<template slot="content">
<p>Content</p>
<p>Content</p>
</template>
<span slot="title">Title</span>
<a-button>Align edge / 边缘对齐</a-button>
</a-popover>
<a-popover placement="topLeft" arrowPointAtCenter>
<template slot="content">
<p>Content</p>
<p>Content</p>
</template>
<span slot="title">Title</span>
<a-button>Arrow points to center / 箭头指向中心</a-button>
</a-popover>
</div>
</template>
```

34
components/popover/demo/arrow-point-at-center.vue
View File

@ -1,34 +0,0 @@
<template>
<div>
<md>
## 箭头指向
设置了 `arrowPointAtCenter` 后，箭头将指向目标元素的中心。
</md>
<Popover placement="topLeft">
<template slot="content">
<p>Content</p>
<p>Content</p>
</template>
<span slot="title">Title</span>
<a-button>Align edge / 边缘对齐</a-button>
</Popover>
<Popover placement="topLeft" arrowPointAtCenter>
<template slot="content">
<p>Content</p>
<p>Content</p>
</template>
<span slot="title">Title</span>
<a-button>Arrow points to center / 箭头指向中心</a-button>
</Popover>
</div>
</template>
<script>
import { Popover, Button } from 'antd'
export default {
components: {
Popover,
},
}
</script>

32
components/popover/demo/basic.vue → components/popover/demo/basic.md
View File

@ -1,25 +1,21 @@
<template> <cn>
<div> #### 基本
<md>
## 基本
最简单的用法，浮层的大小由内容区域决定。 最简单的用法，浮层的大小由内容区域决定。
</md> </cn>
<Popover title="Title">
<us>
#### Basic
The most basic example. The size of the floating layer depends on the contents region.
</us>
```html
<template>
<a-popover title="Title">
<template slot="content"> <template slot="content">
<p>Content</p> <p>Content</p>
<p>Content</p> <p>Content</p>
</template> </template>
<a-button type="primary">Hover me</a-button> <a-button type="primary">Hover me</a-button>
</Popover> </a-popover>
</div>
</template> </template>
```
<script>
import { Popover, Button } from 'antd'
export default {
components: {
Popover,
},
}
</script>

27
components/popover/demo/control.vue → components/popover/demo/control.md
View File

@ -1,22 +1,26 @@
<cn>
#### 从浮层内关闭
使用 `visible` 属性控制浮层显示。
</cn>
<us>
#### Controlling the close of the dialog
Use `visible` prop to control the display of the card.
</us>
```html
<template> <template>
<div> <a-popover
<md>
## 从浮层内关闭
使用 `visible` 属性控制浮层显示。
</md>
<Popover
title="Title" title="Title"
trigger="click" trigger="click"
v-model="visible" v-model="visible"
> >
<a @click="hide" slot="content">Close</a> <a @click="hide" slot="content">Close</a>
<a-button type="primary">Click me</a-button> <a-button type="primary">Click me</a-button>
</Popover> </a-popover>
</div>
</template> </template>
<script> <script>
import { Popover, Button } from 'antd'
export default { export default {
data () { data () {
return { return {
@ -29,9 +33,6 @@ export default {
this.visible = false this.visible = false
}, },
}, },
components: {
Popover,
},
} }
</script> </script>
```

63
components/popover/demo/index.vue
View File

@ -1,34 +1,57 @@
<template>
<div>
<h1>Basic</h1>
<Basic />
<h1>ArrowCenter</h1>
<ArrowCenter />
<h1>Control</h1>
<Control />
<h1>Placement</h1>
<Placement />
<h1>TriggerType</h1>
<TriggerType />
</div>
</template>
<script> <script>
import Basic from './basic' import Basic from './basic'
import ArrowCenter from './arrow-point-at-center' import ArrowCenter from './arrow-point-at-center'
import Control from './control' import Control from './control'
import Placement from './placement' import Placement from './placement'
import TriggerType from './triggerType' import TriggerType from './triggerType'
import CN from '../index.zh-CN.md'
import US from '../index.en-US.md'
const md = {
cn: `# Popover
点击/鼠标移入元素，弹出气泡式的卡片浮层。
## 何时使用
当目标元素有进一步的描述和相关操作时，可以收纳到卡片中，根据用户的操作行为进行展现。
和 \`Tooltip\` 的区别是，用户可以对浮层上的元素进行操作，因此它可以承载更复杂的内容，比如链接或按钮等。
## 代码演示`,
us: `# Popover
The floating card popped by clicking or hovering.
## When To Use
A simple popup menu to provide extra information or operations.
Comparing with \`Tooltip\`, besides information \`Popover\` card can also provide action elements like links and buttons.
## Examples
`,
}
export default { export default {
category: 'Components', category: 'Components',
subtitle: '气泡卡片', subtitle: '气泡卡片',
type: 'Data Display', type: 'Data Display',
title: 'Popover', title: 'Popover',
components: { render () {
Basic, return (
ArrowCenter, <div>
Control, <md cn={md.cn} us={md.us}/>
Placement, <Basic />
TriggerType, <ArrowCenter />
<Control />
<Placement />
<TriggerType />
<api>
<template slot='cn'>
<CN/>
</template>
<US/>
</api>
</div>
)
}, },
} }
</script> </script>

69
components/popover/demo/placement.vue → components/popover/demo/placement.md
View File

@ -1,11 +1,18 @@
<cn>
#### 位置
位置有十二个方向。
</cn>
<us>
#### Placement
There are 12 `placement` options available.
</us>
```html
<template> <template>
<div id="components-popover-demo-placement"> <div id="components-popover-demo-placement">
<md>
## 位置
位置有 12 个方向。
</md>
<div :style="{ marginLeft: `${buttonWidth}px`, whiteSpace: 'nowrap' }"> <div :style="{ marginLeft: `${buttonWidth}px`, whiteSpace: 'nowrap' }">
<Popover placement="topLeft"> <a-popover placement="topLeft">
<template slot="content"> <template slot="content">
<p>Content</p> <p>Content</p>
<p>Content</p> <p>Content</p>
@ -14,8 +21,8 @@
<span>Title</span> <span>Title</span>
</template> </template>
<a-button>TL</a-button> <a-button>TL</a-button>
</Popover> </a-popover>
<Popover placement="top"> <a-popover placement="top">
<template slot="content"> <template slot="content">
<p>Content</p> <p>Content</p>
<p>Content</p> <p>Content</p>
@ -24,8 +31,8 @@
<span>Title</span> <span>Title</span>
</template> </template>
<a-button>Top</a-button> <a-button>Top</a-button>
</Popover> </a-popover>
<Popover placement="topRight"> <a-popover placement="topRight">
<template slot="content"> <template slot="content">
<p>Content</p> <p>Content</p>
<p>Content</p> <p>Content</p>
@ -34,10 +41,10 @@
<span>Title</span> <span>Title</span>
</template> </template>
<a-button>TR</a-button> <a-button>TR</a-button>
</Popover> </a-popover>
</div> </div>
<div :style="{ width: `${buttonWidth}px`, float: 'left' }"> <div :style="{ width: `${buttonWidth}px`, float: 'left' }">
<Popover placement="leftTop"> <a-popover placement="leftTop">
<template slot="content"> <template slot="content">
<p>Content</p> <p>Content</p>
<p>Content</p> <p>Content</p>
@ -46,8 +53,8 @@
<span>Title</span> <span>Title</span>
</template> </template>
<a-button>LT</a-button> <a-button>LT</a-button>
</Popover> </a-popover>
<Popover placement="left"> <a-popover placement="left">
<template slot="content"> <template slot="content">
<p>Content</p> <p>Content</p>
<p>Content</p> <p>Content</p>
@ -56,8 +63,8 @@
<span>Title</span> <span>Title</span>
</template> </template>
<a-button>Left</a-button> <a-button>Left</a-button>
</Popover> </a-popover>
<Popover placement="leftBottom"> <a-popover placement="leftBottom">
<template slot="content"> <template slot="content">
<p>Content</p> <p>Content</p>
<p>Content</p> <p>Content</p>
@ -66,10 +73,10 @@
<span>Title</span> <span>Title</span>
</template> </template>
<a-button>LB</a-button> <a-button>LB</a-button>
</Popover> </a-popover>
</div> </div>
<div :style="{ width: `${buttonWidth}px`, marginLeft: `${buttonWidth * 4 + 24 }px`}"> <div :style="{ width: `${buttonWidth}px`, marginLeft: `${buttonWidth * 4 + 24 }px`}">
<Popover placement="rightTop"> <a-popover placement="rightTop">
<template slot="content"> <template slot="content">
<p>Content</p> <p>Content</p>
<p>Content</p> <p>Content</p>
@ -78,8 +85,8 @@
<span>Title</span> <span>Title</span>
</template> </template>
<a-button>RT</a-button> <a-button>RT</a-button>
</Popover> </a-popover>
<Popover placement="right"> <a-popover placement="right">
<template slot="content"> <template slot="content">
<p>Content</p> <p>Content</p>
<p>Content</p> <p>Content</p>
@ -88,8 +95,8 @@
<span>Title</span> <span>Title</span>
</template> </template>
<a-button>Right</a-button> <a-button>Right</a-button>
</Popover> </a-popover>
<Popover placement="rightBottom"> <a-popover placement="rightBottom">
<template slot="content"> <template slot="content">
<p>Content</p> <p>Content</p>
<p>Content</p> <p>Content</p>
@ -98,10 +105,10 @@
<span>Title</span> <span>Title</span>
</template> </template>
<a-button>RB</a-button> <a-button>RB</a-button>
</Popover> </a-popover>
</div> </div>
<div :style="{ marginLeft: `${buttonWidth}px`, clear: 'both', whiteSpace: 'nowrap' }"> <div :style="{ marginLeft: `${buttonWidth}px`, clear: 'both', whiteSpace: 'nowrap' }">
<Popover placement="bottomLeft"> <a-popover placement="bottomLeft">
<template slot="content"> <template slot="content">
<p>Content</p> <p>Content</p>
<p>Content</p> <p>Content</p>
@ -110,8 +117,8 @@
<span>Title</span> <span>Title</span>
</template> </template>
<a-button>BL</a-button> <a-button>BL</a-button>
</Popover> </a-popover>
<Popover placement="bottom"> <a-popover placement="bottom">
<template slot="content"> <template slot="content">
<p>Content</p> <p>Content</p>
<p>Content</p> <p>Content</p>
@ -120,8 +127,8 @@
<span>Title</span> <span>Title</span>
</template> </template>
<a-button>Bottom</a-button> <a-button>Bottom</a-button>
</Popover> </a-popover>
<Popover placement="bottomRight"> <a-popover placement="bottomRight">
<template slot="content"> <template slot="content">
<p>Content</p> <p>Content</p>
<p>Content</p> <p>Content</p>
@ -130,23 +137,18 @@
<span>Title</span> <span>Title</span>
</template> </template>
<a-button>BR</a-button> <a-button>BR</a-button>
</Popover> </a-popover>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import { Popover, Button } from 'antd'
export default { export default {
data () { data () {
return { return {
buttonWidth: 70, buttonWidth: 70,
} }
}, },
components: {
Popover,
},
} }
</script> </script>
<style> <style>
@ -158,3 +160,4 @@ export default {
margin-bottom: 8px; margin-bottom: 8px;
} }
</style> </style>
```

38
components/popover/demo/triggerType.vue → components/popover/demo/triggerType.md
View File

@ -1,39 +1,37 @@
<cn>
#### 三种触发方式
鼠标移入、聚集、点击。
</cn>
<us>
#### Three ways to trigger
Mouse to click, focus and move in.
</us>
```html
<template> <template>
<div> <div>
<md> <a-popover title="Title" trigger="hover">
## 三种触发方式
鼠标移入、聚集、点击。
</md>
<Popover title="Title" trigger="hover">
<template slot="content"> <template slot="content">
<p>Content</p> <p>Content</p>
<p>Content</p> <p>Content</p>
</template> </template>
<a-button type="primary">Hover me</a-button> <a-button type="primary">Hover me</a-button>
</Popover> </a-popover>
<Popover title="Title" trigger="focus"> <a-popover title="Title" trigger="focus">
<template slot="content"> <template slot="content">
<p>Content</p> <p>Content</p>
<p>Content</p> <p>Content</p>
</template> </template>
<a-button type="primary">Focus me</a-button> <a-button type="primary">Focus me</a-button>
</Popover> </a-popover>
<Popover title="Title" trigger="click"> <a-popover title="Title" trigger="click">
<template slot="content"> <template slot="content">
<p>Content</p> <p>Content</p>
<p>Content</p> <p>Content</p>
</template> </template>
<a-button type="primary">Click me</a-button> <a-button type="primary">Click me</a-button>
</Popover> </a-popover>
</div> </div>
</template> </template>
```
<script>
import { Popover, Button } from 'antd'
export default {
components: {
Popover,
},
}
</script>

13
components/popover/index.en-US.md Normal file
View File

@ -0,0 +1,13 @@
## API
| Param | Description | Type | Default value |
| ----- | ----------- | ---- | ------------- |
| content | Content of the card | string\|slot\|vNode | - |
| title | Title of the card | string\|slot\VNode | - |
Consult [Tooltip's documentation](/ant-design/components/tooltip/#API) to find more APIs.
## Note
Please ensure that the child node of `Popover` accepts `onMouseenter`, `onMouseleave`, `onFocus`, `onClick` events.

20
components/popover/index.zh-CN.md
View File

@ -1,26 +1,12 @@
---
category: Components
subtitle: 气泡卡片
type: Data Display
title: Popover
---
点击/鼠标移入元素，弹出气泡式的卡片浮层。
## 何时使用
当目标元素有进一步的描述和相关操作时，可以收纳到卡片中，根据用户的操作行为进行展现。
和 `Tooltip` 的区别是，用户可以对浮层上的元素进行操作，因此它可以承载更复杂的内容，比如链接或按钮等。
## API ## API
| 参数 | 说明 | 类型 | 默认值 | | 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- | | --- | --- | --- | --- |
| content | 卡片内容 | string\|function\|slot | 无 | | content | 卡片内容 | string\|slot\|VNode | 无 |
| title | 卡片标题 | string\|function\|slot | 无 | | title | 卡片标题 | string\|slot\|VNode | 无 |
更多属性请参考 [Tooltip](#/cn/components/tooltip/API)。 更多属性请参考 [Tooltip](/ant-design/components/tooltip-cn/#API)。
## 注意 ## 注意