登录
显示侧边栏
组件
头像
隐藏侧边栏

头像

将图片或姓名首字母显示为头像。

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

提示

使用 tooltip 属性可在鼠标悬停头像时显示提示。

Caleb Porzio 
<flux:avatar tooltip="Caleb Porzio" src="https://unavatar.io/x/calebporzio" /><!-- Or infer from the name prop... --><flux:avatar tooltip name="Caleb Porzio" src="https://unavatar.io/x/calebporzio" />

首字母

当未提供 src 时，将使用 name 属性自动生成首字母。你也可以直接使用 initials 属性。

CP
Ca
C 
<flux:avatar name="Caleb Porzio" /><flux:avatar name="calebporzio" /><flux:avatar name="calebporzio" initials:single /><!-- Or use the initials prop directly... --><flux:avatar initials="CP" />

尺寸

使用 size 属性更改头像的尺寸。

<!-- Extra large: size-16 (64px) --><flux:avatar size="xl" src="https://unavatar.io/x/calebporzio" /><!-- Large: size-12 (48px) --><flux:avatar size="lg" src="https://unavatar.io/x/calebporzio" /><!-- Default: size-10 (40px) --><flux:avatar src="https://unavatar.io/x/calebporzio" /><!-- Small: size-8 (32px) --><flux:avatar size="sm" src="https://unavatar.io/x/calebporzio" /><!-- Extra small: size-6 (24px) --><flux:avatar size="xs" src="https://unavatar.io/x/calebporzio" />

图标

使用 icon 属性以图标替代图片显示。

<flux:avatar icon="user" /><flux:avatar icon="phone" /><flux:avatar icon="computer-desktop" />

颜色

使用 color 属性更改头像的颜色。

CP
CP
CP
CP
CP
CP
CP
CP
CP
CP
CP
CP
CP
CP
CP
CP
CP 
<flux:avatar name="Caleb Porzio" color="red" /><flux:avatar name="Caleb Porzio" color="orange" /><flux:avatar name="Caleb Porzio" color="amber" /><flux:avatar name="Caleb Porzio" color="yellow" /><flux:avatar name="Caleb Porzio" color="lime" /><flux:avatar name="Caleb Porzio" color="green" /><flux:avatar name="Caleb Porzio" color="emerald" /><flux:avatar name="Caleb Porzio" color="teal" /><flux:avatar name="Caleb Porzio" color="cyan" /><flux:avatar name="Caleb Porzio" color="sky" /><flux:avatar name="Caleb Porzio" color="blue" /><flux:avatar name="Caleb Porzio" color="indigo" /><flux:avatar name="Caleb Porzio" color="violet" /><flux:avatar name="Caleb Porzio" color="purple" /><flux:avatar name="Caleb Porzio" color="fuchsia" /><flux:avatar name="Caleb Porzio" color="pink" /><flux:avatar name="Caleb Porzio" color="rose" />

自动配色

基于用户名确定性地生成一种颜色。

CP
MJ
KC
KN
KS
BP
AB 
<flux:avatar name="Caleb Porzio" color="auto" /><!-- Use color:seed to generate a consistent color based --><!-- on something unchanging like a user's ID... --><flux:avatar name="Caleb Porzio" color="auto" color:seed="{{ $user->id }}" />

圆形

使用 circle 属性将头像设置为圆形。

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

徽标

以多种方式为头像添加徽标。仅使用 badge 属性可显示简单的圆点指示；也可提供数字或表情等内容；甚至可通过插槽传入自定义 HTML。

<flux:avatar badge badge:color="green" src="https://unavatar.io/x/calebporzio" /><flux:avatar badge badge:color="zinc" badge:position="top right" badge:circle badge:variant="outline" src="https://unavatar.io/x/calebporzio" /><flux:avatar badge="25" src="https://unavatar.io/x/calebporzio" /><flux:avatar circle badge="👍" badge:circle src="https://unavatar.io/x/calebporzio" /><flux:avatar circle 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 组件上添加自定义类实现。

