Search results

Target

By default, Sidebar initializes target to the body element. Using the target property, set target element to initialize the Sidebar inside any HTML element apart from the body element.

Source
Preview
index.tsx
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { SidebarComponent } from '@syncfusion/ej2-react-navigations';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { enableRipple } from '@syncfusion/ej2-base';
import { SampleBase } from './sample-base';

class App extends React.Component<{}, {}> {
    public sidebarobj: SidebarComponent;
    public RadiobtnObj: RadioButtonComponent;
    private type: string = "Push";
    //Sidebar can be placed within the specified target element
    private target: string = '.content';
    public btnobj: ButtonComponent;
    //Toggle button click event handler
    btnClick(): void {
        let proxy: any = this;
        if (proxy.btnobj.element.classList.contains('e-active')) {
            proxy.btnobj.content = 'Close';
            this.sidebarobj.show();
        } else {
            proxy.btnobj.content = 'Open';
            this.sidebarobj.hide();
        }
    }

    render() {
        return (
            <div className="control-section">
                <div id="wrapper">
                    <SidebarComponent id="default-sidebar" type={this.type} target={this.target} ref={sidebar => this.sidebarobj = sidebar}>
                        <div className="title"> Sidebar content</div>
                        <div className="sub-title">
                            Click the button to close the Sidebar.
                         </div>
                        <div className="center-align">
                            <ButtonComponent onClick={this.closeClick.bind(this)} id="close" className="e-btn close-btn">Close Sidebar</ButtonComponent>
                        </div>
                    </SidebarComponent>
                    <div id="head">
                        <ButtonComponent id="toggle" ref={(scope) => { this.btnobj = scope; }} iconCss='e-icons burg-icon'
                            isToggle onClick={this.btnClick.bind(this)} className="e-btn e-info">Open</ButtonComponent>
                    </div>
                    <div id="maincontent" className="content">
                        <div>
                            <div className="title">Main content</div>
                            <div className="center-align" >
                               Content goes here.
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        )
    }
  // Toggle(Open/Close) the Sidebar
    toggleClick(): void {
        this.sidebarobj.toggle();
    }
    // Close the Sidebar
    closeClick(): void {
        this.sidebarobj.hide();
        this.btnobj.content = 'Open';
    }
}

ReactDOM.render(<App />, document.getElementById('sample'));