System Banner
- Web Components
- Flutter
Demo
zeta-web v0.6.6
Web Components
A banner displays an important, succinct message, and provides action for users to address. It draws the attention to the message by displaying it at the top in various colors.
Storybook
https://design.zebra.com/web/storybook/?path=/docs/components-system-banner--docs
Slots
| Name | Description | Type |
|---|---|---|
| default | Text displayed on label. | text |
| leadingIcon | Icon at leading side of text. | zeta-icon |
| trailingIcon | Icon at trailing end of component. | zeta-icon |
Attributes
| Name | Description | Type | Default |
|---|---|---|---|
| status | Type of banner. | "default" | "positive" | "warning" | "negative" | "default" |
| align | Alignment of banner. | "start" | "center" | "start" |
| text | Text displayed on the banner.Can also be slotted with default (unnamed) slot.If both are present, text prop will be displayed and slot will not | string | undefined | undefined |
Inherited Attributes
| Name | Description | Type | Default | Inherited From |
|---|---|---|---|---|
| rounded | Whether the component is rounded or sharp.When true, rounded will set the border radius of the first child, and any children with class 'contourable-target' to --radius-minimal.Otherwise, this value will be --radius-none. | boolean | undefined | true | Contourable |
Demo
A banner displays an important, succinct message, and provides action for users to address.It draws the attention to the message by displaying it at the top in various colors.
Widgetbook
Inheritance
Object > DiagnosticableTree > Widget > StatefulWidget > MaterialBanner
Constructors
Constructor for ZetaSystemBanner. See MaterialBanner for more information.
ZetaSystemBanner.new({Key? key, required BuildContext context, required String title, IconData? leadingIcon, ZetaSystemBannerStatus type = ZetaSystemBannerStatus.primary, bool titleCenter = false, Widget? trailing, bool? rounded, String? semanticLabel})
Properties
| Name | Description | Type | Features |
|---|---|---|---|
| actions | The set of actions that are displayed at the bottom or trailing side of | List<Widget> | final inherited |
| animation | The animation driving the entrance and exit of the material banner when presented by the ScaffoldMessenger. | Animation<double>? | final inherited |
| backgroundColor | The color of the surface of this MaterialBanner. | Color? | final inherited |
| content | The content of the MaterialBanner. | Widget | final inherited |
| contentTextStyle | Style for the text in the content of the MaterialBanner. | TextStyle? | final inherited |
| dividerColor | The color of the divider. | Color? | final inherited |
| elevation | The z-coordinate at which to place the material banner. | double? | final inherited |
| forceActionsBelow | An override to force the actions to be below the content regardless of | bool | final inherited |
| hashCode | The hash code for this object. | int | no setter inherited |
| key | Controls how one widget replaces another widget in the tree. | Key? | final inherited |
| leading | The (optional) leading widget of the MaterialBanner. | Widget? | final inherited |
| leadingPadding | The amount of space by which to inset the leading widget. | EdgeInsetsGeometry? | final inherited |
| margin | Empty space to surround the MaterialBanner. | EdgeInsetsGeometry? | final inherited |
| minActionBarHeight | The optional minimum action bar height. | double | final inherited |
| onVisible | Called the first time that the material banner is visible within a Scaffold when presented by the ScaffoldMessenger. | VoidCallback? | final inherited |
| overflowAlignment | The horizontal alignment of the actions when the actions laid out in a column. | OverflowBarAlignment | final inherited |
| padding | The amount of space by which to inset the content. | EdgeInsetsGeometry? | final inherited |
| runtimeType | A representation of the runtime type of the object. | Type | no setter inherited |
| shadowColor | The color of the shadow below the MaterialBanner. | Color? | final inherited |
| surfaceTintColor | The color used as an overlay on backgroundColor to indicate elevation. | Color? | 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<MaterialBanner> | 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 material banner but with the animation replaced with the given animation. | MaterialBanner | inherited |
Figma