Skip to content

Instantly share code, notes, and snippets.

@vherasme
Created October 8, 2019 20:29
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save vherasme/e57d5d30757fa9f1a0c1ec2e7e909e04 to your computer and use it in GitHub Desktop.
Save vherasme/e57d5d30757fa9f1a0c1ec2e7e909e04 to your computer and use it in GitHub Desktop.
Vuetify Template
<div id="app">
<v-app>
<v-content>
<v-container>
<v-form >
<v-container @click="showDetails()">
<v-row class="some-class">
<v-col cols="3" sm="3" v-for="p in placeholders" :key="p">
<v-text-field :placeholder="p" single-line outlined >
</v-text-field>
</v-col>
</v-row>
</v-container>
</v-form>
</v-container>
</v-content>
</v-app>
</div>
// Looking for the v1.5 template?
// https://codepen.io/johnjleider/pen/GVoaNe
new Vue({
el: '#app',
vuetify: new Vuetify(),
data: () => ({
placeholders: ["Title1", "Title2", "Title3", "Title4", "Title5", "Title6", "Title7", "Title8"]
})
})
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
.some-class{
flex-wrap: nowrap;
overflow-x: auto;
}
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@3.x/css/materialdesignicons.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment