Contents
Getting Started
8 May 202524 minutes to read
This section explains how to create a simple Ribbon, and configure its available functionalities in React.
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 easily set up a React application, use create-vite-app, which provides a faster development environment, smaller bundle sizes, and optimized builds compared to traditional tools like create-react-app. For detailed steps, refer to the Vite installation instructions. Vite sets up your environment using JavaScript and optimizes your application for production.
Note: To create a React application using
create-react-app, refer to this documentation for more details.
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 the available Essential® JS 2 packages are published in npmjs.com public registry.
To install Ribbon component, 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 Style sheet to the Application
Add Ribbon component’s styles as given below in App.css.
@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";Add Ribbon to the project
Now, you can create Ribbon component in the application. Add Ribbon component in src/App.tsx file using the following code snippet.
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 />);Adding Ribbon Tab
In Ribbon, the options are arranged in tabs for easy access. You can use the RibbonTabDirective to define the ribbon tab like below.
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 />);Adding Ribbon Group
To define a ribbon group under each tab, you can use the RibbonGroupDirective like below. The orientation property of ribbon group defines whether the collection of items will be rendered column-wise or row-wise.
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 />);Adding Ribbon Item
You can use the RibbonCollectionDirective to define each ribbon collection that contains one or more items. To define each ribbon item, you can use the RibbonItemDirective and the type property to specify the type of component to be rendered, like a button, a drop-down button, a combo box, and more.
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;
}