docs: add docs for Accordion/Collapse/Popover
Change-Id: Ibb023741445c134973a2ea993c498f02d83f3a98
This commit is contained in:
@@ -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`` | 用于自定义底部操作区。 |
|
||||
|
||||
Reference in New Issue
Block a user