mirror of
https://github.com/tusen-ai/naive-ui.git
synced 2024-12-09 04:31:35 +08:00
doc: popover, tooltip
This commit is contained in:
07akioni
parent
f8e76dd7cd
commit
d7bca06ceb
@ -3,9 +3,9 @@
|
||||
<n-popover>
|
||||
<template v-slot:activator>
|
||||
<n-button style="margin:0;">
|
||||
hover
|
||||
Hover
|
||||
</n-button>
|
||||
</template>
|
||||
<span>Light My Fire</span>
|
||||
<span>Maybe I don't really want to know how your garden grows</span>
|
||||
</n-popover>
|
||||
```
|
||||
@ -1,11 +1,13 @@
|
||||
# Delay
|
||||
```html
|
||||
<n-popover :delay="500" :duration="500">
|
||||
<n-popover :delay="500" :duration="500" :width="240">
|
||||
<template v-slot:activator>
|
||||
<n-button style="margin:0;">
|
||||
hover
|
||||
Delay 500, Duration 500
|
||||
</n-button>
|
||||
</template>
|
||||
<span>Light My Fire</span>
|
||||
<span>
|
||||
Lately did you ever feel the pain In the morning rain As it soaks it to the bone
|
||||
</span>
|
||||
</n-popover>
|
||||
```
|
||||
|
||||
@ -39,5 +39,5 @@ manual-position
|
||||
## Events
|
||||
|Name|Parameter|
|
||||
|-|-|
|
||||
|show|()|
|
||||
|hide|()|
|
||||
|show|`()`|
|
||||
|hide|`()`|
|
||||
@ -2,7 +2,7 @@
|
||||
```html
|
||||
<div style="width: 200px; height: 200px; background-color: rgba(0, 128, 0, .5);" @click="handleClick"></div>
|
||||
<n-popover trigger="manual" :show="showPopover" :x="x" :y="y" manually-positioned>
|
||||
666
|
||||
Cool!
|
||||
</n-popover>
|
||||
```
|
||||
```js
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
# No Arrow
|
||||
```html
|
||||
<n-popover :arrow="false">
|
||||
<n-popover :show-arrow="false">
|
||||
<template v-slot:activator>
|
||||
<n-button style="margin:0;">
|
||||
hover
|
||||
Hover
|
||||
</n-button>
|
||||
</template>
|
||||
<span>Light My Fire</span>
|
||||
<span>Like a rect</span>
|
||||
</n-popover>
|
||||
```
|
||||
@ -1,9 +1,9 @@
|
||||
# Raw Content
|
||||
```html
|
||||
<n-popover raw :arrow="false">
|
||||
<n-popover raw :show-arrow="false">
|
||||
<template v-slot:activator>
|
||||
<n-button style="margin:0;">
|
||||
hover
|
||||
Hover
|
||||
</n-button>
|
||||
</template>
|
||||
<div
|
||||
|
||||
@ -2,9 +2,7 @@
|
||||
```html
|
||||
<n-popover placement="bottom" trigger="hover" style="margin-right: 12px;">
|
||||
<template v-slot:activator>
|
||||
<n-button>
|
||||
California Girls(Hover)
|
||||
</n-button>
|
||||
<n-button>Hover</n-button>
|
||||
</template>
|
||||
<span>
|
||||
I wish they all could be California girls
|
||||
@ -13,7 +11,7 @@
|
||||
<n-popover :show="showPopover" placement="bottom" trigger="manual">
|
||||
<template v-slot:activator>
|
||||
<n-button @click="showPopover = !showPopover">
|
||||
California Girls(Manual)
|
||||
Manual
|
||||
</n-button>
|
||||
</template>
|
||||
<span>
|
||||
@ -23,7 +21,7 @@
|
||||
<n-popover placement="bottom" trigger="click" style="margin-right: 12px;">
|
||||
<template v-slot:activator>
|
||||
<n-button>
|
||||
California Girls(Click)
|
||||
Click
|
||||
</n-button>
|
||||
</template>
|
||||
<span>
|
||||
|
||||
@ -3,9 +3,9 @@
|
||||
<n-popover :width="500">
|
||||
<template v-slot:activator>
|
||||
<n-button style="margin:0;">
|
||||
hover
|
||||
Width 500px
|
||||
</n-button>
|
||||
</template>
|
||||
<span>Light My Fire</span>
|
||||
<span>Looks like a bar</span>
|
||||
</n-popover>
|
||||
```
|
||||
11
demo/documentation/components/popover/zhCN/basic.md
Normal file
11
demo/documentation/components/popover/zhCN/basic.md
Normal file
@ -0,0 +1,11 @@
|
||||
# 基础用法
|
||||
```html
|
||||
<n-popover>
|
||||
<template v-slot:activator>
|
||||
<n-button style="margin:0;">
|
||||
悬浮
|
||||
</n-button>
|
||||
</template>
|
||||
<span>或许不想知道你的花园长得咋样</span>
|
||||
</n-popover>
|
||||
```
|
||||
13
demo/documentation/components/popover/zhCN/delay.md
Normal file
13
demo/documentation/components/popover/zhCN/delay.md
Normal file
@ -0,0 +1,13 @@
|
||||
# 延迟
|
||||
```html
|
||||
<n-popover :delay="500" :duration="500" :width="240">
|
||||
<template v-slot:activator>
|
||||
<n-button style="margin:0;">
|
||||
延迟 500ms, 持续 500ms
|
||||
</n-button>
|
||||
</template>
|
||||
<span>
|
||||
Lately did you ever feel the pain In the morning rain as it soaks it to the bone
|
||||
</span>
|
||||
</n-popover>
|
||||
```
|
||||
78
demo/documentation/components/popover/zhCN/event.md
Normal file
78
demo/documentation/components/popover/zhCN/event.md
Normal file
@ -0,0 +1,78 @@
|
||||
# 事件
|
||||
```html
|
||||
<n-popover
|
||||
placement="bottom"
|
||||
:width="200"
|
||||
trigger="hover"
|
||||
style="margin-right: 12px;"
|
||||
@show="handleShow"
|
||||
@hide="handleHide"
|
||||
>
|
||||
<template v-slot:activator>
|
||||
<n-button>
|
||||
悬浮
|
||||
</n-button>
|
||||
</template>
|
||||
<span>
|
||||
我希望她们都是加州女孩
|
||||
</span>
|
||||
</n-popover>
|
||||
<n-popover
|
||||
placement="bottom"
|
||||
:width="200"
|
||||
trigger="click"
|
||||
style="margin-right: 12px;"
|
||||
@show="handleShow"
|
||||
@hide="handleHide"
|
||||
>
|
||||
<template v-slot:activator>
|
||||
<n-button>
|
||||
点击
|
||||
</n-button>
|
||||
</template>
|
||||
<span>
|
||||
我希望她们都是加州女孩
|
||||
</span>
|
||||
</n-popover>
|
||||
<n-popover
|
||||
:show="showPopover"
|
||||
placement="bottom"
|
||||
:width="200"
|
||||
trigger="manual"
|
||||
@show="handleShow"
|
||||
@hide="handleHide"
|
||||
>
|
||||
<template v-slot:activator>
|
||||
<n-button @click="showPopover = !showPopover">
|
||||
点击
|
||||
</n-button>
|
||||
</template>
|
||||
<span>
|
||||
我希望她们都是加州女孩
|
||||
</span>
|
||||
</n-popover>
|
||||
```
|
||||
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
showPopover: false
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleShow() {
|
||||
this.$NMessage.success("show popover");
|
||||
},
|
||||
handleHide() {
|
||||
this.$NMessage.success("hide popover");
|
||||
}
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
```css
|
||||
.n-button {
|
||||
margin: 0 12px 8px 0;
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,43 @@
|
||||
# Popover 弹出信息
|
||||
|
||||
Popover 在内容周围弹出一些隐藏的信息。Popover 里面没什么内置样式，在里面填什么主要靠你了。
|
||||
|
||||
如果你只想展示一些基本的文本内容，使用 [Tooltip](n-tooltip)。
|
||||
|
||||
## 例子
|
||||
|
||||
```demo
|
||||
basic
|
||||
delay
|
||||
no-arrow
|
||||
trigger
|
||||
event
|
||||
placement
|
||||
raw-content
|
||||
width
|
||||
manual-position
|
||||
```
|
||||
|
||||
## Props
|
||||
|名称|类型|默认值|介绍|
|
||||
|-|-|-|-|
|
||||
|trigger|`'hover' \| 'trigger' \| 'manual'`|`'hover'`||
|
||||
|delay|`number`|`0`||
|
||||
|duration|`number`|`300`||
|
||||
|placement|`'top-start' \| 'top' \| 'top-end' \| 'right-start' \| 'right' \| 'right-end' \| 'bottom-start' \| 'bottom' \| 'bottom-end' \| 'left-start' \| 'left' \| 'left-end' \| `|`'bottom'`||
|
||||
|arrow|`boolean`|`false`||
|
||||
|raw|`boolean`|`false`||
|
||||
|disabled|`boolean`|`false`||
|
||||
|manuallyPositioned|`boolean`|`false`||
|
||||
|x|`number`|`null`||
|
||||
|y|`number`|`null`||
|
||||
|filp|`boolean`|`true`||
|
||||
|controller|`object`|`null`||
|
||||
|overlay-class|`string`|`null`||
|
||||
|overlay-style|`object`|`null`||
|
||||
|
||||
## Events
|
||||
|名称|参数|
|
||||
|-|-|
|
||||
|show|`()`|
|
||||
|hide|`()`|
|
||||
29
demo/documentation/components/popover/zhCN/manualPosition.md
Normal file
29
demo/documentation/components/popover/zhCN/manualPosition.md
Normal file
@ -0,0 +1,29 @@
|
||||
# 手动定位
|
||||
```html
|
||||
<div style="width: 200px; height: 200px; background-color: rgba(0, 128, 0, .5);" @click="handleClick"></div>
|
||||
<n-popover trigger="manual" :show="showPopover" :x="x" :y="y" manually-positioned>
|
||||
厉害！
|
||||
</n-popover>
|
||||
```
|
||||
```js
|
||||
export default {
|
||||
methods: {
|
||||
handleClick(e) {
|
||||
if (this.showPopover) {
|
||||
this.showPopover = false
|
||||
} else {
|
||||
this.showPopover = true
|
||||
this.x = e.clientX
|
||||
this.y = e.clientY
|
||||
}
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
showPopover: false,
|
||||
x: 0,
|
||||
y: 0
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
11
demo/documentation/components/popover/zhCN/noArrow.md
Normal file
11
demo/documentation/components/popover/zhCN/noArrow.md
Normal file
@ -0,0 +1,11 @@
|
||||
# 不要箭头
|
||||
```html
|
||||
<n-popover :show-arrow="false">
|
||||
<template v-slot:activator>
|
||||
<n-button style="margin:0;">
|
||||
悬浮
|
||||
</n-button>
|
||||
</template>
|
||||
<span>没有箭头就是矩形了</span>
|
||||
</n-popover>
|
||||
```
|
||||
139
demo/documentation/components/popover/zhCN/placement.md
Normal file
139
demo/documentation/components/popover/zhCN/placement.md
Normal file
@ -0,0 +1,139 @@
|
||||
# 位置
|
||||
```html
|
||||
<div class="popover-grid">
|
||||
<n-popover placement="top-start" trigger="click">
|
||||
<template v-slot:activator>
|
||||
<n-button size="small" style="grid-area: 1 / 1 / 2 / 2;">
|
||||
Top Start
|
||||
</n-button>
|
||||
</template>
|
||||
<div class="large-text">
|
||||
啊！
|
||||
</div>
|
||||
</n-popover>
|
||||
<n-popover placement="top" trigger="click">
|
||||
<template v-slot:activator>
|
||||
<n-button size="small" style="grid-area: 1 / 2 / 2 / 3;">
|
||||
Top
|
||||
</n-button>
|
||||
</template>
|
||||
<div class="large-text">
|
||||
啊！
|
||||
</div>
|
||||
</n-popover>
|
||||
<n-popover placement="top-end" trigger="click">
|
||||
<template v-slot:activator>
|
||||
<n-button size="small" style="grid-area: 1 / 3 / 2 / 4;">
|
||||
Top End
|
||||
</n-button>
|
||||
</template>
|
||||
<div class="large-text">
|
||||
啊！
|
||||
</div>
|
||||
</n-popover>
|
||||
<n-popover placement="left-start" trigger="click">
|
||||
<template v-slot:activator>
|
||||
<n-button size="small" style="grid-area: 2 / 1 / 3 / 2;">
|
||||
Left Start
|
||||
</n-button>
|
||||
</template>
|
||||
<div class="large-text">
|
||||
啊！
|
||||
</div>
|
||||
</n-popover>
|
||||
<n-popover placement="left" trigger="click">
|
||||
<template v-slot:activator>
|
||||
<n-button size="small" style="grid-area: 3 / 1 / 4 / 2;">
|
||||
Left
|
||||
</n-button>
|
||||
</template>
|
||||
<div class="large-text">
|
||||
啊！
|
||||
</div>
|
||||
</n-popover>
|
||||
<n-popover placement="left-end" trigger="click">
|
||||
<template v-slot:activator>
|
||||
<n-button size="small" style="grid-area: 4 / 1 / 5 / 2;">
|
||||
Left End
|
||||
</n-button>
|
||||
</template>
|
||||
<div class="large-text">
|
||||
啊！
|
||||
</div>
|
||||
</n-popover>
|
||||
<n-popover placement="right-start" trigger="click">
|
||||
<template v-slot:activator>
|
||||
<n-button size="small" style="grid-area: 2 / 3 / 3 / 4;">
|
||||
Right Start
|
||||
</n-button>
|
||||
</template>
|
||||
<div class="large-text">
|
||||
啊！
|
||||
</div>
|
||||
</n-popover>
|
||||
<n-popover placement="right" trigger="click">
|
||||
<template v-slot:activator>
|
||||
<n-button size="small" style="grid-area: 3 / 3 / 4 / 4;">
|
||||
Right
|
||||
</n-button>
|
||||
</template>
|
||||
<div class="large-text">
|
||||
啊！
|
||||
</div>
|
||||
</n-popover>
|
||||
<n-popover placement="right-end" trigger="click">
|
||||
<template v-slot:activator>
|
||||
<n-button size="small" style="grid-area: 4 / 3 / 5 / 4;">
|
||||
Right End
|
||||
</n-button>
|
||||
</template>
|
||||
<div class="large-text">
|
||||
啊！
|
||||
</div>
|
||||
</n-popover>
|
||||
<n-popover placement="bottom-start" trigger="click">
|
||||
<template v-slot:activator>
|
||||
<n-button size="small" style="grid-area: 5 / 1 / 6 / 2;">
|
||||
Bottom Start
|
||||
</n-button>
|
||||
</template>
|
||||
<div class="large-text">
|
||||
啊！
|
||||
</div>
|
||||
</n-popover>
|
||||
<n-popover placement="bottom" trigger="click">
|
||||
<template v-slot:activator>
|
||||
<n-button size="small" style="grid-area: 5 / 2 / 6 / 3;">
|
||||
Bottom
|
||||
</n-button>
|
||||
</template>
|
||||
<div class="large-text">
|
||||
啊！
|
||||
</div>
|
||||
</n-popover>
|
||||
<n-popover placement="bottom-end" trigger="click">
|
||||
<template v-slot:activator>
|
||||
<n-button size="small" style="grid-area: 5 / 3 / 6 / 4;">
|
||||
Bottom End
|
||||
</n-button>
|
||||
</template>
|
||||
<div class="large-text">
|
||||
啊！
|
||||
</div>
|
||||
</n-popover>
|
||||
</div>
|
||||
```
|
||||
|
||||
```css
|
||||
.popover-grid {
|
||||
display: grid;
|
||||
grid-template-columns: auto auto auto auto auto;
|
||||
grid-gap: 12px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.large-text {
|
||||
font-size: 48px;
|
||||
}
|
||||
```
|
||||
22
demo/documentation/components/popover/zhCN/rawContent.md
Normal file
22
demo/documentation/components/popover/zhCN/rawContent.md
Normal file
@ -0,0 +1,22 @@
|
||||
# 不用基础样式
|
||||
```html
|
||||
<n-popover raw :show-arrow="false">
|
||||
<template v-slot:activator>
|
||||
<n-button style="margin:0;">
|
||||
悬浮
|
||||
</n-button>
|
||||
</template>
|
||||
<div
|
||||
style="width: 100px; height: 100px; background-color: red; transform-origin: inherit;"
|
||||
>
|
||||
Who kicks a hole in the sky so the heaven cry over me.
|
||||
</div>
|
||||
</n-popover>
|
||||
```
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
return {}
|
||||
}
|
||||
}
|
||||
```
|
||||
45
demo/documentation/components/popover/zhCN/trigger.md
Normal file
45
demo/documentation/components/popover/zhCN/trigger.md
Normal file
@ -0,0 +1,45 @@
|
||||
# 触发方式
|
||||
```html
|
||||
<n-popover placement="bottom" trigger="hover" style="margin-right: 12px;">
|
||||
<template v-slot:activator>
|
||||
<n-button>悬浮</n-button>
|
||||
</template>
|
||||
<span>
|
||||
I wish they all could be California girls
|
||||
</span>
|
||||
</n-popover>
|
||||
<n-popover :show="showPopover" placement="bottom" trigger="manual">
|
||||
<template v-slot:activator>
|
||||
<n-button @click="showPopover = !showPopover">
|
||||
手动
|
||||
</n-button>
|
||||
</template>
|
||||
<span>
|
||||
I wish they all could be California girls
|
||||
</span>
|
||||
</n-popover>
|
||||
<n-popover placement="bottom" trigger="click" style="margin-right: 12px;">
|
||||
<template v-slot:activator>
|
||||
<n-button>
|
||||
点击
|
||||
</n-button>
|
||||
</template>
|
||||
<span>
|
||||
I wish they all could be California girls
|
||||
</span>
|
||||
</n-popover>
|
||||
```
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
showPopover: false
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
```css
|
||||
.n-button {
|
||||
margin: 0 12px 8px 0;
|
||||
}
|
||||
```
|
||||
11
demo/documentation/components/popover/zhCN/width.md
Normal file
11
demo/documentation/components/popover/zhCN/width.md
Normal file
@ -0,0 +1,11 @@
|
||||
# 宽度
|
||||
```html
|
||||
<n-popover :width="500">
|
||||
<template v-slot:activator>
|
||||
<n-button style="margin:0;">
|
||||
宽度 500px
|
||||
</n-button>
|
||||
</template>
|
||||
<span>长得像根条一样</span>
|
||||
</n-popover>
|
||||
```
|
||||
@ -1,11 +1,11 @@
|
||||
# Arrow
|
||||
```html
|
||||
<n-tooltip arrow>
|
||||
<n-tooltip show-arrow>
|
||||
<template v-slot:activator>
|
||||
<n-button>
|
||||
hello tooltip
|
||||
No, no arrow by default
|
||||
</n-button>
|
||||
</template>
|
||||
This is the contextual help
|
||||
Different from popover
|
||||
</n-tooltip>
|
||||
```
|
||||
@ -3,9 +3,9 @@
|
||||
<n-tooltip>
|
||||
<template v-slot:activator>
|
||||
<n-button>
|
||||
hello tooltip
|
||||
Duck
|
||||
</n-button>
|
||||
</template>
|
||||
This is the contextual help
|
||||
If it looks like a duck, walks like a duck, and quacks like a duck...it must be a duck.
|
||||
</n-tooltip>
|
||||
```
|
||||
@ -8,7 +8,7 @@
|
||||
>
|
||||
<template v-slot:activator>
|
||||
<n-button>
|
||||
California Girls(Hover)
|
||||
Hover
|
||||
</n-button>
|
||||
</template>
|
||||
<span>
|
||||
@ -23,7 +23,7 @@
|
||||
>
|
||||
<template v-slot:activator>
|
||||
<n-button>
|
||||
California Girls(Click)
|
||||
Click
|
||||
</n-button>
|
||||
</template>
|
||||
<span>
|
||||
@ -39,7 +39,7 @@
|
||||
>
|
||||
<template v-slot:activator>
|
||||
<n-button @click="showPopover = !showPopover">
|
||||
California Girls(Manual)
|
||||
Manual
|
||||
</n-button>
|
||||
</template>
|
||||
<span>
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
# Fix Width
|
||||
# Fixed Width
|
||||
```html
|
||||
<n-tooltip placement="top-start">
|
||||
<n-tooltip placement="top-start" :width="240">
|
||||
<template v-slot:activator>
|
||||
<n-button>
|
||||
hello tooltip
|
||||
Could be short
|
||||
</n-button>
|
||||
</template>
|
||||
This is the contextual help
|
||||
Could be long
|
||||
</n-tooltip>
|
||||
```
|
||||
@ -1,4 +1,6 @@
|
||||
# Tooltip
|
||||
It walks like a popover, quacks like a popover but looks a bit different from popover.
|
||||
## Demos
|
||||
```demo
|
||||
basic
|
||||
trigger
|
||||
@ -7,4 +9,9 @@ placement
|
||||
fix-width
|
||||
max-width
|
||||
arrow
|
||||
```
|
||||
```
|
||||
## Props
|
||||
See [Popover](n-popover#Props)
|
||||
|
||||
## Events
|
||||
See [Popover](n-popover#Props)
|
||||
@ -1,9 +1,10 @@
|
||||
# Max Width
|
||||
Setting max-width is sometimes more useful.
|
||||
```html
|
||||
<n-tooltip :max-width="400" trigger="click">
|
||||
<template v-slot:activator>
|
||||
<n-button>
|
||||
hello tooltip
|
||||
California Girls
|
||||
</n-button>
|
||||
</template>
|
||||
I wish they all could be California girls. I wish they all could be California
|
||||
@ -12,7 +13,7 @@
|
||||
<n-tooltip :max-width="400" trigger="click">
|
||||
<template v-slot:activator>
|
||||
<n-button>
|
||||
hello tooltip
|
||||
California Girls
|
||||
</n-button>
|
||||
</template>
|
||||
I wish ...
|
||||
|
||||
@ -3,9 +3,9 @@
|
||||
<n-tooltip placement="top-start">
|
||||
<template v-slot:activator>
|
||||
<n-button>
|
||||
hello tooltip
|
||||
Top Start
|
||||
</n-button>
|
||||
</template>
|
||||
This is the contextual help
|
||||
Woo, awesome!
|
||||
</n-tooltip>
|
||||
```
|
||||
@ -3,7 +3,7 @@
|
||||
<n-tooltip placement="bottom" trigger="hover">
|
||||
<template v-slot:activator>
|
||||
<n-button>
|
||||
California Girls(Hover)
|
||||
Hover
|
||||
</n-button>
|
||||
</template>
|
||||
<span>
|
||||
@ -13,17 +13,17 @@
|
||||
<n-tooltip placement="bottom" trigger="click">
|
||||
<template v-slot:activator>
|
||||
<n-button>
|
||||
California Girls(Click)
|
||||
Click
|
||||
</n-button>
|
||||
</template>
|
||||
<span>
|
||||
I wish they all could be California girls
|
||||
</span>
|
||||
</n-tooltip>
|
||||
<n-tooltip v-model="showPopover" placement="bottom" trigger="manual">
|
||||
<n-tooltip :show="showPopover" placement="bottom" trigger="manual">
|
||||
<template v-slot:activator>
|
||||
<n-button @click="showPopover = !showPopover">
|
||||
California Girls(Manual)
|
||||
Manual
|
||||
</n-button>
|
||||
</template>
|
||||
<span>
|
||||
|
||||
11
demo/documentation/components/tooltip/zhCN/arrow.md
Normal file
11
demo/documentation/components/tooltip/zhCN/arrow.md
Normal file
@ -0,0 +1,11 @@
|
||||
# 箭头
|
||||
```html
|
||||
<n-tooltip show-arrow>
|
||||
<template v-slot:activator>
|
||||
<n-button>
|
||||
是的，默认没有箭头
|
||||
</n-button>
|
||||
</template>
|
||||
和 Popover 不一样
|
||||
</n-tooltip>
|
||||
```
|
||||
11
demo/documentation/components/tooltip/zhCN/basic.md
Normal file
11
demo/documentation/components/tooltip/zhCN/basic.md
Normal file
@ -0,0 +1,11 @@
|
||||
# 基础用法
|
||||
```html
|
||||
<n-tooltip>
|
||||
<template v-slot:activator>
|
||||
<n-button>
|
||||
鸭子
|
||||
</n-button>
|
||||
</template>
|
||||
如果它长得像鸭子，走起来像鸭子，叫起来也像鸭子，那它一定是个鸭子。
|
||||
</n-tooltip>
|
||||
```
|
||||
71
demo/documentation/components/tooltip/zhCN/event.md
Normal file
71
demo/documentation/components/tooltip/zhCN/event.md
Normal file
@ -0,0 +1,71 @@
|
||||
# 事件
|
||||
```html
|
||||
<n-tooltip
|
||||
placement="bottom"
|
||||
trigger="hover"
|
||||
@show="handleShow"
|
||||
@hide="handleHide"
|
||||
>
|
||||
<template v-slot:activator>
|
||||
<n-button>
|
||||
悬浮
|
||||
</n-button>
|
||||
</template>
|
||||
<span>
|
||||
I wish they all could be California girls
|
||||
</span>
|
||||
</n-tooltip>
|
||||
<n-tooltip
|
||||
placement="bottom"
|
||||
trigger="click"
|
||||
@show="handleShow"
|
||||
@hide="handleHide"
|
||||
>
|
||||
<template v-slot:activator>
|
||||
<n-button>
|
||||
点击
|
||||
</n-button>
|
||||
</template>
|
||||
<span>
|
||||
I wish they all could be California girls
|
||||
</span>
|
||||
</n-tooltip>
|
||||
<n-tooltip
|
||||
v-model="showPopover"
|
||||
placement="bottom"
|
||||
trigger="manual"
|
||||
@show="handleShow"
|
||||
@hide="handleHide"
|
||||
>
|
||||
<template v-slot:activator>
|
||||
<n-button @click="showPopover = !showPopover">
|
||||
手动
|
||||
</n-button>
|
||||
</template>
|
||||
<span>
|
||||
I wish they all could be California girls
|
||||
</span>
|
||||
</n-tooltip>
|
||||
```
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
showPopover: false
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleShow() {
|
||||
this.$NMessage.success("show tooltip");
|
||||
},
|
||||
handleHide() {
|
||||
this.$NMessage.success("hide tooltip");
|
||||
}
|
||||
}
|
||||
};
|
||||
```
|
||||
```css
|
||||
.n-button {
|
||||
margin: 0 12px 8px 0;
|
||||
}
|
||||
```
|
||||
11
demo/documentation/components/tooltip/zhCN/fixWidth.md
Normal file
11
demo/documentation/components/tooltip/zhCN/fixWidth.md
Normal file
@ -0,0 +1,11 @@
|
||||
# 定宽
|
||||
```html
|
||||
<n-tooltip placement="top-start" :width="240">
|
||||
<template v-slot:activator>
|
||||
<n-button>
|
||||
可以很短
|
||||
</n-button>
|
||||
</template>
|
||||
可以很长
|
||||
</n-tooltip>
|
||||
```
|
||||
@ -1,3 +1,17 @@
|
||||
# Tooltip
|
||||
# Tooltip 弹出提示
|
||||
它走起来像一个 Popover，叫起来像一个 Popover，但是长得有点区别。
|
||||
## 例子
|
||||
```demo
|
||||
```
|
||||
basic
|
||||
trigger
|
||||
event
|
||||
placement
|
||||
fix-width
|
||||
max-width
|
||||
arrow
|
||||
```
|
||||
## Props
|
||||
参考 [Popover](n-popover#Props)
|
||||
|
||||
## Events
|
||||
参考 [Popover](n-popover#Props)
|
||||
25
demo/documentation/components/tooltip/zhCN/maxWidth.md
Normal file
25
demo/documentation/components/tooltip/zhCN/maxWidth.md
Normal file
@ -0,0 +1,25 @@
|
||||
# 最大宽度
|
||||
有时候设定最大宽度还是挺有用的。
|
||||
```html
|
||||
<n-tooltip :max-width="400" trigger="click">
|
||||
<template v-slot:activator>
|
||||
<n-button>
|
||||
加州女孩
|
||||
</n-button>
|
||||
</template>
|
||||
我希望她们都是加州女孩，我希望她们都是加州女孩，我希望她们都是加州女孩
|
||||
</n-tooltip>
|
||||
<n-tooltip :max-width="400" trigger="click">
|
||||
<template v-slot:activator>
|
||||
<n-button>
|
||||
加州女孩
|
||||
</n-button>
|
||||
</template>
|
||||
我希望...
|
||||
</n-tooltip>
|
||||
```
|
||||
```css
|
||||
.n-button {
|
||||
margin: 0 12px 8px 0;
|
||||
}
|
||||
```
|
||||
11
demo/documentation/components/tooltip/zhCN/placement.md
Normal file
11
demo/documentation/components/tooltip/zhCN/placement.md
Normal file
@ -0,0 +1,11 @@
|
||||
# 位置
|
||||
```html
|
||||
<n-tooltip placement="top-start">
|
||||
<template v-slot:activator>
|
||||
<n-button>
|
||||
上边一开始
|
||||
</n-button>
|
||||
</template>
|
||||
哇哦，Awesome！
|
||||
</n-tooltip>
|
||||
```
|
||||
47
demo/documentation/components/tooltip/zhCN/trigger.md
Normal file
47
demo/documentation/components/tooltip/zhCN/trigger.md
Normal file
@ -0,0 +1,47 @@
|
||||
# 触发方式
|
||||
```html
|
||||
<n-tooltip placement="bottom" trigger="hover">
|
||||
<template v-slot:activator>
|
||||
<n-button>
|
||||
悬浮
|
||||
</n-button>
|
||||
</template>
|
||||
<span>
|
||||
I wish they all could be California girls
|
||||
</span>
|
||||
</n-tooltip>
|
||||
<n-tooltip placement="bottom" trigger="click">
|
||||
<template v-slot:activator>
|
||||
<n-button>
|
||||
点击
|
||||
</n-button>
|
||||
</template>
|
||||
<span>
|
||||
I wish they all could be California girls
|
||||
</span>
|
||||
</n-tooltip>
|
||||
<n-tooltip :show="showPopover" placement="bottom" trigger="manual">
|
||||
<template v-slot:activator>
|
||||
<n-button @click="showPopover = !showPopover">
|
||||
手动
|
||||
</n-button>
|
||||
</template>
|
||||
<span>
|
||||
I wish they all could be California girls
|
||||
</span>
|
||||
</n-tooltip>
|
||||
```
|
||||
```js
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
showPopover: false
|
||||
};
|
||||
}
|
||||
};
|
||||
```
|
||||
```css
|
||||
.n-button {
|
||||
margin: 0 12px 8px 0;
|
||||
}
|
||||
```
|
||||
@ -26,7 +26,7 @@
|
||||
<n-tooltip
|
||||
:delay="300"
|
||||
:placement="'top'"
|
||||
:arrow="true"
|
||||
:show-arrow="true"
|
||||
:controller="controller"
|
||||
>
|
||||
<template v-slot:activator>
|
||||
|
||||
@ -9,7 +9,7 @@
|
||||
<n-popselect
|
||||
:value="activeFilterOptionValues"
|
||||
cancelable
|
||||
:arrow="false"
|
||||
:show-arrow="false"
|
||||
:multiple="column.filterMultiple === false ? false : true"
|
||||
:options="finalOptions"
|
||||
:loading="loading"
|
||||
|
||||
@ -22,6 +22,10 @@ export default {
|
||||
default: false
|
||||
},
|
||||
arrow: {
|
||||
type: Boolean,
|
||||
default: undefined
|
||||
},
|
||||
showArrow: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
@ -31,11 +35,11 @@ export default {
|
||||
},
|
||||
delay: {
|
||||
type: Number,
|
||||
default: 0
|
||||
default: 200
|
||||
},
|
||||
duration: {
|
||||
type: Number,
|
||||
default: 300
|
||||
default: 200
|
||||
},
|
||||
raw: {
|
||||
type: Boolean,
|
||||
@ -120,6 +124,7 @@ export default {
|
||||
h(NPopoverContent, {
|
||||
props: {
|
||||
...props,
|
||||
arrow: props.arrow === undefined ? props.showArrow : props.arrow,
|
||||
controller,
|
||||
id
|
||||
},
|
||||
|
||||
@ -41,7 +41,7 @@ export default {
|
||||
type: Object,
|
||||
default: null
|
||||
},
|
||||
arrow: {
|
||||
showArrow: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import Tooltip from './src/main.vue'
|
||||
import Tooltip from './src/main.js'
|
||||
|
||||
Tooltip.install = function (Vue) {
|
||||
Vue.component(Tooltip.name, Tooltip)
|
||||
|
||||
31
packages/common/Tooltip/src/main.js
Normal file
31
packages/common/Tooltip/src/main.js
Normal file
@ -0,0 +1,31 @@
|
||||
/**
|
||||
* Tooltip: popover wearing waistcoat
|
||||
*/
|
||||
import NPopover from '../../Popover'
|
||||
|
||||
export default {
|
||||
name: 'NTooltip',
|
||||
functional: true,
|
||||
props: {
|
||||
...NPopover.props,
|
||||
showArrow: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
render (h, context) {
|
||||
const slots = context.scopedSlots
|
||||
return h(NPopover, {
|
||||
on: context.listeners,
|
||||
props: {
|
||||
...context.props,
|
||||
containerClass: 'n-tooltip',
|
||||
overlayClass: 'n-tooltip-content'
|
||||
},
|
||||
scopedSlots: {
|
||||
activator: () => slots.activator && slots.activator(),
|
||||
default: () => slots.default && slots.default()
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
@ -1,84 +0,0 @@
|
||||
<script>
|
||||
/**
|
||||
* Tooltip: popover wearing waistcoat
|
||||
*/
|
||||
import NPopover from '../../Popover'
|
||||
|
||||
const DEFAULT_DURATION = 200
|
||||
const DEFAULT_DELAY = null
|
||||
|
||||
export default {
|
||||
name: 'NTooltip',
|
||||
functional: true,
|
||||
props: {
|
||||
placement: {
|
||||
type: String,
|
||||
default: 'bottom'
|
||||
},
|
||||
value: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
delay: {
|
||||
type: [String, Number],
|
||||
default: DEFAULT_DELAY
|
||||
},
|
||||
duration: {
|
||||
type: [String, Number],
|
||||
default: DEFAULT_DURATION,
|
||||
/**
|
||||
* make sure it is a positive number...
|
||||
*/
|
||||
validator (value) {
|
||||
value = Number(value)
|
||||
if (Number.isNaN(value)) {
|
||||
return false
|
||||
} else {
|
||||
return value > 0
|
||||
}
|
||||
}
|
||||
},
|
||||
trigger: {
|
||||
default: 'hover',
|
||||
validator (value) {
|
||||
return ['click', 'hover', 'manual'].includes(value)
|
||||
}
|
||||
},
|
||||
arrow: {
|
||||
default: false,
|
||||
type: Boolean
|
||||
},
|
||||
width: {
|
||||
type: Number,
|
||||
default: null
|
||||
},
|
||||
maxWidth: {
|
||||
type: Number,
|
||||
default: null
|
||||
},
|
||||
controller: {
|
||||
type: Object,
|
||||
default: null
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
render (h, context) {
|
||||
const slots = context.scopedSlots
|
||||
return h(NPopover, {
|
||||
on: context.listeners,
|
||||
props: {
|
||||
...context.props,
|
||||
containerClass: 'n-tooltip',
|
||||
overlayClass: 'n-tooltip-content'
|
||||
},
|
||||
scopedSlots: {
|
||||
activator: () => slots.activator && slots.activator(),
|
||||
default: () => slots.default && slots.default()
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Loading…
Reference in New Issue
Block a user