Split panes in Vue Splitter component

5 Mar 202624 minutes to read

This section explains split-pane behavior.

Horizontal layout

By default, Splitter renders in horizontal orientation. The Splitter container is split into panes that flow horizontally and are separated by vertical separators.

Composition API (~/src/App.vue)
Options API (~/src/App.vue)
<template>
    <div id="app" class="col-lg-12 control-section default-splitter">
        <ejs-splitter id='default-splitter' width='600px' height='230px'>
            <e-panes>
                <e-pane :content='content1' size='200px'></e-pane>
                <e-pane :content='content2' size='200px'></e-pane>
                <e-pane :content='content3' size='200px'></e-pane>
            </e-panes>
        </ejs-splitter>
    </div>
</template>

<script setup>

import { SplitterComponent as EjsSplitter, PanesDirective as EPanes, PaneDirective as EPane } from '@syncfusion/ej2-vue-layouts';
import { createApp } from 'vue';

var contentVue1 = createApp().component("contentTemp1", {
    template: `<div class="content">
                    <h3 class="h3">Grid </h3>
                    The ASP.NET DataGrid component, or DataTable is a feature-rich component used to display data in a tabular format.
                </div>`,
    data() {
        return {
            data: {}
        };
    }
});

var contentVue2 = createApp().component("contentTemp2", {
    template: `<div class="content">
                    <h3 class="h3">Schedule </h3>
                    The ASP.NET Scheduler, a.k.a. event calendar, facilitates almost all calendar features, thus allowing users to manage their time efficiently
                </div>`,
    data() {
        return {
            data: {}
        };
    }
});

var contentVue3 = createApp().component("contentTemp3", {
    template: `<div class="content">
                    <h3 class="h3">Chart </h3>
                    ASP.NET charts, a well-crafted easy-to-use charting package, is used to add beautiful charts in web and mobile applications
              </div>`,
    data() {
        return {
            data: {}
        };
    }
});


const content1 = () => {
    return { template: contentVue1 }
};
const content2 = () => {
    return { template: contentVue2 }
};
const content3 = () => {
    return { template: contentVue3 }
};

</script>

<style>
@import "../node_modules/@syncfusion/ej2-vue-layouts/styles/material3.css";

#app {
    margin: 65px auto;
}

.content {
    padding: 10px;
}

.e-splitter {
    margin: 0 auto;
}
</style>
<template>
    <div id="app" class="col-lg-12 control-section default-splitter">
        <ejs-splitter id='default-splitter' width='600px' height='230px'>
            <e-panes>
                <e-pane :content='content1' size='200px'></e-pane>
                <e-pane :content='content2' size='200px'></e-pane>
                <e-pane :content='content3' size='200px'></e-pane>
            </e-panes>
        </ejs-splitter>
    </div>
</template>

<script>

import { SplitterComponent, PanesDirective, PaneDirective } from '@syncfusion/ej2-vue-layouts';
import { createApp } from 'vue';

var contentVue1 = createApp().component("contentTemp1", {
    template: `<div class="content">
                    <h3 class="h3">Grid </h3>
                    The ASP.NET DataGrid component, or DataTable is a feature-rich component used to display data in a tabular format.
                </div>`,
    data() {
        return {
            data: {}
        };
    }
});

var contentVue2 = createApp().component("contentTemp2", {
    template: `<div class="content">
                    <h3 class="h3">Schedule </h3>
                    The ASP.NET Scheduler, a.k.a. event calendar, facilitates almost all calendar features, thus allowing users to manage their time efficiently
                </div>`,
    data() {
        return {
            data: {}
        };
    }
});

var contentVue3 = createApp().component("contentTemp3", {
    template: `<div class="content">
                    <h3 class="h3">Chart </h3>
                    ASP.NET charts, a well-crafted easy-to-use charting package, is used to add beautiful charts in web and mobile applications
              </div>`,
    data() {
        return {
            data: {}
        };
    }
});

export default {
    name: "App",
    components: {
        "ejs-splitter": SplitterComponent,
        "e-panes": PanesDirective,
        "e-pane": PaneDirective
    },
    data() {
        return {
            content1: function () {
                return { template: contentVue1 }
            },
            content2: function () {
                return { template: contentVue2 }
            },
            content3: function () {
                return { template: contentVue3 }
            }
        }
    }
}
</script>