3+
3+ 
<flux:avatar.group>    <flux:avatar src="https://unavatar.io/x/calebporzio" />    <flux:avatar src="https://unavatar.io/github/hugosaintemarie" />    <flux:avatar src="https://unavatar.io/github/joshhanley" />    <flux:avatar>3+</flux:avatar></flux:avatar.group><!-- Adapt rings to custom background... --><flux:avatar.group class="**:ring-zinc-100 dark:**:ring-zinc-800">    <flux:avatar circle src="https://unavatar.io/x/calebporzio" />    <flux:avatar circle src="https://unavatar.io/github/hugosaintemarie" />    <flux:avatar circle src="https://unavatar.io/github/joshhanley" />    <flux:avatar circle>3+</flux:avatar></flux:avatar.group>

作为按钮

使用 as 属性将头像渲染为按钮。

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

作为链接

使用 href 属性将头像渲染为链接。

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

示例

推荐语

在我看来，Livewire 将 Blade 提升到了新高度。这基本上就是 Blade 默认就该具备的样子。🔥

Taylor Otwell

Laravel 创始人

<div>    <div class="flex items-center gap-2">        <flux:icon.star variant="solid" />        <flux:icon.star variant="solid" />        <flux:icon.star variant="solid" />        <flux:icon.star variant="solid" />        <flux:icon.star variant="solid" />    </div>    <flux:heading size="xl" class="mt-4 italic">        <p>IMO Livewire takes Blade to the next level. It's basically what Blade should be by default. 🔥</p>    </flux:heading>    <div class="mt-6 flex items-center gap-4">        <flux:avatar size="lg" src="https://unavatar.io/x/taylorotwell" />        <div>            <flux:heading size="lg">Taylor Otwell</flux:heading>            <flux:text>Creator of Laravel</flux:text>        </div>    </div></div>

分组功能

The Laravel Podcast
新

一档关于 Laravel、开发最佳实践与 PHP 生态的播客——由 Jeffrey Way、Matt Stauffer 与 Taylor Otwell 主持，后由 Adam Wathan 加入。

<div>    <flux:heading size="xl">The Laravel Podcast <flux:badge inset="top bottom" class="ml-1 max-sm:hidden">New</flux:badge></flux:heading>    <flux:text class="mt-2">        A podcast about Laravel, development best practices, and the PHP ecosystem—hosted by Jeffrey Way, Matt Stauffer, and Taylor Otwell, later joined by Adam Wathan.    </flux:text>    <flux:avatar.group class="mt-6">        <flux:avatar circle size="lg" src="https://unavatar.io/x/taylorotwell" />        <flux:avatar circle size="lg" src="https://unavatar.io/x/adamwathan" />        <flux:avatar circle size="lg" src="https://unavatar.io/x/jeffrey_way" />        <flux:avatar circle size="lg" src="https://unavatar.io/x/stauffermatt" />    </flux:avatar.group></div>

成员表

在表格行中加入头像，使用户数据更易识别。

团队成员
Caleb Porzio
你

caleb@laravel-livewire.com
Hugo Sainte-Marie

hugo@example.com
Josh Hanley

