arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-31 12:17:54 +01:00
Code Issues Packages Projects Releases Wiki Activity

playground(popover): add all sides for click mode

Browse Source
This commit is contained in:
Benjamin Canac
2024-04-04 15:13:08 +02:00
parent b43fff6b07
commit 774858187e
1 changed files with 41 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
playground/pages/popover.vue
View File

@@ -14,19 +14,47 @@ function send () {
<template> <template>
<div class="text-center"> <div class="text-center">
<UPopover v-model:open="open" arrow> <div>
<UButton label="Click me" color="white" /> <UPopover arrow :content="{ side: 'top' }">
<UButton label="Click me top" color="white" />
<template #content> <template #content>
<div class="flex justify-center gap-2 p-4 w-48"> <div class="w-48 h-16" />
<UButton label="Close" color="gray" @click="open = false" /> </template>
<UButton label="Send" color="black" trailing-icon="i-heroicons-paper-airplane" :loading="loading" @click="send" /> </UPopover>
</div>
</template> <div class="flex items-center gap-2 my-2">
</UPopover> <UPopover arrow :content="{ side: 'left' }">
<UButton label="Click me top" color="white" />
<template #content>
<div class="w-48 h-16" />
</template>
</UPopover>
<UPopover arrow :content="{ side: 'right' }">
<UButton label="Click me top" color="white" />
<template #content>
<div class="w-48 h-16" />
</template>
</UPopover>
</div>
<UPopover v-model:open="open" arrow>
<UButton label="Click me bottom" color="white" />
<template #content>
<div class="flex justify-center gap-2 p-4 w-48">
<UButton label="Close" color="gray" @click="open = false" />
<UButton label="Send" color="black" trailing-icon="i-heroicons-paper-airplane" :loading="loading" @click="send" />
</div>
</template>
</UPopover>
</div>
<div class="mt-24"> <div class="mt-24">
<UPopover mode="hover" :content="{ side: 'top' }"> <UPopover mode="hover" arrow :content="{ side: 'top' }">
<UButton label="Hover me top" color="white" /> <UButton label="Hover me top" color="white" />
<template #content> <template #content>
@@ -35,7 +63,7 @@ function send () {
</UPopover> </UPopover>
<div class="flex items-center gap-2 my-2"> <div class="flex items-center gap-2 my-2">
<UPopover mode="hover" :content="{ side: 'left' }"> <UPopover mode="hover" arrow :content="{ side: 'left' }">
<UButton label="Hover me left" color="white" /> <UButton label="Hover me left" color="white" />
<template #content> <template #content>
@@ -43,7 +71,7 @@ function send () {
</template> </template>
</UPopover> </UPopover>
<UPopover mode="hover" :content="{ side: 'right' }"> <UPopover mode="hover" arrow :content="{ side: 'right' }">
<UButton label="Hover me right" color="white" /> <UButton label="Hover me right" color="white" />
<template #content> <template #content>
@@ -52,7 +80,7 @@ function send () {
</UPopover> </UPopover>
</div> </div>
<UPopover mode="hover"> <UPopover mode="hover" arrow>
<UButton label="Hover me bottom" color="white" /> <UButton label="Hover me bottom" color="white" />
<template #content> <template #content>