Design in EJ2 TypeScript Appbar control
2 May 202324 minutes to read
Spacer
Spacer is used to provide spacing between the AppBar contents which gives additional space to the content layout.
The following example depicts the code to provide spacing between the home and pan buttons in the AppBar:
import { AppBar } from "@syncfusion/ej2-navigations";
import { Button } from "@syncfusion/ej2-buttons";
const defaultAppBarObj: AppBar = new AppBar({
colorMode: 'Primary'
});
defaultAppBarObj.appendTo("#defaultAppBar");
const defaultButtonHomeObj: Button = new Button({ cssClass: 'e-inherit', iconCss: 'e-icons e-home' });
defaultButtonHomeObj.appendTo('#defaultButtonHome');
const defaultButtonCutObj: Button = new Button({ cssClass: 'e-inherit', iconCss: 'e-icons e-cut' });
defaultButtonCutObj.appendTo('#defaultButtonCut');
const defaultButtonPanObj: Button = new Button({ cssClass: 'e-inherit', iconCss: 'e-icons e-pan' });
defaultButtonPanObj.appendTo('#defaultButtonPan');<!DOCTYPE html>
<html lang="en">
<head>
<title>Essential JS 2 - AppBar</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
<meta name="description" content="Essential JS 2" />
<meta name="author" content="Syncfusion" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-navigations/styles/material.css" rel="stylesheet" />
<!--system js reference and configuration-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='loader'>LOADING....</div>
<div id='container'>
<div class="control-section default-appbar-section">
<div class="control-container">
<header id="defaultAppBar">
<button id="defaultButtonHome"></button>
<div class="e-appbar-spacer"></div>
<button id="defaultButtonCut"></button>
<div class="e-appbar-spacer"></div>
<button id="defaultButtonPan"></button>
</header>
</div>
</div>
</div>
</body>
</html>Separator
Separator shows a vertical line to visually group or separate the AppBar contents.
The following example depicts the code to provide a vertical line between a group of buttons in the AppBar.
import { AppBar } from "@syncfusion/ej2-navigations";
import { Button } from "@syncfusion/ej2-buttons";
const defaultAppBarObj: AppBar = new AppBar({
colorMode: 'Primary'
});
defaultAppBarObj.appendTo("#defaultAppBar");
const defaultButtonCutObj: Button = new Button({ cssClass: 'e-inherit', iconCss: 'e-icons e-cut' });
defaultButtonCutObj.appendTo('#defaultButtonCut');
const defaultButtonCopyObj: Button = new Button({ cssClass: 'e-inherit', iconCss: 'e-icons e-copy' });
defaultButtonCopyObj.appendTo('#defaultButtonCopy');
const defaultButtonPasteObj: Button = new Button({ cssClass: 'e-inherit', iconCss: 'e-icons e-paste' });
defaultButtonPasteObj.appendTo('#defaultButtonPaste');
const defaultButtonBoldObj: Button = new Button({ cssClass: 'e-inherit', iconCss: 'e-icons e-bold' });
defaultButtonBoldObj.appendTo('#defaultButtonBold');
const defaultButtonUnderlineObj: Button = new Button({ cssClass: 'e-inherit', iconCss: 'e-icons e-underline' });
defaultButtonUnderlineObj.appendTo('#defaultButtonUnderline');
const defaultButtonItalicObj: Button = new Button({ cssClass: 'e-inherit', iconCss: 'e-icons e-italic' });
defaultButtonItalicObj.appendTo('#defaultButtonItalic');
const defaultButtonAlignLeftObj: Button = new Button({ cssClass: 'e-inherit', iconCss: 'e-icons e-align-left' });
defaultButtonAlignLeftObj.appendTo('#defaultButtonAlignLeft');
const defaultButtonAlignRightObj: Button = new Button({ cssClass: 'e-inherit', iconCss: 'e-icons e-align-right' });
defaultButtonAlignRightObj.appendTo('#defaultButtonAlignRight');
const defaultButtonAlignCenterObj: Button = new Button({ cssClass: 'e-inherit', iconCss: 'e-icons e-align-center' });
defaultButtonAlignCenterObj.appendTo('#defaultButtonAlignCenter');
const defaultButtonJustifyObj: Button = new Button({ cssClass: 'e-inherit', iconCss: 'e-icons e-justify' });
defaultButtonJustifyObj.appendTo('#defaultButtonJustify');<!DOCTYPE html>
<html lang="en">
<head>
<title>Essential JS 2 - AppBar</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
<meta name="description" content="Essential JS 2" />
<meta name="author" content="Syncfusion" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-navigations/styles/material.css" rel="stylesheet" />
<link href="styles.css" rel="stylesheet" />
<!--system js reference and configuration-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='loader'>LOADING....</div>
<div id='container'>
<div class="control-section default-appbar-section">
<div class="control-container">
<header id="defaultAppBar">
<button id="defaultButtonCut"></button>
<button id="defaultButtonCopy"></button>
<button id="defaultButtonPaste"></button>
<div class="e-appbar-separator"></div>
<button id="defaultButtonBold"></button>
<button id="defaultButtonUnderline"></button>
<button id="defaultButtonItalic"></button>
<div class="e-appbar-separator"></div>
<button id="defaultButtonAlignLeft"></button>
<button id="defaultButtonAlignRight"></button>
<button id="defaultButtonAlignCenter"></button>
<button id="defaultButtonJustify"></button>
</header>
</div>
</div>
</div>
</body>
</html>Media Query
Media Query is used to adjusting the AppBar for different screen sizes. Resize the screen to observe the responsive layout of the AppBar.
import { AppBar } from "@syncfusion/ej2-navigations";
import { Button } from "@syncfusion/ej2-buttons";
const defaultAppBarObj: AppBar = new AppBar({
colorMode: 'Primary'
});
defaultAppBarObj.appendTo("#defaultAppBar");
const defaultButtonMenuObj: Button = new Button({ cssClass: 'e-inherit', iconCss: 'e-icons e-menu' });
defaultButtonMenuObj.appendTo('#defaultButtonMenu');
const defaultButtonHomeObj: Button = new Button({ cssClass: 'e-inherit', content: 'Home' });
defaultButtonHomeObj.appendTo('#defaultButtonHome');
const defaultButtonAboutObj: Button = new Button({ cssClass: 'e-inherit', content: 'About' });
defaultButtonAboutObj.appendTo('#defaultButtonAbout');
const defaultButtonProductsObj: Button = new Button({ cssClass: 'e-inherit', content: 'Products' });
defaultButtonProductsObj.appendTo('#defaultButtonProducts');
const defaultButtonContactsObj: Button = new Button({ cssClass: 'e-inherit', content: 'Contacts' });
defaultButtonContactsObj.appendTo('#defaultButtonContacts');
const defaultButtonLoginObj: Button = new Button({ cssClass: 'e-inherit', content: 'Login' });
defaultButtonLoginObj.appendTo('#defaultButtonLogin');<!DOCTYPE html>
<html lang="en">
<head>
<title>Essential JS 2 - AppBar</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
<meta name="description" content="Essential JS 2" />
<meta name="author" content="Syncfusion" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-navigations/styles/material.css" rel="stylesheet" />
<link href="styles.css" rel="stylesheet" />
<!--system js reference and configuration-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='loader'>LOADING....</div>
<div id='container'>
<div class="control-section default-appbar-section">
<div class="control-container">
<header id="defaultAppBar">
<button id="defaultButtonMenu"></button>
<button id="defaultButtonHome"></button>
<button id="defaultButtonAbout"></button>
<button id="defaultButtonProducts"></button>
<button id="defaultButtonContacts"></button>
<div class="e-appbar-spacer"></div>
<div class="e-appbar-separator"></div>
<button id="defaultButtonLogin"></button>
</header>
</div>
</div>
</div>
</body>
</html>Designing AppBar with Menu
AppBar is rendered with a Menu component in its AppBar header area. Menu component’s styles are inherited from the AppBar component using the e-inherit CSS class.
import { AppBar, Menu, MenuItemModel } from "@syncfusion/ej2-navigations";
import { Button } from "@syncfusion/ej2-buttons";
const companyMenuItems: MenuItemModel[] = [
{
text : 'Company',
items: [
{ text: 'About Us' },
{ text: 'Customers' },
{ text: 'Blog' },
{ text: 'Careers' }
]
}
];
const productMenuItems: MenuItemModel[] = [
{
text : 'Products',
items: [
{ text: 'Developer' },
{ text: 'Analytics' },
{ text: 'Reporting' },
{ text: 'Help Desk' }
]
}
];
const aboutMenuItems: MenuItemModel[] = [
{
text : 'About Us'
}
];
const carrerMenuItems: MenuItemModel[] = [
{
text : 'Carrers'
}
];
const defaultAppBarObj: AppBar = new AppBar({
colorMode: 'Primary'
});
defaultAppBarObj.appendTo("#defaultAppBar");
const defaultButtonMenuObj: Button = new Button({ cssClass: 'e-inherit', iconCss: 'e-icons e-menu' });
defaultButtonMenuObj.appendTo('#defaultButtonMenu');
const defaultMenuCompanyObj: Menu = new Menu({ cssClass: 'e-inherit', items: companyMenuItems });
defaultMenuCompanyObj.appendTo('#defaultMenuCompany');
const defaultMenuProductsObj: Menu = new Menu({ cssClass: 'e-inherit', items: productMenuItems });
defaultMenuProductsObj.appendTo('#defaultMenuProducts');
const defaultMenuAboutObj: Menu = new Menu({ cssClass: 'e-inherit', items: aboutMenuItems });
defaultMenuAboutObj.appendTo('#defaultMenuAbout');
const defaultMenuCarrersObj: Menu = new Menu({ cssClass: 'e-inherit', items: carrerMenuItems });
defaultMenuCarrersObj.appendTo('#defaultMenuCarrers');
const defaultButtonLoginObj: Button = new Button({ cssClass: 'e-inherit', content: 'Login' });
defaultButtonLoginObj.appendTo('#defaultButtonLogin');<!DOCTYPE html>
<html lang="en">
<head>
<title>Essential JS 2 - AppBar</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
<meta name="description" content="Essential JS 2" />
<meta name="author" content="Syncfusion" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-navigations/styles/material.css" rel="stylesheet" />
<link href="styles.css" rel="stylesheet" />
<!--system js reference and configuration-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='loader'>LOADING....</div>
<div id='container'>
<div class="control-section default-appbar-section">
<div class="control-container">
<header id="defaultAppBar">
<button id="defaultButtonMenu"></button>
<ul id="defaultMenuCompany"></ul>
<ul id="defaultMenuProducts"></ul>
<ul id="defaultMenuAbout"></ul>
<ul id="defaultMenuCarrers"></ul>
<div class="e-appbar-spacer"></div>
<button id="defaultButtonLogin"></button>
</header>
</div>
</div>
</div>
</body>
</html>Designing AppBar with Buttons
The AppBar is rendered with a Button and DropDownButton component in its AppBar header area. Button and DropDownButton components’ styles are inherited from the AppBar component using the e-inherit CSS class.
import { AppBar } from "@syncfusion/ej2-navigations";
import { Button } from "@syncfusion/ej2-buttons";
import { DropDownButton, ItemModel } from '@syncfusion/ej2-splitbuttons';
const productDropDownButtonItems: ItemModel[] = [
{ text: 'Developer' },
{ text: 'Analytics' },
{ text: 'Reporting' },
{ text: 'E-Signature' },
{ text: 'Help Desk' }
];
const defaultAppBarObj: AppBar = new AppBar({
colorMode: 'Primary'
});
defaultAppBarObj.appendTo("#defaultAppBar");
const defaultButtonMenuObj: Button = new Button({ cssClass: 'e-inherit', iconCss: 'e-icons e-menu' });
defaultButtonMenuObj.appendTo('#defaultButtonMenu');
const defaultDropDownButtonProductObj: DropDownButton = new DropDownButton({ cssClass: 'e-inherit', items: productDropDownButtonItems });
defaultDropDownButtonProductObj.appendTo('#defaultDropDownButtonProduct');
const defaultButtonLoginObj: Button = new Button({ cssClass: 'e-inherit', content: 'Login' });
defaultButtonLoginObj.appendTo('#defaultButtonLogin');<!DOCTYPE html>
<html lang="en">
<head>
<title>Essential JS 2 - AppBar</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
<meta name="description" content="Essential JS 2" />
<meta name="author" content="Syncfusion" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-navigations/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
<link href="styles.css" rel="stylesheet" />
<!--system js reference and configuration-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='loader'>LOADING....</div>
<div id='container'>
<div class="control-section default-appbar-section">
<div class="control-container">
<header id="defaultAppBar">
<button id="defaultButtonMenu"></button>
<button id="defaultDropDownButtonProduct">Products</button>
<div class="e-appbar-spacer"></div>
<button id="defaultButtonLogin"></button>
</header>
</div>
</div>
</div>
</body>
</html>Designing AppBar with SideBar
The AppBar is rendered with the SideBar component below the AppBar. Click on the menu icon to expand/collapse the Sidebar. In the following sample, the toggle method has been used to show or hide the Sidebar on the AppBar button click.
import { AppBar, Sidebar, TreeView } from "@syncfusion/ej2-navigations";
import { Button } from "@syncfusion/ej2-buttons";
import { TextBox } from '@syncfusion/ej2-inputs';
let data: { [key: string]: Object }[] = [
{
nodeId: '01', nodeText: 'Installation',
},
{
nodeId: '02', nodeText: 'Deployment',
},
{
nodeId: '03', nodeText: 'Quick Start',
},
{
nodeId: '04', nodeText: 'Components',
nodeChild: [
{ nodeId: '04-01', nodeText: 'Calendar' },
{ nodeId: '04-02', nodeText: 'DatePicker' },
{ nodeId: '04-03', nodeText: 'DateTimePicker' },
{ nodeId: '04-04', nodeText: 'DateRangePicker' },
{ nodeId: '04-05', nodeText: 'TimePicker' },
{ nodeId: '04-06', nodeText: 'SideBar' }
]
}
];
const defaultAppBarObj: AppBar = new AppBar({});
defaultAppBarObj.appendTo("#defaultAppBar");
const defaultButtonMenuObj: Button = new Button({ cssClass: 'e-inherit', iconCss: 'e-icons e-menu' });
defaultButtonMenuObj.appendTo('#defaultButtonMenu');
defaultButtonMenuObj.element.addEventListener("click", toggle);
let sidebarMenu: Sidebar = new Sidebar({
width: '220px',
target: '.main-content',
mediaQuery: '(min-width: 600px)',
isOpen: true
});
sidebarMenu.appendTo('#sideTree');
let inputObj: TextBox = new TextBox({
placeholder: "Search..."
});
inputObj.appendTo("#resSearch");
let mainTreeView: TreeView = new TreeView({
cssClass: "main-treeview",
fields: { dataSource: data, id: 'nodeId', text: 'nodeText', child: 'nodeChild' },
expandOn: 'Click'
});
mainTreeView.appendTo('#mainTree');
function toggle() {
sidebarMenu.toggle();
}<!DOCTYPE html>
<html lang="en">
<head>
<title>Essential JS 2 - AppBar</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
<meta name="description" content="Essential JS 2" />
<meta name="author" content="Syncfusion" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-navigations/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-inputs/styles/material.css" rel="stylesheet" />
<link href="styles.css" rel="stylesheet" />
<!--system js reference and configuration-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='loader'>LOADING....</div>
<div id='container'>
<div id="wrapper" class="control-section default-appbar-section">
<div class="control-container">
<div>
<header id="defaultAppBar">
<button id="defaultButtonMenu"></button>
<div class="e-folder">
<div class="e-folder-name">Navigation Pane</div>
</div>
</header>
</div>
<aside id="sideTree" class="sidebar-treeview">
<div class="main-menu">
<div class="table-content">
<input id="resSearch"></input>
<p class="main-menu-header">TABLE OF CONTENTS</p>
</div>
<div>
<div id="mainTree"></div>
</div>
</div>
</aside>
<div class="main-content" id="main-text">
<div class="sidebar-content">
<div class="sidebar-heading"> <h4>Responsive Sidebar with Treeview</h4></div>
<p class="paragraph-content">
This is a graphical aid for visualising and categorising the site, in the style of an expandable and
collapsable treeview component.
It auto-expands to display the node(s), if any, corresponding to the currently viewed title,
highlighting that node(s)
and its ancestors. Load-on-demand when expanding nodes is available where supported (most graphical
browsers),
falling back to a full-page reload. MediaWiki-supported caching, aside from squid, has been considered
so that
unnecessary re-downloads of content are avoided where possible. The complete expanded/collapsed state of
the treeview persists across page views in most situations.
</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>