@Martin said in Could you change the Layout header slot from a child component?:
I understand this would be easy with titles, but what about buttons? Showing, hiding, attaching methods…? Does this mean you have to parameterise buttons per state/view?
I posted a workaround for this here:
http://forum.quasar-framework.org/topic/783/nested-q-layout-behavior-0-13-vs-0-14-again/2
I’m using a ‘common’ headerBar.vue as a component that I import in each page.vue component separately.
The advantage is that I can set up the common stuff in the headerbar and override it in a page.vue whenever needed.
Also, gui design/placement remains consistent in all pages.
Maybe this is a way out for you? I’m still on 0.13 but I suppose this will also work in 0.14
HeaderBar.vue
<template>
<div class="toolbar">
<!-- DEFAULT MENU BUTTON THAT OPENS LEFT DRAWER -->
<slot name="btn1left">
<button class="hide-on-drawer-visible"
style="width:30px; padding:0;"
@click="openLeftSideBar()">
<i>menu</i>
</button>
</slot>
<!-- BUTTON 2 LEFT -->
<slot name="btn2left"></slot>
<!-- TITLE -->
<q-toolbar-title>
<div class="toolbarTitle">
<slot name="title"></slot>
</div>
<div class="toolbarSubTitle">
<slot name="subTitle"></slot>
</div>
</q-toolbar-title>
<!-- BUTTON 5 RIGHT WITH A DEFAULT method-->
<slot name="btn5right">
<button-circular size="small" icon="settings"
:onClick="openCollectionList"></button-circular>
</slot>
<slot name="btn4right"></slot>
<slot name="btn3right"></slot>
<slot name="btn2right"></slot>
<!-- BUTTON 1 RIGHT WITH A DEFAULT login.vue button component-->
<slot name="btn1right">
<login></login>
</slot>
</div>
</template>
Page.vue
<template>
<q-layout>
<header-bar slot="header">
<div slot="btn1left>
<!-- OVERRIDE LEFT DRAWER BUTTON WITH SOMETHING ELSE -->
<button @click="doSomethingElseHere()> myLocalButton</button>
</div>
<div slot="title"> {{t.skills}}</div>
<div slot="subTitle">{{subTitle}}</div>
<div slot="btn4right"></div>
...
<script>
import HeaderBar from '../common/HeaderBar.vue'
...
export default {
components : {
HeaderBar,
...
I have a splash screen mapped to ‘/’ so the app always open with splash.vue.
However, in the splash component I use the created() method to conditionally redirect to another page.
created () {
if (....) {
router.push(...)
}
else {
router.push(...)
}
}
Maybe this approach works for you?
I just updated to webpack 3.5.1 build time is now 4 secs.
Seems to work ok with quasar .13.4
All my media files are in the statics dir.
Meanwhile I discovered a nasty bug with firebase and webpack. Turns out that webpack is adding the entire firebase.js each time it sees a method call to this package. After ditching firebase my build is now ~ 10Mb.
Nevertheless, my dev build still lasts for about 16 secs now. When I start off with a clean quasar build again , build time starts around 5 secs, but over time (weeks) it increases. Last week it suddenly went from 15 secs to 50 secs, after doing some regular coding. No module installs or anything else. Webpack is becoming very annoying. I can see on google that a lot of people are battling slow build times. I think I’ll lock my self up for a week and start learning webpack from the ground up again.
Before I start digging into webpack, does anyone know what “the usual suspects” are when web pack builds are getting slow.
My dev build is reaching 2 min by now!
Thanks.
This should be pretty straight forward so I wonder what I’m missing here.
I’ve set up vue-i18n in main.js like this:
const messages = {
en : {
message : {
hello : 'hello world'
}
},
ja : {
message : {
hello : 'こんにちは、世界'
}
}
}
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)
const i18n = new VueI18n(
{
locale : 'ja', // set locale
messages // set locale messages
})
Vue.use(Quasar) // Install Quasar Framework
Quasar.start(
() => {
/* eslint-disable no-new */
new Vue(
{
el : '#q-app',
i18n,
router,
render : h => h(require('./App'))
}
)
}
)
component
<template>
...
<div>{{ $t('message.hello') }}</div>
...
output
The package seems to work but it’s giving warnings that it can’t find the translations.
vue-i18n] Cannot translate the value of keypath "message.hello". Use the value of keypath as default
Fixed. I think this was caused by the drawer being embedded in a router-view. I removed the drawer (which is a component) and placed it inside the parent component.
Main.vue
<template>
<div>
<router-view class="layout-view"></router-view>
<left-side-bar ref="leftSideBar"></left-side-bar>
</div>
</template>
I understand this would be easy with titles, but what about buttons? Showing, hiding, attaching methods…? Does this mean you have to parameterise buttons per state/view?
My left drawer <q-drawer> always seems to stay a little stuck when closing again. This is mostly noticeable
when I’m opening a list that needs some time loading. The drawer will slide away but stay stuck slightly (like 40px width) until the list is fully loaded after which it finally disappears.
Does anyone recognise this behaviour?
@LaurentPayot I’m also using Firebase as backend. It’s great, but I’m having trouble sometimes controlling all the firebase listeners. Especially when the data model becomes complex/relational, needing data from multiple nodes at the same time, Firebase listeners may start acting like a christmas tree.
I’m not using vuefire or vuexfire, but I wonder if any best practices have evolved regarding listeners.
If you know of any ‘must reads’ let me know please.
All in all I find it though to get the right balance between normalising/denormalising data and keeping listeners under control.
Maybe Firebase is just not fit for highly relational stuff.
In an ideal world, I’d rather use a real time graph database like http://gun.js.org/.
GunJS looks promising, but it’s not production ready yet.
@alexs
I started experimenting with Quasar in sept 2016, and it’s been fun building stuff with it.
Never had any major problems, code quality and documentation are outstanding, and the developer is very responsive/approachable.
I’m currently doing internal alpha tests with my app in AppStore and PlayStore. Won’t be long before going beta.
Here’s a link to give you an idea.
Design is not polished/final. There is lot’s of freedom to customise. Either for both ios and android, or for each platform specifically.
https://www.youtube.com/watch?v=u0UYSFLV6As&t=18s
Basic example. Copy Paste code into an empty Example.vue file
<q-layout>
<!--BODY-->
<div class="layout-view">
<!--IMAGE-->
<div>
<img :src="itemSelected.url" width="100%">
</div>
<!--HORIZONTAL LIST-->
<div>
<div class="scrollmenu">
<div v-for="item in list"
class="thumbnail"
@click="itemSelected = item">
<img :src="item.url" width="150px">
</div>
</div>
</div>
</div>
</q-layout>
</template>
<script>
export default {
data () {
return {
list : [],
itemSelected : {}
}
},
mounted() {
for (let i = 1; i <= 20; i++) {
this.list.push(
{
name : 'item ' + i,
url : 'http://placehold.it/350x150?text=PLACEHOLDER' + i
}
)
}
this.itemSelected = this.list[0]
}
}
</script>
<style>
div.scrollmenu {
overflow : auto;
white-space : nowrap;
}
div.scrollmenu .thumbnail {
display : inline-block;
margin : 5px;
}
</style>
@hata Here’s some more clarification
http://quasar-framework.org/guide/app-handling-static-assets.html
@rstoenescu @Jon
Will handling dynamic paths with :src work in the assets folder?
<img :src="'/assets/' + account.avatar" />
I know it does work in the statics folder
<img :src="'/statics/' + account.avatar" />
@Jon I was hoping so! It always surprises me why there’s never such a “mental picture” shown, when reading articles about vuex, redux etc…
Describing it in words makes it way too complicated.
@hata I don’t think that’s possible right now, but maybe a nice feature request.
You can also create your own horizontal scrollbar like this:
https://jsfiddle.net/maartenfb/ak1wxLLk/
html
<div class="scrollmenu">
<!-- use a v-for here -->
<div class="thumbnail">hello</div>
<div class="thumbnail">hello</div>
<div class="thumbnail">hello</div>
<div class="thumbnail">hello</div>
</div>
css
div.scrollmenu {
background-color : #333;
overflow : auto;
white-space : nowrap;
}
div.scrollmenu .thumbnail {
display : inline-block;
color : white;
padding : 10px;
width : 200px;
}
" npm install animate.css --save" in your project directory
import in main.js
import Vue from 'vue'
import Quasar from 'quasar'
import 'animate.css/animate.min.css'
<div class="row">
<button @click="toggle = !toggle">
toggleIt
</button>
<transition
name="custom-classes-transition"
enter-active-class="animated bounceInLeft slow"
leave-active-class="animated bounceOutLeft slow">
<button v-if="toggle">ANIMATION</button>
</transition>
</div>
It’s basically just wrapping the vue <transition> tag around an element with attribute like v-if etc. (that can listen to vue transitions.)
Then add the enter and leave classes.
“animated”: a “signal” for animate.css to do something
"bounceInLeft etc" : animate.css animations https://daneden.github.io/animate.css/
You can control speed by adding your own class:
.slow {
-webkit-animation-duration : 1s;
}