Search results

Size Mode for Syncfusion React Components

02 Dec 2022 / 4 minutes to read

Syncfusion React components supports touch (bigger theme) and normal size modes. While you are using the React application in touch mode, you can add e-bigger class to make the easier interaction, visibility more clear and better. The following topics explain how to enable the same in your application.

Size mode for application

You can enable touch mode (bigger theme) for an application by adding e-bigger class in index.html file and assign to the body as follows,

Copied to clipboard
<body className="e-bigger">
  ...
</body>

Size mode for a component

You can enable touch mode (bigger theme) for a component by adding e-bigger class and assign to the div which contains the component.

Source
Preview
index.jsx
index.html
index.tsx
Copied to clipboard
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { enableRipple } from '@syncfusion/ej2-base';
//Enable ripple effect
enableRipple(true);
function App() {
    const content = "Button";
    return (<div className="e-bigger">
          <ButtonComponent content={content}></ButtonComponent>
        </div>);
}
export default App;
ReactDom.render(<App />, document.getElementById('sample'));
Copied to clipboard
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Button</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="//cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.3.56/ej2-react-calendars/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.3.56/ej2-react-grids/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.3.56/ej2-react-buttons/styles/material.css" rel="stylesheet" /> 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
     <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
    </style>
</head>

<body>
        <div id='sample'>
            <div id='loader'>Loading....</div>
        </div>
</body>

</html>
Copied to clipboard
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { enableRipple } from '@syncfusion/ej2-base';
//Enable ripple effect
enableRipple(true);
function App() {
  const content = "Button";
    return (
        <div className="e-bigger">
          <ButtonComponent content={content}></ButtonComponent>
        </div>
    );
}
export default App;
ReactDom.render(<App />,document.getElementById('sample'));

Change size mode for application at runtime

You can change the size mode of an application between touch and normal (mouse) mode at runtime by adding and removing the e-bigger class.

Follow below steps to change the size mode for an application at runtime.

Source
Preview
index.jsx
index.html
index.tsx
Copied to clipboard
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { CalendarComponent } from '@syncfusion/ej2-react-calendars';
import { enableRipple } from '@syncfusion/ej2-base';
//Enable ripple effect
enableRipple(true);
function App() {
    const touchContent = "Touch Mode";
    const mouseContent = "Mouse Mode";
    function btnClick() {
        document.body.classList.add('e-bigger');
    }
    ;
    function mouseClick() {
        document.body.classList.remove('e-bigger');
    }
    return (<div>
          <ButtonComponent id='touch' content={touchContent} onClick={btnClick.bind(this)}></ButtonComponent>
          <ButtonComponent id='mouse' content={mouseContent} onClick={mouseClick.bind(this)}></ButtonComponent>
          <div>
            <CalendarComponent id="calendar"/>
          </div>
      </div>);
}
export default App;
ReactDom.render(<App />, document.getElementById('sample'));
Copied to clipboard
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Button</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="//cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.3.56/ej2-react-calendars/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.3.56/ej2-react-grids/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.3.56/ej2-react-buttons/styles/material.css" rel="stylesheet" /> 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
     <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
    </style>
</head>

<body>
        <div id='sample'>
            <div id='loader'>Loading....</div>
        </div>
</body>

</html>
Copied to clipboard
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { CalendarComponent } from '@syncfusion/ej2-react-calendars';
import { enableRipple } from '@syncfusion/ej2-base';
//Enable ripple effect
enableRipple(true);
function App() {
    const touchContent = "Touch Mode";
    const mouseContent = "Mouse Mode";
    function btnClick() {
        document.body.classList.add('e-bigger');
    };
    function mouseClick() {
        document.body.classList.remove('e-bigger');
    }
    return (
        <div>
          <ButtonComponent id='touch' content={touchContent} onClick={btnClick.bind(this)}></ButtonComponent>
          <ButtonComponent id='mouse' content={mouseContent} onClick={mouseClick.bind(this)}></ButtonComponent>
          <div>
            <CalendarComponent id="calendar"/>
          </div>
      </div>
    );
}
export default App;
ReactDom.render(<App />,document.getElementById('sample'));

Change size mode for a component at runtime

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

Source
Preview
index.jsx
index.html
index.tsx
Copied to clipboard
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { CalendarComponent } from '@syncfusion/ej2-react-calendars';
import { enableRipple } from '@syncfusion/ej2-base';
//Enable ripple effect
enableRipple(true);
function App() {
    const touchContent = "Touch Mode";
    const mouseContent = "Mouse Mode";
    function btnClick() {
        let controls = document.querySelectorAll('.control');
        for (let index = 0; index < controls.length; index++) {
            controls[index].classList.add('e-bigger');
        }
    }
    ;
    function mouseClick() {
        let controls = document.querySelectorAll('.control');
        for (let index = 0; index < controls.length; index++) {
            controls[index].classList.remove('e-bigger');
        }
    }
    return (<div>
          <ButtonComponent id='touch' content={touchContent} onClick={btnClick.bind(this)}></ButtonComponent>
          <ButtonComponent id='mouse' content={mouseContent} onClick={mouseClick.bind(this)}></ButtonComponent>
          <div className="control">
            <CalendarComponent id="calendar"/>
          </div>
      </div>);
}
export default App;
ReactDom.render(<App />, document.getElementById('sample'));
Copied to clipboard
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Button</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="//cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.3.56/ej2-react-calendars/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.3.56/ej2-react-grids/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.3.56/ej2-react-buttons/styles/material.css" rel="stylesheet" /> 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
     <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
    </style>
</head>

<body>
        <div id='sample'>
            <div id='loader'>Loading....</div>
        </div>
</body>

</html>
Copied to clipboard
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { CalendarComponent } from '@syncfusion/ej2-react-calendars';
import { enableRipple } from '@syncfusion/ej2-base';
//Enable ripple effect
enableRipple(true);
function App() {
    const touchContent = "Touch Mode";
    const mouseContent = "Mouse Mode";
    function btnClick() {
        let controls = document.querySelectorAll('.control');
        for (let index: number = 0; index < controls.length; index++) {
            controls[index].classList.add('e-bigger');
        }
    };
    function mouseClick() {
        let controls = document.querySelectorAll('.control');
        for (let index: number = 0; index < controls.length; index++) {
            controls[index].classList.remove('e-bigger');
        }
    }
    return (
        <div>
          <ButtonComponent id='touch' content={touchContent} onClick={btnClick.bind(this)}></ButtonComponent>
          <ButtonComponent id='mouse' content={mouseContent} onClick={mouseClick.bind(this)}></ButtonComponent>
          <div className="control">
            <CalendarComponent id="calendar"/>
          </div>
      </div>
    );
}
export default App;
ReactDom.render(<App />,document.getElementById('sample'));

Change font size for all components

You can change the font-size for all the components by overriding the CSS for e-control class as follows.

Copied to clipboard
  .e-control, .e-control [class^='e-'], .e-control [class*=' e-'] {
    font-size:1rem;
  }

Change the font-family of Syncfusion EJ2 React UI Components

The font-family of Syncfusion EJ2 React UI component can be changed using e-control class. This e-control class presents in all Syncfusion components which enables us to change the font-family of all Syncfusion EJ2 React UI components in an application.

Copied to clipboard
.e-control {
    font-family: Arial !important;
}

By including the above CSS code block in the style sheet of the application, we can change the font-family of all Syncfusion components.

See Also