FluxUI 中文网 · 官方 Livewire UI 库

显示侧边栏

一个可组合的下拉菜单组件，既可以处理简单的导航菜单，也可以处理包含复选框、单选按钮和子菜单的复杂操作菜单。

<flux:dropdown>    <flux:button icon:trailing="chevron-down">Options</flux:button>    <flux:menu>        <flux:menu.item icon="plus">New post</flux:menu.item>        <flux:menu.separator />        <flux:menu.submenu heading="Sort by">            <flux:menu.radio.group>                <flux:menu.radio checked>Name</flux:menu.radio>                <flux:menu.radio>Date</flux:menu.radio>                <flux:menu.radio>Popularity</flux:menu.radio>            </flux:menu.radio.group>        </flux:menu.submenu>        <flux:menu.submenu heading="Filter">            <flux:menu.checkbox checked>Draft</flux:menu.checkbox>            <flux:menu.checkbox checked>Published</flux:menu.checkbox>            <flux:menu.checkbox>Archived</flux:menu.checkbox>        </flux:menu.submenu>        <flux:menu.separator />        <flux:menu.item variant="danger" icon="trash">Delete</flux:menu.item>    </flux:menu></flux:dropdown>

在下拉菜单中显示一组简单的链接。

使用 navmenu 组件来创建简单的链接集合。否则，使用 menu 组件来创建需要键盘导航、子菜单等功能的操作菜单。

<flux:dropdown position="bottom" align="end">    <flux:profile avatar="/img/demo/user.png" name="Olivia Martin" />    <flux:navmenu>        <flux:navmenu.item href="#" icon="user">Account</flux:navmenu.item>        <flux:navmenu.item href="#" icon="building-storefront">Profile</flux:navmenu.item>        <flux:navmenu.item href="#" icon="credit-card">Billing</flux:navmenu.item>        <flux:navmenu.item href="#" icon="arrow-right-start-on-rectangle">Logout</flux:navmenu.item>        <flux:navmenu.item href="#" icon="trash" variant="danger">Delete</flux:navmenu.item>    </flux:navmenu></flux:dropdown>

定位

通过 position 和 align 属性自定义下拉菜单的位置。您可以首先传递基础位置：top、bottom、left 和 right，然后使用对齐修饰符，如 start、center 或 end。

<flux:dropdown position="top" align="start"><!-- More positions... --><flux:dropdown position="right" align="center"><flux:dropdown position="bottom" align="center"><flux:dropdown position="left" align="end">

偏移量和间距

通过 offset 和 gap 属性自定义下拉菜单的偏移量/间距。这些属性接受像素值。

<flux:dropdown offset="-15" gap="2">

键盘提示

为菜单项添加键盘快捷键提示，帮助用户更快地导航您的应用程序。

<flux:dropdown>    <flux:button icon:trailing="chevron-down">Options</flux:button>    <flux:menu>        <flux:menu.item icon="pencil-square" kbd="⌘S">Save</flux:menu.item>        <flux:menu.item icon="document-duplicate" kbd="⌘D">Duplicate</flux:menu.item>        <flux:menu.item icon="trash" variant="danger" kbd="⌘⌫">Delete</flux:menu.item>    </flux:menu></flux:dropdown>

复选框项目

选择一个或多个菜单选项。

<flux:dropdown>    <flux:button icon:trailing="chevron-down">Permissions</flux:button>    <flux:menu>        <flux:menu.checkbox wire:model="read" checked>Read</flux:menu.checkbox>        <flux:menu.checkbox wire:model="write" checked>Write</flux:menu.checkbox>        <flux:menu.checkbox wire:model="delete">Delete</flux:menu.checkbox>    </flux:menu></flux:dropdown>

单选按钮项目

选择单个菜单选项。

<flux:dropdown>    <flux:button icon:trailing="chevron-down">Sort by</flux:button>    <flux:menu>        <flux:menu.radio.group wire:model="sortBy">            <flux:menu.radio checked>Latest activity</flux:menu.radio>            <flux:menu.radio>Date created</flux:menu.radio>            <flux:menu.radio>Most popular</flux:menu.radio>        </flux:menu.radio.group>    </flux:menu></flux:dropdown>

分组

使用分隔线将相关的菜单项进行视觉分组。

<flux:dropdown>    <flux:button icon:trailing="chevron-down">Options</flux:button>    <flux:menu>        <flux:menu.item>View</flux:menu.item>        <flux:menu.item>Transfer</flux:menu.item>        <flux:menu.separator />        <flux:menu.item>Publish</flux:menu.item>        <flux:menu.item>Share</flux:menu.item>        <flux:menu.separator />        <flux:menu.item variant="danger">Delete</flux:menu.item>    </flux:menu></flux:dropdown>

带标题的分组

在标题下对选项进行分组，使其更容易发现。

<flux:dropdown>    <flux:button icon:trailing="chevron-down">Options</flux:button>    <flux:menu>        <flux:menu.group heading="Account">            <flux:menu.item>Profile</flux:menu.item>            <flux:menu.item>Permissions</flux:menu.item>        </flux:menu.group>        <flux:menu.group heading="Billing">            <flux:menu.item>Transactions</flux:menu.item>            <flux:menu.item>Payouts</flux:menu.item>            <flux:menu.item>Refunds</flux:menu.item>        </flux:menu.group>        <flux:menu.item>Logout</flux:menu.item>    </flux:menu></flux:dropdown>

