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

Merge branch 'master' of https://github.com/vueComponent/ant-design

pull/9/head
tangjinzhou 2018-03-22 18:45:45 +08:00
parent 2e587708d2 ce7ca6c939
commit ea23f5841f
14 changed files with 279 additions and 219 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/popconfirm/demo/index.vue
View File

@ -15,7 +15,7 @@ const md = {
目标元素的操作需要用户进一步的确认时，在目标元素附近弹出浮层提示，询问用户。 目标元素的操作需要用户进一步的确认时，在目标元素附近弹出浮层提示，询问用户。
和 'confirm' 弹出的全屏居中模态对话框相比，交互形式更轻量。。 和 'confirm' 弹出的全屏居中模态对话框相比，交互形式更轻量。
## 代码演示`, ## 代码演示`,
us: `# Popconfirm us: `# Popconfirm

4
components/popconfirm/index.en-US.md
View File

@ -2,8 +2,8 @@
| Param | Description | Type | Default value | | Param | Description | Type | Default value |
| ----- | ----------- | ---- | ------------- | | ----- | ----------- | ---- | ------------- |
| cancelText | text of the Cancel button | string | `Cancel` | | cancelText | text of the Cancel button | string\|slot | `Cancel` |
| okText | text of the Confirm button | string | `Confirm` | | okText | text of the Confirm button | string\|slot | `Confirm` |
| okType | Button `type` of the Confirm button | string | `primary` | | okType | Button `type` of the Confirm button | string | `primary` |
| title | title of the confirmation box | string\|slot | - | | title | title of the confirmation box | string\|slot | - |

4
components/popconfirm/index.zh-CN.md
View File

@ -2,8 +2,8 @@
| 参数 | 说明 | 类型 | 默认值 | | 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- | | --- | --- | --- | --- |
| cancelText | 取消按钮文字 | string | 取消 | | cancelText | 取消按钮文字 | string\|slot | 取消 |
| okText | 确认按钮文字 | string | 确定 | | okText | 确认按钮文字 | string\|slot | 确定 |
| okType | 确认按钮类型 | string | primary | | okType | 确认按钮类型 | string | primary |
| title | 确认框的描述 | string\|slot | 无 | | title | 确认框的描述 | string\|slot | 无 |

4
components/tooltip/Tooltip.jsx
View File

@ -147,7 +147,7 @@ export default {
render (h) { render (h) {
const { $props, $data, $slots } = this const { $props, $data, $slots } = this
const { prefixCls, openClassName, getPopupContainer, getTooltipContainer } = $props const { prefixCls, openClassName, getPopupContainer } = $props
const children = ($slots.default || []).filter(c => c.tag || c.text.trim() !== '')[0] const children = ($slots.default || []).filter(c => c.tag || c.text.trim() !== '')[0]
let sVisible = $data.sVisible let sVisible = $data.sVisible
// Hide tooltip when there is no title // Hide tooltip when there is no title
@ -164,7 +164,7 @@ export default {
const tooltipProps = { const tooltipProps = {
props: { props: {
...$props, ...$props,
getTooltipContainer: getPopupContainer || getTooltipContainer, getTooltipContainer: getPopupContainer,
builtinPlacements: this.getPlacements(), builtinPlacements: this.getPlacements(),
visible: sVisible, visible: sVisible,
}, },

22
components/tooltip/demo/arrow-point-at-center.md Normal file
View File

@ -0,0 +1,22 @@
<cn>
#### 箭头指向
设置了 `arrowPointAtCenter` 后，箭头将指向目标元素的中心。
</cn>
<us>
#### Arrow pointing at the center
By specifying `arrowPointAtCenter` prop, the arrow will point to the center of the target element.
</us>
```html
<template>
<div>
<a-tooltip placement="topLeft" title="Prompt Text">
<a-button>Align edge / 边缘对齐</a-button>
</a-tooltip>
<a-tooltip placement="topLeft" title="Prompt Text" arrowPointAtCenter>
<a-button>Arrow points to center / 箭头指向中心</a-button>
</a-tooltip>
</div>
</template>
```

14
components/tooltip/demo/arrow-point-at-center.vue
View File

@ -1,14 +0,0 @@
<template>
<div>
<md>
## 箭头指向
设置了 `arrowPointAtCenter` 后，箭头将指向目标元素的中心。
</md>
<a-tooltip placement="topLeft" title="Prompt Text">
<a-button>Align edge / 边缘对齐</a-button>
</a-tooltip>
<a-tooltip placement="topLeft" title="Prompt Text" arrowPointAtCenter>
<a-button>Arrow points to center / 箭头指向中心</a-button>
</a-tooltip>
</div>
</template>

45
components/tooltip/demo/auto-adjust-overflow.vue → components/tooltip/demo/auto-adjust-overflow.md
View File

@ -1,23 +1,26 @@
<template> <cn>
<div> #### 自动调整位置
<md> 气泡框不可见时自动调整位置
## 自动调整位置 </cn>
气泡框不可见时自动调整位置。
</md>
<div :style="wrapStyles">
<Tooltip placement="left" title="Prompt Text" :getPopupContainer="getPopupContainer">
<a-button>Adjust automatically / 自动调整</a-button>
</Tooltip>
<br />
<Tooltip placement="left" title="Prompt Text" :getPopupContainer="getPopupContainer" :autoAdjustOverflow="false">
<a-button>Ingore / 不处理</a-button>
</Tooltip>
</div>
</div>
</template>
<us>
#### Adjust placement automatically
Adjust popup placement automatically when popup is invisible
</us>
```html
<template>
<div :style="wrapStyles">
<a-tooltip placement="left" title="Prompt Text" :getPopupContainer="getPopupContainer">
<a-button>Adjust automatically / 自动调整</a-button>
</a-tooltip>
<br />
<a-tooltip style="marginTop: 10px" placement="left" title="Prompt Text" :getPopupContainer="getPopupContainer" :autoAdjustOverflow="false">
<a-button>Ingore / 不处理</a-button>
</a-tooltip>
</div>
</template>
<script> <script>
import { Tooltip, Button } from 'antd'
const wrapStyles = { const wrapStyles = {
overflow: 'hidden', overflow: 'hidden',
position: 'relative', position: 'relative',
@ -35,9 +38,7 @@ export default {
return trigger.parentElement return trigger.parentElement
}, },
}, },
components: {
Tooltip,
},
} }
</script> </script>
```

21
components/tooltip/demo/basic.md Normal file
View File

@ -0,0 +1,21 @@
<cn>
#### 基本
最简单的用法。
</cn>
<us>
#### Basic
The simplest usage.
</us>
```html
<template>
<a-tooltip>
<template slot='title'>
prompt text
</template>
Tooltip will show when mouse enter.
</a-tooltip>
</template>
```

23
components/tooltip/demo/basic.vue
View File

@ -1,23 +0,0 @@
<template>
<div>
<md>
## 基本
最简单的用法。
</md>
<Tooltip>
<template slot='title'>
prompt text
</template>
Tooltip will show when mouse enter.
</Tooltip>
</div>
</template>
<script>
import { Tooltip } from 'antd'
export default {
components: {
Tooltip,
},
}
</script>

71
components/tooltip/demo/index.vue
View File

@ -1,30 +1,59 @@
<template>
<div>
<h1>Basic</h1>
<Basic />
<h1>ArrowCenter</h1>
<ArrowCenter />
<h1>AutoAdjust</h1>
<AutoAdjust />
<h1>Placement</h1>
<Placement />
</div>
</template>
<script> <script>
import Basic from './basic' import Basic from './basic.md'
import ArrowCenter from './arrow-point-at-center' import ArrowPointAtCenter from './arrow-point-at-center.md'
import AutoAdjust from './auto-adjust-overflow' import AutoAdjustOverflow from './auto-adjust-overflow.md'
import Placement from './placement' import Placement from './placement.md'
import CN from '../index.zh-CN.md'
import US from '../index.en-US.md'
const md = {
cn: `# Tooltip
简单的文字提示气泡框。
## 何时使用
鼠标移入则显示提示，移出消失，气泡浮层不承载复杂文本和操作。
可用来代替系统默认的 'title' 提示，提供一个'按钮/文字/操作'的文案解释。
## 代码演示`,
us: `# Tooltip
A simple text popup tip.
# When To Use
- The tip is shown on mouse enter, and is hidden on mouse leave. The Tooltip doesn't support complex text or operations.
- To provide an explanation of a 'button/text/operation'. It's often used instead of the html 'title' attribute.
## Examples
`,
}
export default { export default {
category: 'Components', category: 'Components',
subtitle: '文字提示', subtitle: '文字提示',
type: 'Data Display', type: 'Data Display',
title: 'Tooltip', title: 'Tooltip',
components: { render () {
Basic, return (
ArrowCenter, <div>
AutoAdjust, <md cn={md.cn} us={md.us}/>
Placement, <br/>
<Basic />
<br/>
<Placement />
<br/>
<ArrowPointAtCenter />
<br/>
<AutoAdjustOverflow />
<br/>
<api>
<template slot='cn'>
<CN/>
</template>
<US/>
</api>
</div>
)
}, },
} }
</script> </script>

117
components/tooltip/demo/placement.md Normal file
View File

@ -0,0 +1,117 @@
<cn>
#### 位置
位置有 12 个方向。
</cn>
<us>
#### Placement
The ToolTip has 12 placements choice.
</us>
```html
<template>
<div id="components-a-tooltip-demo-placement">
<div :style="{ marginLeft: `${buttonWidth}px`, whiteSpace: 'nowrap' }">
<a-popconfirm placement="topLeft" >
<template slot="title">
<span>prompt text</span>
</template>
<a-button>TL</a-button>
</a-popconfirm>
<a-popconfirm placement="top" >
<template slot="title">
<span>prompt text</span>
</template>
<a-button>Top</a-button>
</a-popconfirm>
<a-popconfirm placement="topRight" >
<template slot="title">
<span>prompt text</span>
</template>
<a-button>TR</a-button>
</a-popconfirm>
</div>
<div :style="{ width: `${buttonWidth}px`, float: 'left' }">
<a-popconfirm placement="leftTop" >
<template slot="title">
<span>prompt text</span>
</template>
<a-button>LT</a-button>
</a-popconfirm>
<a-popconfirm placement="left" >
<template slot="title">
<span>prompt text</span>
</template>
<a-button>Left</a-button>
</a-popconfirm>
<a-popconfirm placement="leftBottom" >
<template slot="title">
<span>prompt text</span>
</template>
<a-button>LB</a-button>
</a-popconfirm>
</div>
<div :style="{ width: `${buttonWidth}px`, marginLeft: `${buttonWidth * 4 + 24 }px`}">
<a-popconfirm placement="rightTop" >
<template slot="title">
<span>prompt text</span>
</template>
<a-button>RT</a-button>
</a-popconfirm>
<a-popconfirm placement="right" >
<template slot="title">
<span>prompt text</span>
</template>
<a-button>Right</a-button>
</a-popconfirm>
<a-popconfirm placement="rightBottom" >
<template slot="title">
<span>prompt text</span>
</template>
<a-button>RB</a-button>
</a-popconfirm>
</div>
<div :style="{ marginLeft: `${buttonWidth}px`, clear: 'both', whiteSpace: 'nowrap' }">
<a-popconfirm placement="bottomLeft" >
<template slot="title">
<span>prompt text</span>
</template>
<a-button>BL</a-button>
</a-popconfirm>
<a-popconfirm placement="bottom" >
<template slot="title">
<span>prompt text</span>
</template>
<a-button>Bottom</a-button>
</a-popconfirm>
<a-popconfirm placement="bottomRight" >
<template slot="title">
<span>prompt text</span>
</template>
<a-button>BR</a-button>
</a-popconfirm>
</div>
</div>
</template>
<script>
import { message } from 'antd'
export default {
data () {
return {
buttonWidth: 70,
}
},
}
</script>
<style scoped>
#components-a-tooltip-demo-placement .ant-btn {
width: 70px;
text-align: center;
padding: 0;
margin-right: 8px;
margin-bottom: 8px;
}
</style>
```

112
components/tooltip/demo/placement.vue
View File

@ -1,112 +0,0 @@
<template>
<div id="components-tooltip-demo-placement">
<md>
## 位置
位置有 12 个方向。
</md>
<div :style="{ marginLeft: `${buttonWidth}px`, whiteSpace: 'nowrap' }">
<Tooltip placement="topLeft">
<template slot="title">
<span>prompt text</span>
</template>
<a-button>TL</a-button>
</Tooltip>
<Tooltip placement="top">
<template slot="title">
<span>prompt text</span>
</template>
<a-button>Top</a-button>
</Tooltip>
<Tooltip placement="topRight">
<template slot="title">
<span>prompt text</span>
</template>
<a-button>TR</a-button>
</Tooltip>
</div>
<div :style="{ width: `${buttonWidth}px`, float: 'left' }">
<Tooltip placement="leftTop">
<template slot="title">
<span>prompt text</span>
</template>
<a-button>LT</a-button>
</Tooltip>
<Tooltip placement="left">
<template slot="title">
<span>prompt text</span>
</template>
<a-button>Left</a-button>
</Tooltip>
<Tooltip placement="leftBottom">
<template slot="title">
<span>prompt text</span>
</template>
<a-button>LB</a-button>
</Tooltip>
</div>
<div :style="{ width: `${buttonWidth}px`, marginLeft: `${buttonWidth * 4 + 24 }px`}">
<Tooltip placement="rightTop">
<template slot="title">
<span>prompt text</span>
</template>
<a-button>RT</a-button>
</Tooltip>
<Tooltip placement="right">
<template slot="title">
<span>prompt text</span>
</template>
<a-button>Right</a-button>
</Tooltip>
<Tooltip placement="rightBottom">
<template slot="title">
<span>prompt text</span>
</template>
<a-button>RB</a-button>
</Tooltip>
</div>
<div :style="{ marginLeft: `${buttonWidth}px`, clear: 'both', whiteSpace: 'nowrap' }">
<Tooltip placement="bottomLeft">
<template slot="title">
<span>prompt text</span>
</template>
<a-button>BL</a-button>
</Tooltip>
<Tooltip placement="bottom">
<template slot="title">
<span>prompt text</span>
</template>
<a-button>Bottom</a-button>
</Tooltip>
<Tooltip placement="bottomRight">
<template slot="title">
<span>prompt text</span>
</template>
<a-button>BR</a-button>
</Tooltip>
</div>
</div>
</template>
<script>
import { Tooltip, Button } from 'antd'
export default {
data () {
return {
buttonWidth: 70,
}
},
components: {
Tooltip,
},
}
</script>
<style>
#components-tooltip-demo-placement .ant-btn {
width: 70px;
text-align: center;
padding: 0;
margin-right: 8px;
margin-bottom: 8px;
}
</style>

32
components/tooltip/index.en-US.md Normal file
View File

@ -0,0 +1,32 @@
## API
| Property | Description | Type | Default |
| -------- | ----------- | ---- | ------- |
| title | The text shown in the tooltip | string\|slot | - |
### Common API
The following APIs are shared by Tooltip, Popconfirm, Popover.
| Property | Description | Type | Default |
| -------- | ----------- | ---- | ------- |
| arrowPointAtCenter | Whether the arrow is pointed at the center of target | boolean | `false` |
| autoAdjustOverflow | Whether to adjust popup placement automatically when popup is off screen | boolean | `true` |
| defaultVisible | Whether the floating tooltip card is visible by default | boolean | `false` |
| getPopupContainer | The DOM container of the tip, the default behavior is to create a `div` element in `body`. | Function(triggerNode) | () => document.body |
| mouseEnterDelay | Delay in seconds, before tooltip is shown on mouse enter | number | 0 |
| mouseLeaveDelay | Delay in seconds, before tooltip is hidden on mouse leave | number | 0.1 |
| overlayClassName | Class name of the tooltip card | string | - |
| overlayStyle | Style of the tooltip card | object | - |
| placement | The position of the tooltip relative to the target, which can be one of `top` `left` `right` `bottom` `topLeft` `topRight` `bottomLeft` `bottomRight` `leftTop` `leftBottom` `rightTop` `rightBottom` | string | `top` |
| trigger | Tooltip trigger mode | `hover` \| `focus` \| `click` | `hover` |
| visible | Whether the floating tooltip card is visible or not | boolean | `false` |
### events
| Events Name | Description | Arguments |
| --- | --- | --- |
| visibleChange | Callback executed when visibility of the tooltip card is changed | (visible) => void | - |
## Note
Please ensure that the child node of `Tooltip` accepts `mouseenter`, `mouseleave`, `focus`, `click` events.

27
components/tooltip/index.zh-CN.md
View File

@ -1,23 +1,8 @@
---
category: Components
subtitle: 文字提示
type: Data Display
title: Tooltip
---
简单的文字提示气泡框。
## 何时使用
鼠标移入则显示提示，移出消失，气泡浮层不承载复杂文本和操作。
可用来代替系统默认的 `title` 提示，提供一个`按钮/文字/操作`的文案解释。
## API ## API
| 参数 | 说明 | 类型 | 默认值 | | 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- | | --- | --- | --- | --- |
| title | 提示文字 | `string` `function` `slot` | 无 | | title | 提示文字 | string\|slot | 无 |
### 共同的 API ### 共同的 API
@ -25,8 +10,9 @@ title: Tooltip
| 参数 | 说明 | 类型 | 默认值 | | 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- | | --- | --- | --- | --- |
| arrowPointAtCenter | 箭头是否指向目标元素中 | boolean | `false` | | arrowPointAtCenter | 箭头是否指向目标元素中心 | boolean | `false` |
| autoAdjustOverflow | 气泡被遮挡时自动调整位置 | boolean | `true` | | autoAdjustOverflow | 气泡被遮挡时自动调整位置 | boolean | `true` |
| defaultVisible | 默认是否显隐 | boolean | false |
| getPopupContainer | 浮层渲染父节点，默认渲染到 body 上 | Function(triggerNode) | () => document.body | | getPopupContainer | 浮层渲染父节点，默认渲染到 body 上 | Function(triggerNode) | () => document.body |
| mouseEnterDelay | 鼠标移入后延时多少才显示 Tooltip，单位：秒 | number | 0 | | mouseEnterDelay | 鼠标移入后延时多少才显示 Tooltip，单位：秒 | number | 0 |
| mouseLeaveDelay | 鼠标移出后延时多少才隐藏 Tooltip，单位：秒 | number | 0.1 | | mouseLeaveDelay | 鼠标移出后延时多少才隐藏 Tooltip，单位：秒 | number | 0.1 |
@ -34,12 +20,13 @@ title: Tooltip
| overlayStyle | 卡片样式 | object | 无 | | overlayStyle | 卡片样式 | object | 无 |
| placement | 气泡框位置，可选 `top` `left` `right` `bottom` `topLeft` `topRight` `bottomLeft` `bottomRight` `leftTop` `leftBottom` `rightTop` `rightBottom` | string | top | | placement | 气泡框位置，可选 `top` `left` `right` `bottom` `topLeft` `topRight` `bottomLeft` `bottomRight` `leftTop` `leftBottom` `rightTop` `rightBottom` | string | top |
| trigger | 触发行为，可选 `hover/focus/click` | string | hover | | trigger | 触发行为，可选 `hover/focus/click` | string | hover |
| visible(v-model) | 用于手动控制浮层显隐 | boolean | false | | visible | 用于手动控制浮层显隐 | boolean | false |
| onVisibleChange | 显示隐藏的回调 | (visible) => void | 无 |
### 事件 ### 事件
| 事件名称 | 说明 | 回调参数 | | 事件名称 | 说明 | 回调参数 |
| visibleChange | 显示隐藏变换时触发 | (visible) | | --- | --- | --- |
| visibleChange | 显示隐藏的回调 | (visible) => void |
## 注意 ## 注意
请确保 `Tooltip` 的子元素能接受 `mouseenter`、`mouseleave`、`focus`、`click` 事件。 请确保 `Tooltip` 的子元素能接受 `mouseenter`、`mouseleave`、`focus`、`click` 事件。