Files
ui/docs/app/components/content/examples/context-menu/ContextMenuCustomSlotExample.vue
Sandro Circi 104852a55c chore: use new syntax for css variables (#3258)
Co-authored-by: Benjamin Canac <canacb1@gmail.com>
2025-02-07 11:24:14 +01:00

29 lines
755 B
Vue

<script setup lang="ts">
const loading = ref(true)
const items = [{
label: 'Refresh the Page',
slot: 'refresh'
}, {
label: 'Clear Cookies and Refresh'
}, {
label: 'Clear Cache and Refresh'
}]
</script>
<template>
<UContextMenu :items="items" :ui="{ content: 'w-48' }">
<div class="flex items-center justify-center rounded-md border border-dashed border-(--ui-border-accented) text-sm aspect-video w-72">
Right click here
</div>
<template #refresh-label>
{{ loading ? 'Refreshing...' : 'Refresh the Page' }}
</template>
<template #refresh-trailing>
<UIcon v-if="loading" name="i-lucide-refresh-cw" class="shrink-0 size-5 text-(--ui-primary) animate-spin" />
</template>
</UContextMenu>
</template>