子菜单

嵌套子菜单以创建更紧凑的菜单。

<flux:dropdown>    <flux:button icon:trailing="chevron-down">Options</flux:button>    <flux:menu>        <flux:menu.submenu heading="Sort by">            <flux:menu.radio checked>Name</flux:menu.radio>            <flux:menu.radio>Date</flux:menu.radio>            <flux:menu.radio>Popularity</flux:menu.radio>        </flux:menu.submenu>        <flux:menu.submenu heading="Filter">            <flux:menu.checkbox checked>Draft</flux:menu.checkbox>            <flux:menu.checkbox checked>Published</flux:menu.checkbox>            <flux:menu.checkbox>Archived</flux:menu.checkbox>        </flux:menu.submenu>        <flux:menu.separator />        <flux:menu.item variant="danger">Delete</flux:menu.item>    </flux:menu></flux:dropdown>

保持打开

菜单通常在点击项目时关闭，但是，您可以向 menu 组件添加 keep-open 属性来保持其打开状态。

<flux:dropdown>    <flux:button icon:trailing="chevron-down">Filter</flux:button>    <flux:menu keep-open>        <flux:menu.checkbox checked>Draft</flux:menu.checkbox>        <flux:menu.checkbox checked>Published</flux:menu.checkbox>        <flux:menu.checkbox>Archived</flux:menu.checkbox>    </flux:menu></flux:dropdown>

如果您希望菜单仅在点击特定项目时保持打开，您可以将 keep-open 属性添加到项目本身。这适用于：

menu.item
menu.checkbox
menu.radio
menu.radio.group
menu.submenu

<flux:dropdown>    <flux:button icon:trailing="chevron-down">Filters</flux:button>    <flux:menu >        <flux:menu.checkbox keep-open checked>Draft</flux:menu.checkbox>        <flux:menu.checkbox keep-open checked>Published</flux:menu.checkbox>        <flux:menu.checkbox keep-open>Archived</flux:menu.checkbox>        <flux:menu.separator />        <flux:menu.item variant="danger">Clear</flux:menu.item>    </flux:menu></flux:dropdown>

导航栏

构建带有下拉菜单的响应式导航栏

个人资料

显示用户头像和个人资料信息

按钮

用于表单和UI操作的交互式控件

参考文档

属性	描述
position	下拉菜单的位置。选项：top、right、bottom（默认）、left。
align	下拉菜单的对齐方式。选项：start、center、end。默认值：start。
offset	距离触发元素的偏移量（像素）。默认值：0。
gap	触发器和菜单之间的间距（像素）。默认值：4。

属性	描述
data-flux-dropdown	应用于根元素，用于样式设置和标识。

一个复杂的菜单组件，支持键盘导航、子菜单、复选框和单选按钮。

属性	描述
keep-open	防止菜单在点击其内部任何项目时关闭。

插槽	描述
default	菜单项、分隔符和子菜单。

属性	描述
data-flux-menu	应用于根元素，用于样式设置和标识。

属性	描述
icon	在项目开始处显示的图标名称。
icon:trailing	在项目末尾显示的图标名称。
icon:variant	图标的变体。选项：outline、solid、mini、micro。
kbd	在项目末尾显示的键盘快捷键提示。
suffix	在项目末尾显示的文本。
variant	项目的视觉样式。选项：default、danger。
disabled	如果为 true，则阻止与菜单项的交互。
keep-open	防止菜单在选择此项目时关闭。

属性	描述
data-flux-menu-item	应用于根元素，用于样式设置和标识。
data-active	当项目被悬停/激活时应用。

属性	描述
heading	作为子菜单标题显示的文本。
icon	在子菜单开始处显示的图标名称。
icon:trailing	在子菜单末尾显示的图标名称。
icon:variant	图标的变体。选项：outline、solid、mini、micro。
keep-open	防止子菜单在选择其内部任何项目时关闭。

插槽	描述
default	子菜单项（复选框、单选按钮等）。

分隔菜单项的水平线。

属性	描述
wire:model	将复选框组绑定到Livewire属性。查看 wire:model 文档了解更多信息。

插槽	描述
default	复选框。

属性	描述
wire:model	将复选框绑定到Livewire属性。查看 wire:model 文档了解更多信息。
checked	如果为 true，复选框默认选中。
disabled	如果为 true，阻止与复选框的交互。
keep-open	防止菜单在选择此复选框时关闭。

属性	描述
data-active	当复选框被悬停/激活时应用。
data-checked	当复选框被选中时应用。

属性	描述
wire:model	将单选按钮组绑定到Livewire属性。查看 wire:model 文档了解更多信息。
keep-open	防止菜单在选择此组中任何单选按钮时关闭。

插槽	描述
default	单选按钮。

属性	描述
checked	如果为 true，单选按钮默认选中。
disabled	如果为 true，阻止与单选按钮的交互。
keep-open	防止菜单在选择此单选按钮时关闭。

属性	描述
data-active	当单选按钮被悬停/激活时应用。
data-checked	当单选按钮被选中时应用。

下拉菜单

相关组件

参考文档