# All Vuetify components
This is a showcase of all vuetify components
# Alerts (opens new window)
# Basic
<template>
<VContainer fluid>
<VRow>
<VCol cols="12" sm="6" md="6">
<VAlert border="top" color="red lighten-2" dark>I'm an alert with a top border and red color</VAlert>
</VCol>
<VCol cols="12" sm="6" md="6">
<VAlert border="right" color="blue-grey" dark>An alert with a right border and blue-grey color</VAlert>
</VCol>
</VRow>
<VRow>
<VCol cols="12" sm="6" md="6">
<VAlert border="bottom" color="pink darken-1" dark>I'm an alert with a bottom border and pink color</VAlert>
</VCol>
<VCol cols="12" sm="6" md="6">
<VAlert border="left" color="indigo" dark>I'm an alert with a border left type info</VAlert>
</VCol>
</VRow>
</VContainer>
</template>
# Dense
<template>
<VContainer fluid>
<VRow>
<VCol cols="12" sm="6" md="6">
<VAlert dense type="info">
I'm a dense alert with a
<strong>type</strong>
of info
</VAlert>
</VCol>
<VCol cols="12" sm="6" md="6">
<VAlert dense text type="success">
I'm a dense alert with the
<strong>text</strong>
prop and a
<strong>type</strong>
of success
</VAlert>
</VCol>
</VRow>
<VRow>
<VCol cols="12" sm="6" md="6">
<VAlert dense border="left" type="warning">
I'm a dense alert with the
<strong>border</strong>
prop and a
<strong>type</strong>
of warning
</VAlert>
</VCol>
<VCol cols="12" sm="6" md="6">
<VAlert dense outlined type="error">
I'm a dense alert with the
<strong>outlined</strong>
prop and a
<strong>type</strong>
of error
</VAlert>
</VCol>
</VRow>
</VContainer>
</template>
# Dissmissible
<template>
<VContainer fluid>
<VRow>
<VCol cols="12">
<VAlert
v-model="isAlertShown"
border="left"
closeText="Close Alert"
color="deep-purple accent-4"
dark
dismissible
>
Aenean imperdiet. Quisque id odio. Cras dapibus. Pellentesque ut neque. Cras dapibus. Vivamus consectetuer
hendrerit lacus. Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a
orci. Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci.
Curabitur blandit mollis lacus. Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo.
</VAlert>
<div class="text-center">
<VBtn v-if="!isAlertShown" color="deep-purple accent-4" dark @click="isAlertShown = true">Reset</VBtn>
</div>
</VCol>
</VRow>
</VContainer>
</template>
<script>
import { defineComponent, ref } from '@vue/composition-api'
export default defineComponent({
name: 'DismissibleAlert',
setup() {
const isAlertShown = ref(true)
return { isAlertShown }
},
})
</script>
# Iconed
<template>
<VContainer fluid>
<VRow>
<VCol cols="12">
<VAlert color="#2A3B4D" dark icon="fa-folder" dense>
Suspendisse enim turpis, dictum sed, iaculis a, condimentum nec, nisi. Vivamus quis mi. Quisque ut nisi.
Maecenas malesuada.
</VAlert>
</VCol>
<VCol cols="12">
<VAlert color="#C51162" dark icon="fa-folder-open" border="right">
Suspendisse enim turpis, dictum sed, iaculis a, condimentum nec, nisi. Vivamus quis mi. Quisque ut nisi.
Maecenas malesuada.
</VAlert>
</VCol>
<VCol cols="12">
<VAlert color="primary" dark icon="fa-folder-plus" border="left" prominent>
Suspendisse enim turpis, dictum sed, iaculis a, condimentum nec, nisi. Vivamus quis mi. Quisque ut nisi.
Maecenas malesuada.
</VAlert>
</VCol>
</VRow>
</VContainer>
</template>
# Avatars (opens new window)
# Basic
<template>
<VContainer fluid>
<VRow>
<VCol cols="12" class="d-flex justify-center align-center">
<VAvatar class="mr-5" color="indigo">
<VIcon dark>fa-user</VIcon>
</VAvatar>
<VAvatar class="mr-5">
<img src="https://cdn.vuetifyjs.com/images/john.jpg" alt="John" />
</VAvatar>
<VAvatar color="red">
<span class="white--text headline">CJ</span>
</VAvatar>
</VCol>
</VRow>
</VContainer>
</template>
# Sized
<template>
<VContainer fluid>
<VRow>
<VCol cols="12" class="d-flex justify-center align-center">
<VAvatar class="mr-5" color="indigo" size="36">
<span class="white--text headline">36</span>
</VAvatar>
<VAvatar class="mr-5" color="teal" size="48">
<span class="white--text headline">48</span>
</VAvatar>
<VAvatar color="orange" size="60">
<span class="white--text headline">60</span>
</VAvatar>
</VCol>
</VRow>
</VContainer>
</template>
# Tiled
<template>
<VContainer fluid>
<VRow>
<VCol cols="12" class="d-flex justify-center align-center">
<VAvatar class="mr-5" tile color="blue">
<VIcon dark>fa-clock</VIcon>
</VAvatar>
<VAvatar class="mr-5" tile color="teal">
<VIcon dark>fa-user</VIcon>
</VAvatar>
<VAvatar tile color="orange">
<VIcon dark>fa-folder</VIcon>
</VAvatar>
</VCol>
</VRow>
</VContainer>
</template>
# With menu
<template>
<VContainer fluid>
<VRow>
<VCol cols="12" class="d-flex justify-center align-center">
<VMenu bottom minWidth="200px" rounded offsetY>
<template #activator="{ on }">
<VBtn icon xLarge v-on="on">
<VAvatar color="brown" size="48">
<span class="white--text headline">{{ initials }}</span>
</VAvatar>
</VBtn>
</template>
<VCard>
<VListItemContent class="justify-center">
<div class="mx-auto text-center">
<VAvatar class="mb-4" color="brown">
<span class="white--text headline">{{ initials }}</span>
</VAvatar>
<h3>{{ fullName }}</h3>
<p class="caption mt-1">
{{ email }}
</p>
<VDivider class="my-3" />
<VBtn depressed rounded text>Edit Account</VBtn>
<VDivider class="my-3" />
<VBtn depressed rounded text>Disconnect</VBtn>
</div>
</VListItemContent>
</VCard>
</VMenu>
</VCol>
</VRow>
</VContainer>
</template>
<script>
import { defineComponent, reactive, toRefs } from '@vue/composition-api'
export default defineComponent({
name: 'AvatarWithMenu',
setup() {
const state = reactive({
initials: 'JD',
fullName: 'John Doe',
email: 'john@doe.com',
})
return { ...toRefs(state) }
},
})
</script>
# Badges (opens new window)
# Basic
<template>
<VContainer fluid>
<VRow>
<VCol cols="12" class="d-flex justify-center align-center container">
<VBadge left top>
<VIcon>fa-user</VIcon>
</VBadge>
<VBadge left bottom>
<VIcon>fa-user</VIcon>
</VBadge>
<VBadge right top>
<VIcon>fa-user</VIcon>
</VBadge>
<VBadge right bottom>
<VIcon>fa-user</VIcon>
</VBadge>
</VCol>
</VRow>
</VContainer>
</template>
<style lang="sass" scoped>
.container
& > *:not(:last-child)
margin-right: 1.5rem
</style>
# With variety of options
<template>
<VContainer>
<VRow align="center" justify="center">
<VBadge bordered color="error" icon="fa-lock" overlap>
<VBtn class="white--text" color="error" depressed>Lock Account</VBtn>
</VBadge>
<div class="mx-3" />
<VBadge bordered bottom color="deep-purple accent-4" dot offsetX="10" offsetY="10">
<VAvatar size="40">
<VImg src="https://cdn.vuetifyjs.com/images/lists/2.jpg" />
</VAvatar>
</VBadge>
<div class="mx-3" />
<VBadge avatar bordered overlap>
<template #badge>
<VAvatar>
<VImg src="https://cdn.vuetifyjs.com/images/logos/v.png" />
</VAvatar>
</template>
<VAvatar size="40">
<VImg src="https://cdn.vuetifyjs.com/images/john.png" />
</VAvatar>
</VBadge>
</VRow>
</VContainer>
</template>
# Dynamic notifications
<template>
<VContainer>
<VRow justify="space-around">
<div>
<VBtn class="mx-1" color="secondary" @click="messages++">Send Message</VBtn>
<VBtn class="mx-1" color="error" @click="messages = 0">Clear Notifications</VBtn>
</div>
<VBadge :content="messages" :value="messages" color="green" overlap>
<VIcon large>fa-envelope</VIcon>
</VBadge>
</VRow>
</VContainer>
</template>
<script>
import { defineComponent, ref } from '@vue/composition-api'
export default defineComponent({
name: 'NotificationsBadge',
setup() {
const messages = ref(0)
return {
messages,
}
},
})
</script>
# Bottom Sheets (opens new window)
# Inset
<template>
<div class="text-center">
<VBottomSheet v-model="isSheetOpen" inset>
<template #activator="{ on, attrs }">
<VBtn color="orange" dark v-bind="attrs" v-on="on">Open Inset</VBtn>
</template>
<VSheet class="text-center" height="200px">
<VBtn class="mt-6" text color="error" @click="isSheetOpen = !isSheetOpen">Close</VBtn>
<div class="my-3">This is a bottom sheet using the inset prop</div>
</VSheet>
</VBottomSheet>
</div>
</template>
<script>
import { defineComponent, ref } from '@vue/composition-api'
export default defineComponent({
name: 'InsetBottomSheet',
setup() {
const isSheetOpen = ref(false)
return { isSheetOpen }
},
})
</script>
# With v-model
<template>
<div class="text-center">
<VBtn color="blue" dark @click="isSheetOpen = !isSheetOpen">Open v-model</VBtn>
<VBottomSheet v-model="isSheetOpen">
<VSheet class="text-center" height="200px">
<VBtn class="mt-6" text color="red" @click="isSheetOpen = !isSheetOpen">Close</VBtn>
<div class="py-3">This is a bottom sheet using the controlled by v-model instead of activator</div>
</VSheet>
</VBottomSheet>
</div>
</template>
<script>
import { defineComponent, ref } from '@vue/composition-api'
export default defineComponent({
name: 'ModelBottomSheet',
setup() {
const isSheetOpen = ref(false)
return { isSheetOpen }
},
})
</script>
# Persistent
<template>
<div class="text-center">
<VBottomSheet v-model="isSheetOpen" persistent>
<template #activator="{ on, attrs }">
<VBtn color="orange" dark v-bind="attrs" v-on="on">Open Persistent</VBtn>
</template>
<VSheet class="text-center" height="200px">
<VBtn class="mt-6" text color="error" @click="isSheetOpen = !isSheetOpen">Close</VBtn>
<div class="my-3">This is a bottom sheet using the persistent prop</div>
</VSheet>
</VBottomSheet>
</div>
</template>
<script>
import { defineComponent, ref } from '@vue/composition-api'
export default defineComponent({
name: 'PersistentBottomSheet',
setup() {
const isSheetOpen = ref(false)
return { isSheetOpen }
},
})
</script>
# Music player
<template>
<div class="text-center">
<VBottomSheet inset>
<template #activator="{ on, attrs }">
<VBtn color="red" dark v-bind="attrs" v-on="on">Open Player</VBtn>
</template>
<VCard tile>
<VProgressLinear :value="50" class="my-0" height="3" />
<VList>
<VListItem>
<VListItemContent>
<VListItemTitle>Californication</VListItemTitle>
<VListItemSubtitle>Red Hot Chili Peppers</VListItemSubtitle>
</VListItemContent>
<VSpacer />
<VListItemIcon>
<VBtn icon>
<VIcon>fa-fast-backward</VIcon>
</VBtn>
</VListItemIcon>
<VListItemIcon :class="{ 'mx-5': $vuetify.breakpoint.mdAndUp }">
<VBtn icon>
<VIcon>fa-pause</VIcon>
</VBtn>
</VListItemIcon>
<VListItemIcon class="ml-0" :class="{ 'mr-3': $vuetify.breakpoint.mdAndUp }">
<VBtn icon>
<VIcon>fa-fast-forward</VIcon>
</VBtn>
</VListItemIcon>
</VListItem>
</VList>
</VCard>
</VBottomSheet>
</div>
</template>
# Breadcrumbs (opens new window)
# Basic
<template>
<div>
<VBreadcrumbs :items="items" />
</div>
</template>
<script>
import { defineComponent } from '@vue/composition-api'
import { useBreadcrumbs } from './useBreadcrumbs'
export default defineComponent({
name: 'BasicBreadcrumb',
setup() {
const items = useBreadcrumbs()
return { items }
},
})
</script>
# Custom divider
<template>
<div>
<VBreadcrumbs :items="items" divider="-" />
<VBreadcrumbs :items="items" divider="." />
</div>
</template>
<script>
import { defineComponent } from '@vue/composition-api'
import { useBreadcrumbs } from './useBreadcrumbs'
export default defineComponent({
name: 'CustomDividerBreadcrumb',
setup() {
const items = useBreadcrumbs()
return { items }
},
})
</script>
# Large
<template>
<div>
<VBreadcrumbs :items="items" />
<VBreadcrumbs :items="items" large />
</div>
</template>
<script>
import { defineComponent } from '@vue/composition-api'
import { useBreadcrumbs } from './useBreadcrumbs'
export default defineComponent({
name: 'LargeBreadcrumb',
setup() {
const items = useBreadcrumbs()
return { items }
},
})
</script>
# Iconed
<template>
<div>
<VBreadcrumbs :items="items">
<template #divider>
<VIcon>fa-arrow-right</VIcon>
</template>
</VBreadcrumbs>
<VBreadcrumbs :items="items">
<template #divider>
<VIcon>fa-chevron-right</VIcon>
</template>
</VBreadcrumbs>
</div>
</template>
<script>
import { defineComponent } from '@vue/composition-api'
import { useBreadcrumbs } from './useBreadcrumbs'
export default defineComponent({
name: 'IconedBreadcrumb',
setup() {
const items = useBreadcrumbs()
return { items }
},
})
</script>
# Custom
<template>
<VBreadcrumbs :items="items">
<template #item="{ item }">
<VBreadcrumbsItem :href="item.href" :disabled="item.disabled">
{{ item.text.toUpperCase() }}
</VBreadcrumbsItem>
</template>
</VBreadcrumbs>
</template>
<script>
import { defineComponent } from '@vue/composition-api'
import { useBreadcrumbs } from './useBreadcrumbs'
export default defineComponent({
name: 'ItemSlotBreadcrumb',
setup() {
const items = useBreadcrumbs()
return { items }
},
})
</script>
# Buttons (opens new window)
# Basic
<template>
<VContainer fluid>
<VRow>
<VCol class="d-flex justify-space-between align-center">
<VBtn xSmall>Button</VBtn>
<VBtn small>Button</VBtn>
<VBtn>Button</VBtn>
<VBtn large>Button</VBtn>
<VBtn xLarge>Button</VBtn>
</VCol>
</VRow>
</VContainer>
</template>
# Color variants
<template>
<VRow align="center" justify="space-around">
<VBtn>Default</VBtn>
<VBtn color="error">Error</VBtn>
<VBtn color="warning">Warning</VBtn>
<VBtn color="primary">Primary</VBtn>
<VBtn color="grey">Grey</VBtn>
<VBtn color="success">Success</VBtn>
</VRow>
</template>
# Block
<template>
<VBtn block>Block Button</VBtn>
</template>
# Depressed
<template>
<VRow align="center" justify="space-around">
<VBtn depressed>Default</VBtn>
<VBtn depressed color="error">Error</VBtn>
<VBtn depressed color="warning">Warning</VBtn>
<VBtn depressed color="primary">Primary</VBtn>
<VBtn depressed color="grey">Grey</VBtn>
<VBtn depressed color="success">Success</VBtn>
</VRow>
</template>
# Floating
<template>
<div class="text-center">
<VBtn class="mx-2" fab dark small color="primary">
<VIcon dark>fa-minus</VIcon>
</VBtn>
<VBtn class="mx-2" fab dark small color="pink">
<VIcon dark>fa-heart</VIcon>
</VBtn>
<VBtn class="mx-2" fab dark color="indigo">
<VIcon dark>fa-plus</VIcon>
</VBtn>
<VBtn class="mx-2" fab dark color="teal">
<VIcon dark>fa-user</VIcon>
</VBtn>
<VBtn class="mx-2" fab dark large color="cyan">
<VIcon dark>fa-pencil</VIcon>
</VBtn>
<VBtn class="mx-2" fab dark large color="purple">
<VIcon dark>fa-trash</VIcon>
</VBtn>
</div>
</template>
# Iconed
<template>
<VRow align="center" justify="space-around">
<VBtn xSmall>
<VIcon xSmall class="mr-2">fa-users</VIcon>
X-Small
</VBtn>
<VBtn small>
<VIcon small class="mr-2">fa-users</VIcon>
Small
</VBtn>
<VBtn>
<VIcon class="mr-2">fa-users</VIcon>
Medium
</VBtn>
<VBtn large>
<VIcon large class="mr-2">fa-users</VIcon>
Large
</VBtn>
<VBtn xLarge>
<VIcon xLarge class="mr-2">fa-users</VIcon>
X-Large
</VBtn>
</VRow>
</template>
# Calendar (opens new window)
# Date picker
<template>
<VRow align="center" justify="center">
<VDatePicker v-model="picker" elevation="2" />
</VRow>
</template>
<script>
import { defineComponent, ref } from '@vue/composition-api'
export default defineComponent({
name: 'DatePicker',
setup() {
const picker = ref(new Date().toISOString().substr(0, 10))
return { picker }
},
})
</script>
# Time Picker
<template>
<VRow align="center" justify="center">
<VTimePicker v-model="timeStep" :allowedMinutes="(m) => m % 5 === 0" scrollable elevation="2" format="24hr" />
</VRow>
</template>
<script>
import { defineComponent, ref } from '@vue/composition-api'
export default defineComponent({
name: 'TimePicker',
setup() {
const timeStep = ref('')
return { timeStep }
},
})
</script>
# Calendar
<template>
<VRow class="fill-height">
<VCol cols="12">
<VSheet tile height="54" class="d-flex">
<VBtn icon class="ma-2" @click="$refs.calendar.prev()">
<VIcon>far fa-chevron-left</VIcon>
</VBtn>
<VSelect v-model="type" :items="types" dense outlined hideDetails class="ma-2" label="type" />
<VSelect v-model="mode" :items="modes" dense outlined hideDetails label="event-overlap-mode" class="ma-2" />
<VSelect v-model="weekday" :items="weekdays" dense outlined hideDetails label="weekdays" class="ma-2" />
<VSpacer />
<VBtn icon class="ma-2" @click="$refs.calendar.next()">
<VIcon>far fa-chevron-right</VIcon>
</VBtn>
</VSheet>
<VSheet height="600" class="fill-width">
<VCalendar
ref="calendar"
v-model="value"
color="primary"
:weekdays="weekday"
:type="type"
:events="events"
:eventOverlapMode="mode"
:eventOverlapThreshold="30"
:eventColor="getEventColor"
@change="getEvents"
/>
</VSheet>
</VCol>
</VRow>
</template>
<script>
import { reactive, toRefs } from '@vue/composition-api'
export default {
name: 'Calendar',
displayName: 'Calendar',
setup() {
const state = reactive({
type: 'month',
types: ['month', 'week', 'day', '4day'],
mode: 'stack',
modes: ['stack', 'column'],
weekday: [0, 1, 2, 3, 4, 5, 6],
weekdays: [
{ text: 'Sun - Sat', value: [0, 1, 2, 3, 4, 5, 6] },
{ text: 'Mon - Sun', value: [1, 2, 3, 4, 5, 6, 0] },
{ text: 'Mon - Fri', value: [1, 2, 3, 4, 5] },
{ text: 'Mon, Wed, Fri', value: [1, 3, 5] },
],
value: '',
events: [],
colors: ['blue', 'indigo', 'deep-purple', 'cyan', 'green', 'orange', 'grey darken-1'],
names: ['Meeting', 'Holiday', 'PTO', 'Travel', 'Event', 'Birthday', 'Conference', 'Party'],
})
const rnd = (a, b) => Math.floor((b - a + 1) * Math.random()) + a
const getEvents = ({ start, end }) => {
const events = []
const min = new Date(`${start.date}T00:00:00`)
const max = new Date(`${end.date}T23:59:59`)
const days = (max.getTime() - min.getTime()) / 86400000
const eventCount = rnd(days, days + 20)
for (let i = 0; i < eventCount; i++) {
const allDay = rnd(0, 3) === 0
const firstTimestamp = rnd(min.getTime(), max.getTime())
const first = new Date(firstTimestamp - (firstTimestamp % 900000))
const secondTimestamp = rnd(2, allDay ? 288 : 8) * 900000
const second = new Date(first.getTime() + secondTimestamp)
events.push({
name: state.names[rnd(0, state.names.length - 1)],
start: first,
end: second,
color: state.colors[rnd(0, state.colors.length - 1)],
timed: !allDay,
})
}
state.events = events
}
const getEventColor = (event) => event.color
return { ...toRefs(state), getEvents, getEventColor }
},
}
</script>
# Card (opens new window)
<template>
<VRow class="fill-height">
<VCol>
<VCard>
<VCardTitle>Card Title</VCardTitle>
<VCardText>
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum
tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas
semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.Pellentesque habitant morbi tristique
senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget,
tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris
placerat eleifend leo.
</VCardText>
</VCard>
</VCol>
</VRow>
</template>
# Carousel (opens new window)
# Basic
<template>
<VRow cols="12">
<VCarousel>
<VCarouselItem v-for="(color, i) in colors" :key="color">
<VSheet :color="color" height="100%" title="">
<VRow class="fill-height" align="center" justify="center">
<div class="display-3">Slide {{ i + 1 }}</div>
</VRow>
</VSheet>
</VCarouselItem>
</VCarousel>
</VRow>
</template>
<script>
import { defineComponent, ref } from '@vue/composition-api'
export default defineComponent({
name: 'BasicCarousel',
setup() {
const colors = ref(['primary', 'secondary', 'yellow darken-2', 'red', 'orange'])
return { colors }
},
})
</script>
# Custom delimiter
<template>
<VRow cols="12">
<VCol>
<VCard>
<VCarousel
:continuous="false"
:cycle="true"
:showArrows="false"
hideDelimiterBackground
delimiterIcon="fa-apple-alt"
height="300"
>
<VCarouselItem v-for="(color, i) in colors" :key="color">
<VSheet :color="color" height="100%" tile>
<VRow class="fill-height" align="center" justify="center">
<div class="display-3">Slide {{ i + 1 }}</div>
</VRow>
</VSheet>
</VCarouselItem>
</VCarousel>
<VList twoLine>
<VListItem>
<VListItemAvatar>
<VImg src="https://cdn.vuetifyjs.com/images/john.png" />
</VListItemAvatar>
<VListItemContent>
<VListItemTitle>John Leider</VListItemTitle>
<VListItemSubtitle>Author</VListItemSubtitle>
</VListItemContent>
</VListItem>
</VList>
</VCard>
</VCol>
</VRow>
</template>
<script>
import { defineComponent, ref } from '@vue/composition-api'
export default defineComponent({
name: 'CustomDelimiterCarousel',
setup() {
const colors = ref(['primary', 'secondary', 'yellow darken-2', 'red', 'orange'])
return { colors }
},
})
</script>
# Custom transition
<template>
<VCarousel>
<VCarouselItem
v-for="(item, i) in items"
:key="i"
:src="item.src"
reverseTransition="fade-transition"
transition="fade-transition"
/>
</VCarousel>
</template>
<script>
import { defineComponent, ref } from '@vue/composition-api'
export default defineComponent({
name: 'CustomTransitionCarousel',
setup() {
const items = ref([
{ src: 'https://cdn.vuetifyjs.com/images/carousel/squirrel.jpg' },
{ src: 'https://cdn.vuetifyjs.com/images/carousel/sky.jpg' },
{ src: 'https://cdn.vuetifyjs.com/images/carousel/bird.jpg' },
{ src: 'https://cdn.vuetifyjs.com/images/carousel/planet.jpg' },
])
return { items }
},
})
</script>
# Cycling
<template>
<VCarousel cycle height="400" hideDelimiterBackground showArrowsOnHover>
<VCarouselItem v-for="(color, i) in colors" :key="color">
<VSheet :color="color" height="100%" title="">
<VRow class="fill-height" align="center" justify="center">
<div class="display-3">Slide {{ i + 1 }}</div>
</VRow>
</VSheet>
</VCarouselItem>
</VCarousel>
</template>
<script>
import { defineComponent, ref } from '@vue/composition-api'
export default defineComponent({
name: 'CyclingCarousel',
setup() {
const colors = ref(['primary', 'secondary', 'yellow darken-2', 'red', 'orange'])
return { colors }
},
})
</script>
# Hide controls
<template>
<VCarousel :showArrows="false">
<VCarouselItem v-for="(item, i) in items" :key="i" :src="item.src" />
</VCarousel>
</template>
<script>
import { defineComponent, ref } from '@vue/composition-api'
export default defineComponent({
name: 'HiddenControlledCarousel',
setup() {
const items = ref([
{ src: 'https://cdn.vuetifyjs.com/images/carousel/squirrel.jpg' },
{ src: 'https://cdn.vuetifyjs.com/images/carousel/sky.jpg' },
{ src: 'https://cdn.vuetifyjs.com/images/carousel/bird.jpg' },
{ src: 'https://cdn.vuetifyjs.com/images/carousel/planet.jpg' },
])
return { items }
},
})
</script>
# Hide delimiters
<template>
<VCarousel hideDelimiters>
<VCarouselItem v-for="(item, i) in items" :key="i" :src="item.src" />
</VCarousel>
</template>
<script>
import { defineComponent, ref } from '@vue/composition-api'
export default defineComponent({
name: 'HiddenDelimiterCarousel',
setup() {
const items = ref([
{ src: 'https://cdn.vuetifyjs.com/images/carousel/squirrel.jpg' },
{ src: 'https://cdn.vuetifyjs.com/images/carousel/sky.jpg' },
{ src: 'https://cdn.vuetifyjs.com/images/carousel/bird.jpg' },
{ src: 'https://cdn.vuetifyjs.com/images/carousel/planet.jpg' },
])
return { items }
},
})
</script>
# Custom arrows
<template>
<VCarousel cycle height="400" hideDelimiterBackground showArrowsOnHover>
<template #prev="{ on, attrs }">
<VBtn color="success" v-bind="attrs" v-on="on">Previous slide</VBtn>
</template>
<template #next="{ on, attrs }">
<VBtn color="info" v-bind="attrs" v-on="on">Next slide</VBtn>
</template>
<VCarouselItem v-for="(slide, i) in slides" :key="i">
<VSheet :color="colors[i]" height="100%">
<VRow class="fill-height" align="center" justify="center">
<div class="display-3">{{ slide }} Slide</div>
</VRow>
</VSheet>
</VCarouselItem>
</VCarousel>
</template>
<script>
import { defineComponent, ref } from '@vue/composition-api'
export default defineComponent({
name: 'CustomArrowsCarousel',
setup() {
const colors = ref(['indigo', 'warning', 'pink darken-2', 'red lighten-1', 'deep-purple accent-4'])
const slides = ref(['First', 'Second', 'Third', 'Fourth', 'Fifth'])
return { colors, slides }
},
})
</script>
# With model
<template>
<VRow cols="12">
<VRow justify="space-around" class="mb-2">
<VBtn depressed color="error" @click="model--">
<VIcon class="mr-3">fa-arrow-alt-circle-left</VIcon>
Prev
</VBtn>
<VChip depressed color="primary">{{ model + 1 }}</VChip>
<VBtn class="success" @click="model++">
Next
<VIcon class="ml-3">fa-arrow-alt-circle-right</VIcon>
</VBtn>
</VRow>
<VCarousel v-model="model">
<VCarouselItem v-for="(color, i) in colors" :key="color">
<VSheet :color="color" height="100%" tile>
<VRow class="fill-height" align="center" justify="center">
<div class="display-3">Slide {{ i + 1 }}</div>
</VRow>
</VSheet>
</VCarouselItem>
</VCarousel>
</VRow>
</template>
<script>
import { defineComponent, ref } from '@vue/composition-api'
export default defineComponent({
name: 'CarouselWithModel',
setup() {
const model = ref(0)
const colors = ref(['primary', 'secondary', 'yellow darken-2', 'red', 'orange'])
return {
model,
colors,
}
},
})
</script>
# Checkbox (opens new window)
# Colors
<template>
<VContainer fluid>
<VRow justify="space-between" align="center" class="mb-4">
<VCheckbox v-model="ex4" label="red" color="red" value="red" hideDetails />
<VCheckbox v-model="ex4" label="indigo" color="indigo" value="indigo" hideDetails />
<VCheckbox v-model="ex4" label="info" color="info" value="info" hideDetails />
<VCheckbox v-model="ex4" label="orange" color="orange" value="orange" hideDetails />
<VCheckbox v-model="ex4" label="orange darken-3" color="orange darken-3" value="orange darken-3" hideDetails />
</VRow>
<VRow justify="space-between" align="center">
<VCheckbox v-model="ex4" label="primary" color="primary" value="primary" hideDetails />
<VCheckbox v-model="ex4" label="warning" color="warning" value="warning" hideDetails />
<VCheckbox v-model="ex4" label="success" color="success" value="success" hideDetails />
<VCheckbox v-model="ex4" label="error" color="error" value="error" hideDetails />
<VCheckbox v-model="ex4" label="secondary" color="secondary" value="secondary" hideDetails />
</VRow>
</VContainer>
</template>
<script>
import { defineComponent, ref } from '@vue/composition-api'
export default defineComponent({
name: 'BasicCheckbox',
setup() {
const ex4 = ref([
'red',
'indigo',
'orange',
'primary',
'secondary',
'success',
'info',
'warning',
'error',
'red darken-3',
'indigo darken-3',
'orange darken-3',
])
return { ex4 }
},
})
</script>
# States
<template>
<VContainer fluid>
<VRow justify="space-between" align="center">
<VCheckbox label="on" inputValue="true" value />
<VCheckbox label="off" value />
<VCheckbox label="indeterminate" value indeterminate />
<VCheckbox label="on disabled" inputValue="true" value disabled />
<VCheckbox label="off disabled" value disabled />
</VRow>
</VContainer>
</template>
# Chips (opens new window)
# Closable
<template>
<VRow align="center" justify="space-around">
<VBtn
v-if="!chip1 && !chip2 && !chip3 && !chip4"
close
color="primary"
dark
@click=";(chip1 = true), (chip2 = true), (chip3 = true), (chip4 = true)"
>
Reset Chips
</VBtn>
<VChip v-if="chip1" class="mr-2" close @click:close="chip1 = false">Closable</VChip>
<VChip v-if="chip2" class="mr-2" close color="red" textColor="white" @click:close="chip2 = false">Remove</VChip>
<VChip v-if="chip3" class="mr-2" close color="green" outlined @click:close="chip3 = false">Success</VChip>
<VChip v-if="chip4" close color="orange" label outlined @click:close="chip4 = false">Complete</VChip>
</VRow>
</template>
<script>
import { defineComponent, reactive, toRefs } from '@vue/composition-api'
export default defineComponent({
name: 'ClosableChip',
setup() {
const state = reactive({
chip1: true,
chip2: true,
chip3: true,
chip4: true,
})
return { ...toRefs(state) }
},
})
</script>
# Colored
<template>
<VRow align="center" justify="space-around">
<VChip class="mr-2">Default</VChip>
<VChip class="mr-2" color="primary">Primary</VChip>
<VChip class="mr-2" color="secondary">Secondary</VChip>
<VChip class="mr-2" color="red" textColor="white">Red Chip</VChip>
<VChip color="green" textColor="white">Green Chip</VChip>
</VRow>
</template>
# Draggable
<template>
<VRow align="center" justify="space-around">
<VChip class="mr-2" draggable color="green" textColor="white">Draggable</VChip>
<VChip class="mr-2" draggable color="red" textColor="white">Draggable</VChip>
<VChip class="mr-2" draggable color="blue" textColor="white">Draggable</VChip>
<VChip draggable color="orange" textColor="white">Draggable</VChip>
</VRow>
</template>
# Filter
<template>
<VRow align="center" justify="space-around">
<VChip class="mr-2" :inputValue="active" filter>I'm v-chip</VChip>
<VChip class="mr-2" :inputValue="active" filter filterIcon="fal fa-plus">I'm v-chip</VChip>
<VChip class="mr-3" :inputValue="active" filter filterIcon="fal fa-minus">I'm v-chip</VChip>
<VSwitch v-model="active" label="Active" />
</VRow>
</template>
<script>
import { defineComponent, ref } from '@vue/composition-api'
export default defineComponent({
name: 'FilterChip',
setup() {
const active = ref(false)
return { active }
},
})
</script>
# Label
<template>
<VRow align="center" justify="space-around">
<VChip class="mr-2" label>Folder</VChip>
<VChip class="mr-2" color="pink" label textColor="white">
<VIcon left>fa-tags</VIcon>
Tags
</VChip>
<VChip class="mr-2" color="primary" label>
<VIcon left>fa-user</VIcon>
John Leider
</VChip>
<VChip close color="cyan" label textColor="white">
<VIcon left>fa-hashtag</VIcon>
New Tweets
</VChip>
</VRow>
</template>
# Outlined
<template>
<VRow align="center" justify="space-around">
<VChip class="mr-2" color="success" outlined>
<VIcon left>fa-server</VIcon>
Status
</VChip>
<VChip class="mr-2" color="primary" outlined pill>
Account
<VIcon right>fa-user</VIcon>
</VChip>
<VChip class="mr-2" color="deep-purple accent-4" outlined>
<VIcon left>fa-wrench</VIcon>
Settings
</VChip>
<VChip close color="indigo darken-3" outlined>
<VIcon left>fa-fire</VIcon>
New Posts
</VChip>
</VRow>
</template>
# Sized
<template>
<VRow align="center" justify="space-around">
<VChip class="mr-2" xSmall>x-small chip</VChip>
<VChip class="mr-2" small>small chip</VChip>
<VChip class="mr-2">Default</VChip>
<VChip class="mr-2" arge>large chip</VChip>
<VChip xLarge>x-large chip</VChip>
</VRow>
</template>
# Iconed
<template>
<VRow align="center" justify="space-around">
<VChip class="mr-2" color="indigo" textColor="white">
<VAvatar left>
<VIcon>fa-user-circle</VIcon>
</VAvatar>
Mike
</VChip>
<VChip class="mr-2" olor="orange" textColor="white">
Premium
<VIcon right small>fa-star</VIcon>
</VChip>
<VChip class="mr-2" color="primary" textColor="white">
1 Year
<VIcon right small class="mr-1">fa-birthday-cake</VIcon>
</VChip>
<VChip class="mr-2" color="green" textColor="white">
<VAvatar left class="green darken-4">1</VAvatar>
Years
</VChip>
<VChip class="mr-2" close color="teal" textColor="white">
<VAvatar left>
<VIcon>fa-check-circle</VIcon>
</VAvatar>
Confirmed
</VChip>
</VRow>
</template>
# Data Iterator (opens new window)
<template>
<VDataIterator
:itemsPerPage="itemsPerPage"
:items="items"
:page="page"
:search="search"
:sortBy="sortBy.toLowerCase()"
:sortDesc="sortDesc"
hideDefaultFooter
>
<template #header>
<VToolbar dark color="blue darken-3" class="mb-1">
<VTextField
v-model="search"
clearable
flat
soloInverted
hideDetails
prependInnerIcon="fa-search"
label="Search"
/>
<template v-if="$vuetify.breakpoint.mdAndUp">
<VSpacer />
<VSelect
v-model="sortBy"
flat
soloInverted
hideDetails
:items="keys"
prependInnerIcon="fa-search"
label="Sort by"
/>
<VSpacer />
<VBtnToggle v-model="sortDesc" mandatory>
<VBtn depressed color="blue" :value="false">
<VIcon>fa-arrow-up</VIcon>
</VBtn>
<VBtn depressed color="blue" :value="true">
<VIcon>fa-arrow-down</VIcon>
</VBtn>
</VBtnToggle>
</template>
</VToolbar>
</template>
<template #default="props">
<VRow>
<VCol v-for="item in props.items" :key="item.name" cols="12" sm="6" md="4" lg="4">
<VCard>
<VCardTitle class="subheading font-weight-bold">
{{ item.name }}
</VCardTitle>
<VDivider />
<VList dense>
<VListItem v-for="(key, index) in filteredKeys" :key="index">
<VListItemContent :class="{ 'blue--text': sortBy === key }">{{ key }}:</VListItemContent>
<VListItemContent class="align-end" :class="{ 'blue--text': sortBy === key }">
{{ item[key.toLowerCase()] }}
</VListItemContent>
</VListItem>
</VList>
</VCard>
</VCol>
</VRow>
</template>
<template #footer>
<VRow class="mt-2 px-4" align="center" justify="center">
<span class="grey--text">Items per page</span>
<VMenu offsetY>
<template #activator="{ on, attrs }">
<VBtn dark text color="primary" class="ml-2" v-bind="attrs" v-on="on">
{{ itemsPerPage }}
</VBtn>
</template>
<VList>
<VListItem v-for="(number, index) in itemsPerPageArray" :key="index" @click="updateItemsPerPage(number)">
<VListItemTitle>{{ number }}</VListItemTitle>
</VListItem>
</VList>
</VMenu>
<VSpacer />
<span class="mr-4 grey--text">Page {{ page }} of {{ numberOfPages }}</span>
<VBtn fab small color="primary" :disabled="page === 1" class="mr-1" @click="formerPage">
<VIcon>fa-chevron-left</VIcon>
</VBtn>
<VBtn fab small color="primary" :disabled="page === numberOfPages" class="ml-1" @click="nextPage">
<VIcon>fa-chevron-right</VIcon>
</VBtn>
</VRow>
</template>
</VDataIterator>
</template>
<script>
import { computed, reactive, toRefs } from '@vue/composition-api'
export default {
name: 'DataIterator',
displayName: 'Data Iterator',
setup() {
const state = reactive({
itemsPerPageArray: [3, 6, 9, 12],
search: '',
filter: {},
sortDesc: false,
page: 1,
itemsPerPage: 3,
sortBy: 'name',
keys: ['Name', 'Calories', 'Fat', 'Carbs', 'Protein', 'Sodium', 'Calcium', 'Iron'],
items: [
{
name: 'Frozen Yogurt',
calories: 159,
fat: 6.0,
carbs: 24,
protein: 4.0,
sodium: 87,
calcium: '14%',
iron: '1%',
},
{
name: 'Ice cream sandwich',
calories: 237,
fat: 9.0,
carbs: 37,
protein: 4.3,
sodium: 129,
calcium: '8%',
iron: '1%',
},
{
name: 'Eclair',
calories: 262,
fat: 16.0,
carbs: 23,
protein: 6.0,
sodium: 337,
calcium: '6%',
iron: '7%',
},
{
name: 'Cupcake',
calories: 305,
fat: 3.7,
carbs: 67,
protein: 4.3,
sodium: 413,
calcium: '3%',
iron: '8%',
},
{
name: 'Gingerbread',
calories: 356,
fat: 16.0,
carbs: 49,
protein: 3.9,
sodium: 327,
calcium: '7%',
iron: '16%',
},
{
name: 'Jelly bean',
calories: 375,
fat: 0.0,
carbs: 94,
protein: 0.0,
sodium: 50,
calcium: '0%',
iron: '0%',
},
{
name: 'Lollipop',
calories: 392,
fat: 0.2,
carbs: 98,
protein: 0,
sodium: 38,
calcium: '0%',
iron: '2%',
},
{
name: 'Honeycomb',
calories: 408,
fat: 3.2,
carbs: 87,
protein: 6.5,
sodium: 562,
calcium: '0%',
iron: '45%',
},
{
name: 'Donut',
calories: 452,
fat: 25.0,
carbs: 51,
protein: 4.9,
sodium: 326,
calcium: '2%',
iron: '22%',
},
{
name: 'KitKat',
calories: 518,
fat: 26.0,
carbs: 65,
protein: 7,
sodium: 54,
calcium: '12%',
iron: '6%',
},
],
})
const numberOfPages = computed(() => Math.ceil(state.items.length / state.itemsPerPage))
const filteredKeys = computed(() => state.keys.filter((key) => key !== 'Name'))
const nextPage = () => {
if (state.page + 1 <= numberOfPages.value) state.page += 1
}
const formerPage = () => {
if (state.page - 1 >= 1) state.page -= 1
}
const updateItemsPerPage = (number) => {
state.itemsPerPage = number
}
return { ...toRefs(state), numberOfPages, filteredKeys, nextPage, formerPage, updateItemsPerPage }
},
}
</script>
# Data Table (opens new window)
<template>
<VDataTable :headers="headers" :items="items" :itemsPerPage="5" class="elevation-5" />
</template>
<script>
export default {
name: 'DataTable',
displayName: 'Data Table',
data() {
return {
headers: [
{
text: 'Dessert (100g serving)',
align: 'start',
sortable: false,
value: 'name',
},
{ text: 'Calories', value: 'calories' },
{ text: 'Fat (g)', value: 'fat' },
{ text: 'Carbs (g)', value: 'carbs' },
{ text: 'Protein (g)', value: 'protein' },
{ text: 'Iron (%)', value: 'iron' },
],
items: [
{
name: 'Frozen Yogurt',
calories: 159,
fat: 6.0,
carbs: 24,
protein: 4.0,
iron: '1%',
},
{
name: 'Ice cream sandwich',
calories: 237,
fat: 9.0,
carbs: 37,
protein: 4.3,
iron: '1%',
},
{
name: 'Eclair',
calories: 262,
fat: 16.0,
carbs: 23,
protein: 6.0,
iron: '7%',
},
{
name: 'Cupcake',
calories: 305,
fat: 3.7,
carbs: 67,
protein: 4.3,
iron: '8%',
},
{
name: 'Gingerbread',
calories: 356,
fat: 16.0,
carbs: 49,
protein: 3.9,
iron: '16%',
},
{
name: 'Eclair 2',
calories: 262,
fat: 16.0,
carbs: 23,
protein: 6.0,
iron: '7%',
},
{
name: 'Cupcake 2',
calories: 305,
fat: 3.7,
carbs: 67,
protein: 4.3,
iron: '8%',
},
{
name: 'Gingerbread 2',
calories: 356,
fat: 16.0,
carbs: 49,
protein: 3.9,
iron: '16%',
},
],
}
},
}
</script>
# Dialog (opens new window)
# Fullscreen
<template>
<VDialog v-model="isDialogOpen" fullscreen hideOverlay transition="dialog-bottom-transition">
<template #activator="{ on, attrs }">
<VBtn class="mr-3 mb-3" color="primary" dark v-bind="attrs" v-on="on">Fullscreen</VBtn>
</template>
<VCard>
<VToolbar dark color="primary">
<VBtn icon dark @click="isDialogOpen = false">
<VIcon>fa-window-close</VIcon>
</VBtn>
<VToolbarTitle>Settings</VToolbarTitle>
<VSpacer />
<VToolbarItems>
<VBtn dark text @click="isDialogOpen = false">Save</VBtn>
</VToolbarItems>
</VToolbar>
<VList threeLine subheader>
<VSubheader>User Controls</VSubheader>
<VListItem>
<VListItemContent>
<VListItemTitle>Content filtering</VListItemTitle>
<VListItemSubtitle>
Set the content filtering level to restrict apps that can be downloaded
</VListItemSubtitle>
</VListItemContent>
</VListItem>
<VListItem>
<VListItemContent>
<VListItemTitle>Password</VListItemTitle>
<VListItemSubtitle>Require password for purchase or use password to restrict purchase</VListItemSubtitle>
</VListItemContent>
</VListItem>
</VList>
<VDivider />
<VList threeLine subheader>
<VSubheader>General</VSubheader>
<VListItem>
<VListItemAction>
<VCheckbox v-model="notifications" />
</VListItemAction>
<VListItemContent>
<VListItemTitle>Notifications</VListItemTitle>
<VListItemSubtitle>Notify me about updates to apps or games that I downloaded</VListItemSubtitle>
</VListItemContent>
</VListItem>
<VListItem>
<VListItemAction>
<VCheckbox v-model="sound" />
</VListItemAction>
<VListItemContent>
<VListItemTitle>Sound</VListItemTitle>
<VListItemSubtitle>Auto-update apps at any time. Data charges may apply</VListItemSubtitle>
</VListItemContent>
</VListItem>
<VListItem>
<VListItemAction>
<VCheckbox v-model="widgets" />
</VListItemAction>
<VListItemContent>
<VListItemTitle>Auto-add widgets</VListItemTitle>
<VListItemSubtitle>Automatically add home screen widgets</VListItemSubtitle>
</VListItemContent>
</VListItem>
</VList>
</VCard>
</VDialog>
</template>
<script>
import { defineComponent, reactive, toRefs } from '@vue/composition-api'
export default defineComponent({
name: 'FullscreenDialog',
setup() {
const state = reactive({
isDialogOpen: false,
notifications: false,
sound: true,
widgets: false,
})
return { ...toRefs(state) }
},
})
</script>
# Transitions
<template>
<VRow align="center" justify="space-around">
<VDialog transition="dialog-bottom-transition" maxWidth="600">
<template #activator="{ on, attrs }">
<VBtn class="mr-3 mb-3" color="primary" v-bind="attrs" v-on="on">From the bottom</VBtn>
</template>
<template #default="dialog">
<VCard>
<VToolbar color="primary" dark>Opening from the bottom</VToolbar>
<VCardText>
<div class="text-h2 pa-12">Hello world!</div>
</VCardText>
<VCardActions class="justify-end">
<VBtn text @click="dialog.value = false">Close</VBtn>
</VCardActions>
</VCard>
</template>
</VDialog>
<VDialog transition="dialog-top-transition" maxWidth="600">
<template #activator="{ on, attrs }">
<VBtn class="mr-3 mb-3" color="primary" v-bind="attrs" v-on="on">From the top</VBtn>
</template>
<template #default="dialog">
<VCard>
<VToolbar color="primary" dark>Opening from the top</VToolbar>
<VCardText>
<div class="text-h2 pa-12">Hello world!</div>
</VCardText>
<VCardActions class="justify-end">
<VBtn text @click="dialog.value = false">Close</VBtn>
</VCardActions>
</VCard>
</template>
</VDialog>
</VRow>
</template>
# Modal
<template>
<VDialog v-model="isDialogOpen" persistent maxWidth="290">
<template #activator="{ on, attrs }">
<VBtn class="mr-3 mb-3" color="primary" dark v-bind="attrs" v-on="on">Modal</VBtn>
</template>
<VCard>
<VCardTitle class="headline">Use Google's location service?</VCardTitle>
<VCardText>
Let Google help apps determine location. This means sending anonymous location data to Google, even when no apps
are running.
</VCardText>
<VCardActions>
<VSpacer />
<VBtn color="green darken-1" text @click="isDialogOpen = false">Disagree</VBtn>
<VBtn color="green darken-1" text @click="isDialogOpen = false">Agree</VBtn>
</VCardActions>
</VCard>
</VDialog>
</template>
<script>
import { defineComponent, ref } from '@vue/composition-api'
export default defineComponent({
name: 'LoadingDialog',
setup() {
const isDialogOpen = ref(false)
return { isDialogOpen }
},
})
</script>
# Scrollable
<template>
<VDialog v-model="isDialogOpen" scrollable maxWidth="300px">
<template #activator="{ on, attrs }">
<VBtn class="mr-3 mb-3" color="primary" dark v-bind="attrs" v-on="on">Scrollable</VBtn>
</template>
<VCard>
<VCardTitle>Select Country</VCardTitle>
<VDivider />
<VCardText class="height300">
<VRadioGroup v-model="selectedCountry" column>
<VRadio label="Bahamas, The" value="bahamas" />
<VRadio label="Bahrain" value="bahrain" />
<VRadio label="Bangladesh" value="bangladesh" />
<VRadio label="Barbados" value="barbados" />
<VRadio label="Belarus" value="belarus" />
<VRadio label="Belgium" value="belgium" />
<VRadio label="Belize" value="belize" />
<VRadio label="Benin" value="benin" />
<VRadio label="Bhutan" value="bhutan" />
<VRadio label="Bolivia" value="bolivia" />
<VRadio label="Bosnia and Herzegovina" value="bosnia" />
<VRadio label="Botswana" value="botswana" />
<VRadio label="Brazil" value="brazil" />
<VRadio label="Brunei" value="brunei" />
<VRadio label="Bulgaria" value="bulgaria" />
<VRadio label="Burkina Faso" value="burkina" />
<VRadio label="Burma" value="burma" />
<VRadio label="Burundi" value="burundi" />
</VRadioGroup>
</VCardText>
<VDivider />
<VCardActions>
<VBtn color="blue darken-1" text @click="isDialogOpen = false">Close</VBtn>
<VBtn color="blue darken-1" text @click="isDialogOpen = false">Save</VBtn>
</VCardActions>
</VCard>
</VDialog>
</template>
<script>
import { defineComponent, ref } from '@vue/composition-api'
export default defineComponent({
name: 'ScrollableDialog',
setup() {
const isDialogOpen = ref(false)
const selectedCountry = ref('')
return { isDialogOpen, selectedCountry }
},
})
</script>
# Form
<template>
<VDialog persistent maxWidth="600px">
<template #activator="{ on, attrs }">
<VBtn class="mr-3 mb-3" color="primary" dark v-bind="attrs" v-on="on">Form</VBtn>
</template>
<template #default="dialog">
<VCard>
<VCardTitle>
<span class="headline">User Profile</span>
</VCardTitle>
<VCardText>
<VContainer>
<VRow>
<VCol cols="12" sm="6" md="4">
<VTextField label="Legal first name*" required />
</VCol>
<VCol cols="12" sm="6" md="4">
<VTextField label="Legal middle name" hint="example of helper text only on focus" />
</VCol>
<VCol cols="12" sm="6" md="4">
<VTextField label="Legal last name*" hint="example of persistent helper text" persistentHint required />
</VCol>
<VCol cols="12">
<VTextField label="Email*" required />
</VCol>
<VCol cols="12">
<VTextField label="Password*" type="password" required />
</VCol>
<VCol cols="12" sm="6">
<VSelect :items="['0-17', '18-29', '30-54', '54+']" label="Age*" required />
</VCol>
<VCol cols="12" sm="6">
<VAutocomplete
:items="[
'Skiing',
'Ice hockey',
'Soccer',
'Basketball',
'Hockey',
'Reading',
'Writing',
'Coding',
'Basejump',
]"
label="Interests"
multiple
/>
</VCol>
</VRow>
</VContainer>
<small>*indicates required field</small>
</VCardText>
<VCardActions>
<VSpacer />
<VBtn color="blue darken-1" text @click="dialog.value = false">Close</VBtn>
<VBtn color="blue darken-1" text @click="dialog.value = false">Save</VBtn>
</VCardActions>
</VCard>
</template>
</VDialog>
</template>
# Loading
<template>
<div>
<VBtn
class="mr-3 mb-3 white--text"
:disabled="isLoading"
:loading="isLoading"
color="purple darken-2"
@click="handleButtonClick"
>
Start loading
</VBtn>
<VDialog v-model="isLoading" hideOverlay persistent width="300">
<VCard color="primary" dark>
<VCardText>
Please stand by
<VProgressLinear indeterminate color="white" class="mb-0" />
</VCardText>
</VCard>
</VDialog>
</div>
</template>
<script>
import { defineComponent, ref, watch } from '@vue/composition-api'
export default defineComponent({
name: 'LoadingDialog',
setup() {
const isLoading = ref(false)
watch(isLoading, (newIsLoading) => {
if (!newIsLoading) return
setTimeout(() => (isLoading.value = false), 4000)
})
function handleButtonClick() {
isLoading.value = true
}
return {
isLoading,
handleButtonClick,
}
},
})
</script>
# Nested
<template>
<VRow align="center" justify="space-around">
<VBtn color="success" class="mr-3 mb-3" dark @click="nested.d1 = true">Nested 1 (Main)</VBtn>
<VBtn color="orange" class="mr-3 mb-3" dark @click="nested.d2 = true">Nested 2 (Child)</VBtn>
<VBtn color="brown" class="mr-3 mb-3" dark @click="nested.d3 = true">Nested 3 (Grandchild)</VBtn>
<VDialog v-model="nested.d1" fullscreen hideOverlay transition="dialog-bottom-transition" scrollable>
<VCard tile>
<VToolbar flat dark color="primary">
<VBtn icon dark @click="nested.d1 = false">
<VIcon>fa-window-close</VIcon>
</VBtn>
<VToolbarTitle>Settings</VToolbarTitle>
<VSpacer />
<VToolbarItems>
<VBtn dark text @click="nested.d1 = false">Save</VBtn>
</VToolbarItems>
<VMenu bottom right offsetY>
<template #activator="{ on, attrs }">
<VBtn dark icon v-bind="attrs" v-on="on">
<VIcon>fa-ellipsis-v</VIcon>
</VBtn>
</template>
<VList>
<VListItem v-for="(item, i) in items" :key="i" @click="() => {}">
<VListItemTitle>{{ item.title }}</VListItemTitle>
</VListItem>
</VList>
</VMenu>
</VToolbar>
<VCardText>
<VBtn color="primary" dark class="ma-2" @click="nested.d2 = !nested.d2">Open Nested 2 (Child)</VBtn>
<VTooltip right>
<template #activator="{ on, attrs }">
<VBtn class="ma-2" v-bind="attrs" v-on="on">Tool Tip Activator</VBtn>
</template>
Tool Tip
</VTooltip>
<VList threeLine subheader>
<VSubheader>User Controls</VSubheader>
<VListItem>
<VListItemContent>
<VListItemTitle>Content filtering</VListItemTitle>
<VListItemSubtitle>
Set the content filtering level to restrict apps that can be downloaded
</VListItemSubtitle>
</VListItemContent>
</VListItem>
<VListItem>
<VListItemContent>
<VListItemTitle>Password</VListItemTitle>
<VListItemSubtitle>
Require password for purchase or use password to restrict purchase
</VListItemSubtitle>
</VListItemContent>
</VListItem>
</VList>
<VDivider />
<VList threeLine subheader>
<VSubheader>General</VSubheader>
<VListItem>
<VListItemAction>
<VCheckbox v-model="notifications" />
</VListItemAction>
<VListItemContent>
<VListItemTitle>Notifications</VListItemTitle>
<VListItemSubtitle>Notify me about updates to apps or games that I downloaded</VListItemSubtitle>
</VListItemContent>
</VListItem>
<VListItem>
<VListItemAction>
<VCheckbox v-model="sound" />
</VListItemAction>
<VListItemContent>
<VListItemTitle>Sound</VListItemTitle>
<VListItemSubtitle>Auto-update apps at any time. Data charges may apply</VListItemSubtitle>
</VListItemContent>
</VListItem>
<VListItem>
<VListItemAction>
<VCheckbox v-model="widgets" />
</VListItemAction>
<VListItemContent>
<VListItemTitle>Auto-add widgets</VListItemTitle>
<VListItemSubtitle>Automatically add home screen widgets</VListItemSubtitle>
</VListItemContent>
</VListItem>
</VList>
</VCardText>
<div class="nestedFlex11" />
</VCard>
</VDialog>
<VDialog v-model="nested.d2" maxWidth="500px">
<VCard>
<VCardTitle>Dialog 2</VCardTitle>
<VCardText>
<VBtn color="primary" dark @click="nested.d3 = !nested.d3">Open Nested 3 (Grandchild)</VBtn>
<VSelect :items="select" label="A Select List" itemValue="text" />
</VCardText>
<VCardActions>
<VBtn color="primary" text @click="nested.d2 = false">Close</VBtn>
</VCardActions>
</VCard>
</VDialog>
<VDialog v-model="nested.d3" maxWidth="500px">
<VCard>
<VCardTitle>
<span>Nested 3 (Grandchild)</span>
<VSpacer />
<VMenu bottom left>
<template #activator="{ on, attrs }">
<VBtn icon v-bind="attrs" v-on="on">
<VIcon>fa-ellipsis-v</VIcon>
</VBtn>
</template>
<VList>
<VListItem v-for="(item, i) in items" :key="i" @click="() => {}">
<VListItemTitle>{{ item.title }}</VListItemTitle>
</VListItem>
</VList>
</VMenu>
</VCardTitle>
<VCardActions>
<VBtn color="primary" text @click="nested.d3 = false">Close</VBtn>
</VCardActions>
</VCard>
</VDialog>
</VRow>
</template>
<script>
import { defineComponent, reactive, toRefs } from '@vue/composition-api'
export default defineComponent({
name: 'NestedDialog',
setup() {
const state = reactive({
nested: {
d1: false,
d2: false,
d3: false,
},
notifications: false,
sound: true,
widgets: false,
items: [
{
title: 'Click Me',
},
{
title: 'Click Me',
},
{
title: 'Click Me',
},
{
title: 'Click Me 2',
},
],
select: [
{ text: 'State 1' },
{ text: 'State 2' },
{ text: 'State 3' },
{ text: 'State 4' },
{ text: 'State 5' },
{ text: 'State 6' },
{ text: 'State 7' },
],
})
return { ...toRefs(state) }
},
})
</script>
# Overflowed
<template>
<VDialog width="600px">
<template #activator="{ on, attrs }">
<VBtn class="mr-3 mb-3" color="primary" dark v-bind="attrs" v-on="on">Overflowed</VBtn>
</template>
<template #default="dialog">
<VCard>
<VCardTitle>
<span class="headline">Use Google's location service?</span>
</VCardTitle>
<VCardText>
Lorem ipsum dolor sit amet, semper quis, sapien id natoque elit. Nostra urna at, magna at neque sed sed ante
imperdiet, dolor mauris cursus velit, velit non, sem nec. Volutpat sem ridiculus placerat leo, augue in, duis
erat proin condimentum in a eget, sed fermentum sed vestibulum varius ac, vestibulum volutpat orci ut elit
eget tortor. Ultrices nascetur nulla gravida ante arcu. Pharetra rhoncus morbi ipsum, nunc tempor debitis,
ipsum pellentesque, vitae id quam ut mauris dui tempor, aptent non. Quisque turpis. Phasellus quis lectus
luctus orci eget rhoncus. Amet donec vestibulum mattis commodo, nulla aliquet, nibh praesent, elementum nulla.
Sit lacus pharetra tempus magna neque pellentesque, nulla vel erat. Justo ex quisque nulla accusamus
venenatis, sed quis. Nibh phasellus gravida metus in, fusce aenean ut erat commodo eros. Ut turpis, dui
integer, nonummy pede placeat nec in sit leo. Faucibus porttitor illo taciti odio, amet viverra scelerisque
quis quis et tortor, curabitur morbi a. Enim tempor at, rutrum elit condimentum, amet rutrum vitae tempor
torquent nunc. Praesent vestibulum integer maxime felis. Neque aenean quia vitae nostra, tempus elit enim id
dui, at egestas pulvinar. Integer libero vestibulum, quis blandit scelerisque mattis fermentum nulla, tortor
donec vestibulum dolor amet eget, elit nullam. Aliquam leo phasellus aliquam curabitur metus a, nulla justo
mattis duis interdum vel, mollis vitae et id, vestibulum erat ridiculus sit pulvinar justo sed. Vehicula
convallis, et nulla wisi, amet vestibulum risus, quam ac egestas. Et vitae, nulla gravida erat scelerisque
nullam nunc pellentesque, a dictumst cras augue, purus imperdiet non. Varius montes cursus varius vel tortor,
nec leo a qui, magni cras, velit vel consectetuer lobortis vel. Nibh erat et wisi felis leo porttitor, sapien
nibh sapien pede mi, sed eget porttitor, repellendus arcu ac quis. Luctus vulputate aut est sem magna,
placerat accumsan nunc vestibulum ipsum ac auctor, maecenas lorem in ut nec mauris tortor, doloribus varius
sem tortor vestibulum mollis, eleifend tortor felis tempus lacus eu eu. Eleifend vel eu, nullam maecenas
mauris nec nunc euismod, tortor porta ridiculus potenti, massa tristique nam magna, et wisi placerat et erat
ante. Eget pede erat in facilisis, fermentum venenatis sodales. Ac tortor sociis et non animi tristique,
rhoncus malesuada, ut arcu volutpat scelerisque sollicitudin, elit curabitur dui pede purus dolor, integer
aenean risus taciti nulla eleifend accumsan. At pulvinar diam parturient, interdum mi velit aliquet et a. Arcu
at ac placerat eget justo semper, purus sociis curabitur mi ipsum consequat ut, mollis vestibulum, est ante
ornare lacus sem. Neque magna mauris, commodo quisque, praesent semper suscipit lobortis nam. Justo malesuada
cursus ac nunc litora nunc. Tellus ac, in lobortis nunc, montes lectus purus fermentum. Ac sit wisi. Sodales
aliquam, sed vestibulum nullam arcu sit risus arcu, id luctus vitae lorem nibh, integer nec nullam class
cursus mi, purus arcu lectus. Vel ante suscipit volutpat potenti mattis sed, wisi eu placerat aliquam erat,
lectus morbi lobortis at assumenda. Consequat neque purus ipsum voluptas odio, netus vestibulum ut nec,
suspendisse pellentesque nec enim in. Wisi dictum sed semper a, ipsum erat tellus habitasse est, erat sem
ornare, vitae quisque ultricies. Dui sed blandit. Tempor et faucibus justo sed luctus, nec vitae vitae. Nunc
nibh pede, ipsum vestibulum aenean leo ante ultricies, nam cras quis sed penatibus amet. In mauris a. Integer
metus mauris tortor, et rutrum vestibulum ultricies, ut phasellus in ullamcorper ut mollit, eu justo. Cursus
pretium venenatis. Cras pellentesque vel sodales accumsan aenean. Feugiat metus sit nec in aliquet amet,
porttitor pretium vulputate massa. Consequat ipsum luctus quisque adipiscing libero. Wisi sollicitudin. Eget
vitae ac lobortis, lorem natoque vestibulum et, aliquet faucibus at morbi nibh, vel condimentum. Massa unde
orci sed id sed, odio donec congue nec praesent amet. Hymenaeos velit lacus, quis vivamus libero tempus duis,
eu nisi eu, ipsum at accumsan pede justo morbi donec, massa et libero sit risus neque tortor. Ut sed sed etiam
hendrerit dapibus, quis metus suspendisse nibh. Fringilla tempor felis augue magna. Cum arcu a, id vitae.
Pellentesque pharetra in cras sociis adipiscing est. Nibh nec mattis at maecenas, nisl orci aliquam nulla
justo egestas venenatis, elementum duis vel porta eros, massa vitae, eligendi imperdiet amet. Nec neque luctus
suscipit, justo sem praesent, ut nisl quisque, volutpat torquent wisi tellus aliquam reprehenderit, curabitur
cras at quis massa porttitor mauris. Eros sed ultrices. Amet dignissim justo urna feugiat mauris litora, etiam
accumsan, lobortis a orci suspendisse. Semper ac mauris, varius bibendum pretium, orci urna nunc ullamcorper
auctor, saepe sem integer quam, at feugiat egestas duis. Urna ligula ante. Leo elementum nonummy. Sagittis
mauris est in ipsum, nulla amet non justo, proin id potenti platea posuere sit ut, nunc sit erat bibendum.
Nibh id auctor, ab nulla vivamus ultrices, posuere morbi nunc tellus gravida vivamus. Mauris nec, facilisi
quam fermentum, ut mauris integer, orci tellus tempus diam ut in pellentesque. Wisi faucibus tempor et odio
leo diam, eleifend quis integer curabitur sit scelerisque ac, mauris consequat luctus quam penatibus fringilla
dis, vitae lacus in, est eu ac tempus. Consectetuer amet ipsum amet dui, sed blandit id sed. Tellus integer,
dignissim id pede sodales quis, felis dolorem id mauris orci, orci tempus ut. Nullam hymenaeos. Curabitur in
a, tortor ut praesent placerat tincidunt interdum, ac dignissim metus nonummy hendrerit wisi, etiam ut. Semper
praesent integer fusce, tortor suspendisse, augue ligula orci ante asperiores ullamcorper. In sit per mi sed
sed, mi vestibulum mus nam, morbi mauris neque vitae aliquam proin senectus. Ac amet arcu mollis ante congue
elementum, inceptos eget optio quam pellentesque quis lobortis, sollicitudin sed vestibulum sollicitudin,
lectus parturient nullam, leo orci ligula ultrices. At tincidunt enim, suspendisse est sit sem ac. Amet tellus
molestie est purus magna augue, non etiam et in wisi id. Non commodo, metus lorem facilisi lobortis ac velit,
montes neque sed risus consectetuer fringilla dolor. Quam justo et integer aliquam, cursus nulla enim orci,
nam cursus adipiscing, integer torquent non, fringilla per maecenas. Libero ipsum sed tellus purus et. Duis
molestie placerat erat donec ut. Dolor enim erat massa faucibus ultrices in, ante ultricies orci lacus, libero
consectetuer mauris magna feugiat neque dapibus, donec pretium et. Aptent dui, aliquam et et amet nostra
ligula. Augue curabitur duis dui volutpat, tempus sed ut pede donec. Interdum luctus, lectus nulla aenean
elit, id sit magna, vulputate ultrices pellentesque vel id fermentum morbi. Tortor et. Adipiscing augue lorem
cum non lacus, rutrum sodales laoreet duis tortor, modi placerat facilisis et malesuada eros ipsum, vehicula
tempus. Ac vivamus amet non aliquam venenatis lectus, sociosqu adipiscing consequat nec arcu odio. Blandit
orci nec nec, posuere in pretium, enim ut, consectetuer nullam urna, risus vel. Nullam odio vehicula massa
sed, etiam sociis mauris, lacus ullamcorper, libero imperdiet non sodales placerat justo vehicula. Nec morbi
imperdiet. Fermentum sem libero iaculis bibendum et eros, eget maecenas non nunc, ad pellentesque. Ut nec diam
elementum interdum. Elementum vitae tellus lacus vitae, ipsum phasellus, corporis vehicula in ac sed massa
vivamus, rutrum elit, ultricies metus volutpat. Semper wisi et, sollicitudin nunc vestibulum, cursus accumsan
nunc pede tempus mi ipsum, ligula sed. Non condimentum ac dolor sit. Mollis eu aliquam, vel mattis mollis
massa ut dolor ante, tempus lacinia arcu. Urna vestibulum lorem, nulla fermentum, iaculis ut congue ac
vivamus. Nam libero orci, pulvinar nulla, enim pellentesque consectetuer leo, feugiat rhoncus rhoncus vel.
Magna sociosqu donec, dictum cursus ullamcorper viverra. Ultricies quis orci lorem, suspendisse ut vestibulum
integer, purus sed lorem pulvinar habitasse turpis. +
</VCardText>
<VCardActions>
<VSpacer />
<VBtn color="green darken-1" text @click="dialog.value = false">Disagree</VBtn>
<VBtn color="green darken-1" text @click="dialog.value = false">Agree</VBtn>
</VCardActions>
</VCard>
</template>
</VDialog>
</template>
# Without activator
<template>
<VRow align="center" justify="center">
<VBtn color="primary" dark @click.stop="isDialogOpen = true">Without Activator</VBtn>
<VDialog v-model="isDialogOpen" maxWidth="290">
<VCard>
<VCardTitle class="headline">Use Google's location service?</VCardTitle>
<VCardText>
Let Google help apps determine location. This means sending anonymous location data to Google, even when no
apps are running.
</VCardText>
<VCardActions>
<VSpacer />
<VBtn color="green darken-1" text @click="isDialogOpen = false">Disagree</VBtn>
<VBtn color="green darken-1" text @click="isDialogOpen = false">Agree</VBtn>
</VCardActions>
</VCard>
</VDialog>
</VRow>
</template>
<script>
import { defineComponent, ref } from '@vue/composition-api'
export default defineComponent({
name: 'ActivatorlessDialog',
setup() {
const isDialogOpen = ref(false)
return { isDialogOpen }
},
})
</script>
# Dropdown
# Autocomplete (opens new window)
<template>
<VContainer fluid>
<VAutocomplete v-model="selectedItems" :items="items" dense label="Regular" multiple />
<VAutocomplete v-model="selectedItems" :items="items" outlined dense chips smallChips label="Outlined" multiple />
<VAutocomplete
v-model="selectedItems"
:items="items"
solo
dense
chips
deletableChips
smallChips
label="Solo"
multiple
/>
<VAutocomplete v-model="selectedItems" :items="items" filled dense multiple placeholder="Filled" />
</VContainer>
</template>
<script>
import { defineComponent } from '@vue/composition-api'
import { useDropdown } from './useDropdown'
export default defineComponent({
name: 'AutocompleteDropdown',
setup() {
return useDropdown()
},
})
</script>
# Combobox (opens new window)
<template>
<VContainer fluid>
<VCombobox v-model="selectedItems" :items="items" dense label="Regular" multiple />
<VCombobox v-model="selectedItems" :items="items" outlined dense chips smallChips label="Outlined" multiple />
<VCombobox
v-model="selectedItems"
:items="items"
solo
dense
chips
deletableChips
smallChips
label="Solo"
multiple
/>
<VCombobox v-model="selectedItems" :items="items" filled dense multiple placeholder="Filled" />
</VContainer>
</template>
<script>
import { defineComponent } from '@vue/composition-api'
import { useDropdown } from './useDropdown'
export default defineComponent({
name: 'ComboboxDropdown',
setup() {
return useDropdown()
},
})
</script>
# Select (opens new window)
<template>
<VContainer fluid>
<VSelect v-model="selectedItems" :items="items" dense label="Regular" multiple />
<VSelect v-model="selectedItems" :items="items" outlined dense chips smallChips label="Outlined" multiple />
<VSelect v-model="selectedItems" :items="items" solo dense chips deletableChips smallChips label="Solo" multiple />
<VSelect v-model="selectedItems" :items="items" filled dense multiple placeholder="Filled" />
</VContainer>
</template>
<script>
import { defineComponent } from '@vue/composition-api'
import { useDropdown } from './useDropdown'
export default defineComponent({
name: 'SelectDropdown',
setup() {
return useDropdown()
},
})
</script>
# Expansion Panel (opens new window)
<template>
<VExpansionPanels>
<VExpansionPanel>
<VExpansionPanelHeader>
<template #actions>
<VIcon class="icon">$expand</VIcon>
</template>
<span class="header">What is a dog?</span>
</VExpansionPanelHeader>
<VExpansionPanelContent>
A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome
guest in many households across the world.
</VExpansionPanelContent>
</VExpansionPanel>
<VExpansionPanel>
<VExpansionPanelHeader>
<template #actions>
<VIcon class="icon">$expand</VIcon>
</template>
<span class="header">What kinds of dogs are there?</span>
</VExpansionPanelHeader>
<VExpansionPanelContent>
There are many breeds of dogs. Each breed varies in size and temperament. Owners often select a breed of dog
that they find to be compatible with their own lifestyle and desires from a companion.
</VExpansionPanelContent>
</VExpansionPanel>
<VExpansionPanel>
<VExpansionPanelHeader>
<template #actions>
<VIcon class="icon">$expand</VIcon>
</template>
<span class="header">How do you acquire a dog?</span>
</VExpansionPanelHeader>
<VExpansionPanelContent>
<p>
Three common ways for a prospective owner to acquire a dog is from pet shops, private owners, or shelters.
</p>
<p>
A pet shop may be the most convenient way to buy a dog. Buying a dog from a private owner allows you to assess
the pedigree and upbringing of your dog before choosing to take it home. Lastly, finding your dog from a
shelter, helps give a good home to a dog who may not find one so readily.
</p>
</VExpansionPanelContent>
</VExpansionPanel>
</VExpansionPanels>
</template>
# File Input (opens new window)
<template>
<VContainer fluid>
<VRow>
<VCol cols="12" noGutters>
<h2 class="text-h6">File Input</h2>
</VCol>
<VCol cols="12" md="6">
<VFileInput chips multiple label="With Chips" />
</VCol>
<VCol cols="12" md="6">
<VFileInput smallChips multiple label="With Small Chips" />
</VCol>
<VCol cols="12" md="6">
<VFileInput showSize counter multiple label="File Counter and Sizes" />
</VCol>
<VCol cols="12" md="6">
<VFileInput counter multiple label="File Counter" />
</VCol>
<VCol cols="12" md="6">
<VFileInput accept="image/*" label="Accept All Image Formats" />
</VCol>
<VCol cols="12" md="6">
<VFileInput accept="image/png" label="Accept Only .PNG Format" />
</VCol>
<VCol cols="12" md="6">
<VFileInput accept=".docx" label="Accept Only .DOCX Format" />
</VCol>
<VCol cols="12" md="6">
<VFileInput accept=".pdf" label="Accept Only .PDF Format" />
</VCol>
<VCol cols="12" md="6">
<VFileInput label="With Icon" filled prependIcon="fa-video" />
</VCol>
<VCol cols="12" md="6">
<VFileInput label="Dense" outlined dense />
</VCol>
<VCol cols="12" md="6">
<VFileInput multiple label="Multiple File Input" />
</VCol>
<VCol cols="12" md="6">
<VFileInput showSize label="File Size (Inline)" />
</VCol>
<VCol cols="12" md="6">
<VFileInput :rules="rules.size" label="File With Rules (Size < 20KB)" />
</VCol>
<VCol cols="12" md="6">
<VFileInput :rules="rules.contains" label="File With Rules (Contains 'Pitcher')" />
</VCol>
<VCol cols="12" md="6">
<VFileInput :rules="rules.mixed" label="Mixed Rules (Size < 20KB and Contains 'Pitcher')" />
</VCol>
<VCol cols="12" md="6">
<VFileInput :rules="rules.multiple" label="Rules for Multiple Files (Size < 20KB)" multiple />
</VCol>
<VCol cols="12" md="6">
<VFileInput label="File Name(s) Labeled / Chips" multiple>
<template #selection="{ text }">
<VChip small label color="primary">
{{ text }}
</VChip>
</template>
</VFileInput>
</VCol>
<VCol cols="12" md="6">
<VFileInput
v-model="files"
color="deep-purple accent-4"
counter
label="Customizable Chips ( 2 Files + x File(s) )"
multiple
outlined
:showSize="1000"
>
<template #selection="{ index, text }">
<VChip v-if="index < 2" color="deep-purple accent-4" dark label small>
{{ text }}
</VChip>
<span v-else-if="index === 2" class="overline grey--text text--darken-3 mx-2">
+{{ files.length - 2 }} File(s)
</span>
</template>
</VFileInput>
</VCol>
<VCol cols="12" md="6">
<VFileInput color="success" counter label="Customizable / Buttons" multiple outlined :showSize="1000">
<template #selection="{ index, text }">
<VBtn v-if="index < 1" color="blue" dark label small>
{{ text }}
</VBtn>
<span v-else-if="index === 1" class="overline grey--text text--darken-3 mx-2">
+{{ files.length - 1 }} File(s)
</span>
</template>
</VFileInput>
</VCol>
<VCol cols="12" md="6">
<VFileInput outlined color="orange" multiple label="Bordered File Input w/ Icon" prependIcon="fa-check" />
</VCol>
<VCol cols="12" md="6">
<VFileInput hideInput />
</VCol>
<VCol cols="12" md="6">
<VFileInput hideInput prependIcon="fa-camera" />
</VCol>
<VCol cols="12" md="6">
<VFileInput disabled label="Disabled File Input" />
</VCol>
<VCol cols="12" md="6">
<VFileInput truncateLength="5" label="Truncated File Name (Max 5 Chars)" />
</VCol>
</VRow>
</VContainer>
</template>
<script>
import { reactive, toRefs } from '@vue/composition-api'
export default {
name: 'FileInput',
displayName: 'File Input',
setup() {
const state = reactive({
rules: {
size: [(value) => !value || value.size < 20000 || 'Size should be less than 20KB!'],
contains: [(value) => !value || value.name.includes('Pitcher') || 'File name should contains "Pitcher"!'],
mixed: [
(value) => !value || value.size < 20000 || 'Size should be less than 20KB!',
(value) => !value || value.name.includes('Pitcher') || 'File name should contains "Pitcher"!',
],
multiple: [
(value) => !value || !value.some((value) => value.size >= 20000) || 'Size should be less than 20KB!',
],
},
files: null,
})
return { ...toRefs(state) }
},
}
</script>
# Footer (opens new window)
<template>
<VFooter color="brown lighten-1" padless>
<VRow justify="center" noGutters>
<VBtn v-for="link in links" :key="link" olor="white" text rounded class="my-2">
{{ link }}
</VBtn>
<VCol class="black lighten-2 py-4 text-center white--text" cols="12">
{{ new Date().getFullYear() }} —
<strong>Pitcher</strong>
</VCol>
</VRow>
</VFooter>
</template>
<script>
import { defineComponent } from '@vue/composition-api'
import { useFooter } from './useFooter'
export default defineComponent({
name: 'BasicFooter',
setup() {
return useFooter()
},
})
</script>
<template>
<VFooter :padless="true" width="100%">
<VCard flat tile width="100%" class="red lighten-1 text-center">
<VCardText>
<VBtn v-for="icon in icons" :key="icon" class="mx-4" icon>
<VIcon size="24px">
{{ icon }}
</VIcon>
</VBtn>
</VCardText>
<VDivider />
<VCardText class="white--text">
{{ new Date().getFullYear() }} —
<strong>Padless Footer</strong>
</VCardText>
</VCard>
</VFooter>
</template>
<script>
import { defineComponent } from '@vue/composition-api'
import { useFooter } from './useFooter'
export default defineComponent({
name: 'CompanyFooterNoPadding',
setup() {
return useFooter()
},
})
</script>
<template>
<VFooter :padless="false" width="100%">
<VCard flat tile width="100%" class="success lighten-1 text-center">
<VCardText>
<VBtn v-for="icon in icons" :key="icon" class="mx-4" icon>
<VIcon size="24px">
{{ icon }}
</VIcon>
</VBtn>
</VCardText>
<VDivider />
<VCardText class="white--text">
{{ new Date().getFullYear() }} —
<strong>With padding</strong>
</VCardText>
</VCard>
</VFooter>
</template>
<script>
import { defineComponent } from '@vue/composition-api'
import { useFooter } from './useFooter'
export default defineComponent({
name: 'CompanyFooter',
setup() {
return useFooter()
},
})
</script>
<template>
<VFooter dark padless width="100%">
<VCard flat tile class="indigo lighten-1 white--text text-center">
<VCardText>
<VBtn v-for="icon in icons" :key="icon" class="mx-4 white--text" icon>
<VIcon size="24px">
{{ icon }}
</VIcon>
</VBtn>
</VCardText>
<VCardText class="white--text pt-0">
Phasellus feugiat arcu sapien, et iaculis ipsum elementum sit amet. Mauris cursus commodo interdum. Praesent ut
risus eget metus luctus accumsan id ultrices nunc. Sed at orci sed massa consectetur dignissim a sit amet dui.
Duis commodo vitae velit et faucibus. Morbi vehicula lacinia malesuada. Nulla placerat augue vel ipsum ultrices,
cursus iaculis dui sollicitudin. Vestibulum eu ipsum vel diam elementum tempor vel ut orci. Orci varius natoque
penatibus et magnis dis parturient montes, nascetur ridiculus mus.
</VCardText>
<VDivider />
<VCardText class="white--text">
{{ new Date().getFullYear() }} —
<strong>Pitcher</strong>
</VCardText>
</VCard>
</VFooter>
</template>
<script>
import { defineComponent } from '@vue/composition-api'
import { useFooter } from './useFooter'
export default defineComponent({
name: 'IndigoFooter',
setup() {
return useFooter()
},
})
</script>
<template>
<VFooter color="primary lighten-1" padless width="100%">
<VRow justify="center" noGutters>
<VBtn v-for="link in links" :key="link" color="white" text rounded class="my-2">
{{ link }}
</VBtn>
<VCol class="primary lighten-2 py-4 text-center white--text" cols="12">
{{ new Date().getFullYear() }} —
<strong>Vuetify</strong>
</VCol>
</VRow>
</VFooter>
</template>
<script>
import { defineComponent } from '@vue/composition-api'
import { useFooter } from './useFooter'
export default defineComponent({
name: 'LightBlueFooter',
setup() {
return useFooter()
},
})
</script>
<template>
<VFooter dark padless width="100%">
<VCard class="flex" flat tile>
<VCardTitle class="teal">
<strong class="subheading">Get connected with us!</strong>
<VSpacer />
<VBtn v-for="icon in icons" :key="icon" class="mx-4" dark icon>
<VIcon size="24px">
{{ icon }}
</VIcon>
</VBtn>
</VCardTitle>
<VCardText class="py-2 white--text text-center">
{{ new Date().getFullYear() }} —
<strong>Pitcher</strong>
</VCardText>
</VCard>
</VFooter>
</template>
<script>
import { defineComponent } from '@vue/composition-api'
import { useFooter } from './useFooter'
export default defineComponent({
name: 'TealFooter',
setup() {
return useFooter()
},
})
</script>
# Icon (opens new window)
<template>
<VContainer fluid>
<VRow class="fill-height" justify="space-around" align="center">
<span>
<VIcon xSmall>fa-users</VIcon>
x-small
</span>
<span>
<VIcon small>fa-users</VIcon>
small
</span>
<span>
<VIcon>fa-users</VIcon>
medium
</span>
<span>
<VIcon large>fa-users</VIcon>
large
</span>
<span>
<VIcon xLarge>fa-users</VIcon>
x-large
</span>
</VRow>
</VContainer>
</template>
# Bottom Navigation (opens new window)
# Basic
<template>
<VBottomNavigation v-model="selected">
<VBtn value="recent">
<span>Recent</span>
<VIcon>fa-history</VIcon>
</VBtn>
<VBtn value="favorites">
<span>Favorites</span>
<VIcon>fa-heart</VIcon>
</VBtn>
<VBtn value="nearby">
<span>Nearby</span>
<VIcon>fa-map-marker</VIcon>
</VBtn>
</VBottomNavigation>
</template>
<script>
import { defineComponent, ref } from '@vue/composition-api'
export default defineComponent({
name: 'BasicBottomNav',
setup() {
const selected = ref('recent')
return { selected }
},
})
</script>
# Colored
<template>
<VBottomNavigation v-model="selected" color="primary">
<VBtn value="recent">
<span>Recent</span>
<VIcon>fa-history</VIcon>
</VBtn>
<VBtn value="favorites">
<span>Favorites</span>
<VIcon>fa-heart</VIcon>
</VBtn>
<VBtn value="nearby">
<span>Nearby</span>
<VIcon>fa-map-marker</VIcon>
</VBtn>
</VBottomNavigation>
</template>
<script>
import { defineComponent, ref } from '@vue/composition-api'
export default defineComponent({
name: 'ColoredBottomNav',
setup() {
const selected = ref('recent')
return { selected }
},
})
</script>
# With grow
<template>
<VBottomNavigation v-model="selected" color="secondary" grow>
<VBtn value="recent">
<span>Recent</span>
<VIcon>fa-history</VIcon>
</VBtn>
<VBtn value="favorites">
<span>Favorites</span>
<VIcon>fa-heart</VIcon>
</VBtn>
<VBtn value="nearby">
<span>Nearby</span>
<VIcon>fa-map-marker</VIcon>
</VBtn>
</VBottomNavigation>
</template>
<script>
import { defineComponent, ref } from '@vue/composition-api'
export default defineComponent({
name: 'GrowedBottomNav',
setup() {
const selected = ref('recent')
return { selected }
},
})
</script>
# Horizontal
<template>
<VBottomNavigation v-model="selected" color="primary" horizontal>
<VBtn value="recent">
<span>Recent</span>
<VIcon>fa-history</VIcon>
</VBtn>
<VBtn value="favorites">
<span>Favorites</span>
<VIcon>fa-heart</VIcon>
</VBtn>
<VBtn value="nearby">
<span>Nearby</span>
<VIcon>fa-map-marker</VIcon>
</VBtn>
</VBottomNavigation>
</template>
<script>
import { defineComponent, ref } from '@vue/composition-api'
export default defineComponent({
name: 'HorizontalBottomNav',
setup() {
const selected = ref('recent')
return { selected }
},
})
</script>
# Drawer Navigation (opens new window)
<template>
<VCard class="mx-auto" height="350" width="256">
<VNavigationDrawer permanent>
<VListItem>
<VListItemContent>
<VListItemTitle>Application</VListItemTitle>
<VListItemSubtitle>subtext</VListItemSubtitle>
</VListItemContent>
</VListItem>
<VDivider />
<VList dense nav>
<VListItem v-for="item in items" :key="item.title" link>
<VListItemIcon>
<VIcon>{{ item.icon }}</VIcon>
</VListItemIcon>
<VListItemContent>
<VListItemTitle>{{ item.title }}</VListItemTitle>
</VListItemContent>
</VListItem>
</VList>
</VNavigationDrawer>
</VCard>
</template>
<script>
import { defineComponent, ref } from '@vue/composition-api'
export default defineComponent({
name: 'BasicDrawer',
setup() {
const items = ref([
{ title: 'Dashboard', icon: 'fa-tachometer-alt' },
{ title: 'Photos', icon: 'fa-image' },
{ title: 'About', icon: 'fa-question-square' },
])
return { items }
},
})
</script>
<template>
<VCard class="mx-auto overflow-hidden" height="350" width="344">
<VSystemBar color="deep-purple darken-3" />
<VAppBar color="deep-purple accent-4" dark prominent>
<VAppBarNavIcon @click.stop="isDrawerOpen = !isDrawerOpen" />
<VToolbarTitle>My files</VToolbarTitle>
<VSpacer />
<VBtn icon>
<VIcon>fa-search</VIcon>
</VBtn>
<VBtn icon>
<VIcon>fa-filter</VIcon>
</VBtn>
<VBtn icon>
<VIcon>fa-ellipsis-v</VIcon>
</VBtn>
</VAppBar>
<VNavigationDrawer v-model="isDrawerOpen" absolute bottom temporary>
<VList nav dense>
<VListItemGroup v-model="group" activeClass="deep-purple--text text--accent-4">
<VListItem>
<VListItemTitle>Foo</VListItemTitle>
</VListItem>
<VListItem>
<VListItemTitle>Bar</VListItemTitle>
</VListItem>
<VListItem>
<VListItemTitle>Fizz</VListItemTitle>
</VListItem>
<VListItem>
<VListItemTitle>Buzz</VListItemTitle>
</VListItem>
</VListItemGroup>
</VList>
</VNavigationDrawer>
<VCardText>The navigation drawer will appear from the bottom on smaller size screens.</VCardText>
</VCard>
</template>
<script>
import { defineComponent, ref } from '@vue/composition-api'
export default defineComponent({
name: 'PurpleDrawer',
setup() {
const isDrawerOpen = ref(false)
const group = ref(null)
return { isDrawerOpen, group }
},
})
</script>
<template>
<VCard class="mx-auto" height="350" width="330">
<VNavigationDrawer permanent width="100%">
<VRow class="fill-height" noGutters>
<VNavigationDrawer dark miniVariant miniVariantWidth="56" permanent>
<VListItem class="px-2">
<VListItemAvatar>
<VImg src="https://randomuser.me/api/portraits/women/75.jpg" />
</VListItemAvatar>
</VListItem>
<VDivider />
<VList dense nav>
<VListItem v-for="item in items" :key="item.title">
<VListItemAction>
<VIcon>{{ item.icon }}</VIcon>
</VListItemAction>
<VListItemContent>
<VListItemTitle>{{ item.title }}</VListItemTitle>
</VListItemContent>
</VListItem>
</VList>
</VNavigationDrawer>
<VList class="grow">
<VListItem v-for="link in links" :key="link" link>
<VListItemTitle v-text="link" />
</VListItem>
</VList>
</VRow>
</VNavigationDrawer>
</VCard>
</template>
<script>
import { defineComponent, ref } from '@vue/composition-api'
export default defineComponent({
name: 'PermanentDrawer',
setup() {
const items = ref([
{ title: 'Dashboard', icon: 'fa-tachometer-alt' },
{ title: 'Photos', icon: 'fa-image' },
{ title: 'About', icon: 'fa-question-square' },
])
const links = ref(['Home', 'Contacts', 'Settings'])
return {
items,
links,
}
},
})
</script>
# Overlay (opens new window)
# Fixed
<template>
<VContainer>
<VBtn class="mx-auto" color="primary" @click="showOverlay = !showOverlay">Show Fixed Overlay</VBtn>
<VOverlay :value="showOverlay">
<VCard light class="pa-12">
<VCardText>
<h4 class="mb-4">Fixed overlay</h4>
<VBtn color="error" @click="showOverlay = false">Close</VBtn>
</VCardText>
</VCard>
</VOverlay>
</VContainer>
</template>
<script>
import { defineComponent, ref } from '@vue/composition-api'
export default defineComponent({
name: 'FixedOverlay',
setup() {
const showOverlay = ref(false)
return { showOverlay }
},
})
</script>
# Absolute
<template>
<VContainer class="d-flex justify-center align-center container">
<VBtn class="mx-auto" color="primary" @click="showOverlay = !showOverlay">Show Absolute Overlay</VBtn>
<VOverlay :value="showOverlay" absolute>
<VCard light class="pa-12">
<VCardText>
<h4 class="mb-4">Absolute overlay</h4>
<VBtn color="error" @click="showOverlay = false">Close</VBtn>
</VCardText>
</VCard>
</VOverlay>
</VContainer>
</template>
<script>
import { defineComponent, ref } from '@vue/composition-api'
export default defineComponent({
name: 'AbsoluteOverlay',
setup() {
const showOverlay = ref(false)
return { showOverlay }
},
})
</script>
<style scoped>
.container {
position: relative;
height: 220px;
}
</style>
# Progress Bar (opens new window)
<template>
<VProgressLinear value="30" height="25" />
</template>
<template>
<VProgressLinear color="warning" indeterminate />
</template>
<template>
<VProgressLinear bufferValue="55" color="success" reverse stream value="30" />
</template>
# Rating (opens new window)
<template>
<VRow align="center">
<VCol align="center">
<VRating v-model="rating" backgroundColor="purple lighten-3" color="purple" />
</VCol>
<VCol align="center">
<VRating v-model="rating" backgroundColor="pink lighten-3" color="pink" />
</VCol>
<VCol align="center">
<VRating v-model="rating" backgroundColor="orange lighten-3" color="orange" />
</VCol>
<VCol align="center">
<VRating v-model="rating" backgroundColor="green lighten-3" color="green" />
</VCol>
<VCol align="center">
<VRating v-model="rating" backgroundColor="red lighten-3" color="red" />
</VCol>
<VCol align="center">
<VRating v-model="rating" backgroundColor="indigo lighten-3" color="indigo" />
</VCol>
</VRow>
</template>
<script>
import { defineComponent, ref } from '@vue/composition-api'
export default defineComponent({
name: 'BasicRating',
setup() {
const rating = ref(4)
return { rating }
},
})
</script>
<template>
<VRow align="center">
<VCol align="center">
<VRating v-model="rating" backgroundColor="purple lighten-3" color="purple" large />
</VCol>
<VCol align="center">
<VRating v-model="rating" backgroundColor="pink lighten-3" color="pink" large />
</VCol>
<VCol align="center">
<VRating v-model="rating" backgroundColor="orange lighten-3" color="orange" large />
</VCol>
<VCol align="center">
<VRating v-model="rating">
<template #item="props">
<VIcon :color="props.isFilled ? genColor(props.index) : 'grey lighten-1'" large @click="props.click">
{{ props.isFilled ? 'fa-star' : 'fa-star' }}
</VIcon>
</template>
</VRating>
</VCol>
</VRow>
</template>
<script>
import { defineComponent, ref } from '@vue/composition-api'
export default defineComponent({
name: 'LargeRating',
setup() {
const rating = ref(4)
const genColor = (i) => {
const colors = ['green', 'purple', 'orange', 'indigo', 'red']
return colors[i]
}
return { rating, genColor }
},
})
</script>
# Shadow Test
<template>
<VExpansionPanels>
<VExpansionPanel>
<VExpansionPanelHeader>Sheets with shadows</VExpansionPanelHeader>
<VExpansionPanelContent>
<!-- eslint-disable-next-line vue/no-static-inline-styles -->
<VSheet v-for="e in 24" :key="e" class="pa-4" style="margin-bottom: 75px" :elevation="e">
Elevation {{ e }}
</VSheet>
</VExpansionPanelContent>
</VExpansionPanel>
</VExpansionPanels>
</template>
# Sheet (opens new window)
<template>
<VSheet class="pa-4" color="white">
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor
quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean
ultricies mi vitae est. Mauris placerat eleifend leo.Pellentesque habitant morbi tristique senectus et netus et
malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.
Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
</VSheet>
</template>
# Snackbar (opens new window)
<template>
<VRow justify="center" align="center">
<VBtn color="primary" @click="isSnackbarOpened = true">Open Snackbar</VBtn>
<VSnackbar v-model="isSnackbarOpened" color="primary" fixed right top>I am a Snackbar, nice to meet you!</VSnackbar>
</VRow>
</template>
<script>
import { ref } from '@vue/composition-api'
export default {
name: 'Snackbar',
setup() {
const isSnackbarOpened = ref(false)
return { isSnackbarOpened }
},
}
</script>
# Speed Dial (opens new window)
<template>
<VContainer class="speed-dial-container" fluid>
<VRow class="fill-height">
<VCard>
<VContainer fluid class="pt-0">
<VRow class="pb-12" noGutters>
<VCol cols="12" sm="6" md="3">
<VSubheader>Options</VSubheader>
<VCheckbox v-model="hover" label="Open on hover" hideDetails />
</VCol>
<VCol cols="12" sm="6" md="3">
<VSubheader>FAB location</VSubheader>
<VCheckbox v-model="top" label="Top" hideDetails />
<VCheckbox v-model="right" label="Right" hideDetails />
<VCheckbox v-model="bottom" label="Bottom" hideDetails />
<VCheckbox v-model="left" label="Left" hideDetails />
</VCol>
<VCol cols="12" sm="6" md="3">
<VSubheader>Speed dial direction</VSubheader>
<VRadioGroup v-model="direction" hideDetails>
<VRadio value="top" label="Top" />
<VRadio value="right" label="Right" />
<VRadio value="bottom" label="Bottom" />
<VRadio value="left" label="Left" />
</VRadioGroup>
</VCol>
<VCol cols="12" sm="6" md="3">
<VSubheader>Transition</VSubheader>
<VRadioGroup v-model="transition" hideDetails>
<VRadio value="slide-y-transition" label="Slide y" />
<VRadio value="slide-y-reverse-transition" label="Slide y reverse" />
<VRadio value="slide-x-transition" label="Slide x" />
<VRadio value="slide-x-reverse-transition" label="Slide x reverse" />
<VRadio value="scale-transition" label="Scale" />
</VRadioGroup>
</VCol>
</VRow>
</VContainer>
<VSpeedDial
v-model="fab"
:top="top"
:bottom="bottom"
:right="right"
:left="left"
:direction="direction"
:openOnHover="hover"
:transition="transition"
>
<template #activator>
<VBtn v-model="fab" color="blue darken-2" dark fab>
<VIcon v-if="fab">fa-times</VIcon>
<VIcon v-else>fa-user-circle</VIcon>
</VBtn>
</template>
<VBtn fab dark small color="green">
<VIcon>fa-pencil</VIcon>
</VBtn>
<VBtn fab dark small color="indigo">
<VIcon>fa-plus</VIcon>
</VBtn>
<VBtn fab dark small color="red">
<VIcon>fa-trash</VIcon>
</VBtn>
</VSpeedDial>
</VCard>
</VRow>
</VContainer>
</template>
<script>
import { reactive, toRefs, watch } from '@vue/composition-api'
export default {
name: 'SpeedDial',
displayName: 'Speed Dial',
setup() {
const state = reactive({
direction: 'top',
fab: false,
fling: false,
hover: false,
tabs: null,
top: false,
right: true,
bottom: true,
left: false,
transition: 'slide-y-reverse-transition',
})
watch(
() => [state.bottom, state.left, state.top, state.right],
([bottom, left, top, right]) => {
state.bottom = bottom
state.left = left
state.top = top
state.right = right
}
)
return { ...toRefs(state) }
},
}
</script>
<style lang="scss">
/* This is for documentation purposes and will not be needed in your application */
.speed-dial-container {
.v-speed-dial {
position: absolute;
}
.v-btn--floating {
position: relative;
}
}
</style>
# Stepper (opens new window)
# Basic
<template>
<VStepper v-model="step">
<VStepperHeader>
<VStepperStep :complete="step > 1" step="1">Name of step 1</VStepperStep>
<VDivider />
<VStepperStep :complete="step > 2" step="2">Name of step 2</VStepperStep>
<VDivider />
<VStepperStep step="3" :rules="[() => false]">Name of step 3</VStepperStep>
</VStepperHeader>
<VStepperItems>
<VStepperContent step="1">
<VCard class="mb-12 px-4 py-2" color="grey lighten-1 white--text text-h6" height="200px">Step 1</VCard>
<VBtn color="primary" @click="step = 2">Continue</VBtn>
<VBtn text>Cancel</VBtn>
</VStepperContent>
<VStepperContent step="2">
<VCard class="mb-12 px-4 py-2" color="grey lighten-1 white--text text-h6" height="200px">Step 2</VCard>
<VBtn color="primary" @click="step = 3">Continue</VBtn>
<VBtn text>Cancel</VBtn>
</VStepperContent>
<VStepperContent step="3">
<VCard class="mb-12 px-4 py-2" color="grey lighten-1 white--text text-h6" height="200px">Step 3</VCard>
<VBtn color="primary" @click="step = 1">Continue</VBtn>
<VBtn text>Cancel</VBtn>
</VStepperContent>
</VStepperItems>
</VStepper>
</template>
<script>
import { defineComponent, ref } from '@vue/composition-api'
export default defineComponent({
name: 'BasicStepper',
setup() {
const step = ref(1)
return { step }
},
})
</script>
# Vertical
<template>
<VStepper v-model="step" vertical>
<VStepperStep :complete="step > 1" step="1">
Select an app
<small>Summarize if needed</small>
</VStepperStep>
<VStepperContent step="1">
<VCard class="mb-12 px-4 py-2" color="grey lighten-1 white--text text-h6" height="200px">Step 1</VCard>
<VBtn color="primary" @click="step = 2">Continue</VBtn>
<VBtn text>Cancel</VBtn>
</VStepperContent>
<VStepperStep :complete="step > 2" step="2">Configure analytics for this app</VStepperStep>
<VStepperContent step="2">
<VCard class="mb-12 px-4 py-2" color="grey lighten-1 white--text text-h6" height="200px">Step 2</VCard>
<VBtn color="primary" @click="step = 3">Continue</VBtn>
<VBtn text>Cancel</VBtn>
</VStepperContent>
<VStepperStep :complete="step > 3" step="3">Select an ad format and name ad unit</VStepperStep>
<VStepperContent step="3">
<VCard class="mb-12 px-4 py-2" color="grey lighten-1 white--text text-h6" height="200px">Step 3</VCard>
<VBtn color="primary" @click="step = 4">Continue</VBtn>
<VBtn text>Cancel</VBtn>
</VStepperContent>
<VStepperStep step="4">View setup instructions</VStepperStep>
<VStepperContent step="4">
<VCard class="mb-12 px-4 py-2" color="grey lighten-1 white--text text-h6" height="200px">Step 4</VCard>
<VBtn color="primary" @click="step = 1">Continue</VBtn>
<VBtn text>Cancel</VBtn>
</VStepperContent>
</VStepper>
</template>
<script>
import { defineComponent, ref } from '@vue/composition-api'
export default defineComponent({
name: 'VerticalStepper',
setup() {
const step = ref(1)
return { step }
},
})
</script>
# Switch (opens new window)
# Basic
<template>
<VRow align="center" justify="space-around">
<VSwitch :inputValue="true">Switch test</VSwitch>
<VSwitch :inputValue="true" color="warning">Switch test</VSwitch>
<VSwitch>Switch test</VSwitch>
<VSwitch :inputValue="true" color="indigo">Switch test</VSwitch>
<VSwitch :inputValue="true" color="red">Switch test</VSwitch>
</VRow>
</template>
# Flat
<template>
<VRow align="center" justify="space-around">
<VSwitch flat :inputValue="true">Switch test</VSwitch>
<VSwitch flat :inputValue="true" color="warning">Switch test</VSwitch>
<VSwitch flat>Switch test</VSwitch>
<VSwitch flat :inputValue="true" color="indigo">Switch test</VSwitch>
<VSwitch flat :inputValue="true" color="red">Switch test</VSwitch>
</VRow>
</template>
# Inset
<template>
<VRow align="center" justify="space-around">
<VSwitch inset :inputValue="true">Switch test</VSwitch>
<VSwitch inset :inputValue="true" color="warning">Switch test</VSwitch>
<VSwitch inset>Switch test</VSwitch>
<VSwitch inset :inputValue="true" color="indigo">Switch test</VSwitch>
<VSwitch inset :inputValue="true" color="red">Switch test</VSwitch>
</VRow>
</template>
# Loading
<template>
<VRow align="center" justify="space-around">
<VSwitch loading :inputValue="true">Switch test</VSwitch>
<VSwitch loading :inputValue="true" color="warning">Switch test</VSwitch>
<VSwitch loading>Switch test</VSwitch>
<VSwitch loading :inputValue="true" color="indigo">Switch test</VSwitch>
<VSwitch loading :inputValue="true" color="red">Switch test</VSwitch>
</VRow>
</template>
# Timeline (opens new window)
<template>
<VCard class="fill-width">
<VTimeline>
<VTimelineItem>timeline item</VTimelineItem>
<VTimelineItem class="text-right">timeline item</VTimelineItem>
<VTimelineItem>timeline item</VTimelineItem>
</VTimeline>
</VCard>
</template>
<style scoped>
.fill-width {
width: 100%;
}
</style>
# Toolbar (opens new window)
<template>
<VAppBar dense color="white">
<VTabs hideSlider class="tabs" color="rgba(0,0,0,0.87)">
<VTab class="divider">Home</VTab>
<VTab class="divider">Messages</VTab>
<VTab class="divider">Friends</VTab>
</VTabs>
<VSpacer />
<div class="right menu">
<div class="item">
<div class="ui transparent icon input">
<input type="text" placeholder="Search..." />
<i class="search link icon" />
</div>
</div>
</div>
</VAppBar>
</template>