Size modes in Vue Appearance component

27 Jun 20259 minutes to read

An application that is designed to be accessed through a web browser on various devices, including desktop computers and mobile devices, may have a distinct layout or user interface on a mobile device compared to a desktop computer to better suit the smaller screen size.

Syncfusion® Vue components support both touch (bigger) and normal size modes. Touch mode creates a responsive design for mobile devices by adding the e-bigger class, which enhances interactions, visibility, and the overall experience.

Size mode for application

The user can enable touch mode (bigger) for the entire application by adding the e-bigger class to the body element in the index.html file as follows:

  <body className="e-bigger">
    ...
  </body>

Size mode for a component

The user can enable touch mode (bigger) for a component by adding the e-bigger class to the div element that contains the component. Another way of enabling touch mode is by adding the e-bigger class using the available cssClass property of the component.

<template>
  <div id='container' class="e-bigger">
    <ejs-button>Button</ejs-button>
  </div>
</template>
<script>
import { ButtonComponent as EjsButton } from '@syncfusion/ej2-vue-buttons';
export default {
}
</script>
<style>
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
</style>
<template>
  <div id='container' class="e-bigger">
    <ejs-button>Button</ejs-button>
  </div>
</template>
<script>

import { ButtonComponent } from '@syncfusion/ej2-vue-buttons';
export default {
name: "App",
components: {
"ejs-button":ButtonComponent
},
}
</script>
<style>
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
</style>

Change size mode for application at runtime

The user can change the size mode of the application between touch and normal (mouse) mode at runtime by adding and removing the e-bigger class. The following steps explain how to change the size mode of an application at runtime:

<template>
  <div id='container'>
    <div>
      <ejs-button content="Touch Mode" v-on:click.native='touchClick'>Button</ejs-button>
      <ejs-button content="Mouse Mode" v-on:click.native='mouseClick'>Button</ejs-button>
    </div>
    <div class="control">
      <ejs-calendar ></ejs-calendar>
    </div>
  </div>
</template>
<script setup>
import { ButtonComponent as EjsButton } from '@syncfusion/ej2-vue-buttons';
import { CalendarComponent as EjsCalendar} from '@syncfusion/ej2-vue-calendars';
const touchClick = function() {
  document.body.classList.add('e-bigger');
};
const mouseClick = function() {
  document.body.classList.remove('e-bigger');
};
</script>
<style>
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
@import "../node_modules/@syncfusion/ej2-vue-calendars/styles/material.css";
</style>
<template>
  <div id='container'>
    <div>
      <ejs-button content="Touch Mode" v-on:click.native='touchClick'>Button</ejs-button>
      <ejs-button content="Mouse Mode" v-on:click.native='mouseClick'>Button</ejs-button>
    </div>
    <div class="control">
      <ejs-calendar ></ejs-calendar>
    </div>
  </div>
</template>
<script>
import { ButtonComponent } from '@syncfusion/ej2-vue-buttons';
import { CalendarComponent } from '@syncfusion/ej2-vue-calendars';
export default {
name: "App",
components: {
"ejs-button":ButtonComponent,
"ejs-calendar":CalendarComponent
},
  methods : {
    touchClick: function(event) {
     document.body.classList.add('e-bigger');
    },
    mouseClick: function(event) {
      document.body.classList.remove('e-bigger');
    }
  }
}
</script>
<style>
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
@import "../node_modules/@syncfusion/ej2-vue-calendars/styles/material.css";
</style>

Change size mode for a component at runtime

The user can change the size mode of a component between touch and normal (mouse) mode at runtime by setting the e-bigger CSS class.

<template>
  <div id='container'>
    <div>
      <ejs-button content="Touch Mode" v-on:click.native='touchClick'>Button</ejs-button>
      <ejs-button content="Mouse Mode" v-on:click.native='mouseClick'>Button</ejs-button>
    </div>
    <div class="control">
      <ejs-calendar ></ejs-calendar>
    </div>
  </div>
</template>
<script>
import { ButtonComponent as EjsButton } from '@syncfusion/ej2-vue-buttons';
import { CalendarComponent as EjsCalendar } from '@syncfusion/ej2-vue-calendars';
const touchClick = function() {
  var controls = document.querySelectorAll('.control');
      for (var index = 0; index < controls.length; index++) {
        controls[index].classList.add('e-bigger');
      }
};
const mouseClick = function() {
  var controls = document.querySelectorAll('.control');
      for (var index = 0; index < controls.length; index++) {
        controls[index].classList.remove('e-bigger');
      }
};
</script>
<style>
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
@import "../node_modules/@syncfusion/ej2-vue-calendars/styles/material.css";
</style>
<template>
  <div id='container'>
    <div>
      <ejs-button content="Touch Mode" v-on:click.native='touchClick'>Button</ejs-button>
      <ejs-button content="Mouse Mode" v-on:click.native='mouseClick'>Button</ejs-button>
    </div>
    <div class="control">
      <ejs-calendar></ejs-calendar>
    </div>
  </div>
</template>
<script>
import { ButtonComponent } from '@syncfusion/ej2-vue-buttons';
import { CalendarComponent } from '@syncfusion/ej2-vue-calendars';
export default {
  name: "App",
  components: {
    "ejs-button": ButtonComponent,
    "ejs-calendar": CalendarComponent
  },
  methods: {
    touchClick: function (event) {
      var controls = document.querySelectorAll('.control');
      for (var index = 0; index < controls.length; index++) {
        controls[index].classList.add('e-bigger');
      }
    },
    mouseClick: function (event) {
      var controls = document.querySelectorAll('.control');
      for (var index = 0; index < controls.length; index++) {
        controls[index].classList.remove('e-bigger');
      }
    }
  }
}
</script>
<style>
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
@import "../node_modules/@syncfusion/ej2-vue-calendars/styles/material.css";
</style>

See also