头像

版本 ^2.1.0

我们为 Flux UI 新增了一个头像组件。它很小，但很重要，我们一直等到能够给予足够的打磨才发布。来看一下。

在你的应用中添加头像非常简单：

<flux:avatar src="https://unavatar.io/x/calebporzio" />

回退方案

并非每个人都有头像，因此我们希望替代方案也同样美观。

当未提供图片时，头像组件会使用名称生成首字母：

<!-- 根据名称生成 "CP" -->
<flux:avatar name="Caleb Porzio" />

<!-- 或者精确控制显示的内容 -->
<flux:avatar initials="Ca" />

<!-- 甚至仅显示一个首字母 -->
<flux:avatar name="Caleb Porzio" initials:single />

颜色

我们提供了一些合理的配色选项，包括自动配色功能，可为用户提供一致的识别色。

<!-- 可从 17 种预设颜色中选择 -->
<flux:avatar name="Caleb Porzio" color="indigo" />

<!-- 或让 Flux 以确定性方式生成颜色 -->
<flux:avatar name="Caleb Porzio" color="auto" />

<!-- 提供种子以获得一致的颜色 -->
<flux:avatar name="Caleb Porzio" color="auto" color:seed="{{ $user->id }}" />

color="auto" 选项会基于名称生成颜色，因此同一用户始终获得相同的颜色。这一小细节有助于视觉识别。

徽章

添加状态指示或通知：

<!-- 简单的通知圆点 -->
<flux:avatar badge badge:color="green" src="https://unavatar.io/x/calebporzio" />

<!-- 通知数量 -->
<flux:avatar badge="25" src="https://unavatar.io/x/calebporzio" />

<!-- 自定义徽章内容 -->
<flux:avatar src="https://unavatar.io/x/calebporzio">
    <x-slot:badge>
        <img class="size-3" src="https://unavatar.io/github/hugosaintemarie" />
    </x-slot:badge>
</flux:avatar>

分组

在需要时将头像分组以节省水平空间：

<flux:avatar.group>

    <flux:avatar src="https://unavatar.io/x/calebporzio" />

    <flux:avatar src="https://unavatar.io/x/taylorotwell" />

    <flux:avatar src="https://unavatar.io/x/jeffrey_way" />

    <flux:avatar>3+</flux:avatar>

</flux:avatar.group>

也可在表格、下拉菜单等其他 UI 元素中使用它们：

查看头像组件文档以获取更多示例和详细的 API 参考。