Link Blade 组件
概述
链接组件用于渲染一个可以执行 Action 的可点击链接:
<x-filament::link :href="route('users.create')">
New user
</x-filament::link>
将链接用作按钮
默认情况下,链接底层的 HTML 标签是 <a>
。你可以使用 tag
属性,将其改成 <button>
标签:
<x-filament::link
wire:click="openNewUserModal"
tag="button"
>
New user
</x-filament::link>
设置链接大小
默认情况下,链接的大小为 "medium"。使用 size
属性,你可以将其改为 "extra small"、"small"、"large" 或者 "extra large":
<x-filament::link size="sm">
New user
</x-filament::link>
<x-filament::link size="lg">
New user
</x-filament::link>
<x-filament::link size="xl">
New user
</x-filament::link>
<x-filament::link size="2xl">
New user
</x-filament::link>
修改链接的颜色
默认情况下,链接的颜色是 "primary"。你可以使用 color
属性,将其改成 danger
、info
、primary
、success
或 warning
。
<x-filament::link color="danger">
New user
</x-filament::link>
<x-filament::link color="gray">
New user
</x-filament::link>
<x-filament::link color="info">
New user
</x-filament::link>
<x-filament::link color="success">
New user
</x-filament::link>
<x-filament::link color="warning">
New user
</x-filament::link>
为链接添加图标
使用 icon
属性,你可以为链接添加图标:
<x-filament::link icon="heroicon-m-sparkles">
New user
</x-filament::link>
使用 icon-position
属性,你也可以将图标的位置由前面改为后面:
<x-filament::link
icon="heroicon-m-sparkles"
icon-position="after"
>
New user
</x-filament::link>
为链接添加 tooltip
使用 tooltip
属性,你可以为链接添加 tooltip:
<x-filament::link tooltip="Register a user">
New user
</x-filament::link>
为链接添加徽章
使用 badge
插槽,你可以在链接的顶部渲染徽章:
<x-filament::link>
Mark notifications as read
<x-slot name="badge">
3
</x-slot>
</x-filament::link>
使用 badge-color
属性,你可以修改徽章的颜色:
<x-filament::link badge-color="danger">
Mark notifications as read
<x-slot name="badge">
3
</x-slot>
</x-filament::link>