Avatar
- Web Components
- Flutter
Demo
zeta-web v0.6.6
Web Components
An avatar is a visual representation of a user or entity.
Storybook
https://design.zebra.com/web/storybook/?path=/docs/components-avatar--docs
Slots
| Name | Description | Type |
|---|---|---|
| default | The content of the avatar. Should be an img element, a zeta-icon, or text. | text |
| status | The content of the status slot. Usually used for indicators or badges. | text |
Attributes
| Name | Description | Type | Default |
|---|---|---|---|
| show-ring | Shows the ring around the avatar. | boolean | false |
| show-close | Shows the close icon. | boolean | false |
| size | The size of the avatar.Possible values are "xxxs", "xxs", "xs", "s", "m", "l", "xl", "xxl", "xxxl". | 'xxxs' | 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl' | 'xxxl' | undefined | undefined |
CSS Properties
| Name | Description |
|---|---|
| --avatar-color | The color of the avatar |
| --avatar-initials-color | The color of the initials |
Demo
An avatar is a visual representation of a user or entity.
Widgetbook
https://design.zebra.com/flutter/widgetbook/index.html#/?path=components/avatar/zetaavatar/avatar
Inheritance
Object > DiagnosticableTree > Widget > StatelessWidget > ZetaStatelessWidget
Constructors
Constructor for ZetaAvatar
ZetaAvatar.new({Key? key, ZetaAvatarSize size = ZetaAvatarSize.xl, Widget? image, String? initials, Color? backgroundColor, Widget? lowerBadge, Widget? upperBadge, Color? borderColor, String? semanticLabel, String? semanticUpperBadgeLabel, String? semanticLowerBadgeLabel, TextStyle? initialTextStyle, String? label, TextStyle? labelTextStyle, int labelMaxLines = 1, VoidCallback? onTap})
Constructor for ZetaAvatar with initials from a full name.
ZetaAvatar.fromName({Key? key, required String name, ZetaAvatarSize size = ZetaAvatarSize.xl, Widget? lowerBadge, Widget? upperBadge, Color? borderColor, Color? backgroundColor, String? semanticLabel = 'avatar', String? semanticUpperBadgeLabel = 'upperBadge', String? semanticLowerBadgeLabel = 'lowerBadge', TextStyle? initialTextStyle, String? label, TextStyle? labelTextStyle, int labelMaxLines = 1, VoidCallback? onTap})
Constructor for ZetaAvatar with image.
ZetaAvatar.image({Key? key, ZetaAvatarSize size = ZetaAvatarSize.xl, Widget? image, Widget? lowerBadge, Widget? upperBadge, Color? borderColor, String? semanticLabel = 'avatar', String? semanticUpperBadgeLabel = 'upperBadge', String? semanticLowerBadgeLabel = 'lowerBadge', String? label, TextStyle? labelTextStyle, int labelMaxLines = 1, VoidCallback? onTap})
Constructor for ZetaAvatar with initials.
ZetaAvatar.initials({Key? key, required String? initials, ZetaAvatarSize size = ZetaAvatarSize.xl, Widget? lowerBadge, Widget? upperBadge, Color? borderColor, Color? backgroundColor, String? semanticLabel = 'avatar', String? semanticUpperBadgeLabel = 'upperBadge', String? semanticLowerBadgeLabel = 'lowerBadge', TextStyle? initialTextStyle, String? label, TextStyle? labelTextStyle, int labelMaxLines = 1, VoidCallback? onTap})
Properties
| Name | Description | Type | Features |
|---|---|---|---|
| backgroundColor | Background color. | Color? | final |
| borderColor | Shows border around the avatar | Color? | final |
| hashCode | The hash code for this object. | int | no setter inherited |
| image | Image to display for avatar. | Widget? | final |
| initials | String to display initials. | String? | final |
| initialTextStyle | Text style for initials. | TextStyle? | final |
| key | Controls how one widget replaces another widget in the tree. | Key? | final inherited |
| label | Label to display below the avatar. | String? | final |
| labelMaxLines | Maximum number of lines for label. | int | final |
| labelTextStyle | Text style for label. | TextStyle? | final |
| lowerBadge | Status badge shown at lower right corner of avatar. | Widget? | final |
| onTap | Callback when avatar 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 |
| semanticLabel | Value passed into wrapping Semantics widget. | String? | final |
| semanticLowerBadgeLabel | Value passed into wrapping Semantics widget for lower badge. | String? | final |
| semanticUpperBadgeLabel | Value passed into wrapping Semantics widget for upper badge. | String? | final |
| size | The size of the ZetaAvatar | ZetaAvatarSize | final |
| upperBadge | Notification Badge shown at top right corner of avatar. | Widget? | final |
Methods
| Name | Description | Type | Features |
|---|---|---|---|
| build(BuildContext context) | Describes the part of the user interface represented by this widget. | Widget | override |
| copyWith({ZetaAvatarSize? size, Widget? image, String? initials, Color? backgroundColor, Color? borderColor, Widget? lowerBadge, Widget? upperBadge, String? label, TextStyle? labelTextStyle, int? labelMaxLines, VoidCallback? onTap, Key? key}) | ZetaAvatar | 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