Merge pull request #2082 from syncfusion-content/1002931-RibbonCSSD

1002931: Update the CSS references for Ribbon mode

Author: MohanaselvamJothi

Document-Processing/Word/Word-Processor/angular/ribbon.md

@@ -16,13 +16,28 @@ You can switch between the classic **Toolbar** and the new **Ribbon** UI, and yo
 
 ## Enable Ribbon Mode
 
-To enable Ribbon in Angular Document Editor, use the [`toolbarMode`](https://ej2.syncfusion.com/angular/documentation/api/document-editor-container/#toolbarmode) property of `DocumentEditorContainer`. The available toolbar modes are:
+To enable Ribbon in Angular Document Editor, use the [`toolbarMode`](https://ej2.syncfusion.com/angular/documentation/api/document-editor-container/index-default#toolbarmode) property of `DocumentEditorContainer`. The available toolbar modes are:
 
 - **'Toolbar'** - The traditional toolbar UI.
 - **'Ribbon'** - The Ribbon UI, which provides a tabbed interface with grouped commands.
 
 By default, `toolbarMode` is `Toolbar`.
 
+To use Ribbon mode in the Document Editor, include the necessary CSS files from the **../node_modules/@syncfusion**  package folder. This can be referenced in [src/styles.css] using following code.
+
+```css
+@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-lists/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-navigations/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-angular-documenteditor/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-ribbon/styles/material.css';/* Required for Ribbon */
+```
+
 The following code shows the how to enable the `Ribbon` in Document Editor.
 
 ```typescript

Document-Processing/Word/Word-Processor/react/ribbon.md

@@ -23,6 +23,21 @@ To enable Ribbon in React Document Editor, use the [`toolbarMode`](https://ej2.s
 
 By default, `toolbarMode` is `Toolbar`.
 
+To use Ribbon mode, add Document Editor component and its dependent component styles available in **../node_modules/@syncfusion** package folder. This can be added as reference in **src/App.css**.
+
+```css
+@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-lists/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-navigations/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';
+@import "../node_modules/@syncfusion/ej2-documenteditor/styles/material.css";
+@import '../node_modules/@syncfusion/ej2-ribbon/styles/material.css';/* Required for Ribbon */
+```
+
 The following code shows the how to enable the `Ribbon` in Document Editor.
 
 {% raw %}

Document-Processing/Word/Word-Processor/vue/ribbon.md

@@ -23,6 +23,21 @@ To enable Ribbon in Document Editor, use the [`toolbarMode`](https://ej2.syncfus
 
 By default, `toolbarMode` is `Toolbar`.
 
+To use Ribbon mode, add Document Editor component and its dependent component styles available in **../node_modules/@syncfusion** package folder. This can be added as reference in **src/App.vue**.
+
+```css
+@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-lists/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-navigations/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';
+@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';
+@import "../node_modules/@syncfusion/ej2-documenteditor/styles/material.css";
+@import '../node_modules/@syncfusion/ej2-ribbon/styles/material.css';/* Required for Ribbon */
+```
+
 The following code shows the how to enable the `Ribbon` in Document Editor.
 
 {% tabs %}