Getting started in EJ2 TypeScript Ribbon control
3 Nov 202324 minutes to read
This section explains how to create a simple Ribbon and configure its available functionalities in TypeScript using Essential JS 2 quickstart seed repository.
This application is integrated with the
webpack.config.jsconfiguration and uses the latest version of the webpack-cli. It requires nodev14.15.0or higher. For more information about webpack and its features, refer to the webpack documentation.
Dependencies
The following list of dependencies are required to use the Ribbon control in your application.
|-- @syncfusion/ej2-ribbon
|-- @syncfusion/ej2-base
|-- @syncfusion/ej2-data
|-- @syncfusion/ej2-buttons
|-- @syncfusion/ej2-popups
|-- @syncfusion/ej2-splitbuttons
|-- @syncfusion/ej2-inputs
|-- @syncfusion/ej2-lists
|-- @syncfusion/ej2-dropdowns
|-- @syncfusion/ej2-navigationsSet up development environment
Open the command prompt from the required directory, and run the following command to clone the Syncfusion JavaScript (Essential JS 2) quickstart project from GitHub.
git clone https://github.com/SyncfusionExamples/ej2-quickstart-webpack- ej2-quickstartAfter cloning the application in the ej2-quickstart folder, run the following command line to navigate to the ej2-quickstart folder.
cd ej2-quickstartAdd Syncfusion JavaScript packages
Syncfusion JavaScript (Essential JS 2) packages are available on the npmjs.com public registry. You can install all Syncfusion JavaScript (Essential JS 2) controls in a single @syncfusion/ej2 package or individual packages for each control.
The quickstart application is preconfigured with the dependent @syncfusion/ej2 package in the ~/package.json file. Use the following command to install the dependent npm packages from the command prompt.
npm installImport the Syncfusion CSS styles
To render Ribbon control, need to import navigations and its dependent controls styles as given below in the ~/src/styles/styles.css file, as shown below:
@import "../../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-lists/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-dropdowns/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-navigations/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-ribbon/styles/material.css";Adding Ribbon control to the application
Open the application in Visual Studio Code and add the Syncfusion JavaScript UI controls.
Add the HTML div tag with the id attribute as ribbon to your index.html file.
[src/index.html]
<!DOCTYPE html>
<html lang="en">
<head>
<title>Essential JS 2 - Ribbon</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 rel="shortcut icon" href="resources/favicon.ico" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<div class="control-container">
<div id="ribbon"></div>
</div>
</body>
</html>Import the Ribbon control in your app.ts file and initialize it with the #ribbon.
[src/app/app.ts]
import { Ribbon } from "@syncfusion/ej2-ribbon";
let ribbon: Ribbon = new Ribbon({});
ribbon.appendTo("#ribbon");Injecting required modules
Inject the Ribbon required modules in your app.ts file using the following code snippet.
import { Ribbon, RibbonFileMenu, RibbonColorPicker } from "@syncfusion/ej2-ribbon";
Ribbon.Inject(RibbonFileMenu, RibbonColorPicker);
let ribbon: Ribbon = new Ribbon({});
ribbon.appendTo("#ribbon");Adding Ribbon Tab
In Ribbon, the options are arranged in tabs for easy access. You can use the tabs property of ribbon to define the ribbon tab like below.
import { Ribbon, RibbonTabModel } from "@syncfusion/ej2-ribbon";
let tabs: RibbonTabModel[] = [{ header: "Home" }];
let ribbon: Ribbon = new Ribbon({ tabs: tabs });
ribbon.appendTo("#ribbon");Adding Ribbon Group
To define a ribbon group under each tab, you can use the groups property of ribbon tab like below. The orientation property of ribbon group defines whether the collection of items will be rendered column-wise or row-wise.
import { Ribbon, RibbonTabModel, ItemOrientation } from "@syncfusion/ej2-ribbon";
let tabs: RibbonTabModel[] = [{
header: "Home",
groups: [{ header: "Clipboard", orientation: ItemOrientation.Row}]
}];
let ribbon: Ribbon = new Ribbon({ tabs: tabs });
ribbon.appendTo("#ribbon");Adding Ribbon Item
You can use the collections property of ribbon group to define each ribbon collection that contains one or more items. To define each ribbon item, you can use the items property of ribbon collection and the type property of ribbon item to specify the type of control to be rendered, like a button, a drop-down button, a combo box, and more.
import { Ribbon, RibbonTabModel, ItemOrientation, RibbonItemType, RibbonItemSize } from "@syncfusion/ej2-ribbon";
let tabs: RibbonTabModel[] = [{
header: "Home",
groups: [{
header: "Clipboard",
orientation: ItemOrientation.Row,
collections: [
{
id : "paste-collection",
items: [{
type: RibbonItemType.SplitButton,
allowedSizes: RibbonItemSize.Large,
disabled: true,
id: "pastebtn",
splitButtonSettings: {
iconCss: "e-icons e-paste",
items: [{ text: "Keep Source Format" }, { text: "Merge format" }, { text: "Keep text only" }],
content: "Paste"
}
}]
},
{
id: "cutcopy-collection",
items: [{
type: RibbonItemType.Button,
buttonSettings: {
content: "Cut",
iconCss: "e-icons e-cut"
}
}, {
type: RibbonItemType.Button,
buttonSettings: {
content: "Copy",
iconCss: "e-icons e-copy"
}
}]
}]
}]
}];
let ribbon: Ribbon = new Ribbon({ tabs: tabs });
ribbon.appendTo("#ribbon");Run the application
Run the application in the browser using the following command:
npm startThe following example illustrates how tabs, groups, collections, and items are used in a ribbon control to form the ribbon layout.
import { Ribbon, ItemOrientation, RibbonItemSize, RibbonItemType, RibbonTabModel, RibbonColorPicker, DisplayMode, RibbonFileMenu } from "@syncfusion/ej2-ribbon";
import { MenuItemModel, MenuEventArgs } from "@syncfusion/ej2-navigations";
Ribbon.Inject(RibbonFileMenu, RibbonColorPicker);
let fontSize: string[] = ["8", "9", "10", "11", "12", "14", "16", "18", "20", "22", "24", "26", "28", "36", "48", "72", "96"];
let fontStyle: string[] = ["Algerian", "Arial", "Calibri", "Cambria", "Cambria Math", "Courier New", "Candara", "Georgia", "Impact", "Segoe Print", "Segoe Script", "Segoe UI", "Symbol", "Times New Roman", "Verdana", "Windings"
];
let tabs: RibbonTabModel[] = [{
header: "Home",
groups: [{
id: "clipboard",
header: "Clipboard",
showLauncherIcon: true,
groupIconCss: "e-icons e-paste",
collections: [{
items: [{
type: RibbonItemType.SplitButton,
allowedSizes: RibbonItemSize.Large,
splitButtonSettings: {
iconCss: "e-icons e-paste",
items: [{ text: "Keep Source Format" }, { text: "Merge format" }, { text: "Keep text only" }],
content: "Paste"
}
}]
}, {
items: [{
type: RibbonItemType.Button,
buttonSettings: {
content: "Cut",
iconCss: "e-icons e-cut"
}
}, {
type: RibbonItemType.Button,
buttonSettings: {
content: "Copy",
iconCss: "e-icons e-copy"
}
}, {
type: RibbonItemType.Button,
buttonSettings: {
content: "Format Painter",
iconCss: "e-icons e-format-painter"
}
}]
}]
}, {
header: "Font",
isCollapsible: false,
enableGroupOverflow: true,
orientation: ItemOrientation.Row,
groupIconCss: "e-icons e-bold",
cssClass: "font-group",
collections: [{
items: [{
type: RibbonItemType.ComboBox,
comboBoxSettings: {
dataSource: fontStyle,
index: 3,
allowFiltering: true,
width: "150px"
}
}, {
type: RibbonItemType.ComboBox,
comboBoxSettings: {
dataSource: fontSize,
index: 3,
width: "65px",
allowFiltering: true
}
}]
}, {
items: [{
type: RibbonItemType.ColorPicker,
allowedSizes: RibbonItemSize.Small,
displayOptions: DisplayMode.Simplified,
colorPickerSettings: {
value: "#123456"
}
}, {
type: RibbonItemType.Button,
allowedSizes: RibbonItemSize.Small,
buttonSettings: {
content: "Bold",
iconCss: "e-icons e-bold"
}
}, {
type: RibbonItemType.Button,
allowedSizes: RibbonItemSize.Small,
buttonSettings: {
content: "Italic",
iconCss: "e-icons e-italic"
}
}, {
type: RibbonItemType.Button,
allowedSizes: RibbonItemSize.Small,
buttonSettings: {
content: "Underline",
iconCss: "e-icons e-underline"
}
},{
allowedSizes: RibbonItemSize.Small,
type: RibbonItemType.Button,
buttonSettings: {
content: "Strikethrough",
iconCss: "e-icons e-strikethrough"
}
}, {
type: RibbonItemType.Button,
allowedSizes: RibbonItemSize.Small,
buttonSettings: {
content: "Change Case",
iconCss: "e-icons e-change-case"
}
}]
}]
}, {
header: "Editor",
isCollapsible: false,
collections: [{
items: [{
type: RibbonItemType.Button,
allowedSizes: RibbonItemSize.Large,
buttonSettings: {
content: "Editor",
iconCss:"e-icons e-edit"
}
}]
}]
}]
}, {
header: "Insert",
groups: [{
header: "Tables",
isCollapsible: false,
collections: [{
items: [{
type: RibbonItemType.DropDown,
allowedSizes: RibbonItemSize.Large,
dropDownSettings: {
iconCss: "e-icons e-table",
content: "Table",
items: [
{ text: "Insert Table" }, { text: "Draw Table" },
{ text: "Convert Table" }, { text: "Excel SpreadSheet" }
]
}
}]
}]
}, {
id: "illustration",
header: "Illustrations",
showLauncherIcon: true,
orientation: ItemOrientation.Row,
enableGroupOverflow: true,
groupIconCss: "e-icons e-image",
collections: [{
items: [{
type: RibbonItemType.Button,
buttonSettings: {
content: "Chart",
iconCss:"e-icons e-chart"
}
},]
}]
}, {
header: "Media",
isCollapsible: false,
collections: [{
items: [{
type: RibbonItemType.Template,
itemTemplate: "#itemTemplate"
}]
}]
}]
}, {
header: "View",
groups: [{
header: "Views",
groupIconCss: "e-icons e-print",
orientation: ItemOrientation.Row,
collections: [{
items: [{
type: RibbonItemType.Button,
buttonSettings: {
content: "Print Layout",
iconCss: "e-print e-icons"
}
}, {
type: RibbonItemType.Button,
buttonSettings: {
iconCss: "e-icons e-web-layout",
content: "Web Layout"
}
}]
}]
}, {
header: "Show",
isCollapsible: false,
collections: [{
items: [{
type: RibbonItemType.CheckBox,
checkBoxSettings: {
label: "Ruler",
checked: false
}
}, {
type: RibbonItemType.CheckBox,
checkBoxSettings: {
checked: false,
label: "Gridlines"
}
}, {
type: RibbonItemType.CheckBox,
checkBoxSettings: {
label: "Navigation Pane",
checked: true
}
}]
}]
}]
}];
let menuItems: MenuItemModel[] = [
{ text: "New", iconCss: "e-icons e-file-new", id: "new" },
{ text: "Open", iconCss: "e-icons e-folder-open", id: "Open" },
{ text: "Rename", iconCss: "e-icons e-rename", id: "rename" },
{ text: "Save as", iconCss: "e-icons e-save", id: "save" }
];
let ribbon: Ribbon = new Ribbon({
tabs: tabs,
fileMenu: {
menuItems: menuItems,
visible: true
}
});
ribbon.appendTo("#ribbon");<!DOCTYPE html>
<html lang="en">
<head>
<title>Essential JS 2 - Ribbon</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.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-popups/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-inputs/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-lists/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-dropdowns/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-ribbon/styles/material.css" rel="stylesheet" />
<!--style reference from app-->
<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="ribbon"></div>
</div>
<script type="text/x-jsrender" id="itemTemplate">
<span class="ribbonTemplate ${activeSize}">
<span class="e-icons e-video"></span>
<span class="text">Video</span>
</span>
</script>
</body>
<style>
#container {
visibility: hidden;
}
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
</html>.ribbonTemplate {
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.ribbonTemplate.Large {
flex-direction: column;
}
.ribbonTemplate.Large .e-icons {
font-size: 35px;
}
.ribbonTemplate.Medium .e-icons,
.ribbonTemplate.Small .e-icons{
font-size: 20px;
margin: 15px 5px;
}
.ribbonTemplate.Small .text {
display:none;
}
.font-group .e-ribbon-group-content {
justify-content: center;
}