Snackbar

Snackbar 用于呈现短暂状态更新，可选操作按钮和关闭按钮均由库中相同的按钮基础组件构成。

消息已归档

示例

默认

Message archived

选项

Supporting text only

Action only

Dismiss only

Action and dismiss

Disabled action

组合

Single-line

File moved to trash

Single-line with action

File moved to trash

Two lines

Your changes were saved locally and will sync when the connection is available again.

Two lines with longer action

Your changes were saved locally and will sync when the connection is available again.

参考

结构

高亮显示

元素	部件	选择器
<section>	root	[data-scope="snackbar"][data-part="root"] left_click鼠标左键单击复制
<div>	content	[data-scope="snackbar"][data-part="content"] left_click鼠标左键单击复制
<div>	actions条件显示	[data-scope="snackbar"][data-part="actions"] left_click鼠标左键单击复制
<Button>	action-button条件显示	[data-scope="snackbar"][data-part="action-button"] left_click鼠标左键单击复制
<IconButton>	dismiss-button条件显示	[data-scope="snackbar"][data-part="dismiss-button"] left_click鼠标左键单击复制

属性

名称	说明	默认值	控件
shape可选	Corner style; inherits the shared shape default. M3Shape | undefined	-	-
actionLabel可选	Label for the optional action button. string | undefined	undefined
actionDisabled可选	Whether the action button is disabled. boolean | undefined	false
actionAutofocus可选	Whether the action button should autofocus when rendered. boolean | undefined	false
actionOnNewLine可选	Whether the action should be placed on a separate line. boolean | undefined	false
dismissible可选	Whether to show a dismiss button. boolean | undefined	false	check
dismissButtonLabel可选	Accessible label for the dismiss button. string | undefined	"Dismiss notification"

事件2

名称	类型	说明
action	[]	-
dismiss	[]	-

插槽3

名称	参数	说明
default	-	Supporting text content for the snackbar.
action	-	Optional custom action content.
dismiss	-	Optional custom dismiss content.

样式22

预览

Token	说明
--md-snackbar-action-label-text-colorColor 回退值var(--md-sys-color-inverse-primary)	Controls action label text color.
--md-snackbar-action-label-text-fontTypography 回退值var(--md-sys-typescale-label-large-font)	Controls action label text font.
--md-snackbar-action-label-text-line-heightTypography 回退值var(--md-sys-typescale-label-large-line-height)	Controls action label text line height.
--md-snackbar-action-label-text-sizeLayout 回退值var(--md-sys-typescale-label-large-size)	Controls action label text size.
--md-snackbar-action-label-text-trackingTypography 回退值var(--md-sys-typescale-label-large-tracking)	Controls action label text tracking.
--md-snackbar-action-label-text-weightTypography 回退值var(--md-sys-typescale-label-large-weight)	Controls action label text weight.
--md-snackbar-container-colorColor 回退值var(--md-sys-color-inverse-surface)	Controls container color.
--md-snackbar-container-elevationElevation 回退值var(--md-sys-elevation-level3)	Controls container elevation.
--md-snackbar-container-padding-blockLayout 回退值1rem	Controls container padding block.
--md-snackbar-container-padding-inline-endLayout 回退值0.5rem	Controls container padding inline end.
--md-snackbar-container-padding-inline-startLayout 回退值1rem	Controls container padding inline start.
--md-snackbar-container-shadow-colorColor 回退值var(--md-sys-color-shadow)	Controls container shadow color.
--md-snackbar-container-shapeShape 回退值var(--md-shape-compact)	Controls container shape.
--md-snackbar-icon-colorColor 回退值var(--md-sys-color-inverse-on-surface)	Controls icon color.
--md-snackbar-icon-sizeLayout 回退值1.25rem	Controls icon size.
--md-snackbar-supporting-text-colorColor 回退值var(--md-sys-color-inverse-on-surface)	Controls supporting text color.
--md-snackbar-supporting-text-fontTypography 回退值var(--md-sys-typescale-body-medium-font)	Controls supporting text font.
--md-snackbar-supporting-text-line-heightTypography 回退值var(--md-sys-typescale-body-medium-line-height)	Controls supporting text line height.
--md-snackbar-supporting-text-sizeLayout 回退值var(--md-sys-typescale-body-medium-size)	Controls supporting text size.
--md-snackbar-supporting-text-trackingTypography 回退值var(--md-sys-typescale-body-medium-tracking)	Controls supporting text tracking.
--md-snackbar-supporting-text-weightTypography 回退值var(--md-sys-typescale-body-medium-weight)	Controls supporting text weight.
--md-snackbar-with-single-line-container-heightLayout 回退值3rem	Controls with single line container height.