Link Blade 组件

#概述

链接组件用于渲染一个可以执行 Action 的可点击链接：

<x-filament::link :href="route('users.create')">
    New user
</x-filament::link>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<x-filament::link badge-color="danger">
    Mark notifications as read

    <x-slot name="badge">
        3
    </x-slot>
</x-filament::link>

Edit on GitHub

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