<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <title>vuetify demo</title> <style> [v-cloak] { display: none; } </style> </head> <body> <div id="app" v-cloak> <v-app> <v-content> <v-container v-init-context-vars='{expand: false}'> <v-btn color="success">Success</v-btn> <v-btn color="warning" :depressed="true">Warning</v-btn> <v-btn color="warning" :text="true">Warning</v-btn> <v-btn color="warning" href="https://google.com">Google</v-btn> <v-btn color="info">Info</v-btn> <v-btn color="info" :large="true">Info</v-btn> <v-btn color="info" :rounded="true">Info</v-btn> <div v-ripple style="width: 100px; height: 100px; border: 1px solid red;"> Ripple </div> <v-btn @click="test = !test">show</v-btn> <v-expand-transition> <v-card v-show="test" height="100" width="100" class="mx-auto" key="123" ></v-card> </v-expand-transition> <v-card> <v-card-title> Nutrition <v-spacer></v-spacer> <v-text-field append-icon="search" label="Search" single-line hide-details> </v-text-field> </v-card-title> <v-data-table show-select show-expand item-key="name" :headers="[ { text: 'Dessert (100g serving)', align: 'left', 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: 'Jelly bean', calories: 375, fat: 0.0, carbs: 94, protein: 0.0, iron: '0%' }, { name: 'Lollipop', calories: 392, fat: 0.2, carbs: 98, protein: 0, iron: '2%' }, { name: 'Honeycomb', calories: 408, fat: 3.2, carbs: 87, protein: 6.5, iron: '45%' }, { name: 'Donut', calories: 452, fat: 25.0, carbs: 51, protein: 4.9, iron: '22%' }, { name: 'KitKat', calories: 518, fat: 26.0, carbs: 65, protein: 7, iron: '6%' } ]" class="elevation-1"> <template v-slot:items="props"> <td>{{ props.item.name }}</td> <td class="text-xs-right">{{ props.item.calories }}</td> <td class="text-xs-right">{{ props.item.fat }}</td> <td class="text-xs-right">{{ props.item.carbs }}</td> <td class="text-xs-right">{{ props.item.protein }}</td> <td class="text-xs-right">{{ props.item.iron }}</td> </template> <template v-slot:expanded-item="{ headers }"> <td :colspan="headers.length">Peek-a-boo!</td> </template> </v-data-table> </v-card> </v-container> </v-content> </v-app> </div> <script src="http://localhost:3080/app.js"></script> <script src="http://localhost:3100/app.js"></script> </body> </html>