显示侧边栏
隐藏侧边栏
个人资料
在一个紧凑的交互式组件中显示用户的个人资料，包含头像和可选的姓名。
<flux:profile avatar="https://unavatar.io/x/calebporzio" />不显示尖括号
通过将 :chevron 属性设置为 false 来隐藏尖括号图标。
<flux:profile :chevron="false" avatar="https://unavatar.io/x/calebporzio" />圆形头像
使用 circle 属性来显示圆形头像。
<flux:profile circle :chevron="false" avatar="https://unavatar.io/x/calebporzio" /><flux:profile circle name="Caleb Porzio" avatar="https://unavatar.io/x/calebporzio" />带首字母的头像
当没有提供头像图片时，首字母将自动从姓名生成，或者可以直接指定。
<!-- Automatically generates initials from name --><flux:profile name="Caleb Porzio" /><!-- Specify color... --><flux:profile name="Caleb Porzio" avatar:color="cyan" /><!-- Manually specify initials... --><flux:profile initials="CP" /><!-- Provide name only for avatar initial generation... --><flux:profile avatar:name="Caleb Porzio" />自定义尾随图标
使用 icon:trailing 属性用自定义图标替换默认的尖括号。
<flux:profile icon:trailing="chevron-up-down" avatar="https://unavatar.io/x/calebporzio" name="Caleb Porzio"/>示例
个人资料菜单
<flux:dropdown align="end"> <flux:profile avatar="https://unavatar.io/x/calebporzio" /> <flux:navmenu class="max-w-[12rem]"> <div class="px-2 py-1.5"> <flux:text size="sm">Signed in as</flux:text> <flux:heading class="mt-1! truncate">caleb@example.com</flux:heading> </div> <flux:navmenu.separator /> <div class="px-2 py-1.5"> <flux:text size="sm" class="pl-7">Teams</flux:text> </div> <flux:navmenu.item href="#" icon="check" class="text-zinc-800 dark:text-white truncate">Personal</flux:navmenu.item> <flux:navmenu.item href="#" indent class="text-zinc-800 dark:text-white truncate">Wireable LLC</flux:navmenu.item> <flux:navmenu.separator /> <flux:navmenu.item href="/dashboard" icon="key" class="text-zinc-800 dark:text-white">Licenses</flux:navmenu.item> <flux:navmenu.item href="/account" icon="user" class="text-zinc-800 dark:text-white">Account</flux:navmenu.item> <flux:navmenu.separator /> <flux:navmenu.item href="/logout" icon="arrow-right-start-on-rectangle" class="text-zinc-800 dark:text-white">Logout</flux:navmenu.item> </flux:navmenu></flux:dropdown>个人资料切换器
<flux:dropdown position="top" align="start"> <flux:profile avatar="https://unavatar.io/x/calebporzio" name="Caleb Porzio" /> <flux:menu> <flux:menu.radio.group> <flux:menu.radio checked>Caleb Porzio</flux:menu.radio> <flux:menu.radio>Hugo Sainte-Marie</flux:menu.radio> <flux:menu.radio>Josh Hanley</flux:menu.radio> </flux:menu.radio.group> <flux:menu.separator /> <flux:menu.item icon="arrow-right-start-on-rectangle">Logout</flux:menu.item> </flux:menu></flux:dropdown>参考
flux:profile
|
属性
|
描述
|
|---|---|
| name |
在头像旁边显示的用户姓名。
|
| avatar |
要显示为头像的图像URL，或者可以通过avatar命名插槽传递内容。
|
| avatar:name |
用于生成头像首字母的姓名。
|
| avatar:color |
头像使用的颜色。(参见头像颜色文档了解可用选项。)
|
| circle |
是否显示圆形头像。默认值：false。
|
| initials |
当没有提供头像图片时显示的自定义首字母。如果未提供，将从姓名自动生成。
|
| chevron |
是否显示尖括号图标（下拉指示器）。默认值：true。
|
| icon:trailing |
用于替代尖括号显示的自定义图标。接受任何图标名称。
|
| icon:variant |
用于尾随图标的图标变体。选项：micro（默认），outline。
|
|
插槽
|
描述
|
|---|---|
| avatar |
头像部分的自定义内容，通常包含flux:avatar组件。
|