Dropdown

A value and a <button> to open/close a floating content box

Code

<script lang="ts">
  import { Dropdown } from '@geoffcox/sterling-svelte';
</script>

<Dropdown>
  <svelte:fragment slot="value">
    // dropdown value
  </svelte:fragment>
  <div>
    // dropdown content
  </div>
</Dropdown>

Members

Property Name	Type	Default	Comment
disabled	string	false	When true, the dropdown is disabled and closed
open	string	false	When true, the dropdown is open
stayOpenOnClickAway	string	false	When true and the user clicks away from the dropdown, it remains open
variant	string	''	Additional class names to apply

	Event Name	Data	Comment
	open	{open: boolean}	Raised when the dropdown opens or closes

Considerations

Includes HTMLDivElement props, event, and methods

Anatomy

<div class="sterling-dropdown">
  <div class="value">
    <slot name="value" {disabled} {open} {variant} />
  </div>
  <slot name="button" {disabled} {open} {variant}>
    <div class="button">
      <slot name="icon" {disabled} {open} {variant}>
        <div class="chevron" />
      </slot>
    </div>
  </slot>
  <Popover>
    <div class="sterling-dropdown-popup-content">
      <slot {disabled} {open} {variant} />
    </div>
  </Popover>
</div>