josh@example.com

 
<div class="flex justify-between items-center mb-4">    <flux:heading size="lg">Team members</flux:heading>    <flux:button size="sm" icon="plus">Invite</flux:button></div><flux:table>    <flux:table.rows>        <flux:table.row>            <flux:table.cell>                <div class="flex items-center gap-2 sm:gap-4">                    <flux:avatar circle size="lg" class="max-sm:size-8" src="https://unavatar.io/github/calebporzio" />                    <div class="flex flex-col">                        <flux:heading>Caleb Porzio <flux:badge size="sm" color="blue" class="ml-1 max-sm:hidden">You</flux:badge></flux:heading>                        <flux:text class="max-sm:hidden">caleb@laravel-livewire.com</flux:text>                    </div>                </div>            </flux:table.cell>            <flux:table.cell>                <div class="flex justify-end items-center gap-2">                    <flux:select size="sm" class="min-w-fit max-w-fit">                        <flux:select.option value="admin" selected>Admin</flux:select.option>                        <flux:select.option value="member">Member</flux:select.option>                        <flux:select.option value="guest">Guest</flux:select.option>                    </flux:select>                    <flux:button size="sm" variant="subtle" icon="trash" class="shrink-0" />                </div>            </flux:table.cell>        </flux:table.row>        <flux:table.row >            <flux:table.cell>                <div class="flex items-center gap-2 sm:gap-4">                    <flux:avatar circle size="lg" class="max-sm:size-8" src="https://unavatar.io/github/hugosaintemarie" />                    <div class="flex flex-col">                        <flux:heading>Hugo Sainte-Marie</flux:heading>                        <flux:text class="max-sm:hidden">hugo@example.com</flux:text>                    </div>                </div>            </flux:table.cell>            <flux:table.cell>                <div class="flex justify-end items-center gap-2">                    <flux:select size="sm" class="min-w-fit max-w-fit">                        <flux:select.option value="admin">Admin</flux:select.option>                        <flux:select.option value="member" selected>Member</flux:select.option>                        <flux:select.option value="guest">Guest</flux:select.option>                    </flux:select>                    <flux:button size="sm" variant="subtle" icon="trash" class="shrink-0" />                </div>            </flux:table.cell>        </flux:table.row>        <flux:table.row>            <flux:table.cell>                <div class="flex items-center gap-2 sm:gap-4">                    <flux:avatar circle size="lg" class="max-sm:size-8" src="https://unavatar.io/github/joshhanley" />                    <div class="flex flex-col">                        <flux:heading>Josh Hanley</flux:heading>                        <flux:text class="max-sm:hidden">josh@example.com</flux:text>                    </div>                </div>            </flux:table.cell>            <flux:table.cell>                <div class="flex justify-end items-center gap-2">                    <flux:select size="sm" class="min-w-fit max-w-fit">                        <flux:select.option value="admin">Admin</flux:select.option>                        <flux:select.option value="member" selected>Member</flux:select.option>                        <flux:select.option value="guest">Guest</flux:select.option>                    </flux:select>                    <flux:button size="sm" variant="subtle" icon="trash" class="shrink-0" />                </div>            </flux:table.cell>        </flux:table.row>    </flux:table.rows></flux:table>

负责人列表

在列表中加入头像，使用户数据更易识别。

负责人
  • Caleb Porzio
  • Hugo Sainte-Marie
  • Josh Hanley
  • Jason Beggs
<flux:card>    <div class="flex justify-between items-center">        <flux:heading>Assignees</flux:heading>        <flux:button size="sm" variant="subtle" icon="plus" inset="top bottom" />    </div>    <flux:separator class="mt-2 mb-4" variant="subtle" />    <ul class="flex flex-col gap-3">        <li class="flex items-center gap-2">            <flux:avatar size="xs" src="https://unavatar.io/github/calebporzio" />            <flux:heading>Caleb Porzio</flux:heading>        </li>        <li class="flex items-center gap-2">            <flux:avatar size="xs" src="https://unavatar.io/github/hugosaintemarie" />            <flux:heading>Hugo Sainte-Marie</flux:heading>        </li>        <li class="flex items-center gap-2">            <flux:avatar size="xs" src="https://unavatar.io/github/joshhanley" />            <flux:heading>Josh Hanley</flux:heading>        </li>        <li class="flex items-center gap-2">            <flux:avatar size="xs" src="https://unavatar.io/github/jasonlbeggs" />            <flux:heading>Jason Beggs</flux:heading>        </li>    </ul></flux:card>

下拉选项

为下拉选项配上头像，使其更易于视觉识别。

指派给
Caleb Porzio
Hugo Sainte-Marie
Josh Hanley
Jason Beggs 
<flux:select variant="listbox" label="Assign to">    <flux:select.option selected>        <div class="flex items-center gap-2 whitespace-nowrap">            <flux:avatar circle size="xs" src="https://unavatar.io/github/calebporzio" /> Caleb Porzio        </div>    </flux:select.option>    <flux:select.option>        <div class="flex items-center gap-2 whitespace-nowrap">            <flux:avatar circle size="xs" src="https://unavatar.io/github/hugosaintemarie" /> Hugo Sainte-Marie        </div>    </flux:select.option>    <flux:select.option>        <div class="flex items-center gap-2 whitespace-nowrap">            <flux:avatar circle size="xs" src="https://unavatar.io/github/joshhanley" /> Josh Hanley        </div>    </flux:select.option>    <flux:select.option>        <div class="flex items-center gap-2 whitespace-nowrap">            <flux:avatar circle size="xs" src="https://unavatar.io/github/jasonlbeggs" /> Jason Beggs        </div>    </flux:select.option></flux:select>

