QSplitter more than two items

Question

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?

score 1 · Accepted Answer · answered Oct 18 '22 at 08:12

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:

Documentation
Codepen: https://codepen.io/hoangdng-the-sans/pen/WNJBNBY

QSplitter more than two items

1 Answers1