mirror of
https://github.com/tabler/tabler.git
synced 2025-12-21 17:34:25 +04:00
271 lines
8.6 KiB
Plaintext
271 lines
8.6 KiB
Plaintext
---
|
|
title: Placeholder
|
|
description: Placeholder is used to reserve space for content that soon will appear in a layout.
|
|
---
|
|
|
|
## Placeholder line
|
|
|
|
Placeholder lines can contain have lines of text. Their length is different and depends on the `col-` class.
|
|
|
|
```html example columns={1}
|
|
<div class="placeholder col-9"></div>
|
|
<div class="placeholder col-11"></div>
|
|
<div class="placeholder col-10"></div>
|
|
<div class="placeholder col-8"></div>
|
|
```
|
|
|
|
However, it may be useful, however, to specify the full width in order to fit the content more effectively.
|
|
|
|
```html example columns={1}
|
|
<div class="placeholder col-12"></div>
|
|
<div class="placeholder col-12"></div>
|
|
<div class="placeholder col-12"></div>
|
|
<div class="placeholder col-12"></div>
|
|
```
|
|
|
|
You can also move the lines to right or to center:
|
|
|
|
```html example columns={1}
|
|
<div class="text-end">
|
|
<div class="placeholder col-11"></div>
|
|
<div class="placeholder col-10"></div>
|
|
<div class="placeholder col-8"></div>
|
|
</div>
|
|
<div class="text-center mt-3">
|
|
<div class="placeholder col-11"></div>
|
|
<div class="placeholder col-10"></div>
|
|
<div class="placeholder col-8"></div>
|
|
</div>
|
|
```
|
|
|
|
## Placeholder heading
|
|
|
|
A placeholder can contain also a header element looks like header:
|
|
|
|
```html example columns={1}
|
|
<div class="placeholder col-9 mb-3"></div>
|
|
<div class="placeholder placeholder-xs col-10"></div>
|
|
<div class="placeholder placeholder-xs col-11"></div>
|
|
```
|
|
|
|
## Placeholder avatar
|
|
|
|
You can make your placeholder item look like an avatar.
|
|
|
|
```html example columns={1}
|
|
<div class="row">
|
|
<div class="col-auto">
|
|
<div class="avatar placeholder"></div>
|
|
</div>
|
|
<div class="col">
|
|
<div class="placeholder col-9"></div>
|
|
<div class="placeholder col-11"></div>
|
|
</div>
|
|
</div>
|
|
```
|
|
|
|
The size of avatars is exactly the same as a regular avatar.
|
|
|
|
```html example centered separated
|
|
<div class="avatar avatar-xl placeholder"></div>
|
|
<div class="avatar avatar-lg placeholder"></div>
|
|
<div class="avatar avatar-md placeholder"></div>
|
|
<div class="avatar placeholder"></div>
|
|
<div class="avatar avatar-sm placeholder"></div>
|
|
<div class="avatar avatar-xs placeholder"></div>
|
|
```
|
|
|
|
## Placeholder image
|
|
|
|
You can use a placeholder, which will look like a picture. You can use the `ratio` component, and get the image in the right proportions.
|
|
|
|
You can also use the `ratio` component, and get the image in the right proportions.
|
|
|
|
```html example columns={1} height={500} scrollable
|
|
<div class="ratio ratio-1x1 placeholder">
|
|
<div class="placeholder-image"></div>
|
|
</div>
|
|
<div class="ratio ratio-4x3 placeholder">
|
|
<div class="placeholder-image"></div>
|
|
</div>
|
|
<div class="ratio ratio-16x9 placeholder">
|
|
<div class="placeholder-image"></div>
|
|
</div>
|
|
<div class="ratio ratio-21x9 placeholder">
|
|
<div class="placeholder-image"></div>
|
|
</div>
|
|
```
|
|
|
|
## Placeholder color
|
|
|
|
By default, the `placeholder` uses `currentColor`. This can be overridden with a custom color or utility class.
|
|
|
|
```html example columns={1} height={240}
|
|
<span class="placeholder col-12"></span>
|
|
<span class="placeholder col-12 bg-primary"></span>
|
|
<span class="placeholder col-12 bg-secondary"></span>
|
|
<span class="placeholder col-12 bg-success"></span>
|
|
<span class="placeholder col-12 bg-danger"></span>
|
|
<span class="placeholder col-12 bg-warning"></span>
|
|
<span class="placeholder col-12 bg-info"></span>
|
|
<span class="placeholder col-12 bg-light"></span>
|
|
<span class="placeholder col-12 bg-dark"></span>
|
|
```
|
|
|
|
```html
|
|
<span class="placeholder col-12"></span>
|
|
|
|
<span class="placeholder col-12 bg-primary"></span>
|
|
<span class="placeholder col-12 bg-secondary"></span>
|
|
<span class="placeholder col-12 bg-success"></span>
|
|
<span class="placeholder col-12 bg-danger"></span>
|
|
<span class="placeholder col-12 bg-warning"></span>
|
|
<span class="placeholder col-12 bg-info"></span>
|
|
<span class="placeholder col-12 bg-light"></span>
|
|
<span class="placeholder col-12 bg-dark"></span>
|
|
```
|
|
|
|
## Placeholder sizing
|
|
|
|
The size of `.placeholders` are based on the typographic style of the parent element. Customize them with sizing modifiers: `.placeholder-lg`, `.placeholder-sm`, or `.placeholder-xs`.
|
|
|
|
```html example columns={1}
|
|
<span class="placeholder col-12 placeholder-lg"></span>
|
|
<span class="placeholder col-12"></span>
|
|
<span class="placeholder col-12 placeholder-sm"></span>
|
|
<span class="placeholder col-12 placeholder-xs"></span>
|
|
```
|
|
|
|
## Animation
|
|
|
|
Animate placeholders with `.placeholder-glow` or `.placeholder-wave` to better convey the perception of something being actively loaded.
|
|
|
|
```html example columns={1}
|
|
<p class="placeholder-glow">
|
|
<span class="placeholder col-12"></span>
|
|
</p>
|
|
<p class="placeholder-wave">
|
|
<span class="placeholder col-12"></span>
|
|
</p>
|
|
```
|
|
|
|
## Live examples
|
|
|
|
See in the following examples how else you can use the placeholder component
|
|
|
|
```html example columns={1} height={1000} separated vertical scrollable
|
|
<div class="card placeholder-glow">
|
|
<div class="ratio ratio-21x9 card-img-top placeholder"></div>
|
|
<div class="card-body">
|
|
<div class="placeholder col-9 mb-3"></div>
|
|
<div class="placeholder placeholder-xs col-10"></div>
|
|
<div class="placeholder placeholder-xs col-11"></div>
|
|
<div class="mt-3">
|
|
<a href="#" tabindex="-1" class="btn btn-primary disabled placeholder col-4" aria-hidden="true"></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="row g-0 align-items-center placeholder-glow">
|
|
<div class="col-3">
|
|
<div class="ratio ratio-1x1 card-img-start placeholder"></div>
|
|
</div>
|
|
<div class="col">
|
|
<div class="card-body">
|
|
<div class="placeholder col-9 mb-3"></div>
|
|
<div class="placeholder placeholder-xs col-10"></div>
|
|
<div class="placeholder placeholder-xs col-11"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<div class="row">
|
|
<div class="col-auto">
|
|
<div class="avatar avatar-rounded placeholder"></div>
|
|
</div>
|
|
<div class="col">
|
|
<div class="placeholder placeholder-xs col-9"></div>
|
|
<div class="placeholder placeholder-xs col-7"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-body py-5 text-center">
|
|
<div>
|
|
<div class="avatar avatar-rounded avatar-lg placeholder mb-3"></div>
|
|
</div>
|
|
<div class="mt w-75 mx-auto">
|
|
<div class="placeholder col-9 mb-3"></div>
|
|
<div class="placeholder placeholder-xs col-10"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card">
|
|
<ul class="list-group list-group-flush placeholder-glow">
|
|
<li class="list-group-item">
|
|
<div class="row align-items-center">
|
|
<div class="col-auto">
|
|
<div class="avatar avatar-rounded placeholder"></div>
|
|
</div>
|
|
<div class="col-7">
|
|
<div class="placeholder placeholder-xs col-9"></div>
|
|
<div class="placeholder placeholder-xs col-7"></div>
|
|
</div>
|
|
<div class="col-2 ms-auto text-end">
|
|
<div class="placeholder placeholder-xs col-8"></div>
|
|
<div class="placeholder placeholder-xs col-10"></div>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
<li class="list-group-item">
|
|
<div class="row align-items-center">
|
|
<div class="col-auto">
|
|
<div class="avatar avatar-rounded placeholder"></div>
|
|
</div>
|
|
<div class="col-7">
|
|
<div class="placeholder placeholder-xs col-9"></div>
|
|
<div class="placeholder placeholder-xs col-7"></div>
|
|
</div>
|
|
<div class="col-2 ms-auto text-end">
|
|
<div class="placeholder placeholder-xs col-8"></div>
|
|
<div class="placeholder placeholder-xs col-10"></div>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
<li class="list-group-item">
|
|
<div class="row align-items-center">
|
|
<div class="col-auto">
|
|
<div class="avatar avatar-rounded placeholder"></div>
|
|
</div>
|
|
<div class="col-7">
|
|
<div class="placeholder placeholder-xs col-9"></div>
|
|
<div class="placeholder placeholder-xs col-7"></div>
|
|
</div>
|
|
<div class="col-2 ms-auto text-end">
|
|
<div class="placeholder placeholder-xs col-8"></div>
|
|
<div class="placeholder placeholder-xs col-10"></div>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
<li class="list-group-item">
|
|
<div class="row align-items-center">
|
|
<div class="col-auto">
|
|
<div class="avatar avatar-rounded placeholder"></div>
|
|
</div>
|
|
<div class="col-7">
|
|
<div class="placeholder placeholder-xs col-9"></div>
|
|
<div class="placeholder placeholder-xs col-7"></div>
|
|
</div>
|
|
<div class="col-2 ms-auto text-end">
|
|
<div class="placeholder placeholder-xs col-8"></div>
|
|
<div class="placeholder placeholder-xs col-10"></div>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
```
|