按钮组件用于渲染一个可点击的按钮,该按钮可执行操作:
<x-filament::button wire:click="openNewUserModal">
New user
</x-filament::button>默认情况下,按钮的底层 HTML 标签是 <button>。你可以通过使用 tag 属性将其更改为 <a> 标签:
<x-filament::button
href="https://filamentphp.com"
tag="a"
>
Filament
</x-filament::button>默认情况下,按钮的大小是 "medium". 您可以将其设置为 "extra small", "small", "large" 或 "extra large" 通过使用 size 属性:
<x-filament::button size="xs">
New user
</x-filament::button>
<x-filament::button size="sm">
New user
</x-filament::button>
<x-filament::button size="lg">
New user
</x-filament::button>
<x-filament::button size="xl">
New user
</x-filament::button>默认情况下,按钮的颜色是“primary”。您可以通过使用 color 属性将其更改为 danger、gray、info、success 或 warning:
<x-filament::button color="danger">
New user
</x-filament::button>
<x-filament::button color="gray">
New user
</x-filament::button>
<x-filament::button color="info">
New user
</x-filament::button>
<x-filament::button color="success">
New user
</x-filament::button>
<x-filament::button color="warning">
New user
</x-filament::button>你可以通过使用 icon 属性将 图标 添加到按钮:
<x-filament::button icon="heroicon-m-sparkles">
New user
</x-filament::button>您还可以将图标的位置更改为在文本之后而不是之前,使用 icon-position 属性:
<x-filament::button
icon="heroicon-m-sparkles"
icon-position="after"
>
New user
</x-filament::button>您可以使用 outlined 属性,使按钮采用“描边”设计:
<x-filament::button outlined>
New user
</x-filament::button>您可以向按钮添加工具提示,方法是使用 tooltip 属性:
<x-filament::button tooltip="Register a user">
New user
</x-filament::button>你可以渲染一个 徽章 在按钮上方 通过使用 badge 插槽:
<x-filament::button>
Mark notifications as read
<x-slot name="badge">
3
</x-slot>
</x-filament::button>您可以 更改颜色 的徽章 使用 badge-color 属性:
<x-filament::button badge-color="danger">
Mark notifications as read
<x-slot name="badge">
3
</x-slot>
</x-filament::button>