Navigation

    Quasar Framework

    • Register
    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search
    1. Home
    2. btree
    B
    • Profile
    • Following
    • Followers
    • Topics
    • Posts
    • Best
    • Groups

    btree

    @btree

    2
    Reputation
    11
    Posts
    2
    Profile views
    0
    Followers
    0
    Following
    Joined Last Online

    btree Follow

    Posts made by btree

    • RE: What is the best practice for loading components so they are globally accessible?

      Nevermind, the package did not support dynamic paths itself. I used vue-inline-svg instead and everything works perfectly. Thanks!

      posted in Help
      B
      btree
    • 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>
      
      posted in Help
      B
      btree
    • 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?

      posted in Help
      B
      btree
    • 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?

      posted in Help
      B
      btree
    • RE: How to select month and year only?

      Is this what you mean?
      https://www.w3schools.com/js/js_date_methods.asp

      var myDate = new Date();
      var month = myDate.getMonth();
      
      posted in Help
      B
      btree
    • 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.

      posted in Help
      B
      btree
    • 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
      posted in Useful Tips (NEW)
      B
      btree
    • RE: How to scroll to an element

      Why not just use the javascript scrollIntoView() ?

      posted in Help
      B
      btree
    • 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?

      posted in Useful Tips (NEW)
      B
      btree
    • 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?

      posted in Help
      B
      btree