Usage
The skeleton component wraps content, providing a loading placeholder until the actual content is ready.
<LumexCard class="w-[200px] space-y-5 p-4" radius="@Radius.Large">
<LumexSkeleton class="rounded-lg">
<div class="h-24 rounded-lg bg-default-300" />
</LumexSkeleton>
<div class="space-y-3">
<LumexSkeleton class="w-3/5 rounded-lg">
<div class="h-3 w-3/5 rounded-lg bg-default-200" />
</LumexSkeleton>
<LumexSkeleton class="w-4/5 rounded-lg">
<div class="h-3 w-4/5 rounded-lg bg-default-200" />
</LumexSkeleton>
<LumexSkeleton class="w-2/5 rounded-lg">
<div class="h-3 w-2/5 rounded-lg bg-default-300" />
</LumexSkeleton>
</div>
</LumexCard>
Standalone
The skeleton can also be used as a standalone placeholder to simulate loading states for specific UI elements like text, images, or buttons.
<div class="max-w-[300px] w-full flex items-center gap-3">
<div>
<LumexSkeleton Class="flex rounded-full w-12 h-12" />
</div>
<div class="w-full flex flex-col gap-2">
<LumexSkeleton Class="h-3 w-3/5 rounded-lg" />
<LumexSkeleton Class="h-3 w-4/5 rounded-lg" />
</div>
</div>
Loading
You can toggle the skeleton visibility dynamically based on a loading state.
<div class="flex flex-col gap-3">
<LumexCard Class="w-[200px] space-y-5 p-4" Radius="@Radius.Large">
<LumexSkeleton Class="rounded-lg" Loading="@_loading">
<div class="h-24 rounded-lg bg-secondary" />
</LumexSkeleton>
<div class="space-y-3">
<LumexSkeleton Class="w-3/5 rounded-lg" Loading="@_loading">
<div class="h-3 w-full rounded-lg bg-secondary" />
</LumexSkeleton>
<LumexSkeleton Class="w-4/5 rounded-lg" Loading="@_loading">
<div class="h-3 w-full rounded-lg bg-secondary-300" />
</LumexSkeleton>
<LumexSkeleton Class="w-2/5 rounded-lg" Loading="@_loading">
<div class="h-3 w-full rounded-lg bg-secondary-200" />
</LumexSkeleton>
</div>
</LumexCard>
<LumexButton Size="@Size.Small"
Variant="@Variant.Flat"
Color="@ThemeColor.Secondary"
OnClick="@(() => _loading = !_loading)">
@(_loading ? "Hide" : "Show") Skeleton
</LumexButton>
</div>
@code {
private bool _loading = true;
}
Custom Styles
This component supports named slots that allow you to apply custom CSS to specific parts of the component.
- Base: The main container for the skeleton component.
- Content: The inner container that holds the actual content.
You can customize the component(s) by passing any Tailwind CSS classes to the following component parameters:
Skeleton
Class: The CSS class names to style the wrapper.Classes: The CSS class names to style the slots.
API
See the API references below for a complete guide to all the parameters available for the components mentioned here.