Skip to content

Instantly share code, notes, and snippets.

@johnleider
Created April 15, 2020 17:02
Show Gist options
  • Save johnleider/6fa77bfd27ab68199a618b7266365024 to your computer and use it in GitHub Desktop.
Save johnleider/6fa77bfd27ab68199a618b7266365024 to your computer and use it in GitHub Desktop.
<template>
<v-container>
<div class="pa-6 grey rounded-br"></div>
<v-row justify="center">
<v-col
v-for="value in ['-sm', '', '-lg', '-xl']"
:key="value"
cols="12"
md="2"
>
<div
class="pa-6 text-center grey lighten-2"
:class="`rounded${value}`"
v-text="`.rounded${value}`"
></div>
</v-col>
</v-row>
<v-row justify="center">
<v-col
v-for="value in ['Pill', 'Circle']"
:key="value"
cols="12"
md="2"
>
<div
class="pa-6 text-center grey lighten-2"
:class="`rounded-${value.toLowerCase()}`"
v-text="value"
></div>
</v-col>
</v-row>
<v-row justify="center">
<v-col
cols="12"
md="2"
>
<div
class="pa-6 text-center grey lighten-2 rounded-0"
v-text="`.rounded-0`"
></div>
</v-col>
</v-row>
<v-row justify="center">
<v-col
v-for="value in ['t', 'r', 'b', 'l']"
:key="value"
cols="12"
md="2"
>
<div
class="pa-6 text-center grey lighten-2"
:class="`rounded-${value}-xl`"
v-text="`.rounded-${value}-xl`"
></div>
</v-col>
</v-row>
<v-row justify="center">
<v-col
v-for="value in ['tl', 'tr', 'br', 'bl']"
:key="value"
cols="12"
md="2"
>
<div
class="pa-6 text-center grey lighten-2"
:class="`rounded-${value}-xl`"
v-text="`.rounded-${value}-xl`"
></div>
</v-col>
</v-row>
<div class="my-12"></div>
<v-row justify="center">
<v-hover
v-for="n in 2"
:key="n"
>
<template v-slot="{ hover }">
<v-sheet
:class="[
`rounded-${hover ? 'xl' : '0'}`,
hover && n === 2 ? 'mt-n2' : undefined,
]"
:elevation="hover ? 24 : 2"
class="pa-4 transition-swing"
height="256"
width="256"
>
Hello
</v-sheet>
</template>
</v-hover>
</v-row>
</v-container>
</template>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment