Abhay Wawale abhaywawale
abhaywawale
/ index.html
Last active
October 17, 2018 14:20
HTML file when Server-side rendering used
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html data-n-head=""> | |
| <head> | |
| <title data-n-head="true">nuxtify-spa</title><meta data-n-head="true" charset="utf-8"><meta data-n-head="true" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="true" data-hid="description" name="description" content="Nuxti project with SPA"><link data-n-head="true" rel="icon" type="image/x-icon" href="/favicon.ico"><link data-n-head="true" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons"><link rel="preload" href="/_nuxt/0c090eef8fed0b22748a.js" as="script"><link rel="preload" href="/_nuxt/23e2d858e6d12dd26548.js" as="script"><link rel="preload" href="/_nuxt/c74f371d36628cc38dd4.js" as="script"><link rel="preload" href="/_nuxt/d7f2b254f1766f74508f.js" as="script"> | |
| </head> | |
| <body data-n-head=""> | |
| <div id="__nuxt"><style>#nuxt-loading{visibility:hidden;opacity:0;position:absolute;left:0;right:0;top:0;bottom:0;display:flex;justify-content:center;align-items:center;flex-direc |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <template> | |
| <v-container fluid> | |
| <v-layout align-start justify-center> | |
| <v-flex xs4 class="elevation-2 ma-2"> | |
| <v-tabs v-model="model" color="cyan" dark slider-color="yellow"> | |
| <draggable v-model="tabs" class="v-tabs__container" @update="tabUpdate"> | |
| <v-tab v-for="(tab, index) in tabs" :key="index" :href="`#tab-${index}`"> | |
| {{ tab.name }} | |
| </v-tab> | |
| </draggable> |
abhaywawale
/ v-data-table-with-handle.vue
Created
July 4, 2018 08:30
Where user can select the text and interact with the table
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <template> | |
| <v-container fluid> | |
| <v-layout align-start justify-center> | |
| <v-data-table :headers="headers" :items="desserts" hide-actions class="elevation-2"> | |
| <template slot="items" slot-scope="props"> | |
| <td class="handle" style="max-width: 28px;">::</td> | |
| <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> |
abhaywawale
/ v-data-table-without-handle.vue
Last active
July 4, 2018 08:16
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <template> | |
| <v-container fluid> | |
| <v-layout align-start justify-center> | |
| <v-data-table :headers="headers" :items="desserts" hide-actions class="elevation-1"> | |
| <template slot="items" slot-scope="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> |
abhaywawale
/ v-data-table-without-handle.vue
Created
July 4, 2018 08:13
v-data-table without handle which doesn't let user select the text
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <template> | |
| <v-container fluid> | |
| <v-layout align-start justify-center> | |
| <v-data-table :headers="headers" :items="desserts" hide-actions class="elevation-1"> | |
| <template slot="items" slot-scope="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> |
abhaywawale
/ v-tabs-problem.vue
Created
July 2, 2018 14:31
The v-tabs had a problem in showing corrent indicator after drag-n-drop
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <template> | |
| <v-container fluid> | |
| <v-layout align-start justify-center> | |
| <v-spacer></v-spacer> | |
| <v-flex xs4 class="elevation-1 pa-3 ma-2"> | |
| <v-tabs v-model="active" color="cyan" dark slider-color="yellow"> | |
| <draggable v-model="tabs" class="v-tabs__container"> | |
| <v-tab v-for="tab in tabs" :key="tab.id" ripple> | |
| {{ tab.name }} | |
| </v-tab> |