Search results

Change Size in React Switch component

The different Switch sizes available are default and small. To reduce the size of default Switch to small, set the cssClass property to e-small.

Source
Preview
app.tsx
index.html
app.jsx
import { enableRipple } from '@syncfusion/ej2-base';
import { SwitchComponent } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';
import * as ReactDom from 'react-dom';

enableRipple(true);

// To render Switch.
class App extends React.Component<{}, {}> {
  public render() {
    return (
         <table className='size'>
            <tr>
                <td className='lSize'>Small</td>
                <td>
                    <SwitchComponent cssClass="e-small" />
                </td>
            </tr>
            <tr>
                <td className='lSize'>Default</td>
                <td>
                   <SwitchComponent />
                </td>
            </tr>
        </table>
    );
  }
}
ReactDom.render(<App />, document.getElementById('switch'));
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Switch</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/fabric.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="index.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

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

</html>
import { enableRipple } from '@syncfusion/ej2-base';
import { SwitchComponent } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';
import * as ReactDom from 'react-dom';
enableRipple(true);
// To render Switch.
class App extends React.Component {
    render() {
        return (<table className='size'>
            <tr>
                <td className='lSize'>Small</td>
                <td>
                    <SwitchComponent cssClass="e-small"/>
                </td>
            </tr>
            <tr>
                <td className='lSize'>Default</td>
                <td>
                   <SwitchComponent />
                </td>
            </tr>
        </table>);
    }
}
ReactDom.render(<App />, document.getElementById('switch'));