悬浮操作按钮菜单

FAB 菜单从悬浮操作按钮展开，用于显示一组相关操作。此组件使用原生弹出层 API，实现 M3 Expressive 单尺寸菜单，并提供主色、次要色和第三层级颜色组。

update:open(false) 会立即反映原生弹出层状态。若清理操作必须等到 FAB 菜单的视觉退出效果结束后再执行，请使用 closed。

示例

默认

颜色

尺寸

对齐与链接

replyReplyforwardForward

受控模式

参考

结构

高亮显示

元素	部件	选择器
<div>	root	[data-scope="floating-action-button-menu"][data-part="root"] left_click鼠标左键单击复制
<button>	trigger	[data-scope="floating-action-button-menu"][data-part="trigger"] left_click鼠标左键单击复制
<Icon>	trigger-icon	[data-scope="floating-action-button-menu"][data-part="trigger-icon"] left_click鼠标左键单击复制
<Icon>	close-icon	[data-scope="floating-action-button-menu"][data-part="close-icon"] left_click鼠标左键单击复制
<div>	popover	[data-scope="floating-action-button-menu"][data-part="popover"] left_click鼠标左键单击复制
<div>	surface	[data-scope="floating-action-button-menu"][data-part="surface"] left_click鼠标左键单击复制
<div>	items	[data-scope="floating-action-button-menu"][data-part="items"] left_click鼠标左键单击复制
<component>	item	[data-scope="floating-action-button-menu"][data-part="item"] left_click鼠标左键单击复制
<span>	item-icon条件显示	[data-scope="floating-action-button-menu"][data-part="item-icon"] left_click鼠标左键单击复制
<span>	item-label	[data-scope="floating-action-button-menu"][data-part="item-label"] left_click鼠标左键单击复制

属性

名称	说明	默认值	控件
shape可选	Corner style; inherits the shared shape default. M3Shape | undefined	-	-
color可选	The color set of the FAB menu. primarysecondarytertiary	"primary"	checkprimarysecondarytertiary
size可选	Size of the closed trigger FAB. The expanded menu always uses one item size. largemediumregular	"regular"	largemediumcheckregular
alignment可选	Horizontal alignment of menu items relative to the trigger FAB. startend	"end"	startcheckend
icon可选	Name of the icon shown on the closed trigger FAB. string | undefined	"add"
closeIcon可选	Name of the icon shown on the close FAB. string | undefined	"close"
ariaLabel可选	Accessible label for the trigger FAB. string | undefined	"Toggle menu"
disabled可选	Whether the trigger FAB is disabled. boolean | undefined	false
open可选	- boolean | undefined	false

事件3

名称	类型	说明
update:open	[value: boolean]	-
closed	[]	-
select	[event: MouseEvent, itemElement: HTMLElement]	-

插槽1

名称	参数	说明
default	-	Menu items, usually FloatingActionButtonMenuItem components.

样式39

预览

