Dropdown

A value and associated button to open/close a floating content box.

Code

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

<Dropdown bind:open>
  {#snippet value()}
    <!-- TODO: value display -->
  {/snippet}
  {#snippet content()}
    <!-- TODO: dropdown content -->
  {/snippet}
</Dropdown>

Members

Property Name	Type	Default	Comment
button	string \| Snippet \| undefined	undefined	The button to open/close the dropdown.
buttonIcon	string \| Snippet \| undefined	undefined	The icon within the button. When undefined, displays a chevron.
disabled	boolean \| null \| undefined	false	When true, the dropdown is disabled and closed
onOpen	(open: boolean \| null \| undefined) => void	undefined	Called when the dropdown opens or closes
open	boolean \| null \| undefined	false	When true, the dropdown is open
stayOpenOnClickAway	boolean \| null \| undefined	false	When true and the user clicks away from the dropdown, it remains open
value	string \| Snippet \| undefined	undefined	The value to display.

Considerations

Includes HTMLDivElement props, events, and methods.

Anatomy

dropdown (<div>)
  value container (<div>)
    value (<string | Snippet>)
  button (<Snippet>)
    button container <div>
      buttonIcon <Snippet>
        chevron (<div>)
  dropdown content (<Popover>)
    content (<div>)
      children (<Snippet>)