骨架屏

版本 ^2.9.0

加载状态很重要。精心设计的骨架屏可以在内容加载时保持用户的专注，让你的应用感觉更快、更精致。

下面介绍骨架屏，这是一个用于创建占位内容的灵活组件。

<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>

文本占位符

skeleton.line 组件会模拟真实文本——它占据完整的行高，但只渲染一条更细的条形，从而获得更接近真实文本的自然比例：

<flux:skeleton.group>
    <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>

动画选项

你可以在闪动（shimmer）和呼吸（pulse）动画之间选择，或者完全不使用动画。skeleton.group 组件允许你只设置一次动画，然后所有子骨架组件都会继承这个设置：

<!-- 闪动动画 -->
<flux:skeleton.group animate="shimmer">
    <flux:skeleton.line />
</flux:skeleton.group>

<!-- 呼吸动画 -->
<flux:skeleton.group animate="pulse">
    <flux:skeleton.line />
</flux:skeleton.group>

<!-- 无动画 -->
<flux:skeleton.line />

真实场景示例

你可以为任何东西构建骨架状态——表格、卡片、图表、个人资料等。下面是一个表格加载状态示例：

<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.columns>
        <flux:table.rows>
            @foreach (range(1, 5) as $i)
                <flux:table.row>
                    <flux:table.cell>
                        <div class="flex items-center gap-2">
                            <flux:skeleton class="rounded-full size-5" />
                            <flux:skeleton.line />
                        </div>
                    </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>

查看 骨架屏 文档，了解更多示例和完整的 API 参考。