右键点击
<flux:context> <flux:card class="border-dashed border-2 px-16"> <flux:text>Right click</flux:text> </flux:card> <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:context>一个包装组件，用于启用右键上下文菜单功能。
|
属性
|
描述
|
|---|---|
| wire:model |
将上下文菜单的状态绑定到 Livewire 属性。查看 wire:model 文档了解更多信息。
|
| position |
控制菜单相对于点击位置的位置。格式：[vertical] [horizontal]。垂直选项：top、bottom（默认）。水平选项：start、center、end (default).
|
| gap |
菜单与点击位置之间的像素距离。默认值：4。
|
| offset |
沿两个轴的额外像素偏移量。格式：[x] [y]。
|
| target |
用作菜单的外部元素的 ID。当您需要菜单位于上下文元素的 DOM 树之外时使用此选项。
|
| detail |
存储在菜单的 data-detail 属性中的自定义值，用于根据上下文菜单的来源添加自定义样式或行为。
|
| disabled |
防止右键点击时显示上下文菜单。
|
|
插槽
|
描述
|
|---|---|
| default |
第一个子元素作为触发区域，右键点击时将显示上下文菜单。第二个子元素应该是一个 flux:menu 组件，它将显示为上下文菜单。
|