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>
<div>
<md>
## 基本
<cn>
#### 基本
最简单的用法，浮层的大小由内容区域决定。
</md>
<Popover title="Title">
</cn>
<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">
<p>Content</p>
<p>Content</p>
</template>
<a-button type="primary">Hover me</a-button>
</Popover>
</div>
</a-popover>
</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>
<div>
<md>
## 从浮层内关闭
使用 `visible` 属性控制浮层显示。
</md>
<Popover
<a-popover
title="Title"
trigger="click"
v-model="visible"
>
<a @click="hide" slot="content">Close</a>
<a-button type="primary">Click me</a-button>
</Popover>
</div>
</a-popover>
</template>
<script>
import { Popover, Button } from 'antd'
export default {
data () {
return {
@ -29,9 +33,6 @@ export default {
this.visible = false
},
},
components: {
Popover,
},
}
</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>
import Basic from './basic'
import ArrowCenter from './arrow-point-at-center'
import Control from './control'
import Placement from './placement'
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 {
category: 'Components',
subtitle: '气泡卡片',
type: 'Data Display',
title: 'Popover',
components: {
Basic,
ArrowCenter,
Control,
Placement,
TriggerType,
render () {
return (
<div>
<md cn={md.cn} us={md.us}/>
<Basic />
<ArrowCenter />
<Control />
<Placement />
<TriggerType />
<api>
<template slot='cn'>
<CN/>
</template>
<US/>
</api>
</div>
)
},
}
</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>
<div id="components-popover-demo-placement">
<md>
## 位置
位置有 12 个方向。
</md>
<div :style="{ marginLeft: `${buttonWidth}px`, whiteSpace: 'nowrap' }">
<Popover placement="topLeft">
<a-popover placement="topLeft">
<template slot="content">
<p>Content</p>
<p>Content</p>
@ -14,8 +21,8 @@
<span>Title</span>
</template>
<a-button>TL</a-button>
</Popover>
<Popover placement="top">
</a-popover>
<a-popover placement="top">
<template slot="content">
<p>Content</p>
<p>Content</p>
@ -24,8 +31,8 @@
<span>Title</span>
</template>
<a-button>Top</a-button>
</Popover>
<Popover placement="topRight">
</a-popover>
<a-popover placement="topRight">
<template slot="content">
<p>Content</p>
<p>Content</p>
@ -34,10 +41,10 @@
<span>Title</span>
</template>
<a-button>TR</a-button>
</Popover>
</a-popover>
</div>
<div :style="{ width: `${buttonWidth}px`, float: 'left' }">
<Popover placement="leftTop">
<a-popover placement="leftTop">
<template slot="content">
<p>Content</p>
<p>Content</p>
@ -46,8 +53,8 @@
<span>Title</span>
</template>
<a-button>LT</a-button>
</Popover>
<Popover placement="left">
</a-popover>
<a-popover placement="left">
<template slot="content">
<p>Content</p>
<p>Content</p>
@ -56,8 +63,8 @@
<span>Title</span>
</template>
<a-button>Left</a-button>
</Popover>
<Popover placement="leftBottom">
</a-popover>
<a-popover placement="leftBottom">
<template slot="content">
<p>Content</p>
<p>Content</p>
@ -66,10 +73,10 @@
<span>Title</span>
</template>
<a-button>LB</a-button>
</Popover>
</a-popover>
</div>
<div :style="{ width: `${buttonWidth}px`, marginLeft: `${buttonWidth * 4 + 24 }px`}">
<Popover placement="rightTop">
<a-popover placement="rightTop">
<template slot="content">
<p>Content</p>
<p>Content</p>
@ -78,8 +85,8 @@
<span>Title</span>
</template>
<a-button>RT</a-button>
</Popover>
<Popover placement="right">
</a-popover>
<a-popover placement="right">
<template slot="content">
<p>Content</p>
<p>Content</p>
@ -88,8 +95,8 @@
<span>Title</span>
</template>
<a-button>Right</a-button>
</Popover>
<Popover placement="rightBottom">
</a-popover>
<a-popover placement="rightBottom">
<template slot="content">
<p>Content</p>
<p>Content</p>
@ -98,10 +105,10 @@
<span>Title</span>
</template>
<a-button>RB</a-button>
</Popover>
</a-popover>
</div>
<div :style="{ marginLeft: `${buttonWidth}px`, clear: 'both', whiteSpace: 'nowrap' }">
<Popover placement="bottomLeft">
<a-popover placement="bottomLeft">
<template slot="content">
<p>Content</p>
<p>Content</p>
@ -110,8 +117,8 @@
<span>Title</span>
</template>
<a-button>BL</a-button>
</Popover>
<Popover placement="bottom">
</a-popover>
<a-popover placement="bottom">
<template slot="content">
<p>Content</p>
<p>Content</p>
@ -120,8 +127,8 @@
<span>Title</span>
</template>
<a-button>Bottom</a-button>
</Popover>
<Popover placement="bottomRight">
</a-popover>
<a-popover placement="bottomRight">
<template slot="content">
<p>Content</p>
<p>Content</p>
@ -130,23 +137,18 @@
<span>Title</span>
</template>
<a-button>BR</a-button>
</Popover>
</a-popover>
</div>
</div>
</template>
<script>
import { Popover, Button } from 'antd'
export default {
data () {
return {
buttonWidth: 70,
}
},
components: {
Popover,
},
}
</script>
<style>
@ -158,3 +160,4 @@ export default {
margin-bottom: 8px;
}
</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>
<div>
<md>
## 三种触发方式
鼠标移入、聚集、点击。
</md>
<Popover title="Title" trigger="hover">
<a-popover title="Title" trigger="hover">
<template slot="content">
<p>Content</p>
<p>Content</p>
</template>
<a-button type="primary">Hover me</a-button>
</Popover>
<Popover title="Title" trigger="focus">
</a-popover>
<a-popover title="Title" trigger="focus">
<template slot="content">
<p>Content</p>
<p>Content</p>
</template>
<a-button type="primary">Focus me</a-button>
</Popover>
<Popover title="Title" trigger="click">
</a-popover>
<a-popover title="Title" trigger="click">
<template slot="content">
<p>Content</p>
<p>Content</p>
</template>
<a-button type="primary">Click me</a-button>
</Popover>
</a-popover>
</div>
</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
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| content | 卡片内容 | string\|function\|slot | 无 |
| title | 卡片标题 | string\|function\|slot | 无 |
| content | 卡片内容 | string\|slot\|VNode | 无 |
| title | 卡片标题 | string\|slot\|VNode | 无 |
更多属性请参考 [Tooltip](#/cn/components/tooltip/API)。
更多属性请参考 [Tooltip](/ant-design/components/tooltip-cn/#API)。
## 注意