显示侧边栏

骨架屏

在加载数据时创建占位内容。

<flux:skeleton.group animate="shimmer" class="flex items-center gap-4">    <flux:skeleton class="size-10 rounded-full" />    <div class="flex-1">        <flux:skeleton.line />        <flux:skeleton.line class="w-1/2" />    </div></flux:skeleton.group>

单行文本

为单行文本创建加载状态。flux:skeleton.line 组件会占满整行的行高（例如约 20 像素），但只渲染较细的条形，从而在视觉上更接近真实文本。

<flux:skeleton.group animate="shimmer">    <flux:skeleton.line class="mb-2 w-1/4" />    <flux:skeleton.line />    <flux:skeleton.line />    <flux:skeleton.line class="w-3/4" /></flux:skeleton.group>

动画

使用 animate 属性为骨架添加动画效果。

无

闪光

脉冲

<flux:skeleton /><flux:skeleton animate="shimmer" /><flux:skeleton animate="pulse" />

示例

下面是一些使用骨架组件的不同方式示例。

表格

使用骨架组件为表格创建加载状态。

客户	日期	状态	金额

<flux:skeleton.group animate="shimmer">    <flux:table>        <flux:table.columns>            <flux:table.column>Customer</flux:table.column>            <flux:table.column>Date</flux:table.column>            <flux:table.column>Status</flux:table.column>            <flux:table.column>Amount</flux:table.column>        </flux:table.columns>        <flux:table.rows>            @foreach (range(1, 5) as $order)                <flux:table.row>                    <flux:table.cell>                        <div class="flex items-center gap-2">                            <flux:skeleton class="rounded-full size-5" />                            <div class="flex-1">                                <flux:skeleton.line style="width: {{ rand(50, 100) }}%" />                            </div>                        </div>                    </flux:table.cell>                    <flux:table.cell>                        <flux:skeleton.line />                    </flux:table.cell>                    <flux:table.cell>                        <flux:skeleton.line />                    </flux:table.cell>                    <flux:table.cell>                        <flux:skeleton.line />                    </flux:table.cell>                </flux:table.row>            @endforeach        </flux:table.rows>    </flux:table></flux:skeleton.group>

图表

使用骨架组件为图表创建加载状态。

今天

$---

-:-- PM

昨天

$---

<flux:card class="dark:bg-zinc-800">    <div class="flex flex-col gap-6">        <div class="flex gap-12">            <div>                <flux:text>Today</flux:text>                <flux:heading size="xl" class="mt-2 tabular-nums">$---</flux:heading>                <flux:text class="mt-2 tabular-nums">-:-- PM</flux:text>            </div>            <div>                <flux:text>Yesterday</flux:text>                <flux:heading size="lg" class="mt-2 tabular-nums">$---</flux:heading>            </div>        </div>        <flux:skeleton animate="shimmer" class="aspect-[4/1] size-full rounded-lg" />    </div></flux:card>

参考

flux:skeleton

属性	描述
animate	骨架的动画样式。可选值：shimmer、pulse。默认无动画。

插槽	描述
default	骨架元素（线条、方块、圆形等）。

CSS 变量	描述
--flux-shimmer-color	用于闪光动画的背景色。在亮色模式下默认为 white，在暗色模式下默认为 var(--color-zinc-900)。请将其设置为与你页面背景色一致，以避免闪光效果从骨架元素之间的空隙中透出。

属性	描述
data-flux-skeleton	应用于根元素，用于样式控制和标识。

flux:skeleton.line

属性	描述
size	线条的尺寸。可选值：base、lg。默认值为 base。
animate	骨架的动画样式。可选值：shimmer、pulse。默认无动画，可以从父级 flux:skeleton.group 继承。

属性	描述
data-flux-skeleton-line	应用于根元素，用于样式控制和标识。

flux:skeleton.group

属性	描述
animate	为组内所有骨架元素设置的动画样式。可选值：shimmer、pulse。默认无动画。该值会被子级 flux:skeleton 和 flux:skeleton.line 组件继承。

属性	描述
data-flux-skeleton-group	应用于根元素，用于样式控制和标识。