Class ZetaDroppable

Zeta Droppable is a container that can be opened and closed and can be attached to an anchor which will determine it's position.

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

  • ContourableInterface<this> & LitElement<this>
    • ZetaDroppable

Other

constructor alignment? anchor? direction? matchParentWidth open rounded slottedElements styles

rendering

render

updates

updated

Other

constructor

  • new ZetaDroppable(): ZetaDroppable

  • Returns ZetaDroppable

Optionalalignment

alignment?: "start" | "end" | "center"

The alignment of the droppable relative to the anchor

Optionalanchor

anchor?: HTMLElement

The anchor element to position the droppable

Optionaldirection

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

The direction of the droppable relative to the anchor

matchParentWidth

matchParentWidth: boolean = false

Controls whether the droppable is fit to the width of the anchor

open

open: boolean = false

Controls the open state of the droppable.

rounded

rounded: boolean

slottedElements

slottedElements: HTMLElement[]

Staticstyles

styles: CSSResultGroup[] = ...

rendering

Protectedrender

  • render(): typeof nothing | 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 typeof nothing | TemplateResult<1>

updates

Protectedupdated

  • updated(): void

  • Invoked whenever the element is updated. Implement to perform post-updating tasks via DOM APIs, for example, focusing an element.

    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