No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search
    1. Home
    2. chbarr
    C
    • Profile
    • Following 0
    • Followers 3
    • Topics 2
    • Posts 42
    • Best 9
    • Groups 0

    chbarr

    @chbarr

    18
    Reputation
    359
    Profile views
    42
    Posts
    3
    Followers
    0
    Following
    Joined Last Online
    Location Paris

    chbarr Follow

    Best posts made by chbarr

    • RE: How to handle both click on whole q-item as well as button inside
      <div id="q-app">
        <div class="q-ma-md">
          <q-list link v-for="currentItem in items" :key="currentItem.id">
            <q-item tag="label" @click.native.prevent="showChild()" >
              <q-item-main >
                <div> more stuff </div>
              </q-item-main>
              <q-item-side right>
                <q-btn @click.capture.stop="moreButtonClick(currentItem)" icon="more vert"></q-btn>
              </q-item-side>
            </q-item>
          </q-list>
        </div>
      </div>
      

      In q-item native.prevent : preventDefault on the native Dom click event
      in q-item-side capture.stop : capture the event click and stop propagation

      posted in Framework
      C
      chbarr
    • RE: [SOLVED]Is there a way to change q-collapsible toggle icon color ?

      Quasar component styles are scoped.
      So two ways:

      • style globally .q-collapsible-toggle-icon
      • use /deep/ in your component style:
      <style scoped lang="stylus">
      /deep/ .q-collapsible-toggle-icon
        color red
      </style>
      
      posted in Help
      C
      chbarr
    • RE: Prevent collapsible toggle when button in header

      use the event modifiers of vue (https://vuejs.org/v2/guide/events.html#Event-Modifiers)

      you can add the stop modifier on q-btn. See in action: https://jsfiddle.net/f0cpycoL/1/

      posted in Framework
      C
      chbarr
    • RE: qPageSticky to fix header/footer?

      @danielsalles
      i think you must use q-layout-footer and q-layout-header and the view prop of q-layout like hHh lPr fFf

      Like that:

      <div id="q-app">
        <q-layout view="hHh lPr fFf">
          // position of header is fixed because of H in prop view
          <q-layout-header>Your header content</q-layout-header>
          <q-page-container>
            // the pages are injected here depending of your router config
            <router-view></router-view>
          </q-page-container>
          // position of footer is fixed because of F in prop view
          <q-layout-footer>
            <q-tabs>
              <q-route-tab slot="title" icon="person" label="A" to="/a"></q-route-tab>
              <q-route-tab slot="title" icon="person" label="B" to="/b"></q-route-tab>
              <q-route-tab slot="title" icon="person" label="C" to="/c"></q-route-tab>
            </q-tabs>
          </q-layout-footer>
        </q-layout>
      </div>
      
      posted in Help
      C
      chbarr
    • RE: Is there a way to let a modal takes automatically a size in such a way everything is visible without scroll bars

      Set the content-css of your modal with auto width an height:

      <q-modal :content-css="{height: 'auto', width: 'auto'}">
      

      You can see in this jsfiddle differents sizes of a modal depending of items in content

      posted in Framework
      C
      chbarr
    • RE: How do I create a layout like this?

      You must read the documentation about flex (http://quasar-framework.org/components/flex-css.html). After you will build complex layout easily.
      See an example:
      https://jsfiddle.net/tL0qcfuL/

      posted in Help
      C
      chbarr
    • RE: How can I zoom in/out a picture?

      maybe you can try to use a vue directive for that (i found https://github.com/mirari/v-viewer)
      Even if you use Quasar, you can use other vuejs libraries

      posted in Help
      C
      chbarr
    • RE: Dialog with Form Componenets

      in v0.15, there’s no “form prop” for the dialog component.
      You must create your own form components and put them in your dialog.

      jsfiddle example: https://jsfiddle.net/eyudzfk1/15/

      posted in Framework
      C
      chbarr
    • RE: url() pointing to asset file within stylus

      @alinex
      With simple quote for the url, I think it will be ok:

      <style lang="stylus" scoped>
      main
        background: url('~assets/background.jpg') no-repeat center center fixed
      </style>
      
      posted in Help
      C
      chbarr

    Latest posts made by chbarr

    • Building web components ?

      Hello,

      I have read the discussion about the differences between vue-cli3 and quasar-cli
      I understand the benefits of quasar-cli.
      But ihmo, i think there’s one thing really good in vue-cli: it’s possible to build web components with option “target --wc”

      I think web components is the future for web development (shadow dom is really great for mixing components from various sources without problem with css scoping).

      Is there a plan to improve Quasar with the ability to build web components ?

      And many thanks for your work

      posted in CLI
      C
      chbarr
    • RE: [Solved] How to get variable name of v-model for the current selected component

      check the answer of LinusBorg in this thread: https://forum.vuejs.org/t/re-ask-how-to-get-v-model-expression/16112
      it’s not possible…

      posted in Framework
      C
      chbarr
    • RE: [Solved] How to get variable name of v-model for the current selected component

      Pass the v-model name as parameter of your popup function

      <q-input v-model="name1" :after="[{icon: 'search', handler () { popup('name1') }}]"></q-input>
      <q-input v-model="name2" :after="[{icon: 'search', handler () { popup('name2') }}]"></q-input>
      
      popup: function (name) {
         this.$q.notify(name)
      }
      
      posted in Framework
      C
      chbarr
    • RE: Quasar app architecture

      yes it’s that
      in dev:

      • front-end dev with quasar tools
      • your nodejs api in backend

      in prod:

      • serve build of your quasar app (it’s static files so nginx is a good solution)
      • prod of your nodejs api (don’t forget to enable cors between your api and your front-end if it’s not the same domain)
      posted in Framework
      C
      chbarr
    • RE: Is there a way to let a modal takes automatically a size in such a way everything is visible without scroll bars

      Set the content-css of your modal with auto width an height:

      <q-modal :content-css="{height: 'auto', width: 'auto'}">
      

      You can see in this jsfiddle differents sizes of a modal depending of items in content

      posted in Framework
      C
      chbarr
    • RE: Dynamic error message

      I made a mistake while writing my “template strings”

      errorFieldName () {
        if (this.$v.form.name.required) return 'Field name is required'
        if (this.$v.form.name.minLength) return `Field name must have at least ${this.$v.form.name.$params.minLength.min} letters.`
        if (this.$v.form.name.maxLength) return `Field name cant have more than ${this.$v.form.name.$params.maxLength.max} letters.`
      }
      
      posted in Help
      C
      chbarr
    • RE: How to handle both click on whole q-item as well as button inside
      <div id="q-app">
        <div class="q-ma-md">
          <q-list link v-for="currentItem in items" :key="currentItem.id">
            <q-item tag="label" @click.native.prevent="showChild()" >
              <q-item-main >
                <div> more stuff </div>
              </q-item-main>
              <q-item-side right>
                <q-btn @click.capture.stop="moreButtonClick(currentItem)" icon="more vert"></q-btn>
              </q-item-side>
            </q-item>
          </q-list>
        </div>
      </div>
      

      In q-item native.prevent : preventDefault on the native Dom click event
      in q-item-side capture.stop : capture the event click and stop propagation

      posted in Framework
      C
      chbarr
    • RE: Dynamic error message
      <q-field :error="$v.form.name.$error" :error-label="errorFieldName">
        <q-input v-model="name" />
      </q-field>
      
      computed: {
        errorFieldName () {
          if (this.$v.form.name.required) return 'Field name is required'
          if (this.$v.form.name.minLength) return `Field name must have at least {{this.$v.form.name.$params.minLength.min}} letters.`
          if (this.$v.form.name.maxLength) return `Field name can't have more than {{this.$v.form.name.$params.maxLength.max}} letters.`
        }
      }
      
      posted in Help
      C
      chbarr
    • RE: Change ok button of dialog depending on tab selected

      You can refer to the documentation concerning Dialog: This means Dialogs should only be used for quick actions, like password verification, small App notifications or quick options. More in depth user flows should be reserved for ​Modals​.

      So you are right. If your “floating” component is a little complex, it’s better to use Modal

      posted in Help
      C
      chbarr
    • RE: Change ok button of dialog depending on tab selected

      you can have a prop in your modal for your custom label.
      And change this prop value on <q-tabs> select event

      See an example: https://jsfiddle.net/cLqkmcor/3/

      posted in Help
      C
      chbarr