In Page Banner
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.
Figma Link
- Web Components
- Flutter
Demo
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 content, 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" |
| canClose | Whether the banner can be closed by the user. | boolean | true |
| showIcon | Whether the icon should be displayed. | boolean | true |
| icon | Custom icon to replace default.Default icons are:- positive: check_circle- negative: error- warning: warning- info: info- default: info | ZetaIconName | 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 |
CSS Properties
| Name | Description |
|---|---|
| --banner-border-color | The border color of the banner. |
| --banner-background-color | The background color of the banner. |
| --banner-foreground-color | The foreground color of the banner. |
| --banner-icon-color | The icon color of the banner. |
Demo
Widgetbook
Inheritance
Object > DiagnosticableTree > Widget > StatelessWidget > ZetaStatelessWidget
Constructors
Constructs ZetaInPageBanner.
ZetaInPageBanner({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 |