| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181 |
- <!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>
|
