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 |
---|
| disabled | boolean | null | undefined | false |
| icon | Snippet | undefined | undefined |
| onOpen | (open: boolean | null | undefined) => void | undefined |
| open | boolean | null | undefined | false |
| stayOpenOnClickAway | boolean | null | undefined | false |
| value | string | Snippet | undefined | undefined |
| button | string | Snippet | undefined | undefined |
| buttonIcon | string | Snippet | undefined | undefined |
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>