Dropdown Blade 组件

简介

dropdown 组件允许你渲染带触发按钮的下拉菜单：

<x-filament::dropdown>
    <x-slot name="trigger">
        <x-filament::button>
            More actions
        </x-filament::button>
    </x-slot>

    <x-filament::dropdown.list>
        <x-filament::dropdown.list.item wire:click="openViewModal">
            View
        </x-filament::dropdown.list.item>

        <x-filament::dropdown.list.item wire:click="openEditModal">
            Edit
        </x-filament::dropdown.list.item>

        <x-filament::dropdown.list.item wire:click="openDeleteModal">
            Delete
        </x-filament::dropdown.list.item>
    </x-filament::dropdown.list>
</x-filament::dropdown>

将下拉项用作锚链接

默认情况下，下拉项底层的 HTML 标签是 <button>。可使用 tag 属性将其改为 <a> 标签：

<x-filament::dropdown.list.item
    href="https://filamentphp.com"
    tag="a"
>
    Filament
</x-filament::dropdown.list.item>

更改下拉项颜色

默认情况下，下拉项的颜色为「gray」。可使用 color 属性将其改为 danger、info、primary、success 或 warning：

<x-filament::dropdown.list.item color="danger">
    Edit
</x-filament::dropdown.list.item>

<x-filament::dropdown.list.item color="info">
    Edit
</x-filament::dropdown.list.item>

<x-filament::dropdown.list.item color="primary">
    Edit
</x-filament::dropdown.list.item>

<x-filament::dropdown.list.item color="success">
    Edit
</x-filament::dropdown.list.item>

<x-filament::dropdown.list.item color="warning">
    Edit
</x-filament::dropdown.list.item>

为下拉项添加图标

可使用 icon 属性为下拉项添加图标：

<x-filament::dropdown.list.item icon="heroicon-m-pencil">
    Edit
</x-filament::dropdown.list.item>

更改下拉项图标颜色

默认情况下，图标颜色与项本身的颜色相同。可使用 icon-color 属性将其覆盖为 danger、info、primary、success 或 warning：

<x-filament::dropdown.list.item icon="heroicon-m-pencil" icon-color="danger">
    Edit
</x-filament::dropdown.list.item>

<x-filament::dropdown.list.item icon="heroicon-m-pencil" icon-color="info">
    Edit
</x-filament::dropdown.list.item>

<x-filament::dropdown.list.item icon="heroicon-m-pencil" icon-color="primary">
    Edit
</x-filament::dropdown.list.item>

<x-filament::dropdown.list.item icon="heroicon-m-pencil" icon-color="success">
    Edit
</x-filament::dropdown.list.item>

<x-filament::dropdown.list.item icon="heroicon-m-pencil" icon-color="warning">
    Edit
</x-filament::dropdown.list.item>

为下拉项添加图片

可使用 image 属性为下拉项添加圆形图片：

<x-filament::dropdown.list.item image="https://filamentphp.com/dan.jpg">
    Dan Harrin
</x-filament::dropdown.list.item>

为下拉项添加徽章

可使用 badge 插槽在下拉项上渲染徽章：

<x-filament::dropdown.list.item>
    Mark notifications as read
    
    <x-slot name="badge">
        3
    </x-slot>
</x-filament::dropdown.list.item>

可使用 badge-color 属性更改徽章颜色：

<x-filament::dropdown.list.item badge-color="danger">
    Mark notifications as read

    <x-slot name="badge">
        3
    </x-slot>
</x-filament::dropdown.list.item>

设置下拉菜单位置

可使用 placement 属性相对于触发按钮定位下拉菜单：

<x-filament::dropdown placement="top-start">
    {{-- Dropdown items --}}
</x-filament::dropdown>

设置下拉菜单宽度

可使用 width 属性设置下拉菜单宽度。选项对应 Tailwind 的 max-width 比例。可选值为 xs、sm、md、lg、xl、2xl、3xl、4xl、5xl、6xl 和 7xl：

<x-filament::dropdown width="xs">
    {{-- Dropdown items --}}
</x-filament::dropdown>

控制下拉菜单最大高度

可使用 max-height 属性为下拉内容设置最大高度，以便滚动。你可以传入 CSS 长度：

<x-filament::dropdown max-height="400px">
    {{-- Dropdown items --}}
</x-filament::dropdown>