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.