2020-08-13 11:47:56 +08:00
|
|
|
# Loading
|
|
|
|
|
|
|
|
|
|
## Demos
|
|
|
|
|
|
|
|
|
|
### Stylistic variants
|
|
|
|
|
|
2021-10-20 01:11:27 +08:00
|
|
|
Available style variants for the [`ui`](#props-ui) prop: `normal` / `strong` / `reverse`.
|
2020-08-13 11:47:56 +08:00
|
|
|
|
|
|
|
|
[[demo src="/demo/loading/style.vue"]]
|
|
|
|
|
|
|
|
|
|
### Size variants
|
|
|
|
|
|
2021-10-20 01:11:27 +08:00
|
|
|
Available size variants for the [`ui`](#props-ui) prop: `s` / `m` / `l`.
|
2020-08-13 11:47:56 +08:00
|
|
|
|
|
|
|
|
[[demo src="/demo/loading/size.vue"]]
|
|
|
|
|
|
|
|
|
|
### Layout variants
|
|
|
|
|
|
2021-10-20 01:11:27 +08:00
|
|
|
Available layout variants for the [`ui`](#props-ui) prop: `vertical`.
|
2020-08-13 11:47:56 +08:00
|
|
|
|
|
|
|
|
[[demo src="/demo/loading/layout.vue"]]
|
|
|
|
|
|
|
|
|
|
### Custom loading icons
|
|
|
|
|
|
2021-10-20 01:11:27 +08:00
|
|
|
Using [`spinner`](#slots-spinner) slot to replace default loading icon.
|
2020-08-13 11:47:56 +08:00
|
|
|
|
|
|
|
|
[[demo src="/demo/loading/slot.vue"]]
|
|
|
|
|
|
|
|
|
|
## API
|
|
|
|
|
|
|
|
|
|
| Name | Type | Default | Description |
|
|
|
|
|
| -- | -- | -- | -- |
|
2021-10-20 01:11:27 +08:00
|
|
|
| ``ui`` | `string=` | - | [^ui] |
|
|
|
|
|
| ``loading`` | `boolean` | `false` | Whether the component is in loading state. |
|
2020-08-13 11:47:56 +08:00
|
|
|
|
|
|
|
|
^^^ui
|
|
|
|
|
Style variants. A space-separated list of enum values.
|
|
|
|
|
|
|
|
|
|
+++Enum
|
|
|
|
|
| Value | Description |
|
|
|
|
|
| -- | -- |
|
|
|
|
|
| `strong` | Strong style. |
|
|
|
|
|
| `reverse` | Reverse style, typically used on dark background. |
|
|
|
|
|
| `vertical` | Vertical style.|
|
|
|
|
|
| `s` | Small style. |
|
|
|
|
|
| `m` | Medium. |
|
|
|
|
|
| `l` | Large style. |
|
|
|
|
|
+++
|
|
|
|
|
^^^
|
|
|
|
|
|
|
|
|
|
### Slots
|
|
|
|
|
|
|
|
|
|
| Name | Description |
|
|
|
|
|
| -- | -- |
|
2021-10-20 01:11:27 +08:00
|
|
|
| ``spinner`` | Loading icon. |
|
|
|
|
|
| ``default`` | Loading description. |
|
