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?

Answer 1

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

Answer 2

Your v-model variables should map to two different variables. That way, splitting one way does not affect the other split.

For example, v-model="splitterModel1" and v-model="splitterModel2".