Dropdown
Dropdown can open a menu or any other element when the button is clicked.
Usage
import { Dropdown } from 'stwui';
import Dropdown from 'stwui/dropdown';
With Placement
<script lang="ts">
import { Dropdown, Button, Badge } from 'stwui';
let visible1 = false;
let visible2 = false;
function closeDropdown1() {
visible1 = false;
}
function toggleDropdown1() {
visible1 = !visible1;
}
function closeDropdown2() {
visible2 = false;
}
function toggleDropdown2() {
visible2 = !visible2;
}
</script>
<Dropdown bind:visible={visible1}>
<Button slot="trigger" type="primary" on:click={toggleDropdown1}>Default Placement</Button>
<Dropdown.Items slot="items">
<Dropdown.Items.Item on:click={closeDropdown1} label="Item 1">
<Dropdown.Items.Item.Icon slot="icon" data={trash} />
</Dropdown.Items.Item>
<Dropdown.Items.Item on:click={closeDropdown1} label="Item 2">
<Dropdown.Items.Item.Icon slot="extra" data={trash} />
</Dropdown.Items.Item>
<Dropdown.Items.Item on:click={closeDropdown1} label="Notifications">
<Badge type="info" slot="extra">+99</Badge>
</Dropdown.Items.Item>
<Dropdown.Items.Divider />
<Button type="danger" class="w-full justify-between">
<Button.Leading slot="leading" data={home} />
Home
<Button.Trailing slot="trailing" data={home} />
</Button>
</Dropdown.Items>
</Dropdown>
<Dropdown bind:visible={visible2}>
<Button slot="trigger" type="primary" on:click={toggleDropdown2}>Placement Top</Button>
<Dropdown.Items slot="items" placement="top">
<Dropdown.Items.Item on:click={closeDropdown2} label="Item 1">
<Dropdown.Items.Item.Icon slot="icon" data={trash} />
</Dropdown.Items.Item>
<Dropdown.Items.Item on:click={closeDropdown2} label="Item 2">
<Dropdown.Items.Item.Icon slot="extra" data={trash} />
</Dropdown.Items.Item>
<Dropdown.Items.Item on:click={closeDropdown2} label="Notifications">
<Badge type="info" slot="extra">+99</Badge>
</Dropdown.Items.Item>
<Dropdown.Items.Divider />
<Button type="danger" class="w-full justify-between">
<Button.Leading slot="leading" data={home} />
Home
<Button.Trailing slot="trailing" data={home} />
</Button>
</Dropdown.Items>
</Dropdown>
With Alignment
<script lang="ts">
import { Dropdown, Button, Badge } from 'stwui';
let visible1 = false;
let visible2 = false;
let visible3 = false;
function closeDropdown1() {
visible1 = false;
}
function toggleDropdown1() {
visible1 = !visible1;
}
function closeDropdown2() {
visible2 = false;
}
function toggleDropdown2() {
visible2 = !visible2;
}
function closeDropdown3() {
visible3 = false;
}
function toggleDropdown3() {
visible3 = !visible3;
}
</script>
<Dropdown bind:visible={visible1}>
<Button slot="trigger" type="primary" on:click={toggleDropdown1}>Default Alignment</Button>
<Dropdown.Items slot="items">
<Dropdown.Items.Item on:click={closeDropdown1} label="Item 1">
<Dropdown.Items.Item.Icon slot="icon" data={trash} />
</Dropdown.Items.Item>
<Dropdown.Items.Item on:click={closeDropdown1} label="Item 2">
<Dropdown.Items.Item.Icon slot="extra" data={trash} />
</Dropdown.Items.Item>
<Dropdown.Items.Item on:click={closeDropdown1} label="Notifications">
<Badge type="info" slot="extra">+99</Badge>
</Dropdown.Items.Item>
<Dropdown.Items.Divider />
<Button type="danger" class="w-full justify-between">
<Button.Leading slot="leading" data={home} />
Home
<Button.Trailing slot="trailing" data={home} />
</Button>
</Dropdown.Items>
</Dropdown>
<Dropdown bind:visible={visible2}>
<Button slot="trigger" type="primary" on:click={toggleDropdown2}>Alignment Center</Button>
<Dropdown.Items slot="items" alignment="center">
<Dropdown.Items.Item on:click={closeDropdown2} label="Item 1">
<Dropdown.Items.Item.Icon slot="icon" data={trash} />
</Dropdown.Items.Item>
<Dropdown.Items.Item on:click={closeDropdown2} label="Item 2">
<Dropdown.Items.Item.Icon slot="extra" data={trash} />
</Dropdown.Items.Item>
<Dropdown.Items.Item on:click={closeDropdown2} label="Notifications">
<Badge type="info" slot="extra">+99</Badge>
</Dropdown.Items.Item>
<Dropdown.Items.Divider />
<Button type="danger" class="w-full justify-between">
<Button.Leading slot="leading" data={home} />
Home
<Button.Trailing slot="trailing" data={home} />
</Button>
</Dropdown.Items>
</Dropdown>
<Dropdown bind:visible={visible3}>
<Button slot="trigger" type="primary" on:click={toggleDropdown3}>Alignment End</Button>
<Dropdown.Items slot="items" alignment="end">
<Dropdown.Items.Item on:click={closeDropdown3} label="Item 1">
<Dropdown.Items.Item.Icon slot="icon" data={trash} />
</Dropdown.Items.Item>
<Dropdown.Items.Item on:click={closeDropdown3} label="Item 2">
<Dropdown.Items.Item.Icon slot="extra" data={trash} />
</Dropdown.Items.Item>
<Dropdown.Items.Item on:click={closeDropdown3} label="Notifications">
<Badge type="info" slot="extra">+99</Badge>
</Dropdown.Items.Item>
<Dropdown.Items.Divider />
<Button type="danger" class="w-full justify-between">
<Button.Leading slot="leading" data={home} />
Home
<Button.Trailing slot="trailing" data={home} />
</Button>
</Dropdown.Items>
</Dropdown>
Avatar Dropdown
<script lang="ts">
import { Dropdown, Button, Badge } from 'stwui';
let visible = false;
function closeDropdown() {
visible = false;
}
function toggleDropdown() {
visible = !visible;
}
</script>
<Dropdown bind:visible={visible}>
<button
aria-label="dropdown toggle"
slot="trigger"
on:click={toggleDropdown}
type="button"
class="bg-white flex text-sm rounded-full h-10 w-10 active:hover:animate-none active:hover:scale-95"
id="user-menu-button"
>
<span class="sr-only">Open user menu</span>
<img
class="h-full w-full rounded-full"
src="image-src"
alt=""
/>
</button>
<Dropdown.Items slot="items">
<Dropdown.Items.Item on:click={closeDropdown} label="Item 1" />
<Dropdown.Items.Item on:click={closeDropdown} label="Item 2" />
<Dropdown.Items.Item on:click={closeDropdown} label="Item 3" />
</Dropdown.Items>
</Dropdown>
Dropdown Slots
| trigger | |
| items | <Dropdown.Items slot="items" /> |
Dropdown.Items Props
| placement | 'top' | 'top-start' | 'top-end' | 'right' | 'right-start' | 'right-end' | 'left' | 'left-start' | 'left-end' | 'bottom' | 'bottom-start' | 'bottom-end' | bottom-start |
| offset | number | 8 |
Dropdown.Items Slots
| default | <Dropdown.Items.Item /> |
Dropdown.Items.Item Props
Dropdown.Items.Item Slots
| icon | <Dropdown.Items.Item.Icon slot="icon" /> |
| extra | |
Dropdown.Items.Item.Icon Props
| data | string (IconData) | |
| viewBox | string | 0 0 24 24 |
| size | string | 24px |
| width | string | 24px |
| height | string | 24px |
| color | string | currentColor |
| stroke | string | undefined | |
| fill | string | currentColor |
Dropdown Class Identifiers
| stwui-dropdown |
| stwui-dropdown-items |
| stwui-dropdown-item |
| stwui-dropdown-divider |
