Search results

Add Toggle Button

Toolbar supports to add a toggle Button by using the template property. Refer below steps

  • By using Toolbar template property, pass required HTML String to render toggle button.
  <ItemDirective template='<button class="e-btn" id="media_btn"></button>' />
  • Now render the toggle Button into the targeted element in Toolbar created event handler and bind click event for it. On clicking the toggle Button, change the required icon and content based on current active state.
Source
Preview
index.tsx
index.html
index.css.jsx
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { ToolbarComponent, ItemsDirective, ItemDirective } from '@syncfusion/ej2-react-navigations';
import { Button } from '@syncfusion/ej2-react-buttons';
import './index.css'

export class ReactApp extends React.Component<{}, {}> {
  public undoBtn: any;
  public zoomBtn: any;
  public mediaBtn: any;
  public filterBtn: any;
  public visibleBtn: any;

  public tbCreated(): void {
    this.zoomBtn = new Button({ cssClass: `e-flat`, iconCss: 'e-icons e-zoomin-icon', isToggle: true });
    this.zoomBtn.appendTo('#zoom_btn');

    this.mediaBtn = new Button({ cssClass: `e-flat`, iconCss: 'e-icons e-play-icon', isToggle: true });
    this.mediaBtn.appendTo('#media_btn');

    this.undoBtn = new Button({ cssClass: `e-flat`, iconCss: 'e-icons e-undo-icon', isToggle: true });
    this.undoBtn.appendTo('#undo_btn');

    this.filterBtn = new Button({ cssClass: `e-flat`, iconCss: 'e-icons e-filter-icon', isToggle: true });
    this.filterBtn.appendTo('#filter_btn');

    this.visibleBtn = new Button({ cssClass: `e-flat`, iconCss: 'e-icons e-hide-icon', isToggle: true, content:'Hide'});
    this.visibleBtn.appendTo('#visible_btn');

    //Toggle button click event handlers
    this.zoomBtn.element.onclick = (): void => {
        if (this.zoomBtn.element.classList.contains('e-active')) {
            this.zoomBtn.iconCss = 'e-icons e-zoomout-icon';
        } else {
            this.zoomBtn.iconCss = 'e-icons e-zoomin-icon';
        }
    };

    this.mediaBtn.element.onclick = (): void => {
        if (this.mediaBtn.element.classList.contains('e-active')) {
            this.mediaBtn.iconCss = 'e-icons e-pause-icon';
        } else {
            this.mediaBtn.iconCss = 'e-icons e-play-icon';
        }
    };

    this.undoBtn.element.onclick = (): void => {
        if (this.undoBtn.element.classList.contains('e-active')) {
            this.undoBtn.iconCss = 'e-icons e-redo-icon';
        } else {
            this.undoBtn.iconCss = 'e-icons e-undo-icon';
        }
    };

    this.filterBtn.element.onclick = (): void => {
        if (this.filterBtn.element.classList.contains('e-active')) {
            this.filterBtn.iconCss = 'e-icons e-filternone-icon';
        } else {
            this.filterBtn.iconCss = 'e-icons e-filter-icon';
        }
    };

    this.visibleBtn.element.onclick = (): void => {
        if (this.visibleBtn.element.classList.contains('e-active')) {
            document.getElementById('content').style.display = 'none';
            this.visibleBtn.content = 'Show';
            this.visibleBtn.iconCss = 'e-icons e-show-icon';
        } else {
            document.getElementById('content').style.display = 'block';
            this.visibleBtn.content = 'Hide';
            this.visibleBtn.iconCss = 'e-icons e-hide-icon';
        }
    };
  }

  render () {
    const divMargin = { margin: '25px 0' };

    return (
      <div className='control-pane'>
        <div className='control-section tbar-control-section'>
          <div className='control toolbar-sample tbar-sample' style={divMargin}>
            <ToolbarComponent id="ej2Toolbar" created={this.tbCreated}>
              <ItemsDirective>
                <ItemDirective template='<button class="e-btn" id="media_btn"></button>' />
                <ItemDirective type = 'Separator'/>
                <ItemDirective template='<button class="e-btn" id="zoom_btn"></button>' />
                <ItemDirective type = 'Separator'/>
                <ItemDirective template='<button class="e-btn" id="undo_btn"></button>' />
                <ItemDirective type = 'Separator'/>
                <ItemDirective template='<button class="e-btn" id="filter_btn"></button>' />
                <ItemDirective type = 'Separator'/>
                <ItemDirective template='<button class="e-btn" id="visible_btn"></button>' />
              </ItemsDirective>
            </ToolbarComponent>
          </div>
        </div>
      </div>
    );
  }
}
ReactDOM.render(<ReactApp />, document.getElementById('toolbar'));
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Toolbar Sample</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/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>
        #container {
            visibility: hidden;
        }

        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }

        @font-face {
          font-family: 'Material_toolbar2';
          src: url(data:application/x-font-ttf;charset=utf-8;base64,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) format('truetype');
          font-weight: normal;
          font-style: normal;
       }

        .e-tbar-btn .tb-icons {
          font-family: 'Material_toolbar';
          font-size: 16px;
          font-style: normal;
          font-weight: normal;
          font-variant: normal;
          text-transform: none;
        }

        .e-tbar-btn .e-icons {
            font-family: 'Material_toolbar2', 'e-icons';
        }   

        .e-hide-icon::before {
            content: '\e81d';
        }

        .e-show-icon::before {
            content: '\e7cb';
        }

        .e-filter-icon::before {
            content: '\e818';
        }

        .e-filternone-icon::before {
            content: '\e819';
        }

        .e-undo-icon::before {
            content: '\e76e';
        }

        .e-redo-icon::before {
            content: '\e726';
        }

        .e-play-icon::before {
            content: '\e798';
        }

        .e-pause-icon::before {
            content: '\e753';
        }

        .e-zoomin-icon::before {
            content: '\e7b7';
        }

        .e-zoomout-icon::before {
            content: '\e81c';
        }
    </style>
