UI: adde position to dropdown component (#3852)

This commit is contained in:
Pavel Laptev 2024-05-24 14:01:23 +02:00 committed by GitHub
parent d9b37ee75b
commit 493f64162a
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 13 additions and 1 deletions

View File

@ -13,6 +13,7 @@
export let help = '';
export let badgeLabel: string | number | undefined = undefined;
export let badgeIcon: keyof typeof iconsJson | undefined = undefined;
export let dropdownPosition: 'top' | 'bottom' = 'bottom';
let visible = false;
export function show() {
@ -63,6 +64,8 @@
}}
bind:this={contextMenuContainer}
style:display={visible ? 'block' : 'none'}
class:dropdown-top={dropdownPosition == 'top'}
class:dropdown-bottom={dropdownPosition == 'bottom'}
>
<slot name="context-menu" />
</div>
@ -83,9 +86,17 @@
.context-menu-container {
position: absolute;
right: 0;
z-index: var(--z-floating);
}
.dropdown-top {
bottom: 100%;
padding-bottom: var(--size-4);
z-index: var(--z-floating);
}
.dropdown-bottom {
top: 100%;
padding-top: var(--size-4);
}
.wide {

View File

@ -62,6 +62,7 @@
bind:this={dropDown}
{wide}
{disabled}
dropdownPosition="top"
on:click={() => {
dispatch('trigger', { action });
}}