Search results

Dock

Dock state of the Sidebar reserves some space on the page that always remains in a visible state when the Sidebar is collapsed.

It is used to show the short term of a content like icons alone instead of lengthy text.

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

class App extends React.Component<{}, {}> {
   public dockBar: SidebarComponent;
    private enableDock: boolean = true;
    private dockSize: string = '72px';
    private width: string = '220px';
    render() {
        return (
              <div className="control-section">
                <div id="wrapper">
                     <SidebarComponent id="dockSidebar" ref={Sidebar => this.dockBar = Sidebar} enableDock={this.enableDock} dockSize={this.dockSize} width={this.width} >
                            <div className="dock">
                                <ul>
                                    <li className="sidebar-item" id="toggle" onClick={this.toggleClick.bind(this)} >
                                        <span className="e-icons expand"></span>
                                        <span className="e-text" title="menu">Menu</span>
                                    </li>
                                    <li className="sidebar-item">
                                        <span className="e-icons home"></span>
                                        <span className="e-text" title="home">Home</span>
                                    </li>
                                    <li className="sidebar-item">
                                        <span className="e-icons profile"></span>
                                        <span className="e-text" title="profile">Profile</span>
                                    </li>
                                    <li className="sidebar-item">
                                        <span className="e-icons info"></span>
                                        <span className="e-text" title="info">Info</span>
                                    </li>
                                    <li className="sidebar-item">
                                        <span className="e-icons settings"></span>
                                        <span className="e-text" title="settings">Settings</span>
                                    </li>
                                </ul>
                            </div>
                        </SidebarComponent>

                    <div id="main-content container-fluid col-md-12 ">
                        <div className="title">Main content</div>
                        <div className="sub-title"> Click the expand icon to open and collapse icons to close the Sidebar</div>
                    </div>
                </div>
            </div>
        )
    }
    toggleClick() {
        this.dockBar.toggle();
    }

}

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