Token	说明
--md-fab-menu-trigger-container-colorColor 回退值var(--md-sys-color-primary-container)	Controls trigger FAB container color.
--md-fab-menu-trigger-icon-colorColor 回退值var(--md-sys-color-on-primary-container)	Controls trigger FAB icon color.
--md-fab-menu-trigger-state-layer-colorColor 回退值var(--md-sys-color-on-primary-container)	Controls trigger FAB state layer color.
--md-fab-menu-close-button-container-colorColor 回退值var(--md-sys-color-primary)	Controls close button container color.
--md-fab-menu-close-button-icon-colorColor 回退值var(--md-sys-color-on-primary)	Controls close button icon color.
--md-fab-menu-close-button-state-layer-colorColor 回退值var(--md-sys-color-on-primary)	Controls close button state layer color.
--md-fab-menu-item-container-colorColor 回退值var(--md-sys-color-primary-container)	Controls menu item container color.
--md-fab-menu-item-label-text-colorColor 回退值var(--md-sys-color-on-primary-container)	Controls menu item label text color.
--md-fab-menu-item-icon-colorColor 回退值var(--md-sys-color-on-primary-container)	Controls menu item icon color.
--md-fab-menu-item-state-layer-colorColor 回退值var(--md-sys-color-on-primary-container)	Controls menu item state layer color.
--md-fab-menu-trigger-container-elevationElevation 回退值var(--md-sys-elevation-level3)	Controls trigger FAB container elevation.
--md-fab-menu-close-button-container-elevationElevation 回退值var(--md-sys-elevation-level3)	Controls close button container elevation.
--md-fab-menu-close-button-hovered-container-elevationElevation 回退值var(--md-sys-elevation-level4)	Controls hovered close button container elevation.
--md-fab-menu-close-button-focused-container-elevationElevation 回退值var(--md-sys-elevation-level3)	Controls focused close button container elevation.
--md-fab-menu-close-button-pressed-container-elevationElevation 回退值var(--md-sys-elevation-level3)	Controls pressed close button container elevation.
--md-fab-menu-item-container-elevationElevation 回退值var(--md-sys-elevation-level0)	Controls menu item container elevation.
--md-fab-menu-item-hovered-container-elevationElevation 回退值var(--md-sys-elevation-level4)	Controls hovered menu item container elevation.
--md-fab-menu-item-focused-container-elevationElevation 回退值var(--md-sys-elevation-level3)	Controls focused menu item container elevation.
--md-fab-menu-item-pressed-container-elevationElevation 回退值var(--md-sys-elevation-level3)	Controls pressed menu item container elevation.
--md-fab-menu-trigger-container-heightSize 回退值56px, 80px, or 96px depending on size	Controls trigger FAB container height.
--md-fab-menu-trigger-container-widthSize 回退值56px, 80px, or 96px depending on size	Controls trigger FAB container width.
--md-fab-menu-trigger-container-shapeShape 回退值var(--md-shape-fab-regular), var(--md-shape-fab-medium), or var(--md-shape-fab-large) depending on size	Controls trigger FAB container shape.
--md-fab-menu-trigger-icon-sizeSize 回退值24px, 28px, or 36px depending on size	Controls trigger FAB icon size.
--md-fab-menu-close-button-container-heightSize 回退值56px	Controls close button container height.
--md-fab-menu-close-button-container-widthSize 回退值56px	Controls close button container width.
--md-fab-menu-close-button-container-shapeShape 回退值var(--md-shape-action)	Controls close button container shape.
--md-fab-menu-close-button-icon-sizeSize 回退值20px	Controls close button icon size.
--md-fab-menu-close-button-between-spaceSpacing 回退值8px	Controls space between menu items and close button.
--md-fab-menu-item-container-heightSize 回退值56px	Controls menu item container height.
--md-fab-menu-item-container-shapeShape 回退值var(--md-shape-action)	Controls menu item container shape.
--md-fab-menu-item-icon-sizeSize 回退值24px	Controls menu item icon size.
--md-fab-menu-item-leading-spaceSpacing 回退值24px	Controls menu item leading space.
--md-fab-menu-item-icon-label-spaceSpacing 回退值8px	Controls space between menu item icon and label.
--md-fab-menu-item-trailing-spaceSpacing 回退值24px	Controls menu item trailing space.
--md-fab-menu-item-between-spaceSpacing 回退值4px	Controls vertical space between menu items.
--md-fab-menu-container-padding-inlineSpacing 回退值16px	Controls inline padding around the popover surface.
--md-fab-menu-focus-indicator-colorFocus 回退值var(--md-sys-color-primary)	Controls focus indicator color.
--md-fab-menu-focus-indicator-thicknessFocus 回退值var(--md-sys-state-focus-indicator-thickness)	Controls focus indicator thickness.
--md-fab-menu-focus-indicator-outline-offsetFocus 回退值var(--md-sys-state-focus-indicator-outer-offset)	Controls focus indicator outline offset.