Ribbon Resizing
11 Jun 202412 minutes to read
The Ribbon effectively resizes the ribbon elements while being resized. It extends when the ribbon size is increased and collapses when the ribbon size is decreased. The resizing can be performed in both the classic and simplified modes. Also, we have an option to resize the ribbon elements in the custom order.
In classic mode on resizing, the items size will be changed based on the available width of the tab content from the order of Large-> Medium-> Small and viceversa.
In simplified mode on resizing, the items size will be changed based on the available width of the tab content from the order of Medium-> Small and viceversa.
Defining items allowed size
You can use the allowedSizes property to maintain a constant size for an item. If allowedSizes is set, it keeps the size constant even when being resized.
<template>
<ejs-ribbon id="ribbon">
<e-ribbon-tabs>
<e-ribbon-tab header="Home">
<e-ribbon-groups>
<e-ribbon-group>
<e-ribbon-collections>
<e-ribbon-collection>
<e-ribbon-items>
<e-ribbon-item type="SplitButton" :allowedSizes="largeSize"
:splitButtonSettings="pasteButton">
</e-ribbon-item>
</e-ribbon-items>
</e-ribbon-collection>
<e-ribbon-collection>
<e-ribbon-items>
<e-ribbon-item type="Button" :allowedSizes="mediumSize" :buttonSettings="cutButton">
</e-ribbon-item>
<e-ribbon-item type="Button" :allowedSizes="smallSize" :buttonSettings="copyButton">
</e-ribbon-item>
</e-ribbon-items>
</e-ribbon-collection>
</e-ribbon-collections>
</e-ribbon-group>
</e-ribbon-groups>
</e-ribbon-tab>
</e-ribbon-tabs>
</ejs-ribbon>
</template>
<script setup>
import { RibbonItemSize } from "@syncfusion/ej2-vue-ribbon";
import { RibbonComponent as EjsRibbon, RibbonGroupDirective as ERibbonGroup, RibbonGroupsDirective as ERibbonGroups, RibbonCollectionsDirective as ERibbonCollections, RibbonCollectionDirective as ERibbonCollection, RibbonItemsDirective as ERibbonItems, RibbonItemDirective as ERibbonItem, RibbonTabsDirective as ERibbonTabs, RibbonTabDirective as ERibbonTab } from "@syncfusion/ej2-vue-ribbon";
const largeSize = RibbonItemSize.Large;
const mediumSize = RibbonItemSize.Medium;
const smallSize = RibbonItemSize.Small;
const pasteButton = {
iconCss: "e-icons e-paste", content: "Paste",
items: [{ text: "Keep Source Format" }, { text: "Merge format" }, { text: "Keep text only" }]
};
const cutButton = { iconCss: "e-icons e-cut", content: "Cut" };
const copyButton = { iconCss: "e-icons e-copy", content: "Copy" };
</script>
<style>
@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-vue-ribbon/styles/material.css";
</style><template>
<ejs-ribbon id="ribbon">
<e-ribbon-tabs>
<e-ribbon-tab header="Home">
<e-ribbon-groups>
<e-ribbon-group>
<e-ribbon-collections>
<e-ribbon-collection>
<e-ribbon-items>
<e-ribbon-item type="SplitButton" :allowedSizes="largeSize" :splitButtonSettings="pasteButton">
</e-ribbon-item>
</e-ribbon-items>
</e-ribbon-collection>
<e-ribbon-collection>
<e-ribbon-items>
<e-ribbon-item type="Button" :allowedSizes="mediumSize" :buttonSettings="cutButton">
</e-ribbon-item>
<e-ribbon-item type="Button" :allowedSizes="smallSize" :buttonSettings="copyButton">
</e-ribbon-item>
</e-ribbon-items>
</e-ribbon-collection>
</e-ribbon-collections>
</e-ribbon-group>
</e-ribbon-groups>
</e-ribbon-tab>
</e-ribbon-tabs>
</ejs-ribbon>
</template>
<script>
import { RibbonItemSize } from "@syncfusion/ej2-vue-ribbon";
import { RibbonComponent, RibbonGroupDirective, RibbonGroupsDirective, RibbonCollectionsDirective, RibbonCollectionDirective, RibbonItemsDirective, RibbonItemDirective, RibbonTabsDirective, RibbonTabDirective } from "@syncfusion/ej2-vue-ribbon";
export default {
name: "App",
components: {
"ejs-ribbon": RibbonComponent,
"e-ribbon-tabs": RibbonTabsDirective,
"e-ribbon-tab": RibbonTabDirective,
"e-ribbon-groups": RibbonGroupsDirective,
"e-ribbon-group": RibbonGroupDirective,
"e-ribbon-collections": RibbonCollectionsDirective,
"e-ribbon-collection": RibbonCollectionDirective,
"e-ribbon-items": RibbonItemsDirective,
"e-ribbon-item": RibbonItemDirective
},
data: function () {
return {
largeSize: RibbonItemSize.Large,
mediumSize: RibbonItemSize.Medium,
smallSize: RibbonItemSize.Small,
pasteButton:{
iconCss: "e-icons e-paste", content: "Paste",
items: [{ text: "Keep Source Format" }, { text: "Merge format" }, { text: "Keep text only" }]
},
cutButton: { iconCss: "e-icons e-cut", content: "Cut" },
copyButton: { iconCss: "e-icons e-copy", content: "Copy" }
};
}
};
</script>
<style>
@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-vue-ribbon/styles/material.css";
</style>Defining items active size
You can use the activeSize property to define the item size intially, before it is being resized. When resized the activeSize property is updated based on the ribbon’s overflow state, which is determined by the allowedSizes property being configured. By default, the value is Medium.