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.
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,
<body className="e-bigger">
...
</body>You can enable touch mode (bigger theme) for a component by adding e-bigger class and assign to the div which contains the component.
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'));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'));<!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/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-react-calendars/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-react-grids/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/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>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.
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'));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'));<!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/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-react-calendars/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-react-grids/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/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>You can change the size mode of a component between touch and normal (mouse) mode at runtime by setting e-bigger CSS class.
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'));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'));<!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/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-react-calendars/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/ej2-react-grids/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/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>You can change the font-size for all the components by overriding the CSS for e-control class as follows.
.e-control, .e-control [class^='e-'], .e-control [class*=' e-'] {
font-size:1rem;
}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.
.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.