Search code examples
vuejs3quasar-frameworkquasarqsplitter

QSplitter more than two items

I would like to create a QSplitter with 5 items in it

<div class="q-px-md">
      <Buttons/>
      <Buttons/>
      <Buttons/>
      <Buttons/>
      <Buttons/>
</div>

As I run through the documentation, I can not find a way to implement it with these 5 items?

Solution

  • You could embed QSplitter into another QSplitter like this:

       <q-splitter v-model="splitterModel" style="height: 400px">
     <template v-slot:before>
       <q-splitter v-model="splitterModel" style="height: 400px">

         <template v-slot:before>
           <q-btn color="white" text-color="black" label="Standard" />
         </template>

         <template v-slot:after>
           <q-splitter v-model="splitterModel" style="height: 400px">

             <template v-slot:before>
               <q-btn color="primary" label="Primary" />
             </template>

             <template v-slot:after>
               <q-btn color="secondary" label="Secondary" />
             </template>

           </q-splitter>
         </template>

       </q-splitter>
     </template>

     <template v-slot:after>
       <q-splitter v-model="splitterModel" style="height: 400px">

         <template v-slot:before>
           <q-btn color="amber" glossy label="Amber" />
         </template>

         <template v-slot:after>
           <q-btn color="brown-5" label="Brown 5" />
         </template>

       </q-splitter>
     </template>

   </q-splitter>

    For your reference: