Modules in Ribbon component

11 Jun 20242 minutes to read

The following modules are available in Ribbon. If the module injection type is selective, manual injection is required to extend the Ribbon’s functionality.

Module	Description	Module Injection Type
RibbonButton	To use the built-in button as a ribbon item.	default
RibbonCheckBox	To use the built-in checkbox as a ribbon item.	default
RibbonDropDown	To use the built-in dropdown button as a ribbon item.	default
RibbonSplitButton	To use the built-in split button as a ribbon item.	default
RibbonComboBox	To use the built-in combobox as a ribbon item.	default
RibbonColorPicker	Inject this module to use the built-in colorpicker as a ribbon item.	selective
RibbonGallery	Inject this module to use the gallery as a ribbon item.	selective
RibbonFileMenu	Inject this module to use the file menu feature.	selective
RibbonBackstage	Inject this module to use the backstage view feature.	selective
RibbonContextualTab	Inject this module to use the contextual tab feature.	selective
RibbonKeyTip	Inject this module to use the keytip feature.	selective

These selective modules should be injected into the provide section and use ribbon as a key of the object.

<template>
  <ejs-ribbon>
    // Render Tabs here
  </ejs-ribbon>
</template>

<script setup>
import { provide } from "vue";
    import { RibbonFileMenu, RibbonColorPicker } from "@syncfusion/ej2-vue-ribbon";
    export default {
        provide('ribbon',  [RibbonFileMenu, RibbonColorPicker]);,
    };
</script>