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	Bindable	Default	Comment
disabled	boolean \| null \| undefined	no	false	When true, the dropdown is disabled and closed
icon	Snippet \| undefined	no	undefined	The icon after the value. When undefined, displays a chevron.
onOpen	(open: boolean \| null \| undefined) => void	no	undefined	Called when the dropdown opens or closes
open	boolean \| null \| undefined	no	false	When true, the dropdown is open
stayOpenOnClickAway	boolean \| null \| undefined	no	false	When true and the user clicks away from the dropdown, it remains open
value	string \| Snippet \| undefined	no	undefined	The value to display.
button	string \| Snippet \| undefined	no	undefined	Deprecated. Use icon instead.
buttonIcon	string \| Snippet \| undefined	no	undefined	Deprecated. Use icon instead.

Considerations

Includes HTMLDivElement props, events, and methods.

Anatomy

<div class="sterling-dropdown">
  <div class="value">
    {@render value()}>
  </div>
  <div class="icon">
    {@render icon()}
  </div>
  <Popover>
    <div class="sterling-dropdown-content">
      {@render children()}
    </div>
  </Popover>
</div>