We use essential cookies for the website to function, as well as analytics cookies for analyzing and creating statistics of the website performance. To agree to the use of analytics cookies, click "Accept All". You can manage your preferences at any time by clicking "Cookie Settings" on the footer. More Information.
This module provides non-modal pop-ups that can be used for displaying short notifications. A pop-up contains the icon, content, and operation areas.
Start version: 6.0.0(20)
import { HdsSnackBar } from '@kit.UIDesignKit'; Defines the HdsSnackBar class.
Model restriction: This API can be used only in the stage model.
System capability: SystemCapability.UIDesign.HDSPattern.Standard
Start version: 6.0.0(20)
constructor(uiContext: UIContext)
Obtains an HdsSnackBar object.
Model restriction: This API can be used only in the stage model.
System capability: SystemCapability.UIDesign.HDSPattern.Standard
Start version: 6.0.0(20)
| Parameter | Type | Mandatory | Description |
|---|---|---|---|
| uiContext | UIContext | Yes | UI context of the app. |
show(icon: SnackBarIconOptions, message: SnackBarMessageOptions, operation: SnackBarOperationOptions, style?: SnackBarStyleOptions): void
Displays a pop-up of the HdsSnackBar component.
Model restriction: This API can be used only in the stage model.
System capability: SystemCapability.UIDesign.HDSPattern.Standard
Start version: 6.0.0(20)
| Parameter | Type | Mandatory | Description |
|---|---|---|---|
| icon | SnackBarIconOptions | Yes | Settings of the icon area of the HdsSnackBar component. |
| message | SnackBarMessageOptions | Yes | Settings of the message in the content area of the HdsSnackBar component. |
| operation | SnackBarOperationOptions | Yes | Settings of the operation area of the HdsSnackBar component. |
| style | SnackBarStyleOptions | No | Style settings of the HdsSnackBar component. |
dismiss(): void
Closes the popup of the HdsSnackBar component.
Model restriction: This API can be used only in the stage model.
System capability: SystemCapability.UIDesign.HDSPattern.Standard
Start version: 6.0.0(20)
Defines icons on the left side of the HdsSnackBar component.
Model restriction: This API can be used only in the stage model.
System capability: SystemCapability.UIDesign.HDSPattern.Standard
Start version: 6.0.0(20)
| Name | Type | Read-Only | Optional | Description |
|---|---|---|---|---|
| icon | ResourceStr | No | Yes | Icon resource of the HdsSnackBar component. Both the SymbolGlyph and Image types are supported. |
| iconType | SnackBarIconType | No | Yes | Icon type of the HdsSnackBar component. The default value is SnackBarIconType.SMALL. |
| iconModifier | ImageModifier | No | Yes | Modifier of an icon of the Image type. |
| iconSymbolModifier | SymbolGlyphModifier | No | Yes | Modifier of an icon of the SymbolGlyph type. |
Defines the message displayed in the content area in the middle of the HdsSnackBar component.
Model restriction: This API can be used only in the stage model.
System capability: SystemCapability.UIDesign.HDSPattern.Standard
Start version: 6.0.0(20)
| Name | Type | Read-Only | Optional | Description |
|---|---|---|---|---|
| title | ResourceStr | No | Yes | Title of the message displayed in the middle of the HdsSnackBar component. |
| titleColor | ColorMetrics | No | Yes | Color of the message title displayed in the middle of the HdsSnackBar component. |
| content | ResourceStr | No | Yes | Body of the message displayed in the middle of the HdsSnackBar component. |
| contentColor | ColorMetrics | No | Yes | Color of the message body displayed in the middle of the HdsSnackBar component. |
Defines the operation area on the right of the HdsSnackBar component.
Model restriction: This API can be used only in the stage model.
System capability: SystemCapability.UIDesign.HDSPattern.Standard
Start version: 6.0.0(20)
| Name | Type | Read-Only | Optional | Description |
|---|---|---|---|---|
| operationType | SnackBarOperationType | No | Yes | Element style of the operation area on the right of the HdsSnackBar component. |
| content | ResourceStr | No | Yes | Text on the text button on the right side of the HdsSnackBar component. NOTE: This parameter does not take effect when the operation area on the right has a close icon (that is, operationType is set to CLOSE_BUTTON_ONLY). |
| contentColor | ColorMetrics | No | Yes | Color of the text on the text button on the right side of the HdsSnackBar component. NOTE: This parameter does not take effect when the operation area on the right has a close icon (that is, operationType is set to CLOSE_BUTTON_ONLY). |
| onContentClick | Callback<void> | No | Yes | Tap event of the text button on the right side of the HdsSnackBar component. NOTE: This parameter does not take effect when the operation area on the right has only the close icon or text button with a right arrow (that is, operationType is set to CLOSE_BUTTON_ONLY or TEXT_WITH_ARROW). |
| contentAccessibilityText | ResourceStr | No | Yes | Accessibility text on the text button on the right side of the HdsSnackBar component. If a component does not contain text information, it will not be announced by the screen reader when selected. In this case, the screen reader user cannot know which component is selected. To solve this problem, you can set accessibility text for components without text information. When such a component is selected, the screen reader announces the specified accessibility text, informing the user which component is selected. Default value: "" NOTE: This parameter does not take effect when the operation area on the right has a close icon (that is, operationType is set to CLOSE_BUTTON_ONLY). |
| contentAccessibilityDescription | ResourceStr | No | Yes | Accessibility description of the text button on the right side of the HdsSnackBar component. You can provide comprehensive text explanations to help users understand the operation they are about to perform and its potential consequences, especially when these cannot be inferred from the component's attributes and accessibility text alone. If a component contains both text information and the accessible description, the text is announced first and then the accessible description, when the component is selected. Default value: "Double-tap to activate" NOTE: This parameter does not take effect when the operation area on the right has a close icon (that is, operationType is set to CLOSE_BUTTON_ONLY). |
| onCloseButtonClick | Callback<void> | No | Yes | Tap event of the close icon on the right side of the HdsSnackBar component. NOTE: This parameter does not take effect when the operation area on the right has only the text button or text button with a right arrow (that is, operationType is set to TEXT_ONLY or TEXT_WITH_ARROW). |
| closeButtonAccessibilityText | ResourceStr | No | Yes | Accessibility text on the close icon on the right side of the HdsSnackBar component. If a component does not contain text information, it will not be announced by the screen reader when selected. In this case, the screen reader user cannot know which component is selected. To solve this problem, you can set accessibility text for components without text information. When such a component is selected, the screen reader announces the specified accessibility text, informing the user which component is selected. Default value: "" NOTE: This parameter does not take effect when the operation area on the right has only the text button or text button with a right arrow (that is, operationType is set to TEXT_ONLY or TEXT_WITH_ARROW). |
| closeButtonAccessibilityDescription | ResourceStr | No | Yes | Accessibility description of the close icon on the right side of the HdsSnackBar component. You can provide comprehensive text explanations to help users understand the operation they are about to perform and its potential consequences, especially when these cannot be inferred from the component's attributes and accessibility text alone. If a component contains both text information and the accessible description, the text is announced first and then the accessible description, when the component is selected. Default value: "Double-tap to activate" NOTE: This parameter does not take effect when the operation area on the right has only the text button or text button with a right arrow (that is, operationType is set to TEXT_ONLY or TEXT_WITH_ARROW). |
| arrowColor | ColorMetrics[] | No | Yes | Color of the right arrow on the right side of the HdsSnackBar component. NOTE: This parameter takes effect only when the operation area on the right has only the text button with a right arrow (that is, operationType is set to TEXT_WITH_ARROW). |
| onArrowClick | Callback<void> | No | Yes | Tap event of the text button with a right arrow on the right side of the HdsSnackBar component. NOTE: This parameter takes effect only when the operation area on the right has only the text button with a right arrow (that is, operationType is set to TEXT_WITH_ARROW). |
| highlightBackBoardColor | ColorMetrics | No | Yes | Background color of the highlighted text button on the right side of the HdsSnackBar component. NOTE: This parameter takes effect only when the operation area on the right has s highlighted text button with a close icon (that is, operationType is set to HIGHLIGHT_TEXT_WITH_CLOSE). |
| textButtonId | string | No | Yes | ID of the text or highlighted text button of the HdsSnackBar component. NOTE: This parameter does not take effect when the operation area on the right has only the close icon or text button with a right arrow (that is, operationType is set to CLOSE_BUTTON_ONLY or TEXT_WITH_ARROW). |
| cancelButtonId | string | No | Yes | ID of the close icon of the HdsSnackBar component. NOTE: This parameter does not take effect when the operation area on the right has only the text button or text button with a right arrow (that is, operationType is set to TEXT_ONLY or TEXT_WITH_ARROW). |
| arrowButtonId | string | No | Yes | ID of the text button with a right arrow in the HdsSnackBar component. NOTE: This parameter takes effect only when the operation area on the right has only the text button with a right arrow (that is, operationType is set to TEXT_WITH_ARROW). |
When operationType is set to TEXT_WITH_ARROW, the interactive target area of onArrowClick is the entire SnackBar container. Therefore, you do not need to set onContentClick.
The textButtonId, cancelButtonId, and arrowButtonId attributes can be used as focus shift target IDs.
Defines the style of the HdsSnackBar component.
Model restriction: This API can be used only in the stage model.
System capability: SystemCapability.UIDesign.HDSPattern.Standard
Start version: 6.0.0(20)
| Name | Type | Read-Only | Optional | Description |
|---|---|---|---|---|
| width | LengthMetrics | No | Yes | Width of the HdsSnackBar component. |
| backgroundColor | ColorMetrics | No | Yes | Background color of the HdsSnackBar component. |
| backgroundBlurStyle | BlurStyle | No | Yes | Background blur effect of the HdsSnackBar component. |
| duration | number | No | Yes | Duration until the HdsSnackBar component automatically disappears when it is configured for scheduled notification display. The default value is 5000. Unit: millisecond Value range: (-∞, +∞) If this parameter is set to a value less than or equal to 0, the pop-up will be displayed in permanent mode. |
| keyboardDownAvoidHeight | LengthMetrics | No | Yes | Avoidance height for the HdsSnackBar component when the on-screen keyboard is collapsed. |
| keyboardUpAvoidHeight | LengthMetrics | No | Yes | Avoidance height for the HdsSnackBar component when the on-screen keyboard is expanded. |
| nextFocusId | string | No | Yes | ID of the next component to which the focus will shift from the HdsSnackBar component. |
| theme | Theme | CustomTheme | No | Yes | Theme of the HdsSnackBar component. |
| themeColorMode | ThemeColorMode | No | Yes | Theme color of the HdsSnackBar component. |
| pressBackCallback | Callback<void> | No | Yes | Callback function customized for an app, to return to the previous page when an HdsSnackBar pop-up is displayed and a user swipes left. |
| blurStrategy | BlurStrategy | No | Yes | Effective strategy of the HdsSnackBar component. The default value is BlurStrategy.ADAPTIVE. |
Defines the enumeration of SnackBarOperationType.
Model restriction: This API can be used only in the stage model.
System capability: SystemCapability.UIDesign.HDSPattern.Standard
Start version: 6.0.0(20)
| Name | Value | Description |
|---|---|---|
| TEXT_ONLY | 0 | Text button. |
| CLOSE_BUTTON_ONLY | 1 | Close icon. |
| TEXT_WITH_ARROW | 2 | Text button with a right arrow. |
| TEXT_WITH_CLOSE | 3 | Text button with a close icon. |
| HIGHLIGHT_TEXT_WITH_CLOSE | 4 | Highlighted text button with a close icon. |
Defines the enumeration of SnackBarIconType.
Model restriction: This API can be used only in the stage model.
System capability: SystemCapability.UIDesign.HDSPattern.Standard
Start version: 6.0.0(20)
| Name | Value | Description |
|---|---|---|
| SMALL | 0 | Small icon. |
| NORMAL | 1 | Common-size icon. |
The HdsSnackBar component provides pop-ups that support operation buttons.
import {
HdsSnackBar,
SnackBarIconOptions,
SnackBarMessageOptions,
SnackBarOperationOptions,
SnackBarStyleOptions,
SnackBarOperationType
} from '@kit.UIDesignKit'
@Entry
@ComponentV2
struct TestSnackBar {
uiContext: UIContext = this.getUIContext();
hdsSnackBar: HdsSnackBar = new HdsSnackBar(this.uiContext);
icon: SnackBarIconOptions = {
icon: $r('sys.symbol.checkmark_circle')
}
message: SnackBarMessageOptions = {
title: $r('sys.string.ohos_id_text_location_button_description_current_position'),
content: $r('sys.string.ohos_id_text_save_button_description_save')
}
operation: SnackBarOperationOptions = {
operationType: SnackBarOperationType.TEXT_WITH_CLOSE,
content: $r('sys.string.ohos_id_text_save_button_description_save_image'),
textButtonId: 'snackBarTextButton'
}
style: SnackBarStyleOptions = {
nextFocusId: 'button',
duration: -1
}
build() {
Column() {
Blank()
.height(400)
Button('SnackBar pop-up with a text button and a close icon in the right operation area, persistent')
.onClick(() => {
this.hdsSnackBar.show(this.icon, this.message, this.operation, this.style);
})
.id("button")
Button('Follow')
.nextFocus({
// The forward ID must be the same as the textButtonId passed in SnackBarOperationOptions.
forward: 'snackBarTextButton'
})
}
.width('100%')
.height('100%')
.backgroundColor(0xF1F3F5)
}
} Display effect:
Intelligent Assistant
Chat with our virtual assistant to get answers promptly.
Quick start
Helps you find desired resources with ease.
