458 lines
9.2 KiB
JavaScript
458 lines
9.2 KiB
JavaScript
export const activatorAndTooltip = { ts: `<script lang="ts" setup>
|
|
import { mergeProps } from 'vue'
|
|
|
|
const items = [{ title: 'Option 1', value: 'Option 1' }, { title: 'Option 2', value: 'Option 2' }, { title: 'Option 3', value: 'Option 3' }]
|
|
</script>
|
|
|
|
<template>
|
|
<VMenu location="top">
|
|
<template #activator="{ props: menuProps }">
|
|
<VTooltip location="top">
|
|
<template #activator="{ props: tooltipProps }">
|
|
<VBtn v-bind="mergeProps(menuProps, tooltipProps)">
|
|
Dropdown w/ Tooltip
|
|
</VBtn>
|
|
</template>
|
|
<span>I am a Tooltip</span>
|
|
</VTooltip>
|
|
</template>
|
|
|
|
<VList :items="items" />
|
|
</VMenu>
|
|
</template>
|
|
`, js: `<script setup>
|
|
import { mergeProps } from 'vue'
|
|
|
|
const items = [
|
|
{
|
|
title: 'Option 1',
|
|
value: 'Option 1',
|
|
},
|
|
{
|
|
title: 'Option 2',
|
|
value: 'Option 2',
|
|
},
|
|
{
|
|
title: 'Option 3',
|
|
value: 'Option 3',
|
|
},
|
|
]
|
|
</script>
|
|
|
|
<template>
|
|
<VMenu location="top">
|
|
<template #activator="{ props: menuProps }">
|
|
<VTooltip location="top">
|
|
<template #activator="{ props: tooltipProps }">
|
|
<VBtn v-bind="mergeProps(menuProps, tooltipProps)">
|
|
Dropdown w/ Tooltip
|
|
</VBtn>
|
|
</template>
|
|
<span>I am a Tooltip</span>
|
|
</VTooltip>
|
|
</template>
|
|
|
|
<VList :items="items" />
|
|
</VMenu>
|
|
</template>
|
|
` }
|
|
|
|
export const basic = { ts: `<script lang="ts" setup>
|
|
const menusVariant = ['primary', 'secondary', 'success', 'info', 'warning', 'error']
|
|
const items = [{ title: 'Option 1', value: 'Option 1' }, { title: 'Option 2', value: 'Option 2' }, { title: 'Option 3', value: 'Option 3' }]
|
|
</script>
|
|
|
|
<template>
|
|
<div class="demo-space-x">
|
|
<VMenu
|
|
v-for="menu in menusVariant"
|
|
:key="menu"
|
|
>
|
|
<template #activator="{ props }">
|
|
<VBtn
|
|
:color="menu"
|
|
v-bind="props"
|
|
>
|
|
{{ menu }}
|
|
</VBtn>
|
|
</template>
|
|
|
|
<VList :items="items" />
|
|
</VMenu>
|
|
</div>
|
|
</template>
|
|
`, js: `<script setup>
|
|
const menusVariant = [
|
|
'primary',
|
|
'secondary',
|
|
'success',
|
|
'info',
|
|
'warning',
|
|
'error',
|
|
]
|
|
|
|
const items = [
|
|
{
|
|
title: 'Option 1',
|
|
value: 'Option 1',
|
|
},
|
|
{
|
|
title: 'Option 2',
|
|
value: 'Option 2',
|
|
},
|
|
{
|
|
title: 'Option 3',
|
|
value: 'Option 3',
|
|
},
|
|
]
|
|
</script>
|
|
|
|
<template>
|
|
<div class="demo-space-x">
|
|
<VMenu
|
|
v-for="menu in menusVariant"
|
|
:key="menu"
|
|
>
|
|
<template #activator="{ props }">
|
|
<VBtn
|
|
:color="menu"
|
|
v-bind="props"
|
|
>
|
|
{{ menu }}
|
|
</VBtn>
|
|
</template>
|
|
|
|
<VList :items="items" />
|
|
</VMenu>
|
|
</div>
|
|
</template>
|
|
` }
|
|
|
|
export const customTransitions = { ts: `<script lang="ts" setup>
|
|
const items = [{ title: 'Option 1', value: 'Option 1' }, { title: 'Option 2', value: 'Option 2' }, { title: 'Option 3', value: 'Option 3' }]
|
|
</script>
|
|
|
|
<template>
|
|
<div class="demo-space-x">
|
|
<VMenu transition="scale-transition">
|
|
<template #activator="{ props }">
|
|
<VBtn v-bind="props">
|
|
Scale Transition
|
|
</VBtn>
|
|
</template>
|
|
|
|
<VList :items="items" />
|
|
</VMenu>
|
|
|
|
<VMenu transition="slide-x-transition">
|
|
<template #activator="{ props }">
|
|
<VBtn v-bind="props">
|
|
Slide X Transition
|
|
</VBtn>
|
|
</template>
|
|
|
|
<VList :items="items" />
|
|
</VMenu>
|
|
|
|
<VMenu transition="slide-y-transition">
|
|
<template #activator="{ props }">
|
|
<VBtn v-bind="props">
|
|
Slide Y Transition
|
|
</VBtn>
|
|
</template>
|
|
|
|
<VList :items="items" />
|
|
</VMenu>
|
|
</div>
|
|
</template>
|
|
`, js: `<script setup>
|
|
const items = [
|
|
{
|
|
title: 'Option 1',
|
|
value: 'Option 1',
|
|
},
|
|
{
|
|
title: 'Option 2',
|
|
value: 'Option 2',
|
|
},
|
|
{
|
|
title: 'Option 3',
|
|
value: 'Option 3',
|
|
},
|
|
]
|
|
</script>
|
|
|
|
<template>
|
|
<div class="demo-space-x">
|
|
<VMenu transition="scale-transition">
|
|
<template #activator="{ props }">
|
|
<VBtn v-bind="props">
|
|
Scale Transition
|
|
</VBtn>
|
|
</template>
|
|
|
|
<VList :items="items" />
|
|
</VMenu>
|
|
|
|
<VMenu transition="slide-x-transition">
|
|
<template #activator="{ props }">
|
|
<VBtn v-bind="props">
|
|
Slide X Transition
|
|
</VBtn>
|
|
</template>
|
|
|
|
<VList :items="items" />
|
|
</VMenu>
|
|
|
|
<VMenu transition="slide-y-transition">
|
|
<template #activator="{ props }">
|
|
<VBtn v-bind="props">
|
|
Slide Y Transition
|
|
</VBtn>
|
|
</template>
|
|
|
|
<VList :items="items" />
|
|
</VMenu>
|
|
</div>
|
|
</template>
|
|
` }
|
|
|
|
export const location = { ts: `<script lang="ts" setup>
|
|
const items = [{ title: 'Option 1', value: 'Option 1' }, { title: 'Option 2', value: 'Option 2' }, { title: 'Option 3', value: 'Option 3' }]
|
|
</script>
|
|
|
|
<template>
|
|
<div class="demo-space-x">
|
|
<VMenu location="top">
|
|
<template #activator="{ props }">
|
|
<VBtn v-bind="props">
|
|
Top
|
|
</VBtn>
|
|
</template>
|
|
|
|
<VList :items="items" />
|
|
</VMenu>
|
|
|
|
<VMenu location="bottom">
|
|
<template #activator="{ props }">
|
|
<VBtn v-bind="props">
|
|
Bottom
|
|
</VBtn>
|
|
</template>
|
|
|
|
<VList :items="items" />
|
|
</VMenu>
|
|
|
|
<VMenu location="start">
|
|
<template #activator="{ props }">
|
|
<VBtn v-bind="props">
|
|
Start
|
|
</VBtn>
|
|
</template>
|
|
|
|
<VList :items="items" />
|
|
</VMenu>
|
|
|
|
<VMenu location="end">
|
|
<template #activator="{ props }">
|
|
<VBtn v-bind="props">
|
|
End
|
|
</VBtn>
|
|
</template>
|
|
|
|
<VList :items="items" />
|
|
</VMenu>
|
|
</div>
|
|
</template>
|
|
`, js: `<script setup>
|
|
const items = [
|
|
{
|
|
title: 'Option 1',
|
|
value: 'Option 1',
|
|
},
|
|
{
|
|
title: 'Option 2',
|
|
value: 'Option 2',
|
|
},
|
|
{
|
|
title: 'Option 3',
|
|
value: 'Option 3',
|
|
},
|
|
]
|
|
</script>
|
|
|
|
<template>
|
|
<div class="demo-space-x">
|
|
<VMenu location="top">
|
|
<template #activator="{ props }">
|
|
<VBtn v-bind="props">
|
|
Top
|
|
</VBtn>
|
|
</template>
|
|
|
|
<VList :items="items" />
|
|
</VMenu>
|
|
|
|
<VMenu location="bottom">
|
|
<template #activator="{ props }">
|
|
<VBtn v-bind="props">
|
|
Bottom
|
|
</VBtn>
|
|
</template>
|
|
|
|
<VList :items="items" />
|
|
</VMenu>
|
|
|
|
<VMenu location="start">
|
|
<template #activator="{ props }">
|
|
<VBtn v-bind="props">
|
|
Start
|
|
</VBtn>
|
|
</template>
|
|
|
|
<VList :items="items" />
|
|
</VMenu>
|
|
|
|
<VMenu location="end">
|
|
<template #activator="{ props }">
|
|
<VBtn v-bind="props">
|
|
End
|
|
</VBtn>
|
|
</template>
|
|
|
|
<VList :items="items" />
|
|
</VMenu>
|
|
</div>
|
|
</template>
|
|
` }
|
|
|
|
export const openOnHover = { ts: `<script lang="ts" setup>
|
|
const items = [{ title: 'Option 1', value: 'Option 1' }, { title: 'Option 2', value: 'Option 2' }, { title: 'Option 3', value: 'Option 3' }]
|
|
</script>
|
|
|
|
<template>
|
|
<VMenu open-on-hover>
|
|
<template #activator="{ props }">
|
|
<VBtn v-bind="props">
|
|
On hover
|
|
</VBtn>
|
|
</template>
|
|
|
|
<VList :items="items" />
|
|
</VMenu>
|
|
</template>
|
|
`, js: `<script setup>
|
|
const items = [
|
|
{
|
|
title: 'Option 1',
|
|
value: 'Option 1',
|
|
},
|
|
{
|
|
title: 'Option 2',
|
|
value: 'Option 2',
|
|
},
|
|
{
|
|
title: 'Option 3',
|
|
value: 'Option 3',
|
|
},
|
|
]
|
|
</script>
|
|
|
|
<template>
|
|
<VMenu open-on-hover>
|
|
<template #activator="{ props }">
|
|
<VBtn v-bind="props">
|
|
On hover
|
|
</VBtn>
|
|
</template>
|
|
|
|
<VList :items="items" />
|
|
</VMenu>
|
|
</template>
|
|
` }
|
|
|
|
export const popover = { ts: `<script lang="ts" setup>
|
|
import avatar1 from '@images/avatars/avatar-1.png'
|
|
|
|
const menu = ref(false)
|
|
</script>
|
|
|
|
<template>
|
|
<VMenu
|
|
v-model="menu"
|
|
location="top"
|
|
>
|
|
<template #activator="{ props }">
|
|
<VBtn v-bind="props">
|
|
Menu as Popover
|
|
</VBtn>
|
|
</template>
|
|
|
|
<VCard max-width="300">
|
|
<VList>
|
|
<VListItem
|
|
:prepend-avatar="avatar1"
|
|
title="John Leider"
|
|
subtitle="Founder of Vuetify"
|
|
/>
|
|
</VList>
|
|
|
|
<VDivider />
|
|
|
|
<VCardText>
|
|
Gingerbread bear claw cake. Soufflé candy sesame snaps chocolate ice cream cake.
|
|
Dessert candy canes oat cake pudding cupcake. Bear claw sweet wafer bonbon dragée toffee.
|
|
</VCardText>
|
|
|
|
<VCardActions>
|
|
<VBtn icon="ri-heart-fill" />
|
|
<VBtn icon="ri-bookmark-line" />
|
|
<VBtn icon="ri-thumb-down-line" />
|
|
</VCardActions>
|
|
</VCard>
|
|
</VMenu>
|
|
</template>
|
|
`, js: `<script setup>
|
|
import avatar1 from '@images/avatars/avatar-1.png'
|
|
|
|
const menu = ref(false)
|
|
</script>
|
|
|
|
<template>
|
|
<VMenu
|
|
v-model="menu"
|
|
location="top"
|
|
>
|
|
<template #activator="{ props }">
|
|
<VBtn v-bind="props">
|
|
Menu as Popover
|
|
</VBtn>
|
|
</template>
|
|
|
|
<VCard max-width="300">
|
|
<VList>
|
|
<VListItem
|
|
:prepend-avatar="avatar1"
|
|
title="John Leider"
|
|
subtitle="Founder of Vuetify"
|
|
/>
|
|
</VList>
|
|
|
|
<VDivider />
|
|
|
|
<VCardText>
|
|
Gingerbread bear claw cake. Soufflé candy sesame snaps chocolate ice cream cake.
|
|
Dessert candy canes oat cake pudding cupcake. Bear claw sweet wafer bonbon dragée toffee.
|
|
</VCardText>
|
|
|
|
<VCardActions>
|
|
<VBtn icon="ri-heart-fill" />
|
|
<VBtn icon="ri-bookmark-line" />
|
|
<VBtn icon="ri-thumb-down-line" />
|
|
</VCardActions>
|
|
</VCard>
|
|
</VMenu>
|
|
</template>
|
|
` }
|
|
|