悬浮操作按钮

悬浮操作按钮代表屏幕上的主要操作。此组件实现 M3 Expressive FAB 的尺寸和颜色样式；加入标签内容后即成为扩展型 FAB。

操作组件会将 title 转换为组件库的工具提示。有关共同行为和可访问名称回退方式，请参阅操作工具提示。

示例

默认

扩展型

尺寸

颜色

禁用

open_in_newDisabled link

工具提示

title 会转换为组件库的工具提示，而不是原生 HTML 工具提示。如果没有显式提供可访问名称，它也会作为 aria-label 的回退值。

参考

结构

高亮显示

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

属性

名称	说明	默认值	控件
shape可选	Corner style; inherits the shared shape default. M3Shape | undefined	-	-
color可选	The color style of the FAB. primary-containerprimarysecondarytertiarysecondary-containertertiary-container	"primary-container"	checkprimary-containerprimarysecondarytertiarysecondary-containertertiary-container
size可选	The size of the FAB. largemediumregular	"regular"	largemediumcheckregular
href可选	The href attribute. If provided, the FAB will be rendered as an anchor element. string | undefined	undefined
icon可选	Name of the icon. string | undefined	undefined
disabled可选	Whether the FAB is disabled. boolean | undefined	false

插槽2

名称	参数	说明
icon	-	Slot for icon content. Will not be used if `icon` prop is set.
default	-	Label content. When present, the FAB uses the extended layout.

样式23

预览

Token	说明
--md-fab-container-colorColor 回退值var(--md-sys-color-primary-container)	Controls container color.
--md-fab-icon-colorColor 回退值var(--md-sys-color-on-primary-container)	Controls icon color.
--md-fab-label-text-colorColor 回退值var(--md-sys-color-on-primary-container)	Controls label text color.
--md-fab-state-layer-colorColor 回退值var(--md-sys-color-on-primary-container)	Controls state layer color.
--md-fab-container-elevationElevation 回退值var(--md-sys-elevation-level3)	Controls container elevation.
--md-fab-hovered-container-elevationElevation 回退值var(--md-sys-elevation-level4)	Controls hovered container elevation.
--md-fab-focused-container-elevationElevation 回退值var(--md-sys-elevation-level3)	Controls focused container elevation.
--md-fab-pressed-container-elevationElevation 回退值var(--md-sys-elevation-level3)	Controls pressed container elevation.
--md-fab-container-heightSize 回退值56px, 80px, or 96px depending on size	Controls container height.
--md-fab-container-widthSize 回退值56px, 80px, or 96px depending on size	Controls icon-only container width.
--md-fab-container-shapeShape 回退值var(--md-shape-fab-regular), var(--md-shape-fab-medium), or var(--md-shape-fab-large) depending on size	Controls container shape.
--md-fab-icon-sizeSize 回退值24px, 28px, or 36px depending on size	Controls icon size.
--md-fab-leading-spaceSpacing 回退值16px, 26px, or 28px depending on size	Controls extended FAB leading space.
--md-fab-icon-label-spaceSpacing 回退值8px, 12px, or 16px depending on size	Controls space between icon and label.
--md-fab-trailing-spaceSpacing 回退值16px, 26px, or 28px depending on size	Controls extended FAB trailing space.
--md-fab-focus-indicator-colorFocus 回退值var(--md-sys-color-primary)	Controls focus indicator color.
--md-fab-focus-indicator-thicknessFocus 回退值var(--md-sys-state-focus-indicator-thickness)	Controls focus indicator thickness.
--md-fab-focus-indicator-outline-offsetFocus 回退值var(--md-sys-state-focus-indicator-outer-offset)	Controls focus indicator outline offset.
--md-fab-disabled-container-colorDisabled 回退值var(--md-sys-color-on-surface)	Controls disabled container color.
--md-fab-disabled-container-opacityDisabled 回退值0.1	Controls disabled container opacity.
--md-fab-disabled-container-elevationDisabled 回退值var(--md-sys-elevation-level0)	Controls disabled container elevation.
--md-fab-disabled-content-colorDisabled 回退值var(--md-sys-color-on-surface)	Controls disabled icon and label color.
--md-fab-disabled-content-opacityDisabled 回退值0.38	Controls disabled icon and label opacity.