Indicator
- Web Components
- Flutter
Demo
zeta-web v0.9.0
Web Components
Indicators are used to show the status of a user or any messages/notifications they might have.
Storybook
https://design.zebra.com/web/storybook/?path=/docs/components-badges--docs
Slots
| Name | Description | Type |
|---|---|---|
| default | Value to be displayed inside the indicator. If the type is set to notification, this should be the number or text shown inside the indicator. If the type is set to icon, this should be an icon or any other content you want to display. There is first class support for the zeta-icon component, which can be used to display icons inside the indicator. | text |
Attributes
| Name | Description | Type | Default |
|---|---|---|---|
| icon | Icon to be shown on icon type indicator.Full list of icons can be found at https://design.zebra.com/icons Zeta Icons. | ZetaIconName | undefined | undefined |
| type | Whether to render as a notification or icon indicator. | "icon" | "notification" | "notification" |
| value | Value to be displayed inside the indicator.The value should not be negative.If the value is above 99, it will be displayed as "99+".The value will determine the size of the indicator when the type is set to "notification".If the value is above 99, the size will be set to "large".If the value is a number, it will be displayed as a number.s | number | undefined | undefined |
Inherited Attributes
| Name | Description | Type | Default | Inherited From |
|---|---|---|---|---|
| size | Size of component | SizeType | "medium" | Size |
| 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
Indicators are used to show the status of a user or any messages/notifications they might have.
Widgetbook
Inheritance
Object > DiagnosticableTree > Widget > StatelessWidget > ZetaStatelessWidget
Constructors
Constructor for ZetaIndicator.
ZetaIndicator.new({Key? key, bool? rounded, ZetaIndicatorType type = ZetaIndicatorType.notification, ZetaWidgetSize size = ZetaWidgetSize.large, IconData? icon, int? value, @Deprecated('No longer in use. Will be removed in future versions.') bool inverse = false, Color? color, String? semanticLabel})
Constructor for ZetaIndicator of type ZetaIndicatorType.icon.
ZetaIndicator.icon({Key? key, bool? rounded, ZetaWidgetSize size = ZetaWidgetSize.large, @Deprecated('No longer in use. Will be removed in future versions.') bool inverse = false, IconData? icon, Color? color, String? semanticLabel})
Constructor for ZetaIndicator of type ZetaIndicatorType.notification.
ZetaIndicator.notification({Key? key, bool? rounded, ZetaWidgetSize size = ZetaWidgetSize.large, @Deprecated('No longer in use. Will be removed in future versions.') bool inverse = false, int? value, Color? color, String? semanticLabel})
Properties
| Name | Description | Type | Features |
|---|---|---|---|
| color | Color for zeta indicator | Color? | final |
| hashCode | The hash code for this object. | int | no setter inherited |
| icon | Indicator icon, default: ZetaIcons.star. | IconData? | final |
| inverse | Inverse the border color. | bool | final |
| key | Controls how one widget replaces another widget in the tree. | Key? | final inherited |
| 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 |
| semanticLabel | Value passed into wrapping Semantics widget. | String? | final |
| size | The size of the ZetaIndicator. Default is ZetaWidgetSize.large. | ZetaWidgetSize | final |
| type | The type of the ZetaIndicator - icon or notification. | ZetaIndicatorType | final |
| value | Value for the type notification. | int? | final |
Methods
| Name | Description | Type | Features |
|---|---|---|---|
| build(BuildContext context) | Describes the part of the user interface represented by this widget. | Widget | override |
| copyWith({ZetaIndicatorType? type, ZetaWidgetSize? size, IconData? icon, int? value, bool? inverse, Key? key, String? semanticLabel}) | ZetaIndicator | undefined | |
| 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
https://www.figma.com/design/JesXQFLaPJLc1BdBM4sisI/%F0%9F%A6%93-ZDS---Components?node-id=24183-9865