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

    How to apply classes for all child components?

    Framework
    4
    4
    65
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • W
      wpq last edited by wpq

      I often have cases where I need to apply the same class to all the children components (for instance on a bar with span elements):

      <q-bar><span class="q-ma-sm">aaa</span><span class="q-ma-sm">bbb</span></q-bar>
      

      Is there a way to apply q-ma-sm to the span elements from within q-bar? (as opposed to applying it to all the child elements one by one)

      qyloxe 1 Reply Last reply Reply Quote 0
      • J
        jraez last edited by

        basically, no. It’s the very design of HTML itself.
        To ease the process you can do two things. Either, put your children components in a loop, or extends the component to let him add himself all the class/css/style you want.

        1 Reply Last reply Reply Quote 0
        • qyloxe
          qyloxe @wpq last edited by

          @wpq well, you can have “class” as computed property, returning object with specific css classes as keys. Even more, you can have this computed property implemented as a mixin and added to all your components. More here:

          https://vuejs.org/v2/guide/class-and-style.html

          This comes from there:

          <div v-bind:class="classObject"></div>
          
          ...
          
          data: {
            isActive: true,
            error: null
          },
          computed: {
            classObject: function () {
              return {
                active: this.isActive && !this.error,
                'text-danger': this.error && this.error.type === 'fatal'
              }
            }
          }
          
          dobbel 1 Reply Last reply Reply Quote 1
          • dobbel
            dobbel @qyloxe last edited by

            @qyloxe wonderful creative magic 😉

            1 Reply Last reply Reply Quote 0
            • First post
              Last post