链接组件用于渲染一个可点击的链接,该链接可以执行某个操作:
<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>默认情况下,链接的大小为“中”。您可以通过使用 size 属性将其设置为“小”、“大”、“超大”或“超超大”:
<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>默认情况下,链接的字体粗细是semibold。您可以将其设置为thin,extralight,light,normal,medium,bold,extrabold 或 black 通过使用weight属性:
<x-filament::link weight="thin">
New user
</x-filament::link>
<x-filament::link weight="extralight">
New user
</x-filament::link>
<x-filament::link weight="light">
New user
</x-filament::link>
<x-filament::link weight="normal">
New user
</x-filament::link>
<x-filament::link weight="medium">
New user
</x-filament::link>
<x-filament::link weight="semibold">
New user
</x-filament::link>
<x-filament::link weight="bold">
New user
</x-filament::link>
<x-filament::link weight="black">
New user
</x-filament::link>或者,您可以传入一个自定义的 CSS 类来定义权重:
<x-filament::link weight="md:font-[650]">
New user
</x-filament::link>默认情况下,链接的颜色是“primary”。您可以使用 color 属性将其更改为 danger、gray、info、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 属性为链接添加工具提示:
<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>