Items in EJ2 TypeScript Ribbon control
10 May 202424 minutes to read
Ribbon renders various built-in items based on the item type property. By default, the type property is set as Button
which renders the Button.
Built-in items
You can render the built-in Ribbon items by using the items property, to specify the type property.
The following table explains the built-in items and their actions.
Built-in Ribbon Items | Actions |
---|---|
Button | Renders button as ribbon item. |
CheckBox | Renders checkbox as ribbon item. |
DropDown | Renders dropdownbutton as ribbon item. |
SplitButton | Renders splitbutton as ribbon item. |
ComboBox | Renders combobox as ribbon item. |
ColorPicker | Renders color picker as ribbon item. |
GroupButton | Renders groupbutton as ribbon item. |
Button items
You can render the built-in button Ribbon item by setting the type property as Button
you can render a Button item. You can also customize the button item using the RibbonButtonSettingsModel, which provides options such as iconCss
, content
, isToggle
and more.
Toggle button
The isToggle property can be used to define whether the button act as a toggle button or not. By default, the value is false
.
import { Ribbon, RibbonTabModel, RibbonItemType } from "@syncfusion/ej2-ribbon";
let tabs: RibbonTabModel[] = [{
header: "Home",
groups: [{
header: "Clipboard",
collections: [
{
items: [{
type: RibbonItemType.Button,
buttonSettings: {
content: "Cut",
iconCss: "e-icons e-cut",
isToggle: true
}
}]
}]
}]
}];
let ribbon: Ribbon = new Ribbon({
tabs: tabs
});
ribbon.appendTo("#ribbon");
Checkbox items
You can render the built-in checkBox Ribbon item by setting the type property to CheckBox
. You can also customize the checkBox item using the RibbonCheckBoxSettingsModel, which provides options such as labelPosition
, label
, checked
and more.
Checkbox state
You can use the checked property to handle the checked or unchecked state. By default, the value is false
.
import { Ribbon, RibbonTabModel, RibbonItemType } from "@syncfusion/ej2-ribbon";
let tabs: RibbonTabModel[] = [{
header: "Home",
groups: [{
header: "View",
collections: [
{
items: [{
type: RibbonItemType.CheckBox,
checkBoxSettings: {
label: "Ruler",
checked: true
}
}]
}]
}]
}];
let ribbon: Ribbon = new Ribbon({ tabs: tabs });
ribbon.appendTo("#ribbon");
Defining label
You can use the label property to add a caption for the CheckBox. The label position can be set Before
or After
, by using the labelPosition property. By default, the labelPosition is After
.
import { Ribbon, RibbonTabModel, RibbonItemType } from "@syncfusion/ej2-ribbon";
let tabs: RibbonTabModel[] = [{
header: "Home",
groups: [{
header: "View",
collections: [
{
items: [{
type: RibbonItemType.CheckBox,
checkBoxSettings: {
label: "Ruler",
labelPosition: "Before"
}
}]
}]
}]
}];
let ribbon: Ribbon = new Ribbon({ tabs: tabs });
ribbon.appendTo("#ribbon");
DropDown button items
You can render the built-in dropDown Ribbon item by setting the type property to DropDown
. You can also customize the dropDown item through RibbonDropDownSettingsModel, which provides options such as iconCss
, content
, target
and more.
Target
The target property specifies the element selector to be displayed in the DropDownButton popup.
import { Ribbon, RibbonTabModel, RibbonItemType } from "@syncfusion/ej2-ribbon";
import { ListView } from "@syncfusion/ej2-lists";
let tabs: RibbonTabModel[] = [
{
header: "Home",
groups: [
{
header: "Illustrations",
collections: [
{
items: [
{
type: RibbonItemType.DropDown,
dropDownSettings: {
content: "Picture",
iconCss: "e-icons e-image",
target: "#pictureList"
}
},
],
}
]
}
]
}
];
let list: ListView = new ListView({
showHeader: true,
headerTitle: 'Insert Picture From',
dataSource: ['This device', 'Stock Images', 'Online Images']
});
list.appendTo('#pictureList');
let ribbon: Ribbon = new Ribbon({
tabs: tabs
});
ribbon.appendTo("#ribbon");
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js"></script>
<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" />
<!--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 id="pictureList"></div>
</div>
</body>
<style>
#container {
visibility: hidden;
}
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
</html>
Customize dropdown button item
You can customize the dropdown button item by specifying a custom cssClass using the beforeItemRender event.
The following sample showcases how to customize a specific dropdown item.
import { Ribbon, RibbonTabModel, RibbonItemType } from "@syncfusion/ej2-ribbon";
import { MenuEventArgs } from "@syncfusion/ej2-splitbuttons";
let tabs: RibbonTabModel[] = [
{
header: "Insert",
groups: [
{
header: "Tables",
collections: [
{
items: [
{
type: RibbonItemType.DropDown,
id: 'dropdownItem',
dropDownSettings: {
iconCss: 'e-icons e-table',
content: 'Table',
items: [
{ text: 'Insert Table' },
{ text: 'Draw Table' },
{ text: 'Convert Table' },
{ text: 'Excel SpreadSheet' },
],
beforeItemRender:(args: MenuEventArgs) => {
if (args.item.text === 'Insert Table') {
args.element.classList.add("e-custom-class");
}
}
},
},
],
}
]
}
]
}
];
let ribbon: Ribbon = new Ribbon({
tabs: tabs
});
ribbon.appendTo("#ribbon");
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js"></script>
<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>
</body>
<style>
#container {
visibility: hidden;
}
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
</html>
.e-custom-class {
color: green;
}
Create dropdown popup on demand
You can handle the creation of popups, by using the createPopupOnClick property. If set to true
, the popup will only be created upon opening. By default the value is false
.
import { Ribbon, RibbonTabModel, RibbonItemType } from "@syncfusion/ej2-ribbon";
let tabs: RibbonTabModel[] = [
{
header: "Insert",
groups: [
{
header: "Tables",
collections: [
{
items: [
{
type: RibbonItemType.DropDown,
id: 'dropdownItem',
dropDownSettings: {
iconCss: 'e-icons e-table',
content: 'Table',
items: [
{ text: 'Insert Table' },
{ text: 'Draw Table' },
{ text: 'Convert Table' },
{ text: 'Excel SpreadSheet' },
],
createPopupOnClick: true
},
},
],
}
]
}
]
}
];
let ribbon: Ribbon = new Ribbon({
tabs: tabs
});
ribbon.appendTo("#ribbon");
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js"></script>
<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" />
<!--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>
</body>
<style>
#container {
visibility: hidden;
}
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
</html>
Split button items
You can render the built-in splitButton Ribbon item by setting the type property to SplitButton
. You can also customize the splitButton item through RibbonSplitButtonSettingsModel, which provides options such as iconCss
, items
, target
and more.
Target
The target property specifies the element selector to be displayed in the SplitButton popup.
import { Ribbon, RibbonTabModel, RibbonItemType } from "@syncfusion/ej2-ribbon";
import { ListView } from "@syncfusion/ej2-lists";
let tabs: RibbonTabModel[] = [
{
header: "Home",
groups: [
{
header: "Illustrations",
collections: [
{
items: [
{
type: RibbonItemType.SplitButton,
splitButtonSettings: {
content: "Picture",
iconCss: "e-icons e-image",
target: "#pictureList"
}
},
],
}
]
}
]
}
];
let list: ListView = new ListView({
showHeader: true,
headerTitle: 'Insert Picture From',
dataSource: ['This device', 'Stock Images', 'Online Images']
});
list.appendTo('#pictureList');
let ribbon: Ribbon = new Ribbon({
tabs: tabs
});
ribbon.appendTo("#ribbon");
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js"></script>
<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" />
<!--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 id="pictureList"></div>
</div>
</body>
<style>
#container {
visibility: hidden;
}
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
</html>
Combobox items
You can render the built-in comboBox Ribbon item by setting the type property to ComboBox
. You can also customize the comboBox item through RibbonComboBoxSettingsModel, which provides options such as allowFiltering
, autoFill
, index
, sortOrder
and more.
Filtering
You can use the allowFiltering property to filter the data items. The filtering operation is initiated automatically, as soon as you start typing characters. If no match is found the value of the noRecordsTemplate
property will be displayed. By default, the value is false
.
import { Ribbon, RibbonTabModel, RibbonItemType } from "@syncfusion/ej2-ribbon";
let fontStyle: string[] = ["Algerian", "Arial", "Calibri", "Cambria", "Cambria Math", "Courier New", "Candara", "Georgia"];
let tabs: RibbonTabModel[] = [{
header: "Home",
groups: [{
header: "Font",
collections: [
{
items: [{
type: RibbonItemType.ComboBox,
comboBoxSettings: {
dataSource: fontStyle,
index: 3,
allowFiltering: true
}
}]
}]
}]
}];
let ribbon: Ribbon = new Ribbon({ tabs: tabs });
ribbon.appendTo("#ribbon");
Index
You can use the index property to get or set the selected item in the combobox.
import { Ribbon, RibbonTabModel, RibbonItemType } from "@syncfusion/ej2-ribbon";
let fontStyle: string[] = ["Algerian", "Arial", "Calibri", "Cambria", "Cambria Math", "Courier New", "Candara", "Georgia"];
let tabs: RibbonTabModel[] = [{
header: "Home",
groups: [{
header: "Font",
collections: [
{
items: [{
type: RibbonItemType.ComboBox,
comboBoxSettings: {
dataSource: fontStyle,
index: 3
}
}]
}]
}]
}];
let ribbon: Ribbon = new Ribbon({ tabs: tabs });
ribbon.appendTo("#ribbon");
SortOrder
You can use the sortOrder property to specify the order in which the DataSource should be sorted.
`None` | The data source is not sorted. |
`Ascending` | The data source is sorted in ascending order. |
`Descending` | The data source is sorted in descending order. |
import { Ribbon, RibbonTabModel, RibbonItemType } from "@syncfusion/ej2-ribbon";
let fontStyle: string[] = ["Algerian", "Arial", "Calibri", "Cambria", "Cambria Math", "Courier New", "Candara", "Georgia"];
let tabs: RibbonTabModel[] = [{
header: "Home",
groups: [{
header: "Font",
collections: [
{
items: [{
type: RibbonItemType.ComboBox,
comboBoxSettings: {
dataSource: fontStyle,
sortOrder: "Descending"
}
}]
}]
}]
}];
let ribbon: Ribbon = new Ribbon({ tabs: tabs });
ribbon.appendTo("#ribbon");
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js"></script>
<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" />
<!--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>
</body>
<style>
#container {
visibility: hidden;
}
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
</html>
Colorpicker items
You can render the built-in colorPicker Ribbon item by setting the type property to ColorPicker
. You can also customize the colorPicker item through RibbonColorPickerSettingsModel, which provides options such as value
, columns
, showButtons
and more.
Value
You can use the value property to specify the color value. The value should be specified as Hex code.
import { Ribbon, RibbonTabModel, RibbonItemType, RibbonColorPicker } from "@syncfusion/ej2-ribbon";
Ribbon.Inject(RibbonColorPicker);
let tabs: RibbonTabModel[] = [{
header: "Home",
groups: [{
header: "Font",
collections: [
{
items: [{
type: RibbonItemType.ColorPicker,
colorPickerSettings: {
value: "#123456"
}
}]
}]
}]
}];
let ribbon: Ribbon = new Ribbon({ tabs: tabs });
ribbon.appendTo("#ribbon");
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js"></script>
<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" />
<!--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>
</body>
<style>
#container {
visibility: hidden;
}
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
</html>
Groupbutton items
You can render the built-in groupbutton Ribbon item by setting the type property to GroupButton
. You can also customize the groupbutton item using the RibbonGroupButtonSettingsModel, which provides options such as selection
and items
.
Items
You can render the groupbutton items by using items property. You can also customize the groupbutton items through RibbonGroupButtonItemModel, which provides options such as content
, iconCss
, selected
and more.
Item content
You can use the content property to define the text content for the groupbutton.
import { Ribbon, RibbonTabModel, RibbonItemType, RibbonItemSize } from "@syncfusion/ej2-ribbon";
let tabs: RibbonTabModel[] = [{
header: "Home",
groups: [{
header: "Paragraph",
collections: [
{
items: [{
type: RibbonItemType.GroupButton,
allowedSizes: RibbonItemSize.Small,
groupButtonSettings: {
items: [{
iconCss: 'e-icons e-align-left',
content: 'Align Left'
},
{
iconCss: 'e-icons e-align-center',
content: 'Align Center'
},
{
iconCss: 'e-icons e-align-right',
content: 'Align Right'
},
{
iconCss: 'e-icons e-justify',
content: 'Justify'
}]
}
}]
}]
}]
}];
let ribbon: Ribbon = new Ribbon({ tabs: tabs });
ribbon.appendTo("#ribbon");
Icon only
You can use the iconCss property to customize the groupbutton icon. If the iconCss
property is not defined, the groupbutton will not be rendered.
import { Ribbon, RibbonTabModel, RibbonItemType, RibbonItemSize } from "@syncfusion/ej2-ribbon";
let tabs: RibbonTabModel[] = [{
header: "Home",
groups: [{
header: "Paragraph",
collections: [
{
items: [{
type: RibbonItemType.GroupButton,
allowedSizes: RibbonItemSize.Small,
groupButtonSettings: {
items: [{
iconCss: 'e-icons e-align-left'
},
{
iconCss: 'e-icons e-align-center'
},
{
iconCss: 'e-icons e-align-right'
},
{
iconCss: 'e-icons e-justify'
}]
}
}]
}]
}]
}];
let ribbon: Ribbon = new Ribbon({ tabs: tabs });
ribbon.appendTo("#ribbon");
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js"></script>
<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" />
<!--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>
</body>
<style>
#container {
visibility: hidden;
}
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
</html>
Selection
You can use the selected property to select the groupbutton item initally. When set to true
, the button will be selected. By default the selected
property is false.
import { Ribbon, RibbonTabModel, RibbonItemType, RibbonItemSize } from "@syncfusion/ej2-ribbon";
let tabs: RibbonTabModel[] = [{
header: "Home",
groups: [{
header: "Paragraph",
collections: [
{
items: [{
type: RibbonItemType.GroupButton,
allowedSizes: RibbonItemSize.Small,
groupButtonSettings: {
items: [{
iconCss: 'e-icons e-align-left',
content: 'Align Left'
},
{
iconCss: 'e-icons e-align-center',
content: 'Align Center',
selected: true
},
{
iconCss: 'e-icons e-align-right',
content: 'Align Right'
},
{
iconCss: 'e-icons e-justify',
content: 'Justify'
}]
}
}]
}]
}]
}];
let ribbon: Ribbon = new Ribbon({ tabs: tabs });
ribbon.appendTo("#ribbon");
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js"></script>
<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" />
<!--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>
</body>
<style>
#container {
visibility: hidden;
}
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
</html>
Single selection
You can set the selection property value as RibbonGroupButtonSelection.Single
to make one selection at a time. It automatically deselects the previous choice when a different item is clicked.
import { Ribbon, RibbonTabModel, RibbonItemType, RibbonGroupButtonSelection, RibbonItemSize } from "@syncfusion/ej2-ribbon";
let tabs: RibbonTabModel[] = [{
header: "Home",
groups: [{
header: "Paragraph",
collections: [
{
items: [{
type: RibbonItemType.GroupButton,
allowedSizes: RibbonItemSize.Small,
groupButtonSettings: {
selection: RibbonGroupButtonSelection.Single,
items: [{
iconCss: 'e-icons e-align-left',
content: 'Align Left'
},
{
iconCss: 'e-icons e-align-center',
content: 'Align Center',
selected: true
},
{
iconCss: 'e-icons e-align-right',
content: 'Align Right'
},
{
iconCss: 'e-icons e-justify',
content: 'Justify'
}]
}
}]
}]
}]
}];
let ribbon: Ribbon = new Ribbon({ tabs: tabs });
ribbon.appendTo("#ribbon");
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js"></script>
<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" />
<!--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>
</body>
<style>
#container {
visibility: hidden;
}
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
</html>
Multiple selection
You can set the selection property value as RibbonGroupButtonSelection.Multiple
to select more than one button at a time. Users can select a button one by one to select multiple buttons.
import { Ribbon, RibbonTabModel, RibbonItemType, RibbonGroupButtonSelection, RibbonItemSize } from "@syncfusion/ej2-ribbon";
let tabs: RibbonTabModel[] = [{
header: "Home",
groups: [{
header: "Paragraph",
collections: [
{
items: [{
type: RibbonItemType.GroupButton,
allowedSizes: RibbonItemSize.Small,
groupButtonSettings: {
selection: RibbonGroupButtonSelection.Multiple,
items: [{
iconCss: 'e-icons e-bold',
content: 'Bold'
},
{
iconCss: 'e-icons e-italic',
content: 'Italic',
selected: true
},
{
iconCss: 'e-icons e-underline',
content: 'Underline'
},
{
iconCss: 'e-icons e-strikethrough',
selected: true,
content: 'Strikethrough'
}]
}
}]
}]
}]
}];
let ribbon: Ribbon = new Ribbon({ tabs: tabs });
ribbon.appendTo("#ribbon");
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js"></script>
<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" />
<!--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>
</body>
<style>
#container {
visibility: hidden;
}
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
</html>
Groupbutton in simplified mode layout
In simplified mode, the groupbutton will be rendered as a dropdownbutton. The dropdownbutton icon will be updated based on the button item selected. The initial button icon will be the set, if none of the buttons are selected.
import { Ribbon, RibbonTabModel, RibbonItemType, RibbonGroupButtonSelection, RibbonItemSize } from "@syncfusion/ej2-ribbon";
let tabs: RibbonTabModel[] = [{
header: "Home",
groups: [{
header: "Paragraph",
collections: [
{
items: [{
type: RibbonItemType.GroupButton,
allowedSizes: RibbonItemSize.Small,
groupButtonSettings: {
selection: RibbonGroupButtonSelection.Single,
items: [{
iconCss: 'e-icons e-align-left',
content: 'Align Left'
},
{
iconCss: 'e-icons e-align-center',
content: 'Align Center',
selected: true
},
{
iconCss: 'e-icons e-align-right',
content: 'Align Right'
},
{
iconCss: 'e-icons e-justify',
content: 'Justify'
}]
}
}]
}]
}]
}];
let ribbon: Ribbon = new Ribbon({ tabs: tabs, activeLayout: 'Simplified' });
ribbon.appendTo("#ribbon");
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js"></script>
<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" />
<!--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>
</body>
<style>
#container {
visibility: hidden;
}
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
</html>
Custom items
You can customize the ribbon items with non-built-in items or HTML content by setting the type property to Template
. This provides an option to customize the ribbon items with greater flexibility.
import { Ribbon, RibbonTabModel, RibbonItemType } from "@syncfusion/ej2-ribbon";
let tabs: RibbonTabModel[] = [{
header: "Home",
groups: [
{
header: 'Templates',
isCollapsible: false,
collections: [
{
items: [
{
type: RibbonItemType.Template,
itemTemplate: '#customItem'
}
],
},
],
}, {
header: "Multimedia",
collections: [
{
items: [{
type: RibbonItemType.Template,
itemTemplate: "#itemTemplate"
}]
}]
}]
}];
let ribbon: Ribbon = new Ribbon({ tabs: tabs });
ribbon.appendTo("#ribbon");
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js"></script>
<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>
<script type="text/x-jsrender" id="customItem">
<div class="custom-template ${activeSize}">
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname">
<br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname">
</div>
</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;
}
.custom-template input {
margin-left: 10px;
width: 100px;
}
.custom-template.Medium {
display: flex;
align-items: center;
}
.custom-template.Medium input {
height: 14px;
margin-right: 10px;
}
Items display Mode
You can use the displayOptions property to display the items in the Ribbon layout.
`Auto` | The items are displayed in all layouts based on the ribbon's overflow state. |
`Classic` | The items are displayed only in the classic layout group. |
`Simplified` | The items are displayed only in the simplified layout group. |
`Overflow` | The items are displayed only in the overflow popup. |
Display items in Classic only
To diplay the items only in the classic layout group, set the mode as DisplayMode.Classic
in the displayOptions property.
import { Ribbon, RibbonTabModel, RibbonItemType, DisplayMode } from "@syncfusion/ej2-ribbon";
let tabs: RibbonTabModel[] = [{
header: "Home",
groups: [{
header: "Font",
collections: [
{
items: [{
type: RibbonItemType.Button,
displayOptions: DisplayMode.Classic,
buttonSettings: {
content: "Cut",
iconCss: "e-icons e-cut"
}
}]
}]
}]
}];
let ribbon: Ribbon = new Ribbon({ tabs: tabs });
ribbon.appendTo("#ribbon");
Display items in Simplified only
To diplay the items only in the simplified layout group, set the mode as DisplayMode.Simplified
in the displayOptions property.
import { Ribbon, RibbonTabModel, RibbonItemType, DisplayMode } from "@syncfusion/ej2-ribbon";
let tabs: RibbonTabModel[] = [{
header: "Home",
groups: [{
header: "Font",
collections: [
{
items: [{
type: RibbonItemType.Button,
displayOptions: DisplayMode.Simplified,
buttonSettings: {
content: "Cut",
iconCss: "e-icons e-cut"
}
}]
}]
}]
}];
let ribbon: Ribbon = new Ribbon({ tabs: tabs });
ribbon.appendTo("#ribbon");
Display items in Overflow popup only
To diplay the items only in the overflow, set the mode as DisplayMode.Overflow
in the displayOptions property.
import { Ribbon, RibbonTabModel, RibbonItemType, DisplayMode } from "@syncfusion/ej2-ribbon";
let tabs: RibbonTabModel[] = [{
header: "Home",
groups: [{
header: "Font",
collections: [
{
items: [{
type: RibbonItemType.Button,
displayOptions: DisplayMode.Overflow,
buttonSettings: {
content: "Cut",
iconCss: "e-icons e-cut"
}
}]
}]
}]
}];
let ribbon: Ribbon = new Ribbon({ tabs: tabs });
ribbon.appendTo("#ribbon");
Enable or disable items
You can use the disabled property to disable a Ribbon item. It prevents the user interaction when set to true
. By default, the value is false
.
import { Ribbon, RibbonTabModel, RibbonItemType } from "@syncfusion/ej2-ribbon";
let tabs: RibbonTabModel[] = [{
header: "Home",
groups: [{
header: "Clipboard",
collections: [
{
items: [{
type: RibbonItemType.Button,
disabled: true,
buttonSettings: {
content: "Cut",
iconCss: "e-icons e-cut"
}
},
{
type: RibbonItemType.CheckBox,
disabled: true,
checkBoxSettings: {
label: "Ruler",
checked: true
}
},
{
type: RibbonItemType.DropDown,
disabled: true,
dropDownSettings: {
content: "Table",
iconCss: "e-icons e-table",
}
},
{
type: RibbonItemType.SplitButton,
disabled: true,
splitButtonSettings: {
content: "Table",
iconCss: "e-icons e-table"
}
}]
}]
}]
}];
let ribbon: Ribbon = new Ribbon({
tabs: tabs
});
ribbon.appendTo("#ribbon");