<style>
@import "../node_modules/@syncfusion/ej2-vue-layouts/styles/material3.css";

#app {
    margin: 65px auto;
}

.content {
    padding: 10px;
}

.e-splitter {
    margin: 0 auto;
}
</style>

Vertical layout

Set the orientation API to Vertical to render the Splitter in vertical orientation. The Splitter container is split into panes that flow vertically and are separated by horizontal separators.

Composition API (~/src/App.vue)
Options API (~/src/App.vue)
<template>
    <div id="app" class="col-lg-12 control-section default-splitter">
      <ejs-splitter id='vertical-splitter' orientation='Vertical' width='600px' height='300px'>
        <e-panes>
          <e-pane :content='content1' size='100px'></e-pane>
          <e-pane :content='content2' size='100px'></e-pane>
          <e-pane :content='content3'></e-pane>
        </e-panes>
      </ejs-splitter>
    </div>
  </template>
  
  <script setup>
  
  import { SplitterComponent as EjsSplitter, PanesDirective as EPanes, PaneDirective as EPane } from '@syncfusion/ej2-vue-layouts';
  import { createApp } from 'vue';
  
  var contentVue1 = createApp().component("contentTemp1", {
    template: `<div class="content">
                    <h3 class="h3">Grid</h3>
                    The ASP.NET DataGrid component, or DataTable is a feature-rich component used to display data in a tabular format.
                </div>`,
    data() {
      return {
        data: {}
      };
    }
  });
  
  var contentVue2 = createApp().component("contentTemp2", {
    template: `<div class="content">
                    <h3 class="h3">Schedule </h3>
                    The ASP.NET Scheduler, a.k.a. event calendar, facilitates almost all calendar features, thus allowing users to manage their time efficiently
                </div>`,
    data() {
      return {
        data: {}
      };
    }
  });
  
  var contentVue3 = createApp().component("contentTemp3", {
    template: `<div class="content">
                    <h3 class="h3">Chart </h3>
                    ASP.NET charts, a well-crafted easy-to-use charting package, is used to add beautiful charts in web and mobile applications
              </div>`,
    data() {
      return {
        data: {}
      };
    }
  });
  
  
  const content1 = () => {
    return { template: contentVue1 }
  };
  const content2 = () => {
    return { template: contentVue2 }
  };
  const content3 = () => {
    return { template: contentVue3 }
  }
  
  </script>
  
  <style>
  @import "../node_modules/@syncfusion/ej2-vue-layouts/styles/material3.css";
  
  .content {
    padding: 8px;
  }
  
  .e-splitter {
    margin: 0 auto;
  }
  </style>
<template>
    <div id="app" class="col-lg-12 control-section default-splitter">
      <ejs-splitter id='vertical-splitter' orientation='Vertical' width='600px' height='300px'>
        <e-panes>
          <e-pane :content='content1' size='100px'></e-pane>
          <e-pane :content='content2' size='100px'></e-pane>
          <e-pane :content='content3'></e-pane>
        </e-panes>
      </ejs-splitter>
    </div>
  </template>
  
  <script>
  
  import { SplitterComponent, PanesDirective, PaneDirective } from '@syncfusion/ej2-vue-layouts';
  import { createApp } from 'vue';
  
  var contentVue1 = createApp().component("contentTemp1", {
    template: `<div class="content">
                        <h3 class="h3">Grid</h3>
                        The ASP.NET DataGrid component, or DataTable is a feature-rich component used to display data in a tabular format.
                    </div>`,
    data() {
      return {
        data: {}
      };
    }
  });
  
  var contentVue2 = createApp().component("contentTemp2", {
    template: `<div class="content">
                        <h3 class="h3">Schedule </h3>
                        The ASP.NET Scheduler, a.k.a. event calendar, facilitates almost all calendar features, thus allowing users to manage their time efficiently
                    </div>`,
    data() {
      return {
        data: {}
      };
    }
  });
  
  var contentVue3 = createApp().component("contentTemp3", {
    template: `<div class="content">
                        <h3 class="h3">Chart </h3>
                        ASP.NET charts, a well-crafted easy-to-use charting package, is used to add beautiful charts in web and mobile applications
                  </div>`,
    data() {
      return {
        data: {}
      };
    }
  });
  
  export default {
    name: "App",
    components: {
      "ejs-splitter": SplitterComponent,
      "e-panes": PanesDirective,
      "e-pane": PaneDirective
    },
    data() {
      return {
        content1: function () {
          return { template: contentVue1 }
        },
        content2: function () {
          return { template: contentVue2 }
        },
        content3: function () {
          return { template: contentVue3 }
        }
      }
    }
  }
  </script>
  
  <style>
  @import "../node_modules/@syncfusion/ej2-vue-layouts/styles/material3.css";
  
  .content {
    padding: 8px;
  }
  
  .e-splitter {
    margin: 0 auto;
  }
  </style>

