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	'both'	Which axis/axes allow the dropdown content to flip to the other side when there is not enough space.
anchorOrigin	Popover2Nonant \| undefined	no	'bottom-left'	The point in a 3x3 grid on the anchor that should be used as the origin for the dropdown.
disabled	boolean \| null \| undefined	no	false	When true, the dropdown is disabled and closed
lightDismiss	boolean \| null \| undefined	no	true	When true, the dropdown 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
offsetX	number	no	0	The how many pixels to move the dropdown left (negative) or right (positive).
offsetY	number	no	0	The how many pixels to move the dropdown up (negative) or down (positive).
open	boolean \| null \| undefined	yes	false	When true, the dropdown is open
placement	'auto'\| Popover2Nonant \| undefined	no	'bottom-right'	How the dropdown should be positioned relative to the anchor point. When 'auto', placement follows anchorOrigin.
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>