Getting Started with the React Ribbon Component
28 Aug 202524 minutes to read
This section explains how to create a simple Ribbon and configure its functionalities in a React application.
Dependencies
The following list of dependencies are required to use the Ribbon component in your application.
|-- @syncfusion/ej2-react-ribbon
|-- @syncfusion/ej2-react-base
|-- @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-navigations
|-- @syncfusion/ej2-ribbonSetup for Local Development
To get started, create a new React application using Vite. Vite offers a faster development server and optimized builds. For more details, refer to the official Vite installation guide.
Note: If you prefer to use
create-react-app, refer to this documentation for setup instructions.
To create a new React application, run the following command.
npm create vite@latest my-appTo set-up a React application in TypeScript environment, run the following command.
npm create vite@latest my-app -- --template react-ts
cd my-app
npm run devTo set-up a React application in JavaScript environment, run the following command.
npm create vite@latest my-app -- --template react
cd my-app
npm run devAdding Syncfusion® Packages
All Syncfusion Essential® JS 2 packages are available on the npmjs.com public registry.
To install the Ribbon component package, use the following command:
npm install @syncfusion/ej2-react-ribbon --saveThe above command installs Ribbon dependencies which are required to render the component in the React environment.
Adding Styles to the Application
To apply the necessary styling for the Ribbon, import the component’s CSS files into your src/App.css file.
@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 the Ribbon Component
Now, you can add the Ribbon component to your application. Open the src/App.tsx file and use the following code snippet to render a basic Ribbon.
import { RibbonComponent } from "@syncfusion/ej2-react-ribbon";
import * as React from "react";
import * as ReactDOM from "react-dom";
import "./App.css";
function App() {
return (
<RibbonComponent id="ribbon"></RibbonComponent>
);
}
const root = ReactDOM.createRoot(document.getElementById("element"));
root.render(<App />);Injecting required modules
Inject the Ribbon required modules in your src/App.tsx file using the following code snippet.
import { RibbonComponent, RibbonFileMenu, Inject, RibbonColorPicker } from "@syncfusion/ej2-react-ribbon";
import * as React from "react";
import * as ReactDOM from "react-dom";
import "./App.css";
function App() {
return (
<RibbonComponent id="ribbon">
<Inject services={[RibbonFileMenu, RibbonColorPicker]} />
</RibbonComponent>
);
}
const root = ReactDOM.createRoot(document.getElementById("element"));
root.render(<App />);Defining Ribbon Tabs
In the Ribbon, commands are organized into tabs for easy access. Use the RibbonTabDirective to define each tab.
import { RibbonComponent, RibbonTabsDirective, RibbonTabDirective } from "@syncfusion/ej2-react-ribbon";
import * as React from "react";
import * as ReactDOM from "react-dom";
import "./App.css";
function App() {
return (
<RibbonComponent id="ribbon">
<RibbonTabsDirective>
<RibbonTabDirective header="Home"></RibbonTabDirective>
</RibbonTabsDirective>
</RibbonComponent>
);
}
const root = ReactDOM.createRoot(document.getElementById("element"));
root.render(<App />);Defining Ribbon Groups
Each tab can contain one or more groups, which are defined using the RibbonGroupDirective. The orientation property specifies whether the items within the group are arranged in a row or a column.
import { RibbonComponent, RibbonTabsDirective, RibbonTabDirective, RibbonGroupsDirective, RibbonGroupDirective } from "@syncfusion/ej2-react-ribbon";
import * as React from "react";
import * as ReactDOM from "react-dom";
import "./App.css";
function App() {
return (
<RibbonComponent id="ribbon">
<RibbonTabsDirective>
<RibbonTabDirective header="Home">
<RibbonGroupsDirective>
<RibbonGroupDirective header="Clipboard" orientation="Row"></RibbonGroupDirective>
</RibbonGroupsDirective>
</RibbonTabDirective>
</RibbonTabsDirective>
</RibbonComponent>
);
}
const root = ReactDOM.createRoot(document.getElementById("element"));
root.render(<App />);Defining Ribbon Items
Use the RibbonItemDirective to add commands like buttons, combo boxes, and other controls to a group. Items are placed within a RibbonCollectionDirective. The type property of an item specifies which component to render.
import { RibbonComponent, RibbonTabsDirective, RibbonTabDirective, RibbonGroupsDirective, RibbonGroupDirective, RibbonCollectionsDirective, RibbonCollectionDirective, RibbonItemsDirective, RibbonItemDirective, RibbonItemSize } from "@syncfusion/ej2-react-ribbon";
import * as React from "react";
import * as ReactDOM from "react-dom";
import "./App.css";
function App() {
return (
<RibbonComponent id="ribbon">
<RibbonTabsDirective>
<RibbonTabDirective header="Home">
<RibbonGroupsDirective>
<RibbonGroupDirective header="Clipboard" orientation="Row">
<RibbonCollectionsDirective>
<RibbonCollectionDirective id="paste-collection">
<RibbonItemsDirective>
<RibbonItemDirective type="SplitButton" allowedSizes={RibbonItemSize.Large}
splitButtonSettings={{ iconCss: "e-icons e-paste", items: [{ text: "Keep Source Format" }, { text: "Merge format" }, { text: "Keep text only" }], content: "Paste" }}>
</RibbonItemDirective>
</RibbonItemsDirective>
</RibbonCollectionDirective>
<RibbonCollectionDirective id="cutcopy-collection">
<RibbonItemsDirective>
<RibbonItemDirective type="Button" buttonSettings={{ iconCss: "e-icons e-cut", content: "Cut" }}>
</RibbonItemDirective>
<RibbonItemDirective type="Button" buttonSettings={{ iconCss: "e-icons e-copy", content: "Copy" }}>
</RibbonItemDirective>
</RibbonItemsDirective>
</RibbonCollectionDirective>
</RibbonCollectionsDirective>
</RibbonGroupDirective>
</RibbonGroupsDirective>
</RibbonTabDirective>
</RibbonTabsDirective>
</RibbonComponent>
);
}
const root = ReactDOM.createRoot(document.getElementById("element"));
root.render(<App />);Run the application
Now run the npm run dev command in the console to start the development server. This command compiles your code and serves the application locally, opening it in the browser.
npm run dev
The following example illustrates how tabs, groups, collections, and items are used in a ribbon component to form the ribbon layout.
import * as React from "react";
import * as ReactDom from "react-dom";
import { RibbonComponent, RibbonTabsDirective, RibbonTabDirective, RibbonCollectionsDirective, RibbonCollectionDirective, RibbonGroupsDirective, RibbonGroupDirective, RibbonItemsDirective, RibbonItemDirective, RibbonColorPicker, DisplayMode } from "@syncfusion/ej2-react-ribbon";
import { RibbonFileMenu, RibbonItemSize, Inject } from "@syncfusion/ej2-react-ribbon";
function App() {
const pasteOptions = [{ text: "Keep Source Format" }, { text: "Merge format" }, { text: "Keep text only" }];
const tableOptions = [{ text: "Insert Table" }, { text: "This device" }, { text: "Convert Table" }, { text: "Excel SpreadSheet" }];
const fontSize = ["8", "9", "10", "11", "12", "14", "16", "18", "20", "22", "24", "26", "28", "36", "48", "72", "96"];
const fontStyle = ["Algerian", "Arial", "Calibri", "Cambria", "Cambria Math", "Courier New", "Candara", "Georgia", "Impact", "Segoe Print", "Segoe Script", "Segoe UI", "Symbol", "Times New Roman", "Verdana", "Windings"];
function template(props) {
const cssClass = "ribbonTemplate " + props.activeSize;
return (<span className={cssClass}><span className="e-icons e-video"></span><span className="text">Video</span></span>)
}
const fileOptions = [{ 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" }]
return (
<RibbonComponent id="ribbon" fileMenu={{ visible: true, menuItems: fileOptions }}>
<RibbonTabsDirective>
<RibbonTabDirective header="Home">
<RibbonGroupsDirective>
<RibbonGroupDirective header="Clipboard" groupIconCss="e-icons e-paste" showLauncherIcon={true}>
<RibbonCollectionsDirective>
<RibbonCollectionDirective>
<RibbonItemsDirective>
<RibbonItemDirective type="SplitButton" allowedSizes={RibbonItemSize.Large}
splitButtonSettings={{ iconCss: "e-icons e-paste", items: pasteOptions, content: "Paste" }}>
</RibbonItemDirective>
</RibbonItemsDirective>
</RibbonCollectionDirective>
<RibbonCollectionDirective>
<RibbonItemsDirective>
<RibbonItemDirective type="Button" buttonSettings={{ iconCss: "e-icons e-cut", content: "Cut" }}>
</RibbonItemDirective>
<RibbonItemDirective type="Button" buttonSettings={{ iconCss: "e-icons e-copy", content: "Copy" }}>
</RibbonItemDirective>
<RibbonItemDirective type="Button" buttonSettings={{ iconCss: "e-icons e-format-painter", content: "Format Painter" }}>
</RibbonItemDirective>
</RibbonItemsDirective>
</RibbonCollectionDirective>
</RibbonCollectionsDirective>
</RibbonGroupDirective>
<RibbonGroupDirective header="Font" groupIconCss="e-icons e-bold" isCollapsible={false} enableGroupOverflow={true} orientation="Row" cssClass="font-group">
<RibbonCollectionsDirective>
<RibbonCollectionDirective>
<RibbonItemsDirective>
<RibbonItemDirective type="ComboBox" comboBoxSettings={{ dataSource: fontStyle, index: 3, width: "150px", allowFiltering: true }}>
</RibbonItemDirective>
<RibbonItemDirective type="ComboBox" comboBoxSettings={{ dataSource: fontSize, index: 3, width: "65px", allowFiltering: true }}>
</RibbonItemDirective>
</RibbonItemsDirective>
</RibbonCollectionDirective>
<RibbonCollectionDirective>
<RibbonItemsDirective>
<RibbonItemDirective type="ColorPicker" allowedSizes={RibbonItemSize.Small} displayOptions={DisplayMode.Simplified} colorPickerSettings={{ value: "#123456" }}>
</RibbonItemDirective>
<RibbonItemDirective type="Button" allowedSizes={RibbonItemSize.Small} buttonSettings={{ iconCss: "e-icons e-bold", content: "Bold" }}>
</RibbonItemDirective>
<RibbonItemDirective type="Button" allowedSizes={RibbonItemSize.Small} buttonSettings={{ iconCss: "e-icons e-italic", content: "Italic" }}>
</RibbonItemDirective>
<RibbonItemDirective type="Button" allowedSizes={RibbonItemSize.Small} buttonSettings={{ iconCss: "e-icons e-underline", content: "Underline" }}>
</RibbonItemDirective>
<RibbonItemDirective type="Button" allowedSizes={RibbonItemSize.Small} buttonSettings={{ iconCss: "e-icons e-strikethrough", content: "Strikethrough" }}>
</RibbonItemDirective>
<RibbonItemDirective type="Button" allowedSizes={RibbonItemSize.Small} buttonSettings={{ iconCss: "e-icons e-change-case", content: "Change Case" }}>
</RibbonItemDirective>
</RibbonItemsDirective>
</RibbonCollectionDirective>
</RibbonCollectionsDirective>
</RibbonGroupDirective>
<RibbonGroupDirective header="Editor" isCollapsible={false}>
<RibbonCollectionsDirective>
<RibbonCollectionDirective>
<RibbonItemsDirective>
<RibbonItemDirective type="Button" allowedSizes={RibbonItemSize.Large} buttonSettings={{ iconCss: "e-icons e-edit", content: "Editor" }}>
</RibbonItemDirective>
</RibbonItemsDirective>
</RibbonCollectionDirective>
</RibbonCollectionsDirective>
</RibbonGroupDirective>
</RibbonGroupsDirective>
</RibbonTabDirective>
<RibbonTabDirective header="Insert">
<RibbonGroupsDirective>
<RibbonGroupDirective header="Tables" isCollapsible={false}>
<RibbonCollectionsDirective>
<RibbonCollectionDirective>
<RibbonItemsDirective>
<RibbonItemDirective type="DropDown" allowedSizes={RibbonItemSize.Large} dropDownSettings={{ iconCss: "e-icons e-table", items: tableOptions, content: "Table" }}>
</RibbonItemDirective>
</RibbonItemsDirective>
</RibbonCollectionDirective>
</RibbonCollectionsDirective>
</RibbonGroupDirective>
<RibbonGroupDirective header="Illustration" id="illustration" groupIconCss="e-icons e-image" enableGroupOverflow={true} showLauncherIcon={true} orientation="Row">
<RibbonCollectionsDirective>
<RibbonCollectionDirective>
<RibbonItemsDirective>
<RibbonItemDirective type="Button" buttonSettings={{ iconCss: "e-icons e-chart", content: "Charts" }}>
</RibbonItemDirective>
</RibbonItemsDirective>
</RibbonCollectionDirective>
</RibbonCollectionsDirective>
</RibbonGroupDirective>
<RibbonGroupDirective header="Media" isCollapsible={false}>
<RibbonCollectionsDirective>
<RibbonCollectionDirective>
<RibbonItemsDirective>
<RibbonItemDirective type="Template" itemTemplate={template}>
</RibbonItemDirective>
</RibbonItemsDirective>
</RibbonCollectionDirective>
</RibbonCollectionsDirective>
</RibbonGroupDirective>
</RibbonGroupsDirective>
</RibbonTabDirective>
<RibbonTabDirective header="View">
<RibbonGroupsDirective>
<RibbonGroupDirective header="Views" groupIconCss="e-icons e-print" orientation="Row">
<RibbonCollectionsDirective>
<RibbonCollectionDirective>
<RibbonItemsDirective>
<RibbonItemDirective type="Button" buttonSettings={{ iconCss: "e-icons e-print", content: "Print Layout" }}>
</RibbonItemDirective>
<RibbonItemDirective type="Button" buttonSettings={{ iconCss: "e-icons e-web-layout", content: "Web Layout" }}>
</RibbonItemDirective>
</RibbonItemsDirective>
</RibbonCollectionDirective>
</RibbonCollectionsDirective>
</RibbonGroupDirective>
<RibbonGroupDirective header="Show" isCollapsible={true}>
<RibbonCollectionsDirective>
<RibbonCollectionDirective>
<RibbonItemsDirective>
<RibbonItemDirective type="CheckBox" checkBoxSettings={{ label: "Ruler", checked: false }}>
</RibbonItemDirective>
<RibbonItemDirective type="CheckBox" checkBoxSettings={{ label: "Gridlines", checked: false }}>
</RibbonItemDirective>
<RibbonItemDirective type="CheckBox" checkBoxSettings={{ label: "Navigation Pane", checked: true }}>
</RibbonItemDirective>
</RibbonItemsDirective>
</RibbonCollectionDirective>
</RibbonCollectionsDirective>
</RibbonGroupDirective>
</RibbonGroupsDirective>
</RibbonTabDirective>
</RibbonTabsDirective>
<Inject services={[RibbonFileMenu, RibbonColorPicker]} />
</RibbonComponent>
);
}
export default App;
ReactDom.render(<App />, document.getElementById("element"));import * as React from "react";
import * as ReactDom from "react-dom";
import { RibbonComponent, RibbonTabsDirective, RibbonTabDirective, RibbonCollectionsDirective, RibbonCollectionDirective, RibbonGroupsDirective, RibbonGroupDirective, RibbonItemsDirective, RibbonItemDirective, RibbonColorPicker, DisplayMode } from "@syncfusion/ej2-react-ribbon";
import { RibbonFileMenu, RibbonItemSize, Inject } from "@syncfusion/ej2-react-ribbon";
import { ItemModel } from "@syncfusion/ej2-splitbuttons";
import { MenuItemModel } from "@syncfusion/ej2-navigations";
function App() {
const pasteOptions: ItemModel[] = [{ text: "Keep Source Format" }, { text: "Merge format" }, { text: "Keep text only" }];
const tableOptions: ItemModel[] = [{ text: "Insert Table" }, { text: "This device" }, { text: "Convert Table" }, { text: "Excel SpreadSheet" }];
const fontSize: string[] = ["8", "9", "10", "11", "12", "14", "16", "18", "20", "22", "24", "26", "28", "36", "48", "72", "96"];
const 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"];
function template(props: any) {
const cssClass = "ribbonTemplate " + props.activeSize;
return (<span className={cssClass}><span className="e-icons e-video"></span><span className="text">Video</span></span>)
}
const fileOptions: 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" }]
return (
<RibbonComponent id="ribbon" fileMenu={{ visible: true, menuItems: fileOptions }}>
<RibbonTabsDirective>
<RibbonTabDirective header="Home">
<RibbonGroupsDirective>
<RibbonGroupDirective header="Clipboard" groupIconCss="e-icons e-paste" showLauncherIcon={true}>
<RibbonCollectionsDirective>
<RibbonCollectionDirective>
<RibbonItemsDirective>
<RibbonItemDirective type="SplitButton" allowedSizes={RibbonItemSize.Large}
splitButtonSettings={{ iconCss: "e-icons e-paste", items: pasteOptions, content: "Paste" }}>
</RibbonItemDirective>
</RibbonItemsDirective>
</RibbonCollectionDirective>
<RibbonCollectionDirective>
<RibbonItemsDirective>
<RibbonItemDirective type="Button" buttonSettings={{ iconCss: "e-icons e-cut", content: "Cut" }}>
</RibbonItemDirective>
<RibbonItemDirective type="Button" buttonSettings={{ iconCss: "e-icons e-copy", content: "Copy" }}>
</RibbonItemDirective>
<RibbonItemDirective type="Button" buttonSettings={{ iconCss: "e-icons e-format-painter", content: "Format Painter" }}>
</RibbonItemDirective>
</RibbonItemsDirective>
</RibbonCollectionDirective>
</RibbonCollectionsDirective>
</RibbonGroupDirective>
<RibbonGroupDirective header="Font" groupIconCss="e-icons e-bold" isCollapsible={false} enableGroupOverflow={true} orientation="Row" cssClass="font-group">
<RibbonCollectionsDirective>
<RibbonCollectionDirective>
<RibbonItemsDirective>
<RibbonItemDirective type="ComboBox" comboBoxSettings={{ dataSource: fontStyle, index: 3, width: "150px", allowFiltering: true }}>
</RibbonItemDirective>
<RibbonItemDirective type="ComboBox" comboBoxSettings={{ dataSource: fontSize, index: 3, width: "65px", allowFiltering: true }}>
</RibbonItemDirective>
</RibbonItemsDirective>
</RibbonCollectionDirective>
<RibbonCollectionDirective>
<RibbonItemsDirective>
<RibbonItemDirective type="ColorPicker" allowedSizes={RibbonItemSize.Small} displayOptions={DisplayMode.Simplified} colorPickerSettings={{ value: "#123456" }}>
</RibbonItemDirective>
<RibbonItemDirective type="Button" allowedSizes={RibbonItemSize.Small} buttonSettings={{ iconCss: "e-icons e-bold", content: "Bold" }}>
</RibbonItemDirective>
<RibbonItemDirective type="Button" allowedSizes={RibbonItemSize.Small} buttonSettings={{ iconCss: "e-icons e-italic", content: "Italic" }}>
</RibbonItemDirective>
<RibbonItemDirective type="Button" allowedSizes={RibbonItemSize.Small} buttonSettings={{ iconCss: "e-icons e-underline", content: "Underline" }}>
</RibbonItemDirective>
<RibbonItemDirective type="Button" allowedSizes={RibbonItemSize.Small} buttonSettings={{ iconCss: "e-icons e-strikethrough", content: "Strikethrough" }}>
</RibbonItemDirective>
<RibbonItemDirective type="Button" allowedSizes={RibbonItemSize.Small} buttonSettings={{ iconCss: "e-icons e-change-case", content: "Change Case" }}>
</RibbonItemDirective>
</RibbonItemsDirective>
</RibbonCollectionDirective>
</RibbonCollectionsDirective>
</RibbonGroupDirective>
<RibbonGroupDirective header="Editor" isCollapsible={false}>
<RibbonCollectionsDirective>
<RibbonCollectionDirective>
<RibbonItemsDirective>
<RibbonItemDirective type="Button" allowedSizes={RibbonItemSize.Large} buttonSettings={{ iconCss: "e-icons e-edit", content: "Editor" }}>
</RibbonItemDirective>
</RibbonItemsDirective>
</RibbonCollectionDirective>
</RibbonCollectionsDirective>
</RibbonGroupDirective>
</RibbonGroupsDirective>
</RibbonTabDirective>
<RibbonTabDirective header="Insert">
<RibbonGroupsDirective>
<RibbonGroupDirective header="Tables" isCollapsible={false}>
<RibbonCollectionsDirective>
<RibbonCollectionDirective>
<RibbonItemsDirective>
<RibbonItemDirective type="DropDown" allowedSizes={RibbonItemSize.Large} dropDownSettings={{ iconCss: "e-icons e-table", items: tableOptions, content: "Table" }}>
</RibbonItemDirective>
</RibbonItemsDirective>
</RibbonCollectionDirective>
</RibbonCollectionsDirective>
</RibbonGroupDirective>
<RibbonGroupDirective header="Illustration" id="illustration" groupIconCss="e-icons e-image" enableGroupOverflow={true} showLauncherIcon={true} orientation="Row">
<RibbonCollectionsDirective>
<RibbonCollectionDirective>
<RibbonItemsDirective>
<RibbonItemDirective type="Button" buttonSettings={{ iconCss: "e-icons e-chart", content: "Charts" }}>
</RibbonItemDirective>
</RibbonItemsDirective>
</RibbonCollectionDirective>
</RibbonCollectionsDirective>
</RibbonGroupDirective>
<RibbonGroupDirective header="Media" isCollapsible={false}>
<RibbonCollectionsDirective>
<RibbonCollectionDirective>
<RibbonItemsDirective>
<RibbonItemDirective type="Template" itemTemplate={template}>
</RibbonItemDirective>
</RibbonItemsDirective>
</RibbonCollectionDirective>
</RibbonCollectionsDirective>
</RibbonGroupDirective>
</RibbonGroupsDirective>
</RibbonTabDirective>
<RibbonTabDirective header="View">
<RibbonGroupsDirective>
<RibbonGroupDirective header="Views" groupIconCss="e-icons e-print" orientation="Row">
<RibbonCollectionsDirective>
<RibbonCollectionDirective>
<RibbonItemsDirective>
<RibbonItemDirective type="Button" buttonSettings={{ iconCss: "e-icons e-print", content: "Print Layout" }}>
</RibbonItemDirective>
<RibbonItemDirective type="Button" buttonSettings={{ iconCss: "e-icons e-web-layout", content: "Web Layout" }}>
</RibbonItemDirective>
</RibbonItemsDirective>
</RibbonCollectionDirective>
</RibbonCollectionsDirective>
</RibbonGroupDirective>
<RibbonGroupDirective header="Show" isCollapsible={true}>
<RibbonCollectionsDirective>
<RibbonCollectionDirective>
<RibbonItemsDirective>
<RibbonItemDirective type="CheckBox" checkBoxSettings={{ label: "Ruler", checked: false }}>
</RibbonItemDirective>
<RibbonItemDirective type="CheckBox" checkBoxSettings={{ label: "Gridlines", checked: false }}>
</RibbonItemDirective>
<RibbonItemDirective type="CheckBox" checkBoxSettings={{ label: "Navigation Pane", checked: true }}>
</RibbonItemDirective>
</RibbonItemsDirective>
</RibbonCollectionDirective>
</RibbonCollectionsDirective>
</RibbonGroupDirective>
</RibbonGroupsDirective>
</RibbonTabDirective>
</RibbonTabsDirective>
<Inject services={[RibbonFileMenu, RibbonColorPicker]} />
</RibbonComponent>
);
}
export default App;
ReactDom.render(<App />, document.getElementById("element"));/* Represents the styles for loader */
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
.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;
}
/* Represents the styles for Ribbon group */
.font-group .e-ribbon-group-content {
justify-content: center;
}