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

vuetify组件示例demo集合代码

代码语言：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.........完整代码请登录后点击上方下载按钮下载查看