I’m developing an app, when the app navigates to a new route it instantly goes to that route and then the app begins loading images and page components. I am not using Lazy loading/code splitting (in routes.js). In Cordova app mode it just takes a few milliseconds to show the images or load the component but it would be nice If the page loaded before navigating to the page.
Generally is it possible to preload and prepare some components before showing them? For instance prepare a q-dialog before user clicks a button to open it, so that the animation is smooth and nice.
How can I do that?
Thanks in advance!
Latest posts made by ahmadx87
-
Waiting for the page to load before navigating to the route?
-
I find some class naming convention inconsistent sometime
It is just a few months that I got to new Quasar and started using it, and I really like it.
I just find some class names a bit hard to remember because the convention is not consistent.One example is
absolute
forposition-absolute
but if you want to set theposition
torelative
the class name isrelative-position
. It would be much better if was consistent, I often have to lookup the docs to get it right.Another example is
justify-center
knowing this class I expect the other one for centering along the cross axis to bealign-center
but it isitems-center
. It confuses me from time to time -
RE: No "keyboard adaptation" while in fullscreen ?
@metalsadman Thanks for your suggestion. This is such a common thing that should have happened to many people thus far, I tend to believe it should not be an unresolved issue. Anyway I opened an issue on Quasar’s repo. https://github.com/quasarframework/quasar/issues/7413
-
RE: No "keyboard adaptation" while in fullscreen ?
Was this problem solved? It is now almost 3 years later and I have the same issue!
-
RE: Getting statics folder URL at runtime?
Thanks alot @Hawkeye64 I’ve just recently began using Quasar and had problems getting the file paths correctly. Looks like in v. 2 it is easier to deal with assets.
I upgraded and it solved my frustration. -
Getting statics folder URL at runtime?
I’m using a thirdparty components that uses some media files (images, audio files, etc.). I should specify what the base url is for those files. For example if i pass to the
media
prop like so:media="/statics
the component will append file name to it to set it as the url of the image or whatever it is (i.e/statics/img.jpg
).I can’t get the files to load correctly. I think I should get the base url of the statics folder at run time and then pass it to the component. Am i right? How should I resolve this?
-
RE: Form input autofill background color in Chrome
@jeffatpf Thanks, good point. It didn’t work though, i think this variable is for older versions of Quasar. I searched the docs variables section. it seems to be
$input-autofill-color
but it doesn’t work. Something might have been changed in newer versions of chrome or there is a bug in Quasar. Or maybe I’m doing something wrong. -
RE: Form input autofill background color in Chrome
@metalsadman Thanks for your input. I don’t want to disable autocomplete. It would be inconvenient for users to be unable to use their browser password managers.
It is actually getting rid of the problem instead of solving it. -
Form input autofill background color in Chrome
Hi,
I’m building a form for login. The chrome autofill for email and password is ruining my UI and I googled a lot but to no avail. I took a look at github issues and saw that it was an issue in beta versions and must have been solved. But now I’m using chrome 83 and I have this issue.Am I doing something wrong?
Here is the markup
<template> <q-form @submit.prevent="login" class="q-gutter-md"> <q-input color="primary" v-model="email" label="Email" /> <q-input v-model="password" label="Password" :type="hidePass ? 'password' : 'text'"> <template v-slot:append> <q-icon :name="hidePass ? 'visibility_off' : 'visibility'" class="cursor-pointer" @click="hidePass = !hidePass" /> </template> </q-input> <div class="text-center q-mt-lg"> <q-btn type="submit" color="primary" class="full-width">Login</q-btn> </div> <div class="text-center"> <q-btn text flat no-caps size="small" class="q-mt-sm">Forgot your password?</q-btn> </div> </q-form> </template>
and this is the result