mirror of
https://github.com/hunvreus/basecoat.git
synced 2026-11-12 13:18:22 +00:00
135 lines
3.0 KiB
Plaintext
135 lines
3.0 KiB
Plaintext
# Skeleton
|
|
|
|
<Preview>
|
|
<div class="flex items-center gap-4">
|
|
<div class="skeleton size-10 shrink-0 rounded-full"></div>
|
|
<div class="grid gap-2">
|
|
<div class="skeleton h-4 w-[250px]"></div>
|
|
<div class="skeleton h-4 w-[200px]"></div>
|
|
</div>
|
|
</div>
|
|
</Preview>
|
|
|
|
## Usage
|
|
|
|
<Steps>
|
|
<Step title="Include CSS">
|
|
|
|
Import Tailwind and one full Basecoat style bundle.
|
|
|
|
```css
|
|
@import "tailwindcss";
|
|
@import "basecoat-css/vega.css";
|
|
```
|
|
|
|
Or import only the base CSS, Skeleton component CSS, and one style pack.
|
|
|
|
```css
|
|
@import "tailwindcss";
|
|
@import "basecoat-css/base.css";
|
|
@import "basecoat-css/components/skeleton.css";
|
|
@import "basecoat-css/styles/vega.css";
|
|
```
|
|
|
|
Using CDN or bundler imports? See the [Installation page](/installation).
|
|
|
|
</Step>
|
|
<Step title="Add your skeleton HTML">
|
|
|
|
Add `class="skeleton"` with sizing utilities to create loading placeholders.
|
|
|
|
```html
|
|
<div class="skeleton h-4 w-[150px]"></div>
|
|
```
|
|
|
|
</Step>
|
|
</Steps>
|
|
|
|
## Examples
|
|
|
|
### Avatar
|
|
|
|
<Preview>
|
|
<div class="flex items-center gap-4">
|
|
<div class="skeleton size-10 shrink-0 rounded-full"></div>
|
|
<div class="grid gap-2">
|
|
<div class="skeleton h-4 w-[150px]"></div>
|
|
<div class="skeleton h-4 w-[100px]"></div>
|
|
</div>
|
|
</div>
|
|
</Preview>
|
|
|
|
### Card
|
|
|
|
<Preview class="w-full max-w-xs">
|
|
<div class="card w-full">
|
|
<header>
|
|
<div class="skeleton h-4 w-2/3"></div>
|
|
<div class="skeleton h-4 w-1/2"></div>
|
|
</header>
|
|
<section> <div class="skeleton aspect-video w-full"></div></section>
|
|
</div>
|
|
</Preview>
|
|
|
|
### Text
|
|
|
|
<Preview class="w-full max-w-sm">
|
|
<div class="flex flex-col gap-2">
|
|
<div class="skeleton h-4 w-full"></div>
|
|
<div class="skeleton h-4 w-full"></div>
|
|
<div class="skeleton h-4 w-3/4"></div>
|
|
</div>
|
|
</Preview>
|
|
|
|
### Form
|
|
|
|
<Preview class="w-full max-w-xs">
|
|
<div class="flex flex-col gap-7">
|
|
<div class="flex flex-col gap-3">
|
|
<div class="skeleton h-4 w-20"></div>
|
|
<div class="skeleton h-10 w-full"></div>
|
|
</div>
|
|
<div class="flex flex-col gap-3">
|
|
<div class="skeleton h-4 w-24"></div>
|
|
<div class="skeleton h-10 w-full"></div>
|
|
</div>
|
|
<div class="skeleton h-9 w-24"></div>
|
|
</div>
|
|
</Preview>
|
|
|
|
### Table
|
|
|
|
<Preview class="w-full max-w-sm">
|
|
<div class="flex flex-col gap-2">
|
|
<div class="flex gap-4">
|
|
<div class="skeleton h-4 flex-1"></div>
|
|
<div class="skeleton h-4 w-24"></div>
|
|
<div class="skeleton h-4 w-20"></div>
|
|
</div>
|
|
<div class="flex gap-4">
|
|
<div class="skeleton h-4 flex-1"></div>
|
|
<div class="skeleton h-4 w-24"></div>
|
|
<div class="skeleton h-4 w-20"></div>
|
|
</div>
|
|
<div class="flex gap-4">
|
|
<div class="skeleton h-4 flex-1"></div>
|
|
<div class="skeleton h-4 w-24"></div>
|
|
<div class="skeleton h-4 w-20"></div>
|
|
</div>
|
|
</div>
|
|
</Preview>
|
|
|
|
### RTL
|
|
|
|
Skeleton blocks are direction-neutral. Use logical layout utilities around them when spacing depends on direction.
|
|
|
|
<Preview>
|
|
<div dir="rtl" class="flex items-center gap-4">
|
|
<div class="skeleton size-10 shrink-0 rounded-full"></div>
|
|
<div class="grid gap-2">
|
|
<div class="skeleton h-4 w-[150px]"></div>
|
|
<div class="skeleton h-4 w-[100px]"></div>
|
|
</div>
|
|
</div>
|
|
</Preview>
|