Skip to content

Instantly share code, notes, and snippets.

@insign insign/casa.vue
Last active Jun 1, 2017

Embed
What would you like to do?
<template>
<!-- root node required -->
<div>
<grid-layout :layout="layout" :col-num="12" :row-height="30" :is-draggable="true" :is-resizable="true" :vertical-compact="true" :margin="[10,10]" :use-css-transforms="true">
<grid-item v-for="item in layout" :x="item.x" :y="item.y" :w="item.w" :h="item.h" :i="item.i">
{{content[item.i].text}}
</grid-item>
</grid-layout>
</div>
</template>
<script>
import abas from 'components/tela/abas.vue'
export default {
data() {
return {
layout: [
{"i": "0", "x": 0, "y": 0, "w": 2, "h": 16,},
{"i": "1", "x": 2, "y": 0, "w": 5, "h": 9,},
{"i": "2", "x": 7, "y": 0, "w": 5, "h": 9,},
{"i": "3", "x": 2, "y": 9, "w": 5, "h": 2,},
{"i": "4", "x": 2, "y": 11, "w": 5, "h": 5,},
{"i": "5", "x": 7, "y": 9, "w": 2, "h": 7,},
{"i": "6", "x": 9, "y": 9, "w": 3, "h": 7,},
],
content: [
{text: abas},
{text:"ahahaha"},
{text:"ahahaha"},
{text:"ahahaha"},
{text:"ahahaha"},
{text:"ahahaha"},
{text:"ahahaha"},
{text:"ahahaha"},
{text:"ahahaha"},
{text:"ahahaha"},
{text:"ahahaha"},
{text:"ahahaha"},
]
}
}
}
</script>
<style>
.vue-grid-item:not(.vue-grid-placeholder) {
background: #CCC;
border: 1px solid black;
}
</style>
// === DEFAULT / CUSTOM STYLE ===
// WARNING! always comment out ONE of the two require() calls below.
// 1. use next line to activate CUSTOM STYLE (./src/themes)
// require(`./themes/app.${__THEME}.styl`)
// 2. or, use next line to activate DEFAULT QUASAR STYLE
require(`quasar/dist/quasar.${__THEME}.css`)
// ==============================
import Vue from 'vue'
import Quasar from 'quasar'
import router from './router'
import VueGridLayout from 'vue-grid-layout'
Vue.use(Quasar) // Install Quasar Framework
import abas from 'components/tela/abas.vue'
import lancear from 'components/tela/lancear.vue'
import galeria from 'components/tela/galeria.vue'
Vue.component('abas', abas)
Vue.component('galeria', galeria)
Vue.component('lancear', lancear)
let GridLayout = VueGridLayout.GridLayout;
let GridItem = VueGridLayout.GridItem;
Vue.component('GridLayout', GridLayout)
Vue.component('GridItem', GridItem)
Quasar.start(() => {
/* eslint-disable no-new */
new Vue({
el: '#q-app',
router,
render: h => h(require('./App'))
})
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.