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
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
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 |