Hello friends, welcome to our new tutorial series. This is about my favorite framework, Quasar. Quasar is a great framework for any type of development you have on your mind. The only thing, you must know some basics of the VUE JS. However, I should not define what is VUE and Quasar here. Because this tutorial is for developers who are using quasar for now.
However, when I was developing my project, my client asked to go with q collapsible menu to the drawer. Then I could find the below code lines and I could fulfill the client’s requirement. I’m not going to talk too much. Just copy the code and paste it inside of your drawer.
<q-expansion-item icon="menu_open" label="Menu Levels" > <q-item class="q-ml-xl" active-class="q-item-no-link-highlighting" > <q-item-section> <q-item-label>Level 1</q-item-label> </q-item-section> </q-item> </q-expansion-item> <q-expansion-item :header-inset-level="0.85" label="Level 2" > <q-item class="q-ml-xl" style="margin-left: 55px !important;" active-class="q-item-no-link-highlighting" > <q-item-section> <q-item-label>Level 2.1</q-item-label> </q-item-section> </q-item> </q-expansion-item> <q-expansion-item :header-inset-level="1" label="Level 2.2" > <q-item style="margin-left: 65px !important;" active-class="q-item-no-link-highlighting" > <q-item-section> <q-item-label>Level 2.2.1</q-item-label> </q-item-section> </q-item> <q-item style="margin-left: 65px !important;" active-class="q-item-no-link-highlighting" > <q-item-section> <q-item-label>Level 2.2.2</q-item-label> </q-item-section> </q-item> </q-expansion-item>
I hope the above code will work properly without any errors. If you got any, let us know by leaving a comment below. Thank you for being with us.
