显示侧边栏
隐藏侧边栏
品牌
在界面中以干净一致的方式展示公司或应用的徽标与名称。
<flux:brand href="#" logo="/img/demo/logo.png" name="Acme Inc." /><flux:brand href="#" name="Acme Inc."> <x-slot name="logo"> <div class="size-6 rounded shrink-0 bg-accent text-accent-foreground flex items-center justify-center"><i class="font-serif font-bold">A</i></div> </x-slot></flux:brand>Logo 插槽
使用 logo 插槽为品牌提供自定义徽标。
<flux:brand href="#" name="Launchpad"> <x-slot name="logo" class="size-6 rounded-full bg-cyan-500 text-white text-xs font-bold"> <flux:icon name="rocket-launch" variant="micro" /> </x-slot></flux:brand>示例
包含品牌的页眉
<flux:header class="px-4! w-full bg-zinc-50 dark:bg-zinc-800 rounded-lg border border-zinc-100 dark:border-white/5"> <flux:brand href="#" name="Acme Inc."> <x-slot name="logo" class="bg-accent text-accent-foreground"> <i class="font-serif font-bold">A</i> </x-slot> </flux:brand> <flux:navbar variant="outline"> <flux:navbar.item href="#" current>Home</flux:navbar.item> <flux:navbar.item badge="12" href="#">Inbox</flux:navbar.item> </flux:navbar> <flux:spacer class="min-w-24" /> <flux:profile circle :chevron="false" avatar="https://unavatar.io/x/calebporzio" /></flux:header>参考
flux:brand
|
属性
|
说明
|
|---|---|
| name |
在徽标旁显示的公司或应用名称。
|
| logo |
作为徽标展示的图片 URL，也可以通过插槽传入内容。
|
| alt |
徽标的替代文本。
|
| href |
品牌被点击时跳转的 URL。默认值：'/'.
|
|
插槽
|
说明
|
|---|---|
| logo |
徽标区域的自定义内容，通常包含图片、SVG 或自定义 HTML。
|