</head>

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

</html>
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { ToolbarComponent, ItemsDirective, ItemDirective } from '@syncfusion/ej2-react-navigations';
import { Button } from '@syncfusion/ej2-react-buttons';
import './index.css';
export class ReactApp extends React.Component {
    tbCreated() {
        this.zoomBtn = new Button({ cssClass: `e-flat`, iconCss: 'e-icons e-zoomin-icon', isToggle: true });
        this.zoomBtn.appendTo('#zoom_btn');
        this.mediaBtn = new Button({ cssClass: `e-flat`, iconCss: 'e-icons e-play-icon', isToggle: true });
        this.mediaBtn.appendTo('#media_btn');
        this.undoBtn = new Button({ cssClass: `e-flat`, iconCss: 'e-icons e-undo-icon', isToggle: true });
        this.undoBtn.appendTo('#undo_btn');
        this.filterBtn = new Button({ cssClass: `e-flat`, iconCss: 'e-icons e-filter-icon', isToggle: true });
        this.filterBtn.appendTo('#filter_btn');
        this.visibleBtn = new Button({ cssClass: `e-flat`, iconCss: 'e-icons e-hide-icon', isToggle: true, content: 'Hide' });
        this.visibleBtn.appendTo('#visible_btn');
        //Toggle button click event handlers
        this.zoomBtn.element.onclick = () => {
            if (this.zoomBtn.element.classList.contains('e-active')) {
                this.zoomBtn.iconCss = 'e-icons e-zoomout-icon';
            }
            else {
                this.zoomBtn.iconCss = 'e-icons e-zoomin-icon';
            }
        };
        this.mediaBtn.element.onclick = () => {
            if (this.mediaBtn.element.classList.contains('e-active')) {
                this.mediaBtn.iconCss = 'e-icons e-pause-icon';
            }
            else {
                this.mediaBtn.iconCss = 'e-icons e-play-icon';
            }
        };
        this.undoBtn.element.onclick = () => {
            if (this.undoBtn.element.classList.contains('e-active')) {
                this.undoBtn.iconCss = 'e-icons e-redo-icon';
            }
            else {
                this.undoBtn.iconCss = 'e-icons e-undo-icon';
            }
        };
        this.filterBtn.element.onclick = () => {
            if (this.filterBtn.element.classList.contains('e-active')) {
                this.filterBtn.iconCss = 'e-icons e-filternone-icon';
            }
            else {
                this.filterBtn.iconCss = 'e-icons e-filter-icon';
            }
        };
        this.visibleBtn.element.onclick = () => {
            if (this.visibleBtn.element.classList.contains('e-active')) {
                document.getElementById('content').style.display = 'none';
                this.visibleBtn.content = 'Show';
                this.visibleBtn.iconCss = 'e-icons e-show-icon';
            }
            else {
                document.getElementById('content').style.display = 'block';
                this.visibleBtn.content = 'Hide';
                this.visibleBtn.iconCss = 'e-icons e-hide-icon';
            }
        };
    }
    render() {
        const divMargin = { margin: '25px 0' };
        return (<div className='control-pane'>
        <div className='control-section tbar-control-section'>
          <div className='control toolbar-sample tbar-sample' style={divMargin}>
            <ToolbarComponent id="ej2Toolbar" created={this.tbCreated}>
              <ItemsDirective>
                <ItemDirective template='<button class="e-btn" id="media_btn"></button>'/>
                <ItemDirective type='Separator'/>
                <ItemDirective template='<button class="e-btn" id="zoom_btn"></button>'/>
                <ItemDirective type='Separator'/>
                <ItemDirective template='<button class="e-btn" id="undo_btn"></button>'/>
                <ItemDirective type='Separator'/>
                <ItemDirective template='<button class="e-btn" id="filter_btn"></button>'/>
                <ItemDirective type='Separator'/>
                <ItemDirective template='<button class="e-btn" id="visible_btn"></button>'/>
              </ItemsDirective>
            </ToolbarComponent>
          </div>
        </div>
      </div>);
    }
}
ReactDOM.render(<ReactApp />, document.getElementById('toolbar'));