Connect Bootstrap dropdown with trigger via classes/props

This commit is contained in:
Henrik Giesel 2021-06-24 20:55:47 +02:00
parent 3ad86dfb33
commit dbf1472029
2 changed files with 13 additions and 6 deletions

View file

@ -51,7 +51,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
} }
</script> </script>
<div bind:this={menu} class="dropdown dropdown-reverse" on:keydown={onKeydown}> <div bind:this={menu} class="dropup dropdown-reverse" on:keydown={onKeydown}>
<slot {triggerId} {triggerClass} {dropdown} /> <slot {triggerId} {triggerClass} {dropdown} />
<DropdownMenu labelledby={triggerId}> <DropdownMenu labelledby={triggerId}>
@ -62,8 +62,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
</div> </div>
<style lang="scss"> <style lang="scss">
.dropdown-reverse :global(.dropdown-menu) { /* .dropdown-reverse :global(.dropdown-menu) { */
display: flex; /* display: flex; */
flex-direction: column-reverse; /* flex-direction: column-reverse; */
} /* } */
</style> </style>

View file

@ -70,7 +70,14 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
on:nameChosen={setTagname} on:nameChosen={setTagname}
on:accept={onAccept} on:accept={onAccept}
> >
<label id={triggerId} class={`ps-2 pe-1 ${triggerClass}`} data-value={name}> <label
id={triggerId}
class={`ps-2 pe-1 ${triggerClass}`}
data-value={name}
data-bs-toggle="dropdown"
aria-expanded="false"
data-bs-reference="parent"
>
<input <input
bind:this={input} bind:this={input}
type="text" type="text"