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

    Highlight color for selected item of Expansion Item ?

    Framework
    expansion item
    3
    10
    2329
    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.
    • I
      Incremental last edited by

      Hello, is it possible to have a highlight color for the selected item of an Expansion Item ?
      https://quasar.dev/vue-components/expansion-item#QExpansionItem-API

      dobbel 1 Reply Last reply Reply Quote 0
      • dobbel
        dobbel @Incremental last edited by

        @Incremental

        https://codepen.io/ontwikkelfabriek/pen/rNeRWxG

        It’s called expanded not selected btw.

        1 Reply Last reply Reply Quote 0
        • I
          Incremental last edited by Incremental

          Thanks dobbel, it’s not exactly what I’d like to have, because when all items are expanded, they are all orange.

          I’d like to identify the selected item of the current page like in this template the green highlight in the menu :
          https://quasar-admin-crm-template.netlify.app/dashboard

          PS : btw, I’ve propably not understood everything, but the “expanded” property seems to be not documented ???

          metalsadman dobbel 2 Replies Last reply Reply Quote 0
          • metalsadman
            metalsadman @Incremental last edited by metalsadman

            @Incremental it’s not a property, it’s a css class. You can do what you want, whichever items you use inside, if you use list items, then you take a look into qitem API, things like active-class, etc… expansion-item is just a wrapper of qitem, so most props are also present in it. You refer to that menu on crm-template, it’s open source so you can go take a look how was that implemented if you check out the source in its GitHub repo.

            1 Reply Last reply Reply Quote 0
            • dobbel
              dobbel @Incremental last edited by dobbel

              @Incremental

              Ah so what happens on that page is that the navigation (expansion)item is highlighted because it’s defined route property to matches the current route of the app ( routes defined in vue-router).

              Here’s a snippet with the active-class implemented.

              ...
              <q-item active-class="tab-active" to="/dashboard" clickable>    
                  <q-item-section avatar>
                          <q-icon name="dashboard"/>     
                  </q-item-section> 
                                          
                  <q-item-section>            
                     Dashboard v1                            
                  </q-item-section>                                
              </q-item>
              ....
              <style>
              .tab-active {
                  background-color: green;
                }
              </style>
              
              1 Reply Last reply Reply Quote 0
              • I
                Incremental last edited by

                Thanks a lot all for your comments.
                As I use a component menu like in Dashblocks admin template, I solved it with :

                <style  lang="scss" scoped>
                /* Q-Item selected */
                .q-item.q-router-link--active {
                   color: var(--q-color-primary);
                   background-color: $blue-1 !important;
                }
                </style>
                
                1 Reply Last reply Reply Quote 0
                • I
                  Incremental last edited by

                  Hello, it’s me again !
                  I’m now playing with Dark Mode and customized my menu color conditionnaly within <q-item> properties.

                  As the Active class color is not a parameter, does anybody have an idea on how to modify dynamicly this CSS ?
                  Thanks.

                  metalsadman 1 Reply Last reply Reply Quote 0
                  • metalsadman
                    metalsadman @Incremental last edited by metalsadman

                    @Incremental use a class selector, then class bindings ie.

                    <q-item :class="{ 'myclass': $q.dark.isActive }" ... 
                    .myclass {
                      .q-item.q-router-link--active {
                         color: var(--q-color-primary);
                         background-color: $blue-1 !important;
                      }
                    }
                    

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

                    1 Reply Last reply Reply Quote 0
                    • I
                      Incremental last edited by

                      Thank you for your trick. My menu contains :

                        <q-item
                          v-else
                          clickable
                          v-ripple
                          v-bind:key="item.link"
                          :to="item.link"
                          exact
                          :class="SubItemClass"
                          :active-class="itemActiveClass"
                        >
                      

                      If I replace :class=“SubItemClass” by :class="{ ‘myclass’: $q.dark.isActive }"
                      there is no effect.

                      I added menu background colors in my store and I change them dynamically when Light or Dark mode before using them in the menu logic.
                      All is perfectly configurable, but for the selected item, I can only highlight it with CSS.

                      So is it possible to keep my :class=“SubItemClass” and combine it with “{ ‘myclass’: $q.dark.isActive }” ?

                      metalsadman 1 Reply Last reply Reply Quote 0
                      • metalsadman
                        metalsadman @Incremental last edited by metalsadman

                        @Incremental read the Vue docs link. You can use whichever method of binding that suits you based on that docs.

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