vuetify组件示例demo集合代码-html代码-BFW代码库

代码语言：html
代码描述：vuetify组件示例demo集合代码
代码标签： 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
    .........完整代码请登录后点击上方下载按钮下载查看