In Page Banner
- Web Components
- Flutter
Demo
zeta-web v0.10.1
Web Components
Zeta in page banner component.
In page banners display an important, succinct message, and may provide actions for users to address. Banners should be displayed at the top of the screen,below a top app bar. Only one banner should be shown at a time.
This component represents a banner that can be displayed within a page. It can have a title, body text, and various status options.
Storybook
https://design.zebra.com/web/storybook/?path=/docs/components-in-page-banner--docs
Slots
| Name | Description | Type |
|---|---|---|
| default | The main content of the banner. | text |
| action | The action buttons. | text |
Attributes
| Name | Description | Type | Default |
|---|---|---|---|
| title | Title of the banner, displayed at the top. | string | "" |
| status | Status of the component. | "default" | "info" | "positive" | "warning" | "negative" | "default" |
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
zeta_flutter
In page banners display an important, succinct message, and may provide actions for users to address. Banners should be displayed at the top of the screen,below a top app bar. Only one banner should be shown at a time.
Widgetbook
Inheritance
Object > DiagnosticableTree > Widget > StatelessWidget > ZetaStatelessWidget
Constructors
Constructs ZetaInPageBanner.
ZetaInPageBanner.new({Key? key, required Widget content, bool? rounded, ZetaWidgetStatus status = ZetaWidgetStatus.info, VoidCallback? onClose, String? title, IconData? customIcon, List<ZetaButton> actions = const []})
Properties
| Name | Description | Type | Features |
|---|---|---|---|
| actions | Action buttons to show at the bottom of the banner. | List<ZetaButton> | final |
| content | The content of the banner. Typically Text. | Widget | final |
| customIcon | Leading icon on top left of banner. | IconData? | final |
| 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 |
| onClose | Called when the button 'Close' is tapped. | VoidCallback? | final |
| rounded | Sets rounded or sharp border of the containing box and the icon style. | bool? | final inherited |
| runtimeType | A representation of the runtime type of the object. | Type | no setter inherited |
| status | Determines the color of the banner. | ZetaWidgetStatus | final |
| title | Title of the banner. | String? | final |
Methods
| Name | Description | Type | Features |
|---|---|---|---|
| build(BuildContext context) | Describes the part of the user interface represented by this widget. | Widget | override |
| createElement() | Creates a StatelessElement to manage this widget's location in the tree. | StatelessElement | 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 | override |
| 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 |
Figma