Skip to content

Docs: improve docs #12208

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
jikkai merged 1 commit into from
Aug 2, 2018
Merged

Docs: improve docs #12208

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
100 changes: 61 additions & 39 deletions examples/docs/en-US/popover.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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',
Expand Down Expand Up @@ -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
Expand All @@ -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>
```
:::

Expand Down
101 changes: 62 additions & 39 deletions examples/docs/es/popover.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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',
Expand Down Expand Up @@ -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
Expand All @@ -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>
```
:::

Expand Down
72 changes: 47 additions & 25 deletions examples/docs/zh-CN/popover.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
export default {
data() {
return {
visible: false,
visible2: false,
gridData: [{
date: '2016-05-02',
Expand Down Expand Up @@ -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>
```
:::

Expand Down