徽章组件

#概述

徽章组件用作在文本内部渲染小盒子：

<x-filament::badge>
    New
</x-filament::badge>
<x-filament::badge>
    New
</x-filament::badge>

#设置徽章大小

默认情况下，徽章大小为 "medium"。你可以使用 size 属性将其设为“超小”或者“小”：

<x-filament::badge size="xs">
    New
</x-filament::badge>
 
<x-filament::badge size="sm">
    New
</x-filament::badge>
<x-filament::badge size="xs">
    New
</x-filament::badge>

<x-filament::badge size="sm">
    New
</x-filament::badge>

#改变徽章颜色

默认情况下，徽章颜色为 "primary"。你可以使用 color 属性将其修改为 danger、gray、info、success 或 warning：

<x-filament::badge color="danger">
    New
</x-filament::badge>
 
<x-filament::badge color="gray">
    New
</x-filament::badge>
 
<x-filament::badge color="info">
    New
</x-filament::badge>
 
<x-filament::badge color="success">
    New
</x-filament::badge>
 
<x-filament::badge color="warning">
    New
</x-filament::badge>
<x-filament::badge color="danger">
    New
</x-filament::badge>

<x-filament::badge color="gray">
    New
</x-filament::badge>

<x-filament::badge color="info">
    New
</x-filament::badge>

<x-filament::badge color="success">
    New
</x-filament::badge>

<x-filament::badge color="warning">
    New
</x-filament::badge>

#将图标添加到徽章

你可以使用 icon 属性，在徽章中添加图标：

<x-filament::badge icon="heroicon-m-sparkles">
    New
</x-filament::badge>
<x-filament::badge icon="heroicon-m-sparkles">
    New
</x-filament::badge>

你也可以修改使用 icon-position 属性修改图标位置，将其放到文本后面，而非前面。

<x-filament::badge
    icon="heroicon-m-sparkles"
    icon-position="after"
>
    New
</x-filament::badge>
<x-filament::badge
    icon="heroicon-m-sparkles"
    icon-position="after"
>
    New
</x-filament::badge>

Edit on GitHub

Still need help? Join our Discord community or open a GitHub discussion