Nevermind, the package did not support dynamic paths itself. I used vue-inline-svg
instead and everything works perfectly. Thanks!
btree
@btree
Posts made by btree
-
RE: What is the best practice for loading components so they are globally accessible?
-
RE: What is the best practice for loading components so they are globally accessible?
@s-molinari I made a wrapper component for icons. This is the core of the code:
<template> <img svg-inline :src="`../statics/feather/${name}.svg`" /> </template> <script> export default { name: "Icon", props: { name: String } }; </script>
-
RE: What is the best practice for loading components so they are globally accessible?
I did this but my component uses the
vue-svg-inline-loader
. The svg file now does not properly inline. Is there a way to get the webpack config to work for a specific boot file, or another way to globally register components so that this is not an issue? -
RE: How to search and edit in v-for?
Puedes poner ese codigo en un bloque rodeado por ``` ? Seria mucho mas facil entenderlo con resaltado de sintaxis y margenes correctos.
Otra pregunta: por que quieres buscar en
v-for
y no en el script? -
RE: How to select month and year only?
Is this what you mean?
https://www.w3schools.com/js/js_date_methods.aspvar myDate = new Date(); var month = myDate.getMonth();
-
Using Quasar without its styles
Is there a way to use Quasar for the app building side of things (deploying to mobile and web) (and maybe use some Quasar components) without including Quasar’s styling functionalities?
Reason being that I’m working with legacy code which already uses several css libraries and I don’t want to add another layer to that.
-
RE: Q-btn-dropdown ARIA accessibility - arrow keys
I did end up implementing the functionality myself (fingers crossed quasar will implement it out-of-the-box for its components in the near future), although it wasn’t as complicated as what I linked to seems since I used a ref on each item like so:
<q-item tabindex="-1" role="option" v-for="(opt, index) in options" :key="opt" :ref="opt" clickable v-close-popup @click="onItemClick(opt)" @keydown.up.prevent="focusOn(index - 1)" @keydown.down.prevent="focusOn(index + 1)" >
then in the script:
focusOn(index) { this.$refs[this.options[index]][0].$el.focus(); this.chosen = this.options[index]; //plus bounds checking code }
In addition to this, I
- put listeners on q-btn-dropdown to open it when the down arrow or enter button are pressed and, @show, focus on the currently/last chosen element
- put listener on q-list to exit dropdown (and indicate the last focused item as selected) when tab is pressed
-
Q-btn-dropdown ARIA accessibility - arrow keys
I am using QBtnDropdown in my app and want to follow the ARIA standards: one should be able to focus on items in the dropdown by using the up and down arrow keys.
So far, following https://www.w3.org/TR/wai-aria-practices/examples/listbox/listbox-collapsible.html, I have this:
<q-btn-dropdown aria-haspopup="listbox" class="glossy q-ml-md q-my-md" color="primary" :label="chosen" > <q-list role="listbox" tabindex="-1"> <q-item role="option" v-for="opt in options" clickable v-close-popup @click="onItemClick(opt)" > <q-item-section> <q-item-label>{{ opt }}</q-item-label> </q-item-section> </q-item> </q-list> </q-btn-dropdown>
This just scrolls up and down the page when the dropdown is selected and I use the arrow keys.
I am new to ARIA… do I have to implement the focusing functionality myself, for example like this https://dev.to/emmawedekind/creating-a-custom-accessible-drop-down-3gmo ? Or is there something I could add to my project so that I don’t have to implement it all myself? -
RE: QInput - prevent Android's soft keyboard from showing automatically
@metalsadman Thank you, this works well for me. So is there no way to prevent the keyboard popup with qinput?