FluxUI 中文网 · 徽章组件

尺寸

使用 size 属性，在三种不同的徽章尺寸之间进行选择。

小号

默认

大号

<flux:badge size="sm">Small</flux:badge><flux:badge>Default</flux:badge><flux:badge size="lg">Large</flux:badge>

图标

通过 icon 和 icon:trailing 属性为徽章添加图标。

用户

文件

视频

<flux:badge icon="user-circle">Users</flux:badge><flux:badge icon="document-text">Files</flux:badge><flux:badge icon:trailing="video-camera">Videos</flux:badge>

胶囊样式

使用 variant="pill" 属性，让徽章呈现完整的圆角外观。

用户

<flux:badge variant="pill" icon="user">Users</flux:badge>

作为按钮

通过外层包裹按钮元素，让整个徽章可点击。

<flux:badge as="button" variant="pill" icon="plus" size="lg">Amount</flux:badge>

带关闭按钮

追加关闭按钮，让徽章可以被移除。

管理员

<flux:badge>    Admin <flux:badge.close /></flux:badge>

颜色

从多种配色中选择，以区分不同徽章并传达情绪。

锌色

红色

橙色

琥珀色

黄色

青柠色

绿色

祖母绿

蓝绿色

青色

天空蓝

蓝色

靛蓝

紫罗兰

紫色

洋红

粉色

玫红

<flux:badge color="zinc">Zinc</flux:badge><flux:badge color="red">Red</flux:badge><flux:badge color="orange">Orange</flux:badge><flux:badge color="amber">Amber</flux:badge><flux:badge color="yellow">Yellow</flux:badge><flux:badge color="lime">Lime</flux:badge><flux:badge color="green">Green</flux:badge><flux:badge color="emerald">Emerald</flux:badge><flux:badge color="teal">Teal</flux:badge><flux:badge color="cyan">Cyan</flux:badge><flux:badge color="sky">Sky</flux:badge><flux:badge color="blue">Blue</flux:badge><flux:badge color="indigo">Indigo</flux:badge><flux:badge color="violet">Violet</flux:badge><flux:badge color="purple">Purple</flux:badge><flux:badge color="fuchsia">Fuchsia</flux:badge><flux:badge color="pink">Pink</flux:badge><flux:badge color="rose">Rose</flux:badge>

实心样式

用于更重要的状态指示或警报，呈现醒目的高对比徽章。

锌色

红色

橙色

琥珀色

黄色

青柠色

绿色

祖母绿

蓝绿色

青色

天空蓝

蓝色

靛蓝

紫罗兰

紫色

洋红

粉色

玫红

<flux:badge variant="solid" color="zinc">Zinc</flux:badge><flux:badge variant="solid" color="red">Red</flux:badge><flux:badge variant="solid" color="orange">Orange</flux:badge><flux:badge variant="solid" color="amber">Amber</flux:badge><flux:badge variant="solid" color="yellow">Yellow</flux:badge><flux:badge variant="solid" color="lime">Lime</flux:badge><flux:badge variant="solid" color="green">Green</flux:badge><flux:badge variant="solid" color="emerald">Emerald</flux:badge><flux:badge variant="solid" color="teal">Teal</flux:badge><flux:badge variant="solid" color="cyan">Cyan</flux:badge><flux:badge variant="solid" color="sky">Sky</flux:badge><flux:badge variant="solid" color="blue">Blue</flux:badge><flux:badge variant="solid" color="indigo">Indigo</flux:badge><flux:badge variant="solid" color="violet">Violet</flux:badge><flux:badge variant="solid" color="purple">Purple</flux:badge><flux:badge variant="solid" color="fuchsia">Fuchsia</flux:badge><flux:badge variant="solid" color="pink">Pink</flux:badge><flux:badge variant="solid" color="rose">Rose</flux:badge>

内缩

当徽章与行内文本并排使用时，周围额外的内边距可能会导致间距问题。使用 inset 属性，为徽章顶部和底部添加负边距以避免此问题。

页面构建器

新建

无需离开浏览器即可轻松创建新页面。

<flux:heading>    Page builder <flux:badge color="lime" inset="top bottom">New</flux:badge></flux:heading><flux:text class="mt-2">Easily author new pages without leaving your browser.</flux:text>

flux:badge

属性	描述
color	徽章颜色（例如 zinc、red、blue）。默认值：zinc。
size	徽章尺寸。可选值：sm、lg。
variant	徽章样式变体。可选值：pill。
icon	徽章文本前显示的图标名称。
icon:trailing	徽章文本后显示的图标名称。
icon:variant	图标变体。可选值：outline、solid、mini、micro。默认值：mini。
as	渲染徽章所使用的 HTML 元素。可选值：button。默认值：div。
inset	为特定方向添加负外边距。可选值：top、bottom、left、right，或任意组合。

flux:badge.close

属性	描述
icon	要显示的图标名称。默认值：x-mark。
icon:variant	图标变体。可选值：outline、solid、mini、micro。默认值：mini。

徽章

相关组件

参考