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.

Slot

  • The slotted text will be displayed on the dropdown menu button.

Figma

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

Storybook

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

Hierarchy

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

Other

constructor anchor checked? direction? disabled droppable flavor icon indeterminate input internals items name open required rounded size type value styles handleChange

rendering

render

updates

firstUpdated

Other

constructor

  • new ZetaDropdownMenuButton(): ZetaDropdownMenuButton

  • Returns ZetaDropdownMenuButton

anchor

anchor: HTMLElement

Optionalchecked

checked?: boolean

Optionaldirection

direction?:
    | "left"
    | "right"
    | "bottom"
    | "top" = "bottom"

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

disabled

disabled: boolean

droppable

droppable: ZetaDroppable

flavor

flavor: Flavor

icon

icon: string = "chevron_left"

indeterminate

indeterminate: boolean

input

input: HTMLInputElement

internals

internals: ElementInternals

items

items: ZetaDropdownItem[] = ...

Array of items to populate the dropdown

name

name: string = "default"

The name of the dropdown menu button for form control

open

open: boolean = false

Controls the state of the dropdown menu.

required

required: boolean

rounded

rounded: boolean

size

size: "small" | "medium" | "large"

type

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

value: string

Staticstyles

styles: CSSResultGroup[] = ...

handleChange

rendering

Protectedrender

  • render(): TemplateResult<1>

  • 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

ProtectedfirstUpdated

  • firstUpdated(): void

  • 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