mirror of https://github.com/ElemeFE/element
Docs: improve docs (#12208)
Jikkai Xiao
GitHub
parent
6bb49b9590
commit
363a8bdcb1
|
|
@ -1,21 +1,8 @@
|
|||
<style>
|
||||
.demo-box.demo-popover {
|
||||
.el-popover + .el-popover {
|
||||
margin-left: 10px;
|
||||
}
|
||||
.el-input {
|
||||
width: 360px;
|
||||
}
|
||||
.el-button {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
visible: false,
|
||||
visible2: false,
|
||||
gridData: [{
|
||||
date: '2016-05-02',
|
||||
|
|
@ -94,6 +81,20 @@
|
|||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.demo-box.demo-popover {
|
||||
.el-popover + .el-popover {
|
||||
margin-left: 10px;
|
||||
}
|
||||
.el-input {
|
||||
width: 360px;
|
||||
}
|
||||
.el-button {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
## Popover
|
||||
|
||||
### Basic usage
|
||||
|
|
@ -103,34 +104,55 @@ Similar to Tooltip, Popover is also built with `Vue-popper`. So for some duplica
|
|||
:::demo The `trigger` attribute is used to define how popover is triggered: `hover`, `click`, `focus` or `manual`. As for the triggering element, you can write it in two different ways: use the `slot="reference"` named slot, or use the `v-popover` directive and set it to Popover's `ref`.
|
||||
|
||||
```html
|
||||
<el-popover
|
||||
placement="top-start"
|
||||
title="Title"
|
||||
width="200"
|
||||
trigger="hover"
|
||||
content="this is content, this is content, this is content">
|
||||
<el-button slot="reference">Hover to activate</el-button>
|
||||
</el-popover>
|
||||
<template>
|
||||
<el-popover
|
||||
placement="top-start"
|
||||
title="Title"
|
||||
width="200"
|
||||
trigger="hover"
|
||||
content="this is content, this is content, this is content">
|
||||
<el-button slot="reference">Hover to activate</el-button>
|
||||
</el-popover>
|
||||
|
||||
<el-popover
|
||||
placement="bottom"
|
||||
title="Title"
|
||||
width="200"
|
||||
trigger="click"
|
||||
content="this is content, this is content, this is content">
|
||||
<el-button slot="reference">Click to activate</el-button>
|
||||
</el-popover>
|
||||
<el-popover
|
||||
placement="bottom"
|
||||
title="Title"
|
||||
width="200"
|
||||
trigger="click"
|
||||
content="this is content, this is content, this is content">
|
||||
<el-button slot="reference">Click to activate</el-button>
|
||||
</el-popover>
|
||||
|
||||
<el-popover
|
||||
ref="popover"
|
||||
placement="right"
|
||||
title="Title"
|
||||
width="200"
|
||||
trigger="focus"
|
||||
content="this is content, this is content, this is content">
|
||||
</el-popover>
|
||||
<el-button v-popover:popover>Focus to activate</el-button>
|
||||
<el-popover
|
||||
ref="popover"
|
||||
placement="right"
|
||||
title="Title"
|
||||
width="200"
|
||||
trigger="focus"
|
||||
content="this is content, this is content, this is content">
|
||||
</el-popover>
|
||||
<el-button v-popover:popover>Focus to activate</el-button>
|
||||
|
||||
<el-popover
|
||||
placement="bottom"
|
||||
title="Title"
|
||||
width="200"
|
||||
trigger="manual"
|
||||
content="this is content, this is content, this is content"
|
||||
v-model="visible">
|
||||
<el-button slot="reference" @click="visible = !visible">Manual to activate</el-button>
|
||||
</el-popover>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
visible: false
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
|
|
|
|||
|
|
@ -1,21 +1,8 @@
|
|||
<style>
|
||||
.demo-box.demo-popover {
|
||||
.el-popover + .el-popover {
|
||||
margin-left: 10px;
|
||||
}
|
||||
.el-input {
|
||||
width: 360px;
|
||||
}
|
||||
.el-button {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
visible: false,
|
||||
visible2: false,
|
||||
gridData: [{
|
||||
date: '2016-05-02',
|
||||
|
|
@ -94,6 +81,20 @@
|
|||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.demo-box.demo-popover {
|
||||
.el-popover + .el-popover {
|
||||
margin-left: 10px;
|
||||
}
|
||||
.el-input {
|
||||
width: 360px;
|
||||
}
|
||||
.el-button {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
## Popover
|
||||
|
||||
### Uso básico
|
||||
|
|
@ -103,33 +104,55 @@ Similar a un Tooltip, Popover está construido con `Vue-popper`. Así que para a
|
|||
:::demo El atributo `trigger` es usado para definir como el popover se dispara: `hover`, `click`, `focus` o `manual`. As for the triggering element, you can write it in two different ways: use the `slot="reference"` [named slot](https://vuejs.org/v2/guide/components.html#Named-Slots), or use the `v-popover` directive and set it to Popover's `ref`.
|
||||
|
||||
```html
|
||||
<el-popover
|
||||
placement="top-start"
|
||||
title="Title"
|
||||
width="200"
|
||||
trigger="hover"
|
||||
content="this is content, this is content, this is content">
|
||||
<el-button slot="reference">Hover to activate</el-button>
|
||||
</el-popover>
|
||||
<template>
|
||||
<el-popover
|
||||
placement="top-start"
|
||||
title="Title"
|
||||
width="200"
|
||||
trigger="hover"
|
||||
content="this is content, this is content, this is content">
|
||||
<el-button slot="reference">Hover to activate</el-button>
|
||||
</el-popover>
|
||||
|
||||
<el-popover
|
||||
placement="bottom"
|
||||
title="Title"
|
||||
width="200"
|
||||
trigger="click"
|
||||
content="this is content, this is content, this is content">
|
||||
<el-button slot="reference">Click to activate</el-button>
|
||||
</el-popover>
|
||||
<el-popover
|
||||
placement="bottom"
|
||||
title="Title"
|
||||
width="200"
|
||||
trigger="click"
|
||||
content="this is content, this is content, this is content">
|
||||
<el-button slot="reference">Click to activate</el-button>
|
||||
</el-popover>
|
||||
|
||||
<el-popover
|
||||
ref="popover"
|
||||
placement="right"
|
||||
title="Title"
|
||||
width="200"
|
||||
trigger="focus"
|
||||
content="this is content, this is content, this is content">
|
||||
</el-popover>
|
||||
<el-button v-popover:popover>Focus to activate</el-button>
|
||||
<el-popover
|
||||
ref="popover"
|
||||
placement="right"
|
||||
title="Title"
|
||||
width="200"
|
||||
trigger="focus"
|
||||
content="this is content, this is content, this is content">
|
||||
</el-popover>
|
||||
<el-button v-popover:popover>Focus to activate</el-button>
|
||||
|
||||
<el-popover
|
||||
placement="bottom"
|
||||
title="Title"
|
||||
width="200"
|
||||
trigger="manual"
|
||||
content="this is content, this is content, this is content"
|
||||
v-model="visible">
|
||||
<el-button slot="reference" @click="visible = !visible">Manual to activate</el-button>
|
||||
</el-popover>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
visible: false
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
export default {
|
||||
data() {
|
||||
return {
|
||||
visible: false,
|
||||
visible2: false,
|
||||
gridData: [{
|
||||
date: '2016-05-02',
|
||||
|
|
@ -101,34 +102,55 @@ Popover 的属性与 Tooltip 很类似，它们都是基于`Vue-popper`开发的
|
|||
|
||||
:::demo `trigger`属性用于设置何时触发 Popover，支持四种触发方式：`hover`，`click`，`focus` 和 `manual`。对于触发 Popover 的元素，有两种写法：使用 `slot="reference"` 的具名插槽，或使用自定义指令`v-popover`指向 Popover 的索引`ref`。
|
||||
```html
|
||||
<el-popover
|
||||
placement="top-start"
|
||||
title="标题"
|
||||
width="200"
|
||||
trigger="hover"
|
||||
content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">
|
||||
<el-button slot="reference">hover 激活</el-button>
|
||||
</el-popover>
|
||||
<template>
|
||||
<el-popover
|
||||
placement="top-start"
|
||||
title="标题"
|
||||
width="200"
|
||||
trigger="hover"
|
||||
content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">
|
||||
<el-button slot="reference">hover 激活</el-button>
|
||||
</el-popover>
|
||||
|
||||
<el-popover
|
||||
placement="bottom"
|
||||
title="标题"
|
||||
width="200"
|
||||
trigger="click"
|
||||
content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">
|
||||
<el-button slot="reference">click 激活</el-button>
|
||||
</el-popover>
|
||||
<el-popover
|
||||
placement="bottom"
|
||||
title="标题"
|
||||
width="200"
|
||||
trigger="click"
|
||||
content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">
|
||||
<el-button slot="reference">click 激活</el-button>
|
||||
</el-popover>
|
||||
|
||||
<el-popover
|
||||
ref="popover"
|
||||
placement="right"
|
||||
title="标题"
|
||||
width="200"
|
||||
trigger="focus"
|
||||
content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">
|
||||
</el-popover>
|
||||
<el-button v-popover:popover>focus 激活</el-button>
|
||||
<el-popover
|
||||
ref="popover"
|
||||
placement="right"
|
||||
title="标题"
|
||||
width="200"
|
||||
trigger="focus"
|
||||
content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">
|
||||
</el-popover>
|
||||
<el-button v-popover:popover>focus 激活</el-button>
|
||||
|
||||
<el-popover
|
||||
placement="bottom"
|
||||
title="标题"
|
||||
width="200"
|
||||
trigger="manual"
|
||||
content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。"
|
||||
v-model="visible">
|
||||
<el-button slot="reference" @click="visible = !visible">手动激活</el-button>
|
||||
</el-popover>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
visible: false
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue