Dropdown Blade component

#概述

下拉菜单组件允许你使用触发按钮渲染下拉菜单：

<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<x-filament::dropdown width="xs">
    {{-- Dropdown items --}}
</x-filament::dropdown>

#控制下拉菜单最大高度

使用 max-height 属性，可以设置下拉菜单内容的最大高度，当内容过长时显示滚动条。你可以传入一个 CSS 长度：

<x-filament::dropdown max-height="400px">
    {{-- Dropdown items --}}
</x-filament::dropdown>
<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