vuetify组件示例demo集合代码
代码语言：html
所属分类：布局界面
代码描述：vuetify组件示例demo集合代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/materialdesignicons.css">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/vuetify.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
<style>
.v-card--reveal {
align-items: center;
bottom: 0;
justify-content: center;
opacity: .5;
position: absolute;
width: 100%;
}
</style>
</head>
<body>
<div id="app">
<v-app id="inspire">
<v-data-table
:headers="headers"
:items="desserts"
:items-per-page="5"
class="elevation-1"
></v-data-table>
<v-parallax
height="300"
src="https://cdn.vuetifyjs.com/images/parallax/material2.jpg"
></v-parallax>
<v-sheet
height="400"
class="overflow-hidden"
style="position: relative;"
>
<v-container class="fill-height">
<v-row
align="center"
justify="center"
>
<v-btn
color="pink"
dark
@click.stop="drawer = !drawer"
>
Toggle
</v-btn>
</v-row>
</v-container>
<v-navigation-drawer
v-model="drawer"
absolute
temporary
>
<v-list-item>
<v-list-item-avatar>
<v-img src="https://randomuser.me/api/portraits/men/78.jpg"></v-img>
</v-list-item-avatar>
<v-list-item-content>
<v-list-item-title>John Leider</v-list-item-title>
</v-list-item-content>
</v-list-item>
<v-divider></v-divider>
<v-list dense>
<v-list-item
v-for="item in items5"
:key="item.title"
link
>
<v-list-item-icon>
<v-icon>{{ item.icon }}</v-icon>
</v-list-item-icon>
<v-list-item-content>
<v-list-item-title>{{ item.title }}</v-list-item-title>
</v-list-item-content>
</v-list-item>
</v-list>
</v-navigation-drawer>
</v-sheet>
<v-row
class="d-flex"
justify="center"
>
<v-menu
v-model="showMenu"
absolute
offset-y
style="max-width: 600px"
>
<template v-slot:activator="{ on, attrs }">
<v-card
class="portrait"
img="https://cdn.vuetifyjs.com/images/cards/girl.jpg"
height="300"
width="600"
v-bind="attrs"
v-on="on"
></v-card>
</template>
<v-list>
<v-list-item
v-for="(item, index) in items4"
:key="index"
>
<v-list-item-title>{{ item.title }}</v-list-item-title>
</v-list-item>
</v-list>
</v-menu>
</v-row>
<v-hover v-slot="{ hover }">
<v-card
class="mx-auto"
color="grey lighten-4"
max-width="600"
>
<v-img
:aspect-ratio="16/9"
src="https://cdn.vuetifyjs.com/images/cards/kitchen.png"
>
<v-expand-transition>
<div
v-if="hover"
class="d-flex transition-fast-in-fast-out orange darken-2 v-card--reveal text-h2 white--text"
style="height: 100%;"
>
$14.99
</div>
</v-expand-transition>
</v-img>
<v-card-text
class="pt-6"
style="position: relative;"
>
<v-btn
absolute
color="orange"
class="white--text"
fab
large
right
top
>
<v-icon>mdi-cart</v-icon>
</v-btn>
<div class="font-weight-light grey--text text-h6 mb-2">
For the perfect meal
</div>
<h3 class="text-h4 font-weight-light orange--text mb-2">
QW cooking utensils
</h3>
<div class="font-weight-light text-h6 mb-2">
Our Vintage kitchen utensils delight any chef.<br>
Made of bamboo by hand
</div>
</v-card-text>
</v-card>
</v-hover>
<v-breadcrumbs :items="items">
<template v-slot:item="{ item }">
<v-breadcrumbs-item
:href="item.href"
:disabled="item.disabled"
>
{{ item.text.toUpperCase() }}
</v-breadcrumbs-item>
</template>
</v-breadcrumbs>
<v-app-bar
color="deep-purple accent-4"
dense
dark
>
<v-app-bar-nav-icon></v-app-bar-nav-icon>
<v-toolbar-title>Page title</v-toolbar-title>
<v-spacer></v-spacer>
<v-btn icon>
<v-icon>mdi-heart</v-icon>
</v-btn>
<v-btn icon>
<v-icon>mdi-magnify</v-icon>
</v-btn>
<v-menu
left
bottom
>
<template v-slot:activator="{ on, attrs }">
<v-btn
icon
v-bind="attrs"
v-on="on"
>
<v-icon>mdi-dots-vertical</v-icon>
</v-btn>
</template>
<v-list>
<v-list-item
v-for="n in 5"
:key="n"
@click="() => {}"
>
<v-list-item-title>Option {{ n }}</v-list-item-title>
</v-list-item>
</v-list>
</v-menu>
<div class="text-center">
<v-bottom-sheet v-model="sheet">
<template v-slot:activator="{ on, attrs }">
<v-btn
color="purple"
dark
v-bind="attrs"
v-on="on"
>
Open In
</v-btn>
</template>
<v-list>
<v-subheader>Open in</v-subheader>
<v-list-item
v-for="tile in tiles"
:key="tile.title"
@click="sheet = false"
>
<v-list-item-avatar>
<v-avatar
size="32px"
tile
>
<img
:src="`https://cdn.vuetifyjs.com/images/bottom-sheets/${tile.img}`"
:alt="tile.title"
>
</v-avatar>
</v-list-item-avatar>
<v-list-item-title>{{ tile.title }}</v-list-item-title>
</v-list-item>
</v-list>
</v-bottom-sheet>
</div>
</v-app-bar>
<v-container
fluid
class="pa-0"
>
<v-row align="center">
<v-col
cols="12"
sm="6"
>
<div class="text-center">
<div class="my-2">
<v-btn
x-small
color="secondary"
dark
>
Extra small Button
</v-btn>
</div>
<div class="my-2">
<v-btn
small
color="primary"
dark
>
Small Button
</v-btn>
</div>
<div class="my-2">
<v-btn
color="warning"
dark
>
Normal Button
</v-btn>
</div>
<div class="my-2">
<v-btn
color="error"
dark
large
>
Large Button
</v-btn>
</div>
<div class="my-2">
<v-btn
x-large
color="success"
dark
>
Extra large Button
</v-btn>
</div>
</div>
</v-col>
<v-col
cols="12"
sm="6"
>
<div class="text-center">
<div class="my-2">
<v-btn
color="secondary"
fab
x-small
dark
>
<v-icon>mdi-television</v-icon>
</v-btn>
</div>
<div class="my-2">
<v-btn
color="primary"
fab
small
dark
>
<v-icon>mdi-pencil</v-icon>
</v-btn>
</div>
<div class="my-2">
<v-btn
color="warning"
fab
dark
>
<v-icon>mdi-account-circle</v-icon>
</v-btn>
</div>
<div class="my-2">
<v-btn
color="error"
fab
large
dark
>
<v-icon>mdi-alarm</v-icon>
</v-btn>
</div>
<div class="my-2">
<v-btn
color="success"
fab
x-large
dark
>
<v-icon>mdi-domain</v-icon>
</v-btn>
</div>
</div>
</v-col>
</v-row>
</v-container>
<v-toolbar>
<v-tabs
dark
background-color="primary"
grow
>
<v-tab>
<v-badge
color="pink"
dot
>
Item One
</v-badge>
</v-tab>
<v-tab>
<v-badge
color="green"
content="6"
>
Item Two
</v-badge>
</v-tab>
<v-tab>
<v-badge
color="deep-purple accent-4"
icon="mdi-vuetify"
>
Item Three
</v-badge>
</v-tab>
</v-tabs>
</v-toolbar>
<v-alert
border="top"
color="red lighten-2"
dark
>
I'm an alert with a top border and red color
</v-alert>
<v-carousel v-model="model">
<v-carousel-item
v-for="(color, i) in colors"
:key="color"
>
<v-sheet
:color="color"
height="100%"
tile
>
<v-row
class="fill-height"
align="center"
justify="center"
>
<div class="text-h2">
Slide {{ i + 1 }}
</div>
</v-row>
</v-sheet>
</v-carousel-item>
</v-carousel>
<v-bottom-navigation v-model="value">
<v-btn value="recent">
<span>Recent</span>
<v-icon>mdi-history</v-icon>
</v-btn>
<v-btn value="favorites">
<span>Favorites</span>
<v-icon>mdi-heart</v-icon>
</v-btn>
<v-btn value="nearby">
<span>Nearby</span>
<v-icon>mdi-map-marker</v-icon>
</v-btn>
</v-bottom-navigation>
<v-row>
<v-col
cols="12"
sm="6"
offset-sm="3"
>
<v-card>
<v-toolbar
color="light-blue"
light
extended
>
<v-app-bar-nav-icon></v-app-bar-nav-icon>
<v-toolbar-title class="white--text">
My files
</v-toolbar-title>
<v-spacer></v-spacer>
<v-btn icon>
<v-icon>mdi-magnify</v-icon>
</v-btn>
<v-btn icon>
<v-icon>mdi-view-module</v-icon>
</v-btn>
<template v-slot:extension>
<v-btn
fab
color="cyan accent-2"
bottom
left
absolute
@click="dialog = !dialog"
.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0