用户弹出卡片

在弹出卡片中显示用户的资料信息。

calebporzio
Caleb Porzio

@calebporzio

关注了你

我是一名热衷于构建 Web 应用的全栈开发者。目前正在参与一个名为 Flux 的新项目。

1.2k

粉丝

1.2k

关注

 
<flux:dropdown hover position="bottom center">    <flux:avatar as="button" name="calebporzio" src="https://unavatar.io/x/calebporzio" />    <flux:popover class="relative max-w-[15rem]">        <div class="absolute top-0 right-0 p-2">            <flux:button icon="user-plus" variant="filled" size="sm">Follow back</flux:button>        </div>        <flux:avatar size="xl" name="calebporzio" src="https://unavatar.io/x/calebporzio" />        <flux:heading class="mt-2">Caleb Porzio</flux:heading>        <flux:text>@calebporzio <flux:badge color="zinc" size="sm" inset="top bottom">Follows you</flux:badge></flux:text>        <flux:text class="mt-3">            I'm a full stack developer with a passion for building web applications. Currently working on a new project called <flux:link href="https://fluxui.dev">Flux</flux:link>.        </flux:text>        <div class="flex gap-4 mt-3">            <div class="flex gap-2 items-center">                <flux:heading>1.2k</flux:heading> <flux:text>Followers</flux:text>            </div>            <div class="flex gap-2 items-center">                <flux:heading>1.2k</flux:heading> <flux:text>Following</flux:text>            </div>        </div>    </flux:popover></flux:dropdown>

相关组件

个人资料

显示带头像的用户资料，并可选显示姓名
提示

当鼠标悬停在元素上时显示信息性提示

参考

flux:avatar

属性
描述
name
用于生成首字母的用户名。若未提供 initials，将根据该值自动生成首字母。
src
头像所用图片的 URL。
initials
当未提供 src 时用于显示的自定义首字母。如同时提供，将覆盖 name。
alt
头像图片的替代文本。（默认：如提供则使用 name）
size
头像尺寸。可选值：xs（24px）、sm（32px）、（默认：40px）、lg（48px）。
color
当显示首字母或图标时的背景颜色。可选值：red、orange、amber、yellow、lime、green、emerald、teal、cyan、sky、blue、indigo、violet、purple、fuchsia、pink、rose、auto。默认：无（使用系统颜色）。
color:seed
当使用 color="auto" 时用于确定性地产生一致颜色的种子值。适合用用户 ID 等来生成稳定一致的配色。
circle
若存在或为 true，则头像为完全圆形而非圆角矩形。
icon
用于替代图片或首字母显示的图标名称。
icon:variant
图标的变体。可选值：outline、solid。默认：solid。
tooltip
鼠标悬停头像时显示的提示文本。若设置为 true，则使用 name 属性作为提示内容。
tooltip:position
提示的显示位置。可选值：top、right、bottom、left。默认：top。
badge
作为徽标显示的内容。可以是字符串、布尔值，或通过插槽传入。
badge:color
徽标的颜色。可选值同 color 属性。
badge:circle
若存在或为 true，则徽标为完全圆形而非轻微圆角。
badge:position
徽标的位置。可选值：top left、top right、bottom left、bottom right。默认：bottom right。
badge:variant
徽标的样式变体。可选值：solid、outline。默认：solid。
as
将头像渲染为何种元素。可选值：button、div（默认）。
href
链接地址，将头像渲染为一个链接元素。
槽位
描述
default
在头像内部显示的自定义内容。如提供，将覆盖 initials。
badge
在徽标中显示的自定义内容（用于更复杂的徽标内容）。

flux:avatar.group

属性
描述
class
应用到分组的 CSS 类，包括通过 *:ring-{color} 格式自定义描边颜色。
Slot
Description
default
在此放置多个 flux:avatar 组件以分组展示。
© 2025 FluxProMax™. All Rights Reserved.

备案号：皖ICP备13019729号-11