You can also render multiple panes in Splitter using either Horizontal or Vertical orientation.

Separator

By default, the pane separator renders with a 1px width/height. Customize the separator size using the separatorSize API.

For horizontal orientation, it will be considered as separator width.
For vertical orientation, it will be considered as separator height.

Composition API (~/src/App.vue)
Options API (~/src/App.vue)
<template>
    <div id="app" class="col-lg-12 control-section default-splitter">
      <ejs-splitter id='splitter' width='600px' height='235px' separatorSize='5'>
        <e-panes>
          <e-pane :content='content1' size='200px'></e-pane>
          <e-pane :content='content2' size='200px'></e-pane>
          <e-pane :content='content3' size='200px'></e-pane>
        </e-panes>
      </ejs-splitter>
    </div>
  </template>
  
  <script setup>
  
  import { SplitterComponent as EjsSplitter, PanesDirective as EPanes, PaneDirective as EPane } from '@syncfusion/ej2-vue-layouts';
  import { createApp } from 'vue';
  
  
  var contentVue1 = createApp().component("contentTemp1", {
    template: `<div class="content">
                        <h3 class="h3">PARIS </h3>
                        Paris, the city of lights and love - this short guide is full of ideas for how to make the most of the romanticism...
                    </div>`,
    data() {
      return {
        data: {}
      };
    }
  });
  
  var contentVue2 = createApp().component("contentTemp2", {
    template: `<div class="content">
                        <h3 class="h3">CAMEMBERT </h3>
                        The village in the Orne département of Normandy where the famous French cheese is originated from.
                    </div>`,
    data() {
      return {
        data: {}
      };
    }
  });
  
  var contentVue3 = createApp().component("contentTemp3", {
    template: `<div class="content">
                        <h3 class="h3">GRENOBLE </h3>
                        The capital city of the French Alps and a major scientific center surrounded by many ski resorts, host of the Winter Olympics in 1968.
                    </div>`,
    data() {
      return {
        data: {}
      };
    }
  });
  
  
  const content1 = () => {
    return { template: contentVue1 }
  };
  const content2 = () => {
    return { template: contentVue2 }
  };
  const content3 = () => {
    return { template: contentVue3 }
  };
  
  </script>
  
  <style>
  @import "../node_modules/@syncfusion/ej2-vue-layouts/styles/material3.css";
  
  #app {
    margin: 65px auto;
  }
  
  .content {
    padding: 10px;
  }
  
  .e-splitter {
    margin: 0 auto;
  }
  </style>
<template>
    <div id="app" class="col-lg-12 control-section default-splitter">
      <ejs-splitter id='splitter' width='600px' height='235px' separatorSize='5'>
        <e-panes>
          <e-pane :content='content1' size='200px'></e-pane>
          <e-pane :content='content2' size='200px'></e-pane>
          <e-pane :content='content3' size='200px'></e-pane>
        </e-panes>
      </ejs-splitter>
    </div>
  </template>
  
  <script>
  
  import { SplitterComponent, PanesDirective, PaneDirective } from '@syncfusion/ej2-vue-layouts';
  import { createApp } from 'vue';
  
  var contentVue1 = createApp().component("contentTemp1", {
    template: `<div class="content">
                        <h3 class="h3">PARIS </h3>
                        Paris, the city of lights and love - this short guide is full of ideas for how to make the most of the romanticism...
                    </div>`,
    data() {
      return {
        data: {}
      };
    }
  });
  
  var contentVue2 = createApp().component("contentTemp2", {
    template: `<div class="content">
                        <h3 class="h3">CAMEMBERT </h3>
                        The village in the Orne département of Normandy where the famous French cheese is originated from.
                    </div>`,
    data() {
      return {
        data: {}
      };
    }
  });
  
  var contentVue3 = createApp().component("contentTemp3", {
    template: `<div class="content">
                        <h3 class="h3">GRENOBLE </h3>
                        The capital city of the French Alps and a major scientific center surrounded by many ski resorts, host of the Winter Olympics in 1968.
                    </div>`,
    data() {
      return {
        data: {}
      };
    }
  });
  
  export default {
    name: "App",
    components: {
      "ejs-splitter": SplitterComponent,
      "e-panes": PanesDirective,
      "e-pane": PaneDirective
    },
    data() {
      return {
        content1: function () {
          return { template: contentVue1 }
        },
        content2: function () {
          return { template: contentVue2 }
        },
        content3: function () {
          return { template: contentVue3 }
        }
      }
    }
  }
  </script>
  
  <style>
  @import "../node_modules/@syncfusion/ej2-vue-layouts/styles/material3.css";
  
  #app {
    margin: 65px auto;
  }
  
  .content {
    padding: 10px;
  }
  
  .e-splitter {
    margin: 0 auto;
  }
  </style>

