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

    Class ZetaDropdownMenuButton

    Zeta Dropdown Menu Button places a button that when clicked opens a dropdown menu containing the items passed into it through the items prop.

    • The slotted text will be displayed on the dropdown menu button. open - Fired when the dropdown is opened. close - Fired when the dropdown is closed. input - Fired when the dropdown is closed.

    https://www.figma.com/file/JesXQFLaPJLc1BdBM4sisI/🦓-ZDS---Components?node-id=22391-10146

    https://zeta-ds.web.app/web/storybook/?path=/docs/dropdown--docs

    Hierarchy

    • FormFieldInterface<this> & LitElement<this> & ContourableInterface<this> & FlavoredInterface<
          this,
      > & SizeInterface<this>
      • ZetaDropdownMenuButton
    Index

    Other

    constructor anchor checked? direction? disabled droppable flavor icon indeterminate input internals items max min name open placeholder required rounded size type value styles handleBlur handleChange handleFocus handleInput

    rendering

    render

    updates

    firstUpdated

    Other

    • Returns ZetaDropdownMenuButton

    anchor: HTMLElement
    checked?: boolean
    direction?: "left" | "right" | "top" | "bottom" = "bottom"

    The direction of the droppable relative to the anchor. Defaults to bottom if left undefined.

    disabled: boolean
    droppable: ZetaDroppable
    flavor: ButtonFlavor = "primary"
    icon: string = "chevron_left"
    indeterminate: boolean
    input: HTMLInputElement
    internals: ElementInternals
    items: ZetaDropdownItem[] = ...

    Array of items to populate the dropdown

    max: number
    min: number
    name: string = "default"

    The name of the dropdown menu button for form control

    open: boolean = false

    Controls the state of the dropdown menu.

    placeholder: string
    required: boolean
    rounded: boolean
    size: "small" | "medium" | "large"
    type: InputType = "text-dropdown"

    The type of dropdown.

    • "text-dropdown" - A dropdown with a default dropdown buttons.
    • "checkbox-dropdown" - A dropdown with checkboxes.
    • "radio-dropdown" - A dropdown with radio buttons.
    value: string
    styles: CSSResultGroup[] = ...

    • Parameters

      • event: FocusEvent

      Returns void

    • Parameters

      • event: FocusEvent

      Returns void

    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>

    updates

    • Invoked when the element is first updated. Implement to perform one time work on the element after update.

      firstUpdated() {
        this.renderRoot.getElementById('my-text-area').focus();
      }

      Setting properties inside this method will trigger the element to update again after this update cycle completes.

      Returns void

    Settings

    Member Visibility

    On This Page

    Other
    rendering
    updates