下拉组件允许您渲染一个下拉菜单,并带有一个触发该菜单的按钮:
<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>默认情况下,图标颜色使用与项目本身相同的颜色。您可以通过将它覆盖为danger、info、primary、success 或 warning 来使用icon-color 属性:
<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>