Skip to content

Instantly share code, notes, and snippets.

@johnleider

johnleider/md2.vue

Last active August 21, 2018 02:09
Show Gist options
  • Save johnleider/95429a6a7f7b100492a0a907a7b803bc to your computer and use it in GitHub Desktop.
Save johnleider/95429a6a7f7b100492a0a907a7b803bc to your computer and use it in GitHub Desktop.
Download ZIP
Raw
md2.vue
<template>
<v-app>
<v-content class="py-3 px-5">
<section>
<v-headline>Typography</v-headline>
<v-display-4>H1</v-display-4>
<v-display-3>H2</v-display-3>
<v-display-2>H3</v-display-2>
<v-display-1>H4</v-display-1>
<v-headline>H5</v-headline>
<v-title>H6</v-title>
<v-subtitle-1>Subtitle 1</v-subtitle-1>
<v-subtitle-2>Subtitle 2</v-subtitle-2>
<v-body-1>Body 1</v-body-1>
<v-body-2>Body 2</v-body-2>
<v-caption>Caption</v-caption>
<v-overline>Overline</v-overline>
</section>
<v-divider class="my-5"></v-divider>
<section>
<v-headline>Buttons</v-headline>
<v-btn class="my-3 mr-3">Button</v-btn>
<v-btn color="purple" class="white--text ma-3">Button</v-btn>
<!-- <v-btn icon color="purple" class="white--text">
<v-icon left>list</v-icon>
<span>Button</span>
</v-btn> -->
<v-btn color="purple" class="ma-3 white--text">
<v-icon left>dashboard</v-icon>
Button
</v-btn>
<v-btn outlined color="blue" class="ma-3">Outlined Button</v-btn>
<v-btn text class="ma-3" color="indigo">Text Button</v-btn>
<v-btn-toggle class="ma-3">
<v-btn toggle>
<v-icon>format_align_left</v-icon>
</v-btn>
<v-btn toggle>
<v-icon>format_align_center</v-icon>
</v-btn>
<v-btn toggle>
<v-icon>format_align_right</v-icon>
</v-btn>
</v-btn-toggle>
<v-btn color="orange" class="ma-3 white--text" round>
<span>Rounded button</span>
</v-btn>
<v-btn color="pink" flat class="ma-3 white--text">
<span>Flat button</span>
</v-btn>
</section>
<v-divider class="my-5"></v-divider>
<section style="max-width: 450px;">
<v-headline class="mb-3">Lists</v-headline>
<v-subtitle-1 class="mb-3">One line</v-subtitle-1>
<v-list-item color="white" class="mb-4">
<v-list-item-content>
<v-subtitle-2>Single-line item</v-subtitle-2>
</v-list-item-content>
<v-list-item-action right>
<v-checkbox></v-checkbox>
</v-list-item-action>
</v-list-item>
<v-list-item color="white" class="mb-4">
<v-list-item-content>
<v-subtitle-2>Single-line item longer text</v-subtitle-2>
</v-list-item-content>
</v-list-item>
<v-list-item color="white" class="mb-4">
<v-list-item-icon left>
<v-icon color="purple darken-2">mdi-bluetooth</v-icon>
</v-list-item-icon>
<v-list-item-content>
<v-subtitle-2>Single-line item</v-subtitle-2>
</v-list-item-content>
</v-list-item>
<v-list-item color="white" class="mb-4">
<v-list-item-avatar left>
<v-img src="https://via.placeholder.com/40x40"></v-img>
</v-list-item-avatar>
<v-list-item-content>
<v-subtitle-2>Single-line item</v-subtitle-2>
</v-list-item-content>
<v-list-item-action right>
<v-checkbox></v-checkbox>
</v-list-item-action>
</v-list-item>
<v-list-item color="white" class="mb-4">
<v-list-item-avatar left tile size="56">
<v-img src="https://via.placeholder.com/56x56"></v-img>
</v-list-item-avatar>
<v-list-item-content>
<v-subtitle-2>Single-line item</v-subtitle-2>
</v-list-item-content>
<v-list-item-action right>
<v-checkbox></v-checkbox>
</v-list-item-action>
</v-list-item>
<v-list-item color="white" class="mb-4">
<v-list-item-avatar color="grey" left tile size="auto">
<v-img src="https://via.placeholder.com/100x56" height="56" style="min-width: 100px;"></v-img>
</v-list-item-avatar>
<v-list-item-content>
<v-subtitle-2>Single-line item</v-subtitle-2>
</v-list-item-content>
<v-list-item-action right>
<v-checkbox></v-checkbox>
</v-list-item-action>
</v-list-item>
<v-list class="mb-4">
<v-list-item
v-for="n in 3"
:key="n"
>
<v-list-item-avatar left color="grey">
<v-img src="https://via.placeholder.com/40x40"></v-img>
</v-list-item-avatar>
<v-list-item-content>
<v-subtitle-2>Single-line item</v-subtitle-2>
</v-list-item-content>
<v-list-item-action right>
<v-checkbox></v-checkbox>
</v-list-item-action>
</v-list-item>
</v-list>
<v-list-item
v-for="n in 2"
:key="n"
color="white"
>
<v-list-item-avatar left>
<v-icon size="48">mdi-account-circle</v-icon>
</v-list-item-avatar>
<v-list-item-content>
<v-subtitle-2>One-line item</v-subtitle-2>
</v-list-item-content>
<v-list-item-action right>
<v-checkbox></v-checkbox>
</v-list-item-action>
</v-list-item>
<div class="my-4"></div>
<v-list-item
v-for="n in 2"
:key="n"
color="white"
>
<v-list-item-action left class="py-3">
<v-checkbox></v-checkbox>
</v-list-item-action>
<v-list-item-content>
<v-subtitle-2>One-line item</v-subtitle-2>
</v-list-item-content>
</v-list-item>
<div class="my-4"></div>
<v-subtitle-1 class="mb-3">Two line</v-subtitle-1>
<v-list-item color="white" class="mb-3" two-line>
<v-list-item-content>
<v-subtitle-2>Two-line item</v-subtitle-2>
<v-caption class="grey--text">Secondary text</v-caption>
</v-list-item-content>
<v-list-item-content class="align-start shrink">
<v-caption class="grey--text font-weight-bold">meta</v-caption>
</v-list-item-content>
</v-list-item>
<v-list-item color="white" class="mb-3" two-line>
<v-list-item-content>
<v-overline class="grey--text">Overline</v-overline>
<v-subtitle-2>Two-line item</v-subtitle-2>
</v-list-item-content>
</v-list-item>
<v-list-item color="white" class="mb-3" two-line>
<v-list-item-icon left>
<v-icon color="purple darken-2">mdi-bluetooth</v-icon>
</v-list-item-icon>
<v-list-item-content>
<v-subtitle-2>Two-line item</v-subtitle-2>
<v-caption class="grey--text">Secondary text</v-caption>
</v-list-item-content>
</v-list-item>
<v-list-item color="white" class="mb-3" two-line>
<v-list-item-avatar left>
<v-img src="https://via.placeholder.com/40x40"></v-img>
</v-list-item-avatar>
<v-list-item-content>
<v-subtitle-2>Two-line item</v-subtitle-2>
<v-caption class="grey--text">Secondary text</v-caption>
</v-list-item-content>
<v-list-item-action right>
<v-checkbox></v-checkbox>
</v-list-item-action>
</v-list-item>
<v-list-item color="white" class="mb-3" two-line>
<v-list-item-avatar tile left>
<v-img src="https://via.placeholder.com/40x40"></v-img>
</v-list-item-avatar>
<v-list-item-content>
<v-subtitle-2>Two-line item</v-subtitle-2>
<v-caption class="grey--text">Secondary text</v-caption>
</v-list-item-content>
<v-list-item-action right>
<v-checkbox></v-checkbox>
</v-list-item-action>
</v-list-item>
<v-list-item color="white" class="mb-3 pl-0" two-line>
<v-list-item-avatar tile left size="auto" class="my-2">
<v-img src="https://via.placeholder.com/100x56" style="min-width: 100px;"></v-img>
</v-list-item-avatar>
<v-list-item-content>
<v-subtitle-2>Two-line item</v-subtitle-2>
<v-caption class="grey--text">Secondary text</v-caption>
</v-list-item-content>
<v-list-item-action right>
<v-checkbox></v-checkbox>
</v-list-item-action>
</v-list-item>
<v-list>
<v-list-item
v-for="n in 3"
:key="n"
two-line
>
<v-list-item-avatar size="40" left>
<v-img src="https://via.placeholder.com/40x40"></v-img>
</v-list-item-avatar>
<v-list-item-content>
<v-subtitle-1>Two-line item</v-subtitle-1>
<v-caption class="grey--text">Secondary text</v-caption>
</v-list-item-content>
<v-list-item-action right>
<v-checkbox></v-checkbox>
</v-list-item-action>
</v-list-item>
</v-list>
<div class="my-4"></div>
<v-subtitle-1 class="mb-3">Three line</v-subtitle-1>
<v-list-item
three-line
color="white"
class="mb-3"
>
<v-list-item-content>
<v-subtitle-2>Three-line item</v-subtitle-2>
<v-caption class="grey--text">Secondary line text Lorem ipsum dolor sit amet, consectetur adipiscing elit.</v-caption>
</v-list-item-content>
<v-list-item-content class="align-start shrink">
<v-caption class="grey--text font-weight-bold">meta</v-caption>
</v-list-item-content>
</v-list-item>
<v-list-item
three-line
color="white"
class="mb-3"
>
<v-list-item-content>
<v-overline class="grey--text text--darken-1">overline</v-overline>
<v-subtitle-2>Three-line item</v-subtitle-2>
<v-caption class="grey--text">Secondary line text Lorem ipsum dolor sit amet</v-caption>
</v-list-item-content>
</v-list-item>
<v-list-item
three-line
color="white"
class="mb-3"
>
<v-list-item-icon left>
<v-icon color="purple darken-2">mdi-bluetooth</v-icon>
</v-list-item-icon>
<v-list-item-content>
<v-subtitle-2>Three-line item</v-subtitle-2>
<v-caption class="grey--text">Secondary line text Lorem ipsum dolor sit amet, consectetur adipiscing elit.</v-caption>
</v-list-item-content>
</v-list-item>
<v-list-item
three-line
color="white"
class="mb-3"
>
<v-list-item-avatar size="40" left>
<v-img src="https://via.placeholder.com/40x40"></v-img>
</v-list-item-avatar>
<v-list-item-content>
<v-subtitle-2>Three-line item</v-subtitle-2>
<v-caption class="grey--text">Secondary line text Lorem ipsum dolor sit amet, consectetur adipiscing elit.</v-caption>
</v-list-item-content>
<v-list-item-action right>
<v-checkbox></v-checkbox>
</v-list-item-action>
</v-list-item>
<v-list>
<v-list-item
v-for="n in 3"
:key="n"
color="white"
class="mb-3 pl-0"
three-line
>
<v-list-item-avatar horizontal tile left size="auto">
<v-img src="https://via.placeholder.com/100x56" style="min-width: 100px;"></v-img>
</v-list-item-avatar>
<v-list-item-content>
<v-subtitle-2>Three-line item</v-subtitle-2>
<v-caption class="grey--text">Secondary line text lorem ipsum dapibus, neque</v-caption>
</v-list-item-content>
<v-list-item-action right>
<v-checkbox></v-checkbox>
</v-list-item-action>
</v-list-item>
</v-list>
</section>
<v-divider class="my-5"></v-divider>
<section>
<v-headline>Cards</v-headline>
<v-card max-width="344" class="mb-5">
<v-list-item>
<v-list-item-content>
<v-title>Title goes here</v-title>
<v-body-2 class="grey--text">Secondary line text Lorem ipsum dolor sit amet</v-body-2>
</v-list-item-content>
<v-avatar tile size="80">
<v-img src="https://via.placeholder.com/80x80" height="80"></v-img>
</v-avatar>
</v-list-item>
<v-card-actions>
<v-btn text color="purple">Action 1</v-btn>
<v-btn text color="purple">Action 2</v-btn>
</v-card-actions>
</v-card>
<v-card max-width="344" class="mb-5">
<v-list-item>
<v-avatar color="grey" size="40"></v-avatar>
<v-list-item-content>
<v-title>Title goes here</v-title>
<v-body-2>Secondary text</v-body-2>
</v-list-item-content>
</v-list-item>
<v-img src="https://via.placeholder.com/344x194" height="194"></v-img>
<v-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor</v-card-text>
<v-card-actions>
<v-btn color="purple" text>Action 1</v-btn>
<v-btn color="purple" text>Action 2</v-btn>
</v-card-actions>
</v-card>
<v-card max-width="344" class="mb-5">
<v-img src="https://via.placeholder.com/344x194" height="194"></v-img>
<v-card-title primary-title>
<v-headline>Title</v-headline>
</v-card-title>
<v-layout align-center pl-2>
<v-rating
:value="4.5"
background-color="yellow darken-1"
color="yellow darken-1"
half-increments
length="5"
small
></v-rating>
<v-caption class="grey--text text--darken-1 ml-2">4.5 (413)</v-caption>
</v-layout>
<v-card-text>
<v-subtitle-2>Secondary text</v-subtitle-2>
<v-body-2>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor</v-body-2>
</v-card-text>
<v-divider class="mx-3"></v-divider>
<v-card-text class="pb-0">
<v-title>Subtitle</v-title>
<v-layout class="py-2" justify-space-between>
<v-chip v-for="n in 4" :key="n">Item {{ n }}</v-chip>
</v-layout>
</v-card-text>
<v-card-actions>
<v-btn color="purple" text>Action 1</v-btn>
</v-card-actions>
</v-card>
<v-card max-width="344">
<v-card-title>
<div>
<v-overline class="mb-2">Overline</v-overline>
<v-headline>Headline 5</v-headline>
<v-body-2 class="grey--text">Greyhound divisively hello coldly wonderfully</v-body-2>
</div>
<v-img src="https://via.placeholder.com/80x80" height="80" style="min-width: 80px;"></v-img>
</v-card-title>
<v-card-actions>
<v-btn text color="purple">Button</v-btn>
<v-btn text color="purple">Button</v-btn>
</v-card-actions>
</v-card>
</section>
</v-content>
</v-app>
</template>
<script>
export default {
data: () => ({
//
})
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment