kopia lustrzana https://dev.funkwhale.audio/funkwhale/funkwhale
49 wiersze
1.3 KiB
Markdown
49 wiersze
1.3 KiB
Markdown
|
<style>
|
|||
|
|
.docs-loader-container div[style^=width] {
|
|||
|
|
border: 1px solid #666;
|
|||
|
|
height: 2em;
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
|
|||
|
|
# Loader
|
|||
|
|
|
|||
|
|
Loaders visually indicate when an operation is loading. This makes it visually clear that the user can't interact with the element until the loading process is complete.
|
|||
|
|
|
|||
|
|
| Prop | Data type | Required? | Description |
|
|||
|
|
| ----------- | --------- | --------- | -------------------------------------------- |
|
|||
|
|
| `container` | Boolean | No | Whether to create a container for the loader |
|
|||
|
|
|
|||
|
|
## Normal loader
|
|||
|
|
|
|||
|
|
```vue-html
|
|||
|
|
<div style="width: 50%">
|
|||
|
|
<fw-loader />
|
|||
|
|
</div>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
<div class="docs-loader-container">
|
|||
|
|
<div style="width: 50%">
|
|||
|
|
<fw-loader />
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
## No container
|
|||
|
|
|
|||
|
|
By default the `<fw-loader />` component creates a container that takes up 100% of its parent's height. You can disable this by passing a `:container="false"` property. The loader renders centered in the middle of the first parent that has `position: relative` set.
|
|||
|
|
|
|||
|
|
```vue-html
|
|||
|
|
<div style="position: relative">
|
|||
|
|
<div style="width: 50%">
|
|||
|
|
<fw-loader :container="false" />
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
<div class="docs-loader-container">
|
|||
|
|
<div style="position: relative">
|
|||
|
|
<div style="width: 50%">
|
|||
|
|
<fw-loader :container="false" />
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|