arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-30 19:57:55 +01:00
Code Issues Packages Projects Releases Wiki Activity

playground(modal): update

Browse Source
This commit is contained in:
Benjamin Canac
2024-03-18 15:51:00 +01:00
parent 5d1d5b33e8
commit 5d76539f3c
1 changed files with 8 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
playground/pages/modal.vue
View File

@@ -26,20 +26,24 @@
<UButton label="Open without transition" color="white" /> <UButton label="Open without transition" color="white" />
</UModal> </UModal>
<UModal title="Modal without portal" description="This modal has `portal: false` prop." :portal="false">
<UButton label="Open without portal" color="gray" />
</UModal>
<UModal title="Modal fullscreen" description="This modal has `fullscreen: true` prop." fullscreen> <UModal title="Modal fullscreen" description="This modal has `fullscreen: true` prop." fullscreen>
<UButton label="Open fullscreen" color="gray" /> <UButton label="Open fullscreen" color="white" />
</UModal> </UModal>
<UModal title="Modal prevent close" description="This modal has `prevent-close: true` prop so it won't close when clicking outside." prevent-close> <UModal title="Modal prevent close" description="This modal has `prevent-close: true` prop so it won't close when clicking outside." prevent-close>
<UButton label="Open unclosable" color="white" /> <UButton label="Open unclosable" color="gray" />
</UModal> </UModal>
<UModal title="Modal without close button" description="This modal has `close: null` prop." :close="null"> <UModal title="Modal without close button" description="This modal has `close: null` prop." :close="null">
<UButton label="Open without close button" color="gray" /> <UButton label="Open without close button" color="white" />
</UModal> </UModal>
<UModal title="Modal with custom close button" description="The `close` prop inherits from the Button props." :close="{ color: 'primary', variant: 'solid', size: 'xs' }" :ui="{ close: 'top-3.5 rounded-full' }"> <UModal title="Modal with custom close button" description="The `close` prop inherits from the Button props." :close="{ color: 'primary', variant: 'solid', size: 'xs' }" :ui="{ close: 'top-3.5 rounded-full' }">
<UButton label="Open with custom close button" color="white" /> <UButton label="Open with custom close button" color="gray" />
</UModal> </UModal>
</div> </div>
</template> </template>