Dropdown2

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

Code

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

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

Members

Property Name	Type	Bindable	Default	Comment
allowFlip	Popover2FlipAxis \| undefined	no	undefined	Which axis/axes allow the dropdown content to flip to the other side when there is not enough space.
disabled	boolean \| null \| undefined	no	false	When true, the dropdown is disabled and closed
lightDismiss	boolean \| null \| undefined	no	true	When true, the dropdown content closes when another element is clicked or focused. Also closes when another dropdown opens.
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	yes	false	When true, the dropdown is open
value	string \| Snippet \| undefined	no	undefined	The value to display.

Considerations

Dropdown2 uses Popover2.
Includes HTMLDivElement props, events, and methods.

Anatomy

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