extern/egroupware_official
1
0
Fork 0
mirror of https://github.com/EGroupware/egroupware.git synced 2024-11-22 07:53:39 +01:00
Code Issues Packages Projects Releases Wiki Activity

Et2DropdownButton make position adjustable by passing placement attribute on to sl-dropdown

Browse Source
This commit is contained in:
milan 2024-09-12 23:58:37 +02:00
parent 2cfab31d19
commit 9d8224453e
1 changed files with 5 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
api/js/etemplate/Et2DropdownButton/Et2DropdownButton.ts
View File

@ -15,6 +15,7 @@ import {Et2WidgetWithSelectMixin} from "../Et2Select/Et2WidgetWithSelectMixin";
import {SelectOption} from "../Et2Select/FindSelectOptions"; import {SelectOption} from "../Et2Select/FindSelectOptions";
import shoelace from "../Styles/shoelace"; import shoelace from "../Styles/shoelace";
import {ifDefined} from "lit/directives/if-defined.js"; import {ifDefined} from "lit/directives/if-defined.js";
import {property} from "lit/decorators/property.js";
/** /**
* A split button - a button with a dropdown list * A split button - a button with a dropdown list
@ -75,6 +76,9 @@ export class Et2DropdownButton extends Et2WidgetWithSelectMixin(LitElement)
}; };
} }
@property()
placement:string = "bottom-end";
// Make sure imports stay // Make sure imports stay
private _group : SlButtonGroup; private _group : SlButtonGroup;
private _dropdow : SlDropdown; private _dropdow : SlDropdown;
@ -115,7 +119,7 @@ export class Et2DropdownButton extends Et2WidgetWithSelectMixin(LitElement)
> >
${this.label} ${this.label}
</sl-button> </sl-button>
<sl-dropdown placement="bottom-end" hoist part="dropdown"> <sl-dropdown placement=${this.placement} hoist part="dropdown">
<slot name="trigger" slot="trigger"> <slot name="trigger" slot="trigger">
<sl-button part="trigger" size="${egwIsMobile() ? "large" : "medium"}" slot="trigger" caret <sl-button part="trigger" size="${egwIsMobile() ? "large" : "medium"}" slot="trigger" caret
?disabled=${this.disabled}></sl-button> ?disabled=${this.disabled}></sl-button>