Add align option
This commit is contained in:
parent
15adae1b30
commit
5ed546412f
|
|
@ -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">
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue