SnackBar
- Web Components
- Flutter
Demo
zeta-web v0.9.0
Web Components
Snackbars provide brief messages about app processes at the bottom of the screen. Contextual snackbars provide brief messages in relation to an action that has been taken by the user.
Storybook
https://design.zebra.com/web/storybook/index.html?path=/docs/components-snackbar--docs
Slots
| Name | Description | Type |
|---|---|---|
| default | The text of the snackbar. | text |
| icon | The icon of the snackbar. | text |
Attributes
| Name | Description | Type | Default |
|---|---|---|---|
| status | Status of the component. | "default" | "positive" | "info" | "warning" | "negative" | "view" | "default" |
| hasCloseAction | Whether the snackbar has a close action. | boolean | false |
| actionLabel | Label of the action. | string | undefined | undefined |
| actionClick | Function to call when the action is clicked. | Function | () => {} |
Inherited Attributes
| Name | Description | Type | Default | Inherited From |
|---|---|---|---|---|
| shape | Whether the component is sharp, rounded or fully rounded.This will change the border radius and icon font.Possible values are: - sharp: No border radius, uses "zeta-icons-sharp"- rounded: Minimal border radius, uses "zeta-icons-round"- full: Full border radius, uses "zeta-icons-round" | 'sharp' | 'rounded' | 'full' | "rounded" | ContourableThree |
| disabled | Boolean for if component is disabled.This will apply disabled styles. | boolean | false | Interactive |
| tabIndex | The tab index of the component, used to determine the order in which elements receive focus when the user navigates through the document by pressing the Tab key. | number | 0 | Interactive |
Demo
A lightweight message with an optional action which briefly displays at thebottom of the screen.
Widgetbook
Inheritance
Object > DiagnosticableTree > Widget > StatefulWidget > SnackBar
Constructors
Sets basic styles for the SnackBar.
ZetaSnackBar.new({Key? key, SnackBarBehavior? behavior = SnackBarBehavior.floating, EdgeInsetsGeometry? margin, required BuildContext context, required Widget content, VoidCallback? onPressed, ZetaSnackBarType? type, Widget? leadingIcon, bool? rounded, String? actionLabel, String? actionSemanticLabel})
Properties
| Name | Description | Type | Features |
|---|---|---|---|
| action | (optional) An action that the user can take based on the snack bar. | SnackBarAction? | final inherited |
| actionOverflowThreshold | (optional) The percentage threshold for action widget's width before it overflows | double? | final inherited |
| animation | The animation driving the entrance and exit of the snack bar. | Animation<double>? | final inherited |
| backgroundColor | The snack bar's background color. | Color? | final inherited |
| behavior | This defines the behavior and location of the snack bar. | SnackBarBehavior? | final inherited |
| clipBehavior | The content will be clipped (or not) according to this option. | Clip | final inherited |
| closeIconColor | An optional color for the close icon, if showCloseIcon is | Color? | final inherited |
| content | The primary content of the snack bar. | Widget | final inherited |
| dismissDirection | The direction in which the SnackBar can be dismissed. | DismissDirection? | final inherited |
| duration | The amount of time the snack bar should be displayed. | Duration | final inherited |
| elevation | The z-coordinate at which to place the snack bar. This controls the size | double? | final inherited |
| hashCode | The hash code for this object. | int | no setter inherited |
| hitTestBehavior | Defines how the snack bar area, including margin, will behave during hit testing. | HitTestBehavior? | final inherited |
| key | Controls how one widget replaces another widget in the tree. | Key? | final inherited |
| margin | Empty space to surround the snack bar. | EdgeInsetsGeometry? | final inherited |
| onVisible | Called the first time that the snackbar is visible within a Scaffold. | VoidCallback? | final inherited |
| padding | The amount of padding to apply to the snack bar's content and optional | EdgeInsetsGeometry? | final inherited |
| runtimeType | A representation of the runtime type of the object. | Type | no setter inherited |
| shape | The shape of the snack bar's Material. | ShapeBorder? | final inherited |
| showCloseIcon | (optional) Whether to include a "close" icon widget. | bool? | final inherited |
| width | The width of the snack bar. | double? | final inherited |
Methods
| Name | Description | Type | Features |
|---|---|---|---|
| createElement() | Creates a StatefulElement to manage this widget's location in the tree. | StatefulElement | inherited |
| createState() | Creates the mutable state for this widget at a given location in the tree. | State<SnackBar> | inherited |
| debugDescribeChildren() | Returns a list of DiagnosticsNode objects describing this node's children. | List<DiagnosticsNode> | inherited |
| debugFillProperties(DiagnosticPropertiesBuilder properties) | Add additional properties associated with the node. | void | inherited |
| noSuchMethod(Invocation invocation) | Invoked when a nonexistent method or property is accessed. | dynamic | inherited |
| paddingAll(double space) | Available on Widget, provided by the SpacingWidget extension | Widget | undefined |
| paddingBottom(double space) | Available on Widget, provided by the SpacingWidget extension | Widget | undefined |
| paddingEnd(double space) | Available on Widget, provided by the SpacingWidget extension | Widget | undefined |
| paddingHorizontal(double space) | Available on Widget, provided by the SpacingWidget extension | Widget | undefined |
| paddingStart(double space) | Available on Widget, provided by the SpacingWidget extension | Widget | undefined |
| paddingTop(double space) | Available on Widget, provided by the SpacingWidget extension | Widget | undefined |
| paddingVertical(double space) | Available on Widget, provided by the SpacingWidget extension | Widget | undefined |
| toDiagnosticsNode({String? name, DiagnosticsTreeStyle? style}) | Returns a debug representation of the object that is used by debugging tools and by DiagnosticsNode.toStringDeep. | DiagnosticsNode | inherited |
| toString({DiagnosticLevel minLevel = DiagnosticLevel.info}) | A string representation of this object. | String | inherited |
| toStringDeep({String prefixLineOne = '', String? prefixOtherLines, DiagnosticLevel minLevel = DiagnosticLevel.debug, int wrapWidth = 65}) | Returns a string representation of this node and its descendants. | String | inherited |
| toStringShallow({String joiner = ', ', DiagnosticLevel minLevel = DiagnosticLevel.debug}) | Returns a one-line detailed description of the object. | String | inherited |
| toStringShort() | A short, textual description of this widget. | String | inherited |
| withAnimation(Animation<double> newAnimation, {Key? fallbackKey}) | Creates a copy of this snack bar but with the animation replaced with the given animation. | SnackBar | inherited |
Figma