Nested Splitter

Splitter supports nested panes to achieve complex layouts. The same <div> element for splitter pane and nested splitter.

A nested Splitter can also be rendered as a direct child of a Splitter pane. In that case, set the nested Splitter to 100% width and height so it matches the parent pane dimensions.

Composition API (~/src/App.vue)
Options API (~/src/App.vue)
<template>
    <div id="app" class="col-lg-12 control-section default-splitter">
      <ejs-splitter id='nested-splitter' width='600px' height='265px' :created='onCreate'>
        <e-panes>
          <e-pane :content='content1' size='200px'></e-pane>
          <e-pane :content='content2' size='200px'></e-pane>
          <e-pane :content='content3' size='200px'></e-pane>
        </e-panes>
      </ejs-splitter>
    </div>
  </template>
  <script setup>
  
  import { SplitterComponent as EjsSplitter, PanesDirective as EPanes, PaneDirective as EPane } from '@syncfusion/ej2-vue-layouts';
  import { Splitter } from '@syncfusion/ej2-layouts';
  import { createApp } from 'vue';
  
  
  var contentVue1 = createApp().component("contentTemp1", {
    template: `<div class="content">
                        <h3 class="h3">PARIS </h3>
                        Paris, the city of lights and love - this short guide is full of ideas for how to make the most of the romanticism...
                    </div>`,
    data() {
      return {
        data: {}
      };
    }
  });
  
  var contentVue2 = createApp().component("contentTemp2", {
    template: `<div class="content">
                        <h3 class="h3">CAMEMBERT </h3>
                        The village in the Orne département of Normandy where the famous French cheese is originated from.
                    </div>`,
    data() {
      return {
        data: {}
      };
    }
  });
  
  var contentVue3 = createApp().component("contentTemp3", {
    template: `<div>
                    <div id ='vertical_splitter' class="vertical_splitter">
                        <div>
                            <div class="content">
                                <h3 class="h3">GRENOBLE </h3>
                                The capital city of the French Alps and a major scientific center surrounded by many ski resorts, host of the Winter Olympics in 1968.
                            </div>
                        </div>
                        <div>
                            <div class="content">
                                <h3 class="h3">Australia </h3>
                                Australia is a country and continent surrounded by the Indian and Pacific oceans
                            </div>
                        </div>
                    </div>
                </div>`,
    data() {
      return {
        data: {}
      };
    }
  });
  
  const content1 = () => {
    return { template: contentVue1 }
  };
  const content2 = () => {
    return { template: contentVue2 }
  };
  const content3 = () => {
    return { template: contentVue3 }
  };
  
  
  const onCreate = () => {
    const splitterObj = new Splitter({
      paneSettings: [
        { size: '150px', min: '20%' },
        { size: '100px', min: '20%' }
      ],
      orientation: 'Vertical'
    });
    splitterObj.appendTo('#vertical_splitter');
  };
  
  </script>
  
  <style>
  @import "../node_modules/@syncfusion/ej2-vue-layouts/styles/material3.css";
  
  #app {
    margin: 55px auto;
  }
  
  .content {
    padding: 5px;
  }
  
  .vertical_splitter.e-splitter.e-splitter-vertical {
    border: none;
  }
  
  .e-splitter {
    margin: 0 auto;
  }
  </style>
<template>
    <div id="app" class="col-lg-12 control-section default-splitter">
      <ejs-splitter id='nested-splitter' width='600px' height='265px' :created='onCreate'>
        <e-panes>
          <e-pane :content='content1' size='200px'></e-pane>
          <e-pane :content='content2' size='200px'></e-pane>
          <e-pane :content='content3' size='200px'></e-pane>
        </e-panes>
      </ejs-splitter>
    </div>
  </template>
  <script>
  
  import { SplitterComponent, PanesDirective, PaneDirective } from '@syncfusion/ej2-vue-layouts';
  import { Splitter } from '@syncfusion/ej2-layouts';
  import { createApp } from 'vue';
  
  var contentVue1 = createApp().component("contentTemp1", {
    template: `<div class="content">
                        <h3 class="h3">PARIS </h3>
                        Paris, the city of lights and love - this short guide is full of ideas for how to make the most of the romanticism...
                    </div>`,
    data() {
      return {
        data: {}
      };
    }
  });
  
  var contentVue2 = createApp().component("contentTemp2", {
    template: `<div class="content">
                        <h3 class="h3">CAMEMBERT </h3>
                        The village in the Orne département of Normandy where the famous French cheese is originated from.
                    </div>`,
    data() {
      return {
        data: {}
      };
    }
  });
  
  var contentVue3 = createApp().component("contentTemp3", {
    template: `<div>
                    <div id ='vertical_splitter' class="vertical_splitter">
                        <div>
                            <div class="content">
                                <h3 class="h3">GRENOBLE </h3>
                                The capital city of the French Alps and a major scientific center surrounded by many ski resorts, host of the Winter Olympics in 1968.
                            </div>
                        </div>
                        <div>
                            <div class="content">
                                <h3 class="h3">Australia </h3>
                                Australia is a country and continent surrounded by the Indian and Pacific oceans
                            </div>
                        </div>
                    </div>
                </div>`,
    data() {
      return {
        data: {}
      };
    }
  });
  
  export default {
    name: "App",
    components: {
      "ejs-splitter": SplitterComponent,
      "e-panes": PanesDirective,
      "e-pane": PaneDirective,
  
    },
    data() {
      return {
        content1: function () {
          return { template: contentVue1 }
        },
        content2: function () {
          return { template: contentVue2 }
        },
        content3: function () {
          return { template: contentVue3 }
        }
      }
    },
    methods: {
      onCreate: function () {
        this.splitterObj = new Splitter({
          paneSettings: [
            { size: '150px', min: '20%' },
            { size: '100px', min: '20%' }
          ],
          orientation: 'Vertical'
        });
        this.splitterObj.appendTo('#vertical_splitter');
      }
    }
  }
  </script>
  
  <style>
  @import "../node_modules/@syncfusion/ej2-vue-layouts/styles/material3.css";
  
  #app {
    margin: 55px auto;
  }
  
  .content {
    padding: 5px;
  }
  
  .vertical_splitter.e-splitter.e-splitter-vertical {
    border: none;
  }
  
  .e-splitter {
    margin: 0 auto;
  }
  </style>

Add or remove pane

Add or remove panes programmatically using the addPane and removePane methods.

Add pane

Add panes dynamically by passing paneProperties along with index to the addPane method.

Composition API (~/src/App.vue)
Options API (~/src/App.vue)
<template>
  <div id="app" class="col-lg-12 control-section default-splitter">
    <ejs-splitter id='splitter' ref='splitterObj' width='700px' height='200px'>
      <e-panes>
        <e-pane content='Pane 1' size='300px'></e-pane>
        <e-pane content='Pane 2' size='300px'></e-pane>
      </e-panes>
    </ejs-splitter>
    <div class="addBtn">
      <button id='addButton' class="e-btn" v-on:click='addPane'>Add Pane</button>
    </div>
  </div>
</template>
<script setup>

import { SplitterComponent as EjsSplitter, PanesDirective as EPanes, PaneDirective as EPane } from '@syncfusion/ej2-vue-layouts';
import { ref } from 'vue';


const splitterObj = ref(null);

const addPane = () => {
  splitterObj.value.$el.ej2_instances[0].addPane({
    size: '200px',
    content: 'New Pane',
    min: '30px',
    max: '250px',
  }, 1);
}

</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-layouts/styles/material3.css";

#app {
  margin: 65px auto;
}

#splitter1 div.e-pane-horizontal {
  padding: 5px;
}

.addBtn {
  margin-top: 20px;
  text-align: initial;
}
</style>
<template>
  <div id="app" class="col-lg-12 control-section default-splitter">
    <ejs-splitter id='splitter' ref='splitterObj' width='700px' height='200px'>
      <e-panes>
        <e-pane content='Pane 1' size='300px'></e-pane>
        <e-pane content='Pane 2' size='300px'></e-pane>
      </e-panes>
    </ejs-splitter>
    <div class="addBtn">
      <button id='addButton' class="e-btn" v-on:click='addPane'>Add Pane</button>
    </div>
  </div>
</template>
<script>

import { SplitterComponent, PanesDirective, PaneDirective } from '@syncfusion/ej2-vue-layouts';

export default {
  name: "App",
  components: {
    "ejs-splitter": SplitterComponent,
    "e-panes": PanesDirective,
    "e-pane": PaneDirective
  },

  data() {
    return {
    }
  },
  methods: {
    addPane: function () {
      this.$refs.splitterObj.$el.ej2_instances[0].addPane({
        size: '200px',
        content: 'New Pane',
        min: '30px',
        max: '250px',
      }, 1);
    }
  }
}
</script>

<style>
@import "../node_modules/@syncfusion/ej2-vue-layouts/styles/material3.css";

#app {
  margin: 65px auto;
}

#splitter1 div.e-pane-horizontal {
  padding: 5px;
}

.addBtn {
  margin-top: 20px;
  text-align: initial;
}
</style>

Remove pane

Remove panes dynamically by passing the pane index to the removePane method.

Composition API (~/src/App.vue)
Options API (~/src/App.vue)
<template>
    <div id="app" class="col-lg-12 control-section default-splitter">
        <ejs-splitter id='splitter' ref='splitterObj' width='700px' height='200px'>
            <e-panes>
                <e-pane content='Pane 1' size='300px'></e-pane>
                <e-pane content='Pane 2' size='300px'></e-pane>
                <e-pane content='Pane 3' size='300px'></e-pane>
            </e-panes>
        </ejs-splitter>
        <div class="removeBtn">
            <button id='removeButton' class="e-btn" v-on:click='removePane'>Remove Pane</button>
        </div>
    </div>
</template>

<script setup>

import { SplitterComponent as EjsSplitter, PanesDirective as EPanes, PaneDirective as EPane } from '@syncfusion/ej2-vue-layouts';
import { ref } from 'vue';

const splitterObj = ref(null);
const removePane = () => {
    splitterObj.value.removePane(1);
}


</script>

<style>
@import "../node_modules/@syncfusion/ej2-vue-layouts/styles/material3.css";

#app {
    text-align: center;
    margin: 65px auto;
}

.content {
    justify-content: center;
    text-align: center;
    align-items: center;
}

.removeBtn {
    margin-top: 20px;
    text-align: initial;
}
</style>
<template>
    <div id="app" class="col-lg-12 control-section default-splitter">
        <ejs-splitter id='splitter' ref='splitterObj' width='700px' height='200px'>
            <e-panes>
                <e-pane content='Pane 1' size='300px'></e-pane>
                <e-pane content='Pane 2' size='300px'></e-pane>
                <e-pane content='Pane 3' size='300px'></e-pane>
            </e-panes>
        </ejs-splitter>
        <div class="removeBtn">
            <button id='removeButton' class="e-btn" v-on:click='removePane'>Remove Pane</button>
        </div>
    </div>
</template>

<script>

import { SplitterComponent, PanesDirective, PaneDirective } from '@syncfusion/ej2-vue-layouts';;

export default {
    name: "App",
    components: {
        "ejs-splitter": SplitterComponent,
        "e-panes": PanesDirective,
        "e-pane": PaneDirective
    },
    data() {
        return {
        }
    },
    methods: {
        removePane: function () {
            this.$refs.splitterObj.removePane(1);
        }
    }
}
</script>

<style>
@import "../node_modules/@syncfusion/ej2-vue-layouts/styles/material3.css";

#app {
    text-align: center;
    margin: 65px auto;
}

.content {
    justify-content: center;
    text-align: center;
    align-items: center;
}

.removeBtn {
    margin-top: 20px;
    text-align: initial;
}
</style>

Search docs

Ask HelpBot