下拉 Blade 组件

#简介

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

<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 的最大宽度比例相对应。选项包括 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>

Edit on GitHub

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