Skip to content

Commit

Permalink
Docs: improve docs
Browse files Browse the repository at this point in the history
  • Loading branch information
@jikkai
jikkai committed Aug 2, 2018
1 parent f75ba78 commit e93a14a
Show file tree
Hide file tree
Showing 3 changed files with 170 additions and 103 deletions.
100 changes: 61 additions & 39 deletions examples/docs/en-US/popover.md
View file
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
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
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

0 comments on commit e93a14a

Please sign in to comment.