@zebra-fed/zeta-web
    Preparing search index...

    Class ZetaIndicator

    Indicators are used to show the status of a user or any messages/notifications they might have.

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

    https://www.figma.com/file/JesXQFLaPJLc1BdBM4sisI/🦓-ZDS---Components?type=design&node-id=22000-10045&mode=design&t=6mhOcUUr3tgxxFdd-0

    https://www.figma.com/file/JesXQFLaPJLc1BdBM4sisI/🦓-ZDS---Components?type=design&node-id=22000-10072&mode=design&t=6mhOcUUr3tgxxFdd-0

    https://design.zebra.com/web/storybook/?path=/docs/components-badges--docs

    Hierarchy (View Summary)

    Index

    Other

    constructor icon? rounded size type value? styles

    rendering

    render

    Other

    • Returns ZetaIndicator

    icon?: ZetaIconName

    Icon to be shown on icon type indicator.

    Full list of icons can be found at Zeta Icons.

    rounded: boolean
    size: "small" | "medium" | "large"
    type: "icon" | "notification" = "notification"

    Whether to render as a notification or icon indicator.

    value?: number

    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

    styles: CSSResultGroup[] = ...

    rendering

    • Invoked on each update to perform rendering tasks. This method may return any value renderable by lit-html's ChildPart - typically a TemplateResult. Setting properties inside this method will not trigger the element to update.

      Returns TemplateResult<1>

    Settings

    Member Visibility

    On This Page

    Other
    rendering