Add align option

This commit is contained in:
Christian Cueni 2022-08-04 11:38:19 +02:00
parent 15adae1b30
commit 5ed546412f
2 changed files with 5 additions and 2 deletions

View File

@ -8,7 +8,8 @@ const props = defineProps<{
buttonText: string, buttonText: string,
listItems: [ listItems: [
[object] [object]
] ],
align: 'left' | 'right'
}>() }>()
const emit = defineEmits<{ const emit = defineEmits<{
@ -36,7 +37,8 @@ const emit = defineEmits<{
leave-to-class="transform scale-95 opacity-0" leave-to-class="transform scale-95 opacity-0"
> >
<MenuItems <MenuItems
class="absolute left-0 mt-2 px-6 w-56 origin-top-right divide-y divide-gray-500 bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none" class="absolute mt-2 px-6 w-56 origin-top-right divide-y divide-gray-500 bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
:class="[align === 'left' ? 'left-0' : 'right-0']"
> >
<div class="" v-for="section in listItems" :key="section"> <div class="" v-for="section in listItems" :key="section">
<div class="px-1 py-1" v-for="item in section" :key="item"> <div class="px-1 py-1" v-for="item in section" :key="item">

View File

@ -338,6 +338,7 @@ function log(data: any) {
:button-classes="['btn-primary']" :button-classes="['btn-primary']"
:list-items="dropdownData" :list-items="dropdownData"
:button-text="'Click me'" :button-text="'Click me'"
:align="'left'"
@select="log" @select="log"
/> />
</div> </div>