UI pattern from Material design. Snackbars provide brief messages about app processes at the bottom of the screen.
Snackbars inform users of a process that an app has performed or will perform. They appear temporarily, towards the bottom of the screen. They shouldn’t interrupt the user experience, and they don’t require user input to disappear. Only one snackbar should be displayed at a time.
- Place the widget inside a container / context where it's message and optional action are relevant to the user.
- The snackbar is positioned fixed on top of other content. This position can be relative to the parent container
of the widget. This is a container with the css property
position: relative;applied to it.
- The snackbar is positioned fixed on top of other content. This position can be relative to the parent container of the widget. This is a container with the css property
- Give the widget a label text.
- Set a boolean which tells the widget to pop up (the widget needs to be able to set this value back to false after closing).
- Adjust the autoclose value if desired (
5 secondsby default).
- (optional) Configure an action to be triggered from the snackbar (nanoflows, save changes, open pages, ...).
- If an action is configured, also provide a button label.
- May be closed? Give the user the option to manually close the snackbar, aside from the auto-close timer.
- Leading: Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL). The snackbar is centered by default.
Development and contribution
- Install NPM package dependencies by using:
npm install. If you use NPM v7.x.x, which can be checked by executing
npm -v, execute:
npm install --legacy-peer-deps.
npm startto watch for code changes. On every change:
- the widget will be bundled;
- the bundle will be included in a
distfolder in the root directory of the project;
- the bundle will be included in the
widgetsfolder of the Mendix test project.