docs: add docs for Accordion/Collapse/Popover
Change-Id: Ibb023741445c134973a2ea993c498f02d83f3a98
This commit is contained in:
xiaodemen
GU Yiling
parent
840c5ba4bf
commit
0b7c8fd460
@ -12,21 +12,53 @@
|
||||
|
||||
[[ demo src="/demo/accordion/size.vue" ]]
|
||||
|
||||
### 样式变体
|
||||
|
||||
可使用 [`ui`](#props-ui) 属性来设置多种样式变体。
|
||||
|
||||
[[ demo src="/demo/accordion/variant.vue" ]]
|
||||
|
||||
### 允许多个展开
|
||||
|
||||
可使用 [`multiple`](#props-multiple) 属性来允许多个面板同时展开。
|
||||
|
||||
[[ demo src="/demo/accordion/multiple.vue" ]]
|
||||
|
||||
### 展开图标的位置
|
||||
|
||||
可使用 [`toggle-position`](#props-toggle-position) 属性来设置展开图标的位置。
|
||||
|
||||
[[ demo src="/demo/accordion/position.vue" ]]
|
||||
|
||||
## API
|
||||
|
||||
### 属性
|
||||
|
||||
| 名称 | 类型 | 默认值 | 描述 |
|
||||
| -- | -- | -- | -- |
|
||||
| ``ui`` | `string=` | - | [^ui] |
|
||||
| ``multiple`` | `boolean=` | `false` | 是否允许多个子面板同时展开。 |
|
||||
| ``disabled`` | `boolean=` | `false` | 是否为禁用状态。 |
|
||||
| ``expanded`` | `string | Array<string>` | - | [^expanded] |
|
||||
| ``toggle-position`` | `string` | `'start'` | [^toggle-position] |
|
||||
|
||||
^^^ui
|
||||
预设样式。为空格分隔的一组枚举值的组合。其中 `simple`/`basic`/`strong` 只能选择一个，不设置则为默认的普通样式。`bordered`/`borderless`只能选择一个。
|
||||
|
||||
|
||||
+++枚举值
|
||||
| 值 | 描述 |
|
||||
| -- | -- |
|
||||
| `simple` | 简洁样式。 |
|
||||
| `basic` | 白底样式。 |
|
||||
| `strong` | 白底样式。 |
|
||||
| `bordered` | 有外边框。 |
|
||||
| `borderless` | 无外边框。 |
|
||||
| `dull` | 标题区域是否响应鼠标交互。 |
|
||||
| `s` | 小尺寸样式。 |
|
||||
| `m` | 中尺寸样式。 |
|
||||
+++
|
||||
^^^
|
||||
|
||||
^^^expanded
|
||||
:::badges
|
||||
@ -36,6 +68,18 @@
|
||||
已展开的折叠面板标识，对应于内联 `Collapse` 组件的 [`name`](./collapse#props-name) 属性。当 `multiple` 为 `true` 时，为折叠面板标识的数组。
|
||||
^^^
|
||||
|
||||
^^^toggle-position
|
||||
设置展开图标的位置。
|
||||
|
||||
+++枚举值
|
||||
| 值 | 描述 |
|
||||
| -- | -- |
|
||||
| `start` | 展开图标位于开始位置， 为默认位置。 |
|
||||
| `end` | 展开图标位于结束位置。 |
|
||||
| `none` | 无展开图标。 |
|
||||
+++
|
||||
^^^
|
||||
|
||||
### 插槽
|
||||
|
||||
| 名称 | 描述 |
|
||||
|
||||
@ -12,16 +12,48 @@
|
||||
|
||||
[[ demo src="/demo/collapse/size.vue" ]]
|
||||
|
||||
### 样式变体
|
||||
|
||||
可使用 [`ui`](#props-ui) 属性来设置多种样式变体。
|
||||
|
||||
[[ demo src="/demo/collapse/variant.vue" ]]
|
||||
|
||||
### 展开图标的位置
|
||||
|
||||
可使用 [`toggle-position`](#props-toggle-position) 属性来设置展开图标的位置。
|
||||
|
||||
[[ demo src="/demo/collapse/position.vue" ]]
|
||||
|
||||
## API
|
||||
|
||||
### 属性
|
||||
|
||||
| 名称 | 类型 | 默认值 | 描述 |
|
||||
| -- | -- | -- | -- |
|
||||
| ``ui`` | `string=` | - | [^ui] |
|
||||
| ``label`` | `string` | - | 折叠面板标题。 |
|
||||
| ``expanded`` | `boolean=` | `false` | [^expanded] |
|
||||
| ``disabled`` | `boolean=` | `false` | 是否为禁用状态。 |
|
||||
| ``name`` | `string | number=` | - | 当内联在 [`Accordion`](./accordion) 组件中使用时，用来提供已展开面板的唯一标识。 |
|
||||
| ``toggle-position`` | `string` | `'start'` | [^toggle-position] |
|
||||
|
||||
^^^ui
|
||||
预设样式。为空格分隔的一组枚举值的组合。其中 `simple`/`basic`/`strong` 只能选择一个，不设置则为默认的普通样式。`bordered`/`borderless`只能选择一个。
|
||||
|
||||
|
||||
+++枚举值
|
||||
| 值 | 描述 |
|
||||
| -- | -- |
|
||||
| `simple` | 简洁样式。 |
|
||||
| `basic` | 白底样式。 |
|
||||
| `strong` | 白底样式。 |
|
||||
| `bordered` | 有外边框。 |
|
||||
| `borderless` | 无外边框。 |
|
||||
| `dull` | 标题区域是否响应鼠标交互。 |
|
||||
| `s` | 小尺寸样式。 |
|
||||
| `m` | 中尺寸样式。 |
|
||||
+++
|
||||
^^^
|
||||
|
||||
^^^expanded
|
||||
:::badges
|
||||
@ -31,12 +63,25 @@
|
||||
折叠面板是否展开。
|
||||
^^^
|
||||
|
||||
^^^toggle-position
|
||||
设置展开图标的位置。
|
||||
|
||||
+++枚举值
|
||||
| 值 | 描述 |
|
||||
| -- | -- |
|
||||
| `start` | 展开图标位于开始位置， 为默认位置。 |
|
||||
| `end` | 展开图标位于结束位置。 |
|
||||
| `none` | 无展开图标。 |
|
||||
+++
|
||||
^^^
|
||||
|
||||
### 插槽
|
||||
|
||||
| 名称 | 描述 |
|
||||
| -- | -- |
|
||||
| ``default`` | 折叠式面板内容区。 |
|
||||
| ``title`` | 折叠式面板标题区。 |
|
||||
| ``title-after`` | 折叠式面板标题后区域。 |
|
||||
|
||||
### 事件
|
||||
|
||||
|
||||
@ -20,6 +20,14 @@
|
||||
|
||||
[[ demo src="/demo/popover/trigger.vue" ]]
|
||||
|
||||
### 标题区域和操作区域
|
||||
|
||||
使用 [`title`](#props-title) 属性或[`title`](#slots-title) 插槽来指定气泡的标题。
|
||||
|
||||
使用 [`foot`](#props-foot) 属性开启底部操作区，使用 [`ok-label`](#props-ok-label)属性 和 [`cancel-label`](#props-cancel-label)属性来设置气泡的按钮内容。使用[`foot`](#slots-foot) 插槽来自定义底部操作区。
|
||||
|
||||
[[ demo src="/demo/popover/foot.vue" ]]
|
||||
|
||||
## API
|
||||
|
||||
### 属性
|
||||
@ -34,6 +42,10 @@
|
||||
| ``hide-delay`` | `number` | `tooltip.hideDelays` | 触发关闭条件满足后延迟关闭等待时间的毫秒数。可以用来防止光标移出 `target` 后移入气泡进行交互前已经自动关闭。 |
|
||||
| ``overlay-class`` | `string | Array | Object=` | - | 参考 [`Overlay`](./overlay) 组件的 [`overlay-class`](./overlay#props-overlay-class) 属性。 |
|
||||
| ``overlay-style`` | `string | Array | Object=` | - | 参考 [`Overlay`](./overlay) 组件的 [`overlay-style`](./overlay#props-overlay-style) 属性。 |
|
||||
| ``title`` | `string=` | - | 用于自定义标题内容。 |
|
||||
| ``foot`` | `boolean` | `false` | 用于开启底部操作区。 |
|
||||
| ``ok-label`` | `string=` | - | “确定”按钮的文字内容。 |
|
||||
| ``cancel-label`` | `string=` | - | “取消”按钮的文字内容。 |
|
||||
|
||||
^^^ui
|
||||
预设样式。
|
||||
@ -69,3 +81,5 @@
|
||||
| 名称 | 描述 |
|
||||
| -- | -- |
|
||||
| ``default`` | 气泡提示内容。 |
|
||||
| ``title`` | 用于自定义标题内容。 |
|
||||
| ``foot`` | 用于自定义底部操作区。 |
|
||||
|
||||
60
one/docs/demo/accordion/position.vue
Normal file
60
one/docs/demo/accordion/position.vue
Normal file
@ -0,0 +1,60 @@
|
||||
<template>
|
||||
<article>
|
||||
<section>
|
||||
<div class="control-wrap">
|
||||
<veui-radio-button-group
|
||||
v-model="position"
|
||||
class="control-item"
|
||||
ui="s"
|
||||
:items="positions"
|
||||
/>
|
||||
</div>
|
||||
<veui-accordion :toggle-position="position">
|
||||
<veui-collapse label="Sun">
|
||||
The Sun is the star at the center of the Solar System. It is a nearly perfect sphere of hot plasma, with internal convective motion that generates a magnetic field via a dynamo process. It is by far the most important source of energy for life on Earth. Its diameter is about 1.39 million kilometers (864,000 miles), or 109 times that of Earth, and its mass is about 330,000 times that of Earth. It accounts for about 99.86% of the total mass of the Solar System. Roughly three quarters of the Sun's mass consists of hydrogen (~73%); the rest is mostly helium (~25%), with much smaller quantities of heavier elements, including oxygen, carbon, neon, and iron.
|
||||
</veui-collapse>
|
||||
<veui-collapse label="Moon">
|
||||
The Moon is an astronomical body orbiting Earth and is the planet's only natural satellite. It is the fifth-largest satellite in the Solar System, and by far the largest among planetary satellites relative to the size of the planet that it orbits. The Moon is, after Jupiter's satellite Io, the second-densest satellite in the Solar System among those whose densities are known.
|
||||
</veui-collapse>
|
||||
</veui-accordion>
|
||||
</section>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Accordion, Collapse, RadioButtonGroup } from 'veui'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-accordion': Accordion,
|
||||
'veui-collapse': Collapse,
|
||||
'veui-radio-button-group': RadioButtonGroup
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
position: 'start',
|
||||
positions: [
|
||||
{ label: 'start', value: 'start' },
|
||||
{ label: 'end', value: 'end' },
|
||||
{ label: 'none', value: 'none' }
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
section {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.control-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.control-item {
|
||||
margin-right: 12px;
|
||||
}
|
||||
</style>
|
||||
87
one/docs/demo/accordion/variant.vue
Normal file
87
one/docs/demo/accordion/variant.vue
Normal file
@ -0,0 +1,87 @@
|
||||
<template>
|
||||
<article>
|
||||
<section>
|
||||
<div class="control-wrap">
|
||||
<veui-radio-button-group
|
||||
v-model="variant"
|
||||
ui="s"
|
||||
class="control-item"
|
||||
:items="variants"
|
||||
/>
|
||||
<veui-radio-button-group
|
||||
v-model="bordered"
|
||||
ui="s"
|
||||
class="control-item"
|
||||
:items="[
|
||||
{ label: 'default', value: '' },
|
||||
{ label: 'bordered', value: 'bordered' },
|
||||
{ label: 'borderless', value: 'borderless' }
|
||||
]"
|
||||
/>
|
||||
<veui-check-button-group
|
||||
v-model="dull"
|
||||
ui="s"
|
||||
class="control-item"
|
||||
:items="[{ label: 'dull', value: 'dull' }]"
|
||||
/>
|
||||
</div>
|
||||
<veui-accordion :ui="realVariants">
|
||||
<veui-collapse label="Sun">
|
||||
The Sun is the star at the center of the Solar System. It is a nearly perfect sphere of hot plasma, with internal convective motion that generates a magnetic field via a dynamo process. It is by far the most important source of energy for life on Earth. Its diameter is about 1.39 million kilometers (864,000 miles), or 109 times that of Earth, and its mass is about 330,000 times that of Earth. It accounts for about 99.86% of the total mass of the Solar System. Roughly three quarters of the Sun's mass consists of hydrogen (~73%); the rest is mostly helium (~25%), with much smaller quantities of heavier elements, including oxygen, carbon, neon, and iron.
|
||||
</veui-collapse>
|
||||
<veui-collapse label="Moon">
|
||||
The Moon is an astronomical body orbiting Earth and is the planet's only natural satellite. It is the fifth-largest satellite in the Solar System, and by far the largest among planetary satellites relative to the size of the planet that it orbits. The Moon is, after Jupiter's satellite Io, the second-densest satellite in the Solar System among those whose densities are known.
|
||||
</veui-collapse>
|
||||
</veui-accordion>
|
||||
</section>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Accordion, Collapse, RadioButtonGroup, CheckButtonGroup } from 'veui'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-accordion': Accordion,
|
||||
'veui-collapse': Collapse,
|
||||
'veui-radio-button-group': RadioButtonGroup,
|
||||
'veui-check-button-group': CheckButtonGroup
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
variants: [
|
||||
{ label: '默认', value: '' },
|
||||
{ label: '简洁', value: 'simple' },
|
||||
{ label: '白底', value: 'basic' },
|
||||
{ label: '灰底', value: 'strong' }
|
||||
],
|
||||
variant: '',
|
||||
bordered: '',
|
||||
dull: null
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
realVariants () {
|
||||
return [this.variant, this.bordered || '', this.dull || '']
|
||||
.join(' ')
|
||||
.trim()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
section {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.control-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.control-item {
|
||||
margin-right: 12px;
|
||||
}
|
||||
</style>
|
||||
57
one/docs/demo/collapse/position.vue
Normal file
57
one/docs/demo/collapse/position.vue
Normal file
@ -0,0 +1,57 @@
|
||||
<template>
|
||||
<article>
|
||||
<section>
|
||||
<div class="control-wrap">
|
||||
<veui-radio-button-group
|
||||
v-model="position"
|
||||
class="control-item"
|
||||
ui="s"
|
||||
:items="positions"
|
||||
/>
|
||||
</div>
|
||||
<veui-collapse
|
||||
label="Sun"
|
||||
:toggle-position="position"
|
||||
>
|
||||
The Sun is the star at the center of the Solar System. It is a nearly perfect sphere of hot plasma, with internal convective motion that generates a magnetic field via a dynamo process. It is by far the most important source of energy for life on Earth. Its diameter is about 1.39 million kilometers (864,000 miles), or 109 times that of Earth, and its mass is about 330,000 times that of Earth. It accounts for about 99.86% of the total mass of the Solar System. Roughly three quarters of the Sun's mass consists of hydrogen (~73%); the rest is mostly helium (~25%), with much smaller quantities of heavier elements, including oxygen, carbon, neon, and iron.
|
||||
</veui-collapse>
|
||||
</section>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Collapse, RadioButtonGroup } from 'veui'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-collapse': Collapse,
|
||||
'veui-radio-button-group': RadioButtonGroup
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
position: 'start',
|
||||
positions: [
|
||||
{ label: 'start', value: 'start' },
|
||||
{ label: 'end', value: 'end' },
|
||||
{ label: 'none', value: 'none' }
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
section {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.control-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.control-item {
|
||||
margin-right: 12px;
|
||||
}
|
||||
</style>
|
||||
84
one/docs/demo/collapse/variant.vue
Normal file
84
one/docs/demo/collapse/variant.vue
Normal file
@ -0,0 +1,84 @@
|
||||
<template>
|
||||
<article>
|
||||
<section>
|
||||
<div class="control-wrap">
|
||||
<veui-radio-button-group
|
||||
v-model="variant"
|
||||
ui="s"
|
||||
class="control-item"
|
||||
:items="variants"
|
||||
/>
|
||||
<veui-radio-button-group
|
||||
v-model="bordered"
|
||||
ui="s"
|
||||
class="control-item"
|
||||
:items="[
|
||||
{ label: 'default', value: '' },
|
||||
{ label: 'bordered', value: 'bordered' },
|
||||
{ label: 'borderless', value: 'borderless' }
|
||||
]"
|
||||
/>
|
||||
<veui-check-button-group
|
||||
v-model="dull"
|
||||
ui="s"
|
||||
class="control-item"
|
||||
:items="[{ label: 'dull', value: 'dull' }]"
|
||||
/>
|
||||
</div>
|
||||
<veui-collapse
|
||||
:ui="realVariants"
|
||||
label="Sun"
|
||||
>
|
||||
The Sun is the star at the center of the Solar System. It is a nearly perfect sphere of hot plasma, with internal convective motion that generates a magnetic field via a dynamo process. It is by far the most important source of energy for life on Earth. Its diameter is about 1.39 million kilometers (864,000 miles), or 109 times that of Earth, and its mass is about 330,000 times that of Earth. It accounts for about 99.86% of the total mass of the Solar System. Roughly three quarters of the Sun's mass consists of hydrogen (~73%); the rest is mostly helium (~25%), with much smaller quantities of heavier elements, including oxygen, carbon, neon, and iron.
|
||||
</veui-collapse>
|
||||
</section>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Collapse, RadioButtonGroup, CheckButtonGroup } from 'veui'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-collapse': Collapse,
|
||||
'veui-radio-button-group': RadioButtonGroup,
|
||||
'veui-check-button-group': CheckButtonGroup
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
variants: [
|
||||
{ label: '默认', value: '' },
|
||||
{ label: '简洁', value: 'simple' },
|
||||
{ label: '白底', value: 'basic' },
|
||||
{ label: '灰底', value: 'strong' }
|
||||
],
|
||||
variant: '',
|
||||
bordered: '',
|
||||
dull: null
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
realVariants () {
|
||||
return [this.variant, this.bordered || '', this.dull || '']
|
||||
.join(' ')
|
||||
.trim()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
section {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.control-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.control-item {
|
||||
margin-right: 12px;
|
||||
}
|
||||
</style>
|
||||
48
one/docs/demo/popover/foot.vue
Normal file
48
one/docs/demo/popover/foot.vue
Normal file
@ -0,0 +1,48 @@
|
||||
<template>
|
||||
<article>
|
||||
<section>
|
||||
<veui-button ref="btn1">
|
||||
按钮1
|
||||
</veui-button>
|
||||
<veui-button ref="btn2">
|
||||
按钮2
|
||||
</veui-button>
|
||||
<veui-popover
|
||||
target="btn1"
|
||||
title="Popover Title"
|
||||
ok-label="好"
|
||||
cancel-label="否"
|
||||
foot
|
||||
>
|
||||
This is a popover.
|
||||
</veui-popover>
|
||||
<veui-popover
|
||||
target="btn2"
|
||||
title="Popover Title"
|
||||
foot
|
||||
>
|
||||
This is a popover.
|
||||
<template #foot>
|
||||
Popover foot
|
||||
</template>
|
||||
</veui-popover>
|
||||
</section>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Popover, Button } from 'veui'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'veui-button': Button,
|
||||
'veui-popover': Popover
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.veui-button + .veui-button {
|
||||
margin-left: 200px;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user