sterling-svelte  2.0.3
A modern, accessible, lightweight UI component library for Svelte.

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 NameTypeDefaultComment
disabledboolean | null | undefinedfalseWhen true, the dropdown is disabled and closed
iconSnippet | undefinedundefinedThe icon after the value. When undefined, displays a chevron.
onOpen(open: boolean | null | undefined) => voidundefinedCalled when the dropdown opens or closes
openboolean | null | undefinedfalseWhen true, the dropdown is open
stayOpenOnClickAwayboolean | null | undefinedfalseWhen true and the user clicks away from the dropdown, it remains open
valuestring | Snippet | undefinedundefinedThe value to display.
buttonstring | Snippet | undefinedundefinedDeprecated. Use icon instead.
buttonIconstring | Snippet | undefinedundefinedDeprecated. 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>