Contents
Gallery Items in Vue Ribbon component
11 Jun 202424 minutes to read
The Ribbon supports Gallery view which allows users to perform specific actions by displaying a collection of related items, including icons, content, or images. You can render the gallery item by setting the type property to Gallery and customize the it by using the RibbonGallerySettingsModel, which provides options such as groups, itemCount, popupHeight, popupWidth and more.
Groups
You can render the groups inside the gallery items by using groups property and customize the groups using RibbonGalleryGroupModel, which provides options such as items, cssClass, header and more.
Adding items
You can render the gallery items by using items property and customize using the RibbonGalleryItemModel, which provides options such as content, iconCss, disabled and more.
<template>
<ejs-ribbon>
<e-ribbon-tabs>
<e-ribbon-tab header="Home">
<e-ribbon-groups>
<e-ribbon-group header="Clipboard" groupIconCss="e-icons e-paste">
<e-ribbon-collections>
<e-ribbon-collection>
<e-ribbon-items>
<e-ribbon-item type="SplitButton" :splitButtonSettings="pasteSettigs">
</e-ribbon-item>
</e-ribbon-items>
</e-ribbon-collection>
<e-ribbon-collection>
<e-ribbon-items>
<e-ribbon-item type="Button" :buttonSettings="cutButton">
</e-ribbon-item>
<e-ribbon-item type="Button" :buttonSettings="copyButton">
</e-ribbon-item>
<e-ribbon-item type="Button" :buttonSettings="formatButton">
</e-ribbon-item>
</e-ribbon-items>
</e-ribbon-collection>
</e-ribbon-collections>
</e-ribbon-group>
<e-ribbon-group header="Gallery">
<e-ribbon-collections>
<e-ribbon-collection>
<e-ribbon-items>
<e-ribbon-item type="Gallery" :gallerySettings="gallerySettings">
</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 { provide } from "vue";
import { RibbonGallery } 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";
provide('ribbon', [RibbonGallery]);
const cutButton = { iconCss: "e-icons e-cut", content: "Cut" };
const copyButton = { iconCss: "e-icons e-copy", content: "Copy" };
const formatButton = { iconCss: "e-icons e-format-painter", content: "Format Painter" };
const pasteSettigs = {
iconCss: "e-icons e-paste", content: "Paste",
items: [{ text: "Keep Source Format" }, { text: "Merge format" }, { text: "Keep text only" }]
};
const gallerySettings = {
groups: [{
header: 'Styles',
items: [{
content: 'Normal',
}, {
content: 'No Spacing'
}, {
content: 'Heading 1'
}, {
content: 'Heading 2'
}]
}]
};
</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>
<e-ribbon-tabs>
<e-ribbon-tab header="Home">
<e-ribbon-groups>
<e-ribbon-group header="Clipboard" groupIconCss="e-icons e-paste">
<e-ribbon-collections>
<e-ribbon-collection>
<e-ribbon-items>
<e-ribbon-item type="SplitButton" :splitButtonSettings="pasteSettigs">
</e-ribbon-item>
</e-ribbon-items>
</e-ribbon-collection>
<e-ribbon-collection>
<e-ribbon-items>
<e-ribbon-item type="Button" :buttonSettings="cutButton">
</e-ribbon-item>
<e-ribbon-item type="Button" :buttonSettings="copyButton">
</e-ribbon-item>
<e-ribbon-item type="Button" :buttonSettings="formatButton">
</e-ribbon-item>
</e-ribbon-items>
</e-ribbon-collection>
</e-ribbon-collections>
</e-ribbon-group>
<e-ribbon-group header="Gallery">
<e-ribbon-collections>
<e-ribbon-collection>
<e-ribbon-items>
<e-ribbon-item type="Gallery" :gallerySettings="gallerySettings">
</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 { RibbonGallery } 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
},
provide: {
ribbon: [RibbonGallery]
},
data: function () {
return {
cutButton: { iconCss: "e-icons e-cut", content: "Cut" },
copyButton: { iconCss: "e-icons e-copy", content: "Copy" },
formatButton: { iconCss: "e-icons e-format-painter", content: "Format Painter" },
pasteSettigs: {
iconCss: "e-icons e-paste", content: "Paste",
items: [{ text: "Keep Source Format" }, { text: "Merge format" }, { text: "Keep text only" }]
},
gallerySettings: {
groups: [{
header: 'Styles',
items: [{
content: 'Normal',
}, {
content: 'No Spacing'
}, {
content: 'Heading 1'
}, {
content: 'Heading 2'
}]
}]
}
};
}
};
</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>Adding content
You can use the content property to define the text content for the gallery item.
<template>
<ejs-ribbon>
<e-ribbon-tabs>
<e-ribbon-tab header="Home">
<e-ribbon-groups>
<e-ribbon-group header="Clipboard" groupIconCss="e-icons e-paste">
<e-ribbon-collections>
<e-ribbon-collection>
<e-ribbon-items>
<e-ribbon-item type="SplitButton" :splitButtonSettings="pasteSettigs">
</e-ribbon-item>
</e-ribbon-items>
</e-ribbon-collection>
<e-ribbon-collection>
<e-ribbon-items>
<e-ribbon-item type="Button" :buttonSettings="cutButton">
</e-ribbon-item>
<e-ribbon-item type="Button" :buttonSettings="copyButton">
</e-ribbon-item>
<e-ribbon-item type="Button" :buttonSettings="formatButton">
</e-ribbon-item>
</e-ribbon-items>
</e-ribbon-collection>
</e-ribbon-collections>
</e-ribbon-group>
<e-ribbon-group header="Gallery">
<e-ribbon-collections>
<e-ribbon-collection>
<e-ribbon-items>
<e-ribbon-item type="Gallery" :gallerySettings="gallerySettings">
</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 { provide } from "vue";
import { RibbonGallery } 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";
provide('ribbon', [RibbonGallery]);
const cutButton = { iconCss: "e-icons e-cut", content: "Cut" };
const copyButton = { iconCss: "e-icons e-copy", content: "Copy" };
const formatButton = { iconCss: "e-icons e-format-painter", content: "Format Painter" };
const pasteSettigs = {
iconCss: "e-icons e-paste", content: "Paste",
items: [{ text: "Keep Source Format" }, { text: "Merge format" }, { text: "Keep text only" }]
};
const gallerySettings = {
groups: [{
header: 'Styles',
items: [{
content: 'Normal',
}, {
content: 'No Spacing'
}, {
content: 'Heading 1'
}, {
content: 'Heading 2'
}]
}]
};
</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>
<e-ribbon-tabs>
<e-ribbon-tab header="Home">
<e-ribbon-groups>
<e-ribbon-group header="Clipboard" groupIconCss="e-icons e-paste">
<e-ribbon-collections>
<e-ribbon-collection>
<e-ribbon-items>
<e-ribbon-item type="SplitButton" :splitButtonSettings="pasteSettigs">
</e-ribbon-item>
</e-ribbon-items>
</e-ribbon-collection>
<e-ribbon-collection>
<e-ribbon-items>
<e-ribbon-item type="Button" :buttonSettings="cutButton">
</e-ribbon-item>
<e-ribbon-item type="Button" :buttonSettings="copyButton">
</e-ribbon-item>
<e-ribbon-item type="Button" :buttonSettings="formatButton">
</e-ribbon-item>
</e-ribbon-items>
</e-ribbon-collection>
</e-ribbon-collections>
</e-ribbon-group>
<e-ribbon-group header="Gallery">
<e-ribbon-collections>
<e-ribbon-collection>
<e-ribbon-items>
<e-ribbon-item type="Gallery" :gallerySettings="gallerySettings">
</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 { RibbonGallery } 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
},
provide: {
ribbon: [RibbonGallery]
},
data: function () {
return {
cutButton: { iconCss: "e-icons e-cut", content: "Cut" },
copyButton: { iconCss: "e-icons e-copy", content: "Copy" },
formatButton: { iconCss: "e-icons e-format-painter", content: "Format Painter" },
pasteSettigs: {
iconCss: "e-icons e-paste", content: "Paste",
items: [{ text: "Keep Source Format" }, { text: "Merge format" }, { text: "Keep text only" }]
},
gallerySettings: {
groups: [{
header: 'Styles',
items: [{
content: 'Normal',
}, {
content: 'No Spacing'
}, {
content: 'Heading 1'
}, {
content: 'Heading 2'
}]
}]
}
};
}
};
</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>Adding icons
You can use the iconCss property to define the icons for the gallery item.
<template>
<ejs-ribbon>
<e-ribbon-tabs>
<e-ribbon-tab header="Home">
<e-ribbon-groups>
<e-ribbon-group header="Clipboard" groupIconCss="e-icons e-paste">
<e-ribbon-collections>
<e-ribbon-collection>
<e-ribbon-items>
<e-ribbon-item type="SplitButton" :splitButtonSettings="pasteSettigs">
</e-ribbon-item>
</e-ribbon-items>
</e-ribbon-collection>
<e-ribbon-collection>
<e-ribbon-items>
<e-ribbon-item type="Button" :buttonSettings="cutButton">
</e-ribbon-item>
<e-ribbon-item type="Button" :buttonSettings="copyButton">
</e-ribbon-item>
<e-ribbon-item type="Button" :buttonSettings="formatButton">
</e-ribbon-item>
</e-ribbon-items>
</e-ribbon-collection>
</e-ribbon-collections>
</e-ribbon-group>
<e-ribbon-group header="Gallery">
<e-ribbon-collections>
<e-ribbon-collection>
<e-ribbon-items>
<e-ribbon-item type="Gallery" :gallerySettings="gallerySettings">
</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 { provide } from "vue";
import { RibbonGallery } 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";
provide('ribbon', [RibbonGallery]);
const cutButton = { iconCss: "e-icons e-cut", content: "Cut" };
const copyButton = { iconCss: "e-icons e-copy", content: "Copy" };
const formatButton = { iconCss: "e-icons e-format-painter", content: "Format Painter" };
const pasteSettigs = {
iconCss: "e-icons e-paste", content: "Paste",
items: [{ text: "Keep Source Format" }, { text: "Merge format" }, { text: "Keep text only" }]
};
const gallerySettings = {
groups: [{
header: 'Transitions',
itemHeight: '70',
items: [{
content: 'None',
iconCss: 'e-icons e-rectangle'
}, {
content: 'Fade',
iconCss: 'e-icons e-send-backward'
}, {
content: 'Reveal',
iconCss: 'e-icons e-bring-forward'
}, {
content: 'Zoom',
iconCss: 'e-icons e-zoom-to-fit'
}]
}]
};
</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>
<e-ribbon-tabs>
<e-ribbon-tab header="Home">
<e-ribbon-groups>
<e-ribbon-group header="Clipboard" groupIconCss="e-icons e-paste">
<e-ribbon-collections>
<e-ribbon-collection>
<e-ribbon-items>
<e-ribbon-item type="SplitButton" :splitButtonSettings="pasteSettigs">
</e-ribbon-item>
</e-ribbon-items>
</e-ribbon-collection>
<e-ribbon-collection>
<e-ribbon-items>
<e-ribbon-item type="Button" :buttonSettings="cutButton">
</e-ribbon-item>
<e-ribbon-item type="Button" :buttonSettings="copyButton">
</e-ribbon-item>
<e-ribbon-item type="Button" :buttonSettings="formatButton">
</e-ribbon-item>
</e-ribbon-items>
</e-ribbon-collection>
</e-ribbon-collections>
</e-ribbon-group>
<e-ribbon-group header="Gallery">
<e-ribbon-collections>
<e-ribbon-collection>
<e-ribbon-items>
<e-ribbon-item type="Gallery" :gallerySettings="gallerySettings">
</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 { RibbonGallery } 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
},
provide: {
ribbon: [RibbonGallery]
},
data: function () {
return {
cutButton: { iconCss: "e-icons e-cut", content: "Cut" },
copyButton: { iconCss: "e-icons e-copy", content: "Copy" },
formatButton: { iconCss: "e-icons e-format-painter", content: "Format Painter" },
pasteSettigs: {
iconCss: "e-icons e-paste", content: "Paste",
items: [{ text: "Keep Source Format" }, { text: "Merge format" }, { text: "Keep text only" }]
},
gallerySettings: {
groups: [{
header: 'Transitions',
itemHeight: '70',
items: [{
content: 'None',
iconCss: 'e-icons e-rectangle'
}, {
content: 'Fade',
iconCss: 'e-icons e-send-backward'
}, {
content: 'Reveal',
iconCss: 'e-icons e-bring-forward'
}, {
content: 'Zoom',
iconCss: 'e-icons e-zoom-to-fit'
}]
}]
}
};
}
};
</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>Adding html attributes
You can use the htmlAttributes property to add HTML attributes to the Ribbon gallery item.
The following sample showcases how to add title attribute to the gallery item using htmlAttributes property.
<template>
<ejs-ribbon>
<e-ribbon-tabs>
<e-ribbon-tab header="Home">
<e-ribbon-groups>
<e-ribbon-group header="Clipboard" groupIconCss="e-icons e-paste">
<e-ribbon-collections>
<e-ribbon-collection>
<e-ribbon-items>
<e-ribbon-item type="SplitButton" :splitButtonSettings="pasteSettigs">
</e-ribbon-item>
</e-ribbon-items>
</e-ribbon-collection>
<e-ribbon-collection>
<e-ribbon-items>
<e-ribbon-item type="Button" :buttonSettings="cutButton">
</e-ribbon-item>
<e-ribbon-item type="Button" :buttonSettings="copyButton">
</e-ribbon-item>
<e-ribbon-item type="Button" :buttonSettings="formatButton">
</e-ribbon-item>
</e-ribbon-items>
</e-ribbon-collection>
</e-ribbon-collections>
</e-ribbon-group>
<e-ribbon-group header="Gallery">
<e-ribbon-collections>
<e-ribbon-collection>
<e-ribbon-items>
<e-ribbon-item type="Gallery" :gallerySettings="gallerySettings">
</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 { provide } from "vue";
import { RibbonGallery } 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";
provide('ribbon', [RibbonGallery]);
const cutButton = { iconCss: "e-icons e-cut", content: "Cut" };
const copyButton = { iconCss: "e-icons e-copy", content: "Copy" };
const formatButton = { iconCss: "e-icons e-format-painter", content: "Format Painter" };
const pasteSettigs = {
iconCss: "e-icons e-paste", content: "Paste",
items: [{ text: "Keep Source Format" }, { text: "Merge format" }, { text: "Keep text only" }]
};
const gallerySettings = {
groups: [{
header: 'Styles',
items: [{
content: 'Normal',
htmlAttributes: { title: "Normal" }
}, {
content: 'No Spacing',
htmlAttributes: { title: "No Spacing" }
}, {
content: 'Heading 1',
htmlAttributes: { title: "Heading 1" }
}, {
content: 'Heading 2',
htmlAttributes: { title: "Heading 2" }
}]
}]
};
</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>
<e-ribbon-tabs>
<e-ribbon-tab header="Home">
<e-ribbon-groups>
<e-ribbon-group header="Clipboard" groupIconCss="e-icons e-paste">
<e-ribbon-collections>
<e-ribbon-collection>
<e-ribbon-items>
<e-ribbon-item type="SplitButton" :splitButtonSettings="pasteSettigs">
</e-ribbon-item>
</e-ribbon-items>
</e-ribbon-collection>
<e-ribbon-collection>
<e-ribbon-items>
<e-ribbon-item type="Button" :buttonSettings="cutButton">
</e-ribbon-item>
<e-ribbon-item type="Button" :buttonSettings="copyButton">
</e-ribbon-item>
<e-ribbon-item type="Button" :buttonSettings="formatButton">
</e-ribbon-item>
</e-ribbon-items>
</e-ribbon-collection>
</e-ribbon-collections>
</e-ribbon-group>
<e-ribbon-group header="Gallery">
<e-ribbon-collections>
<e-ribbon-collection>
<e-ribbon-items>
<e-ribbon-item type="Gallery" :gallerySettings="gallerySettings">
</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 { RibbonGallery } 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
},
provide: {
ribbon: [RibbonGallery]
},
data: function () {
return {
cutButton: { iconCss: "e-icons e-cut", content: "Cut" },
copyButton: { iconCss: "e-icons e-copy", content: "Copy" },
formatButton: { iconCss: "e-icons e-format-painter", content: "Format Painter" },
pasteSettigs: {
iconCss: "e-icons e-paste", content: "Paste",
items: [{ text: "Keep Source Format" }, { text: "Merge format" }, { text: "Keep text only" }]
},
gallerySettings: {
groups: [{
header: 'Styles',
items: [{
content: 'Normal',
htmlAttributes: { title: "Normal" }
}, {
content: 'No Spacing',
htmlAttributes: { title: "No Spacing" }
}, {
content: 'Heading 1',
htmlAttributes: { title: "Heading 1" }
}, {
content: 'Heading 2',
htmlAttributes: { title: "Heading 2" }
}]
}]
}
};
}
};
</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>CSS class
You can use the cssClass property to customize the gallery item.
The following sample showcases how to customize the appearance of each gallery item using the cssClass property .
<template>
<ejs-ribbon>
<e-ribbon-tabs>
<e-ribbon-tab header="Home">
<e-ribbon-groups>
<e-ribbon-group header="Clipboard" groupIconCss="e-icons e-paste">
<e-ribbon-collections>
<e-ribbon-collection>
<e-ribbon-items>
<e-ribbon-item type="SplitButton" :splitButtonSettings="pasteSettigs">
</e-ribbon-item>
</e-ribbon-items>
</e-ribbon-collection>
<e-ribbon-collection>
<e-ribbon-items>
<e-ribbon-item type="Button" :buttonSettings="cutButton">
</e-ribbon-item>
<e-ribbon-item type="Button" :buttonSettings="copyButton">
</e-ribbon-item>
<e-ribbon-item type="Button" :buttonSettings="formatButton">
</e-ribbon-item>
</e-ribbon-items>
</e-ribbon-collection>
</e-ribbon-collections>
</e-ribbon-group>
<e-ribbon-group header="Gallery">
<e-ribbon-collections>
<e-ribbon-collection>
<e-ribbon-items>
<e-ribbon-item type="Gallery" :gallerySettings="gallerySettings">
</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 { provide } from "vue";
import { RibbonGallery } 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";
provide('ribbon', [RibbonGallery]);
const cutButton = { iconCss: "e-icons e-cut", content: "Cut" };
const copyButton = { iconCss: "e-icons e-copy", content: "Copy" };
const formatButton = { iconCss: "e-icons e-format-painter", content: "Format Painter" };
const pasteSettigs = {
iconCss: "e-icons e-paste", content: "Paste",
items: [{ text: "Keep Source Format" }, { text: "Merge format" }, { text: "Keep text only" }]
};
const gallerySettings = {
groups: [{
header: 'Good, Bad and Neutral',
items: [{
content: 'Normal',
cssClass: 'normal'
}, {
content: 'Bad',
cssClass: 'bad'
}, {
content: 'Good',
cssClass: 'good'
}, {
content: 'Neutral',
cssClass: 'neutral'
}]
}]
};
</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";
.e-ribbon-gallery-item {
margin: 5px;
}
.e-ribbon-gallery-item.normal{
background: #f0f0f0;
color: #333;
}
.e-ribbon-gallery-item.bad {
background: #ffb6b6;
color: #800000;
}
.e-ribbon-gallery-item.good {
background: #c7ebc9;
color: #004d00;
}
.e-ribbon-gallery-item.neutral {
background: #eedd9d;
color: #6c5429;
}
</style><template>
<ejs-ribbon>
<e-ribbon-tabs>
<e-ribbon-tab header="Home">
<e-ribbon-groups>
<e-ribbon-group header="Clipboard" groupIconCss="e-icons e-paste">
<e-ribbon-collections>
<e-ribbon-collection>
<e-ribbon-items>
<e-ribbon-item type="SplitButton" :splitButtonSettings="pasteSettigs">
</e-ribbon-item>
</e-ribbon-items>
</e-ribbon-collection>
<e-ribbon-collection>
<e-ribbon-items>
<e-ribbon-item type="Button" :buttonSettings="cutButton">
</e-ribbon-item>
<e-ribbon-item type="Button" :buttonSettings="copyButton">
</e-ribbon-item>
<e-ribbon-item type="Button" :buttonSettings="formatButton">
</e-ribbon-item>
</e-ribbon-items>
</e-ribbon-collection>
</e-ribbon-collections>
</e-ribbon-group>
<e-ribbon-group header="Gallery">
<e-ribbon-collections>
<e-ribbon-collection>
<e-ribbon-items>
<e-ribbon-item type="Gallery" :gallerySettings="gallerySettings">
</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 { RibbonGallery } 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
},
provide: {
ribbon: [RibbonGallery]
},
data: function () {
return {
cutButton: { iconCss: "e-icons e-cut", content: "Cut" },
copyButton: { iconCss: "e-icons e-copy", content: "Copy" },
formatButton: { iconCss: "e-icons e-format-painter", content: "Format Painter" },
pasteSettigs: {
iconCss: "e-icons e-paste", content: "Paste",
items: [{ text: "Keep Source Format" }, { text: "Merge format" }, { text: "Keep text only" }]
},
gallerySettings: {
groups: [{
header: 'Good, Bad and Neutral',
items: [{
content: 'Normal',
cssClass: 'normal'
}, {
content: 'Bad',
cssClass: 'bad'
}, {
content: 'Good',
cssClass: 'good'
}, {
content: 'Neutral',
cssClass: 'neutral'
}]
}]
}
};
}
};
</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";
.e-ribbon-gallery-item {
margin: 5px;
}
.e-ribbon-gallery-item.normal{
background: #f0f0f0;
color: #333;
}
.e-ribbon-gallery-item.bad {
background: #ffb6b6;
color: #800000;
}
.e-ribbon-gallery-item.good {
background: #c7ebc9;
color: #004d00;
}
.e-ribbon-gallery-item.neutral {
background: #eedd9d;
color: #6c5429;
}
</style>Disabled
You can use the disabled property to disable the Ribbon gallery item. It prevents the user interaction when set to true. By default, the value is false.
<template>
<ejs-ribbon>
<e-ribbon-tabs>
<e-ribbon-tab header="Home">
<e-ribbon-groups>
<e-ribbon-group header="Clipboard" groupIconCss="e-icons e-paste">
<e-ribbon-collections>
<e-ribbon-collection>
<e-ribbon-items>
<e-ribbon-item type="SplitButton" :splitButtonSettings="pasteSettigs">
</e-ribbon-item>
</e-ribbon-items>
</e-ribbon-collection>
<e-ribbon-collection>
<e-ribbon-items>
<e-ribbon-item type="Button" :buttonSettings="cutButton">
</e-ribbon-item>
<e-ribbon-item type="Button" :buttonSettings="copyButton">
</e-ribbon-item>
<e-ribbon-item type="Button" :buttonSettings="formatButton">
</e-ribbon-item>
</e-ribbon-items>
</e-ribbon-collection>
</e-ribbon-collections>
</e-ribbon-group>
<e-ribbon-group header="Gallery">
<e-ribbon-collections>
<e-ribbon-collection>
<e-ribbon-items>
<e-ribbon-item type="Gallery" :gallerySettings="gallerySettings">
</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 { provide } from "vue";
import { RibbonGallery } 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";
provide('ribbon', [RibbonGallery]);
const cutButton = { iconCss: "e-icons e-cut", content: "Cut" };
const copyButton = { iconCss: "e-icons e-copy", content: "Copy" };
const formatButton = { iconCss: "e-icons e-format-painter", content: "Format Painter" };
const pasteSettigs = {
iconCss: "e-icons e-paste", content: "Paste",
items: [{ text: "Keep Source Format" }, { text: "Merge format" }, { text: "Keep text only" }]
};
const gallerySettings = {
groups: [{
header: 'Styles',
items: [{
content: 'Normal',
disabled: true
}, {
content: 'No Spacing'
}, {
content: 'Heading 1'
}, {
content: 'Heading 2'
}]
}]
};
</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>
<e-ribbon-tabs>
<e-ribbon-tab header="Home">
<e-ribbon-groups>
<e-ribbon-group header="Clipboard" groupIconCss="e-icons e-paste">
<e-ribbon-collections>
<e-ribbon-collection>
<e-ribbon-items>
<e-ribbon-item type="SplitButton" :splitButtonSettings="pasteSettigs">
</e-ribbon-item>
</e-ribbon-items>
</e-ribbon-collection>
<e-ribbon-collection>
<e-ribbon-items>
<e-ribbon-item type="Button" :buttonSettings="cutButton">
</e-ribbon-item>
<e-ribbon-item type="Button" :buttonSettings="copyButton">
</e-ribbon-item>
<e-ribbon-item type="Button" :buttonSettings="formatButton">
</e-ribbon-item>
</e-ribbon-items>
</e-ribbon-collection>
</e-ribbon-collections>
</e-ribbon-group>
<e-ribbon-group header="Gallery">
<e-ribbon-collections>
<e-ribbon-collection>
<e-ribbon-items>
<e-ribbon-item type="Gallery" :gallerySettings="gallerySettings">
</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 { RibbonGallery } 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
},
provide: {
ribbon: [RibbonGallery]
},
data: function () {
return {
cutButton: { iconCss: "e-icons e-cut", content: "Cut" },
copyButton: { iconCss: "e-icons e-copy", content: "Copy" },
formatButton: { iconCss: "e-icons e-format-painter", content: "Format Painter" },
pasteSettigs: {
iconCss: "e-icons e-paste", content: "Paste",
items: [{ text: "Keep Source Format" }, { text: "Merge format" }, { text: "Keep text only" }]
},
gallerySettings: {
groups: [{
header: 'Styles',
items: [{
content: 'Normal',
disabled: true
}, {
content: 'No Spacing'
}, {
content: 'Heading 1'
}, {
content: 'Heading 2'
}]
}]
}
};
}
};
</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>Custom header
You can use the header property to set header for the group items in the Ribbon gallery popup.
<template>
<ejs-ribbon>
<e-ribbon-tabs>
<e-ribbon-tab header="Home">
<e-ribbon-groups>
<e-ribbon-group header="Clipboard" groupIconCss="e-icons e-paste">
<e-ribbon-collections>
<e-ribbon-collection>
<e-ribbon-items>
<e-ribbon-item type="SplitButton" :splitButtonSettings="pasteSettigs">
</e-ribbon-item>
</e-ribbon-items>
</e-ribbon-collection>
<e-ribbon-collection>
<e-ribbon-items>
<e-ribbon-item type="Button" :buttonSettings="cutButton">
</e-ribbon-item>
<e-ribbon-item type="Button" :buttonSettings="copyButton">
</e-ribbon-item>
<e-ribbon-item type="Button" :buttonSettings="formatButton">
</e-ribbon-item>
</e-ribbon-items>
</e-ribbon-collection>
</e-ribbon-collections>
</e-ribbon-group>
<e-ribbon-group header="Gallery">
<e-ribbon-collections>
<e-ribbon-collection>
<e-ribbon-items>
<e-ribbon-item type="Gallery" :gallerySettings="gallerySettings">
</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 { provide } from "vue";
import { RibbonGallery } 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";
provide('ribbon', [RibbonGallery]);
const cutButton = { iconCss: "e-icons e-cut", content: "Cut" };
const copyButton = { iconCss: "e-icons e-copy", content: "Copy" };
const formatButton = { iconCss: "e-icons e-format-painter", content: "Format Painter" };
const pasteSettigs = {
iconCss: "e-icons e-paste", content: "Paste",
items: [{ text: "Keep Source Format" }, { text: "Merge format" }, { text: "Keep text only" }]
};
const gallerySettings = {
groups: [{
header: 'Styles',
items: [{
content: 'Normal',
}, {
content: 'No Spacing'
}, {
content: 'Heading 1'
}, {
content: 'Heading 2'
}]
}]
};
</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>
<e-ribbon-tabs>
<e-ribbon-tab header="Home">
<e-ribbon-groups>
<e-ribbon-group header="Clipboard" groupIconCss="e-icons e-paste">
<e-ribbon-collections>
<e-ribbon-collection>
<e-ribbon-items>
<e-ribbon-item type="SplitButton" :splitButtonSettings="pasteSettigs">
</e-ribbon-item>
</e-ribbon-items>
</e-ribbon-collection>
<e-ribbon-collection>
<e-ribbon-items>
<e-ribbon-item type="Button" :buttonSettings="cutButton">
</e-ribbon-item>
<e-ribbon-item type="Button" :buttonSettings="copyButton">
</e-ribbon-item>
<e-ribbon-item type="Button" :buttonSettings="formatButton">
</e-ribbon-item>
</e-ribbon-items>
</e-ribbon-collection>
</e-ribbon-collections>
</e-ribbon-group>
<e-ribbon-group header="Gallery">
<e-ribbon-collections>
<e-ribbon-collection>
<e-ribbon-items>
<e-ribbon-item type="Gallery" :gallerySettings="gallerySettings">
</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 { RibbonGallery } 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
},
provide: {
ribbon: [RibbonGallery]
},
data: function () {
return {
cutButton: { iconCss: "e-icons e-cut", content: "Cut" },
copyButton: { iconCss: "e-icons e-copy", content: "Copy" },
formatButton: { iconCss: "e-icons e-format-painter", content: "Format Painter" },
pasteSettigs: {
iconCss: "e-icons e-paste", content: "Paste",
items: [{ text: "Keep Source Format" }, { text: "Merge format" }, { text: "Keep text only" }]
},
gallerySettings: {
groups: [{
header: 'Styles',
items: [{
content: 'Normal',
}, {
content: 'No Spacing'
}, {
content: 'Heading 1'
}, {
content: 'Heading 2'
}]
}]
}
};
}
};
</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>Setting item width
You can use the itemWidth property to specify the width of gallery items.
Setting item height
You can use the itemHeight property to set the height of the gallery items. If the itemHeight of the gallery item is smaller the remaining gallery items are aligned based on the itemCount specified.
The provided example demonstrates how to customize gallery items using the itemWidth and itemHeight properties.
<template>
<ejs-ribbon>
<e-ribbon-tabs>
<e-ribbon-tab header="Home">
<e-ribbon-groups>
<e-ribbon-group header="Clipboard" groupIconCss="e-icons e-paste">
<e-ribbon-collections>
<e-ribbon-collection>
<e-ribbon-items>
<e-ribbon-item type="SplitButton" :splitButtonSettings="pasteSettigs">
</e-ribbon-item>
</e-ribbon-items>
</e-ribbon-collection>
<e-ribbon-collection>
<e-ribbon-items>
<e-ribbon-item type="Button" :buttonSettings="cutButton">
</e-ribbon-item>
<e-ribbon-item type="Button" :buttonSettings="copyButton">
</e-ribbon-item>
<e-ribbon-item type="Button" :buttonSettings="formatButton">
</e-ribbon-item>
</e-ribbon-items>
</e-ribbon-collection>
</e-ribbon-collections>
</e-ribbon-group>
<e-ribbon-group header="Gallery">
<e-ribbon-collections>
<e-ribbon-collection>
<e-ribbon-items>
<e-ribbon-item type="Gallery" :gallerySettings="gallerySettings">
</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 { provide } from "vue";
import { RibbonGallery } 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";
provide('ribbon', [RibbonGallery]);
const cutButton = { iconCss: "e-icons e-cut", content: "Cut" }
const copyButton = { iconCss: "e-icons e-copy", content: "Copy" }
const formatButton = { iconCss: "e-icons e-format-painter", content: "Format Painter" }
const pasteSettigs = {
iconCss: "e-icons e-paste", content: "Paste",
items: [{ text: "Keep Source Format" }, { text: "Merge format" }, { text: "Keep text only" }]
}
const gallerySettings = {
popupWidth: '350',
groups: [{
itemWidth: '100',
itemHeight: '30',
header: 'Styles',
items: [{
content: 'Normal',
}, {
content: 'No Spacing'
}, {
content: 'Heading 1'
}, {
content: 'Heading 2'
}, {
content: 'Title'
}, {
content: 'Subtitle'
}]
}]
};
</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>
<e-ribbon-tabs>
<e-ribbon-tab header="Home">
<e-ribbon-groups>
<e-ribbon-group header="Clipboard" groupIconCss="e-icons e-paste">
<e-ribbon-collections>
<e-ribbon-collection>
<e-ribbon-items>
<e-ribbon-item type="SplitButton" :splitButtonSettings="pasteSettigs">
</e-ribbon-item>
</e-ribbon-items>
</e-ribbon-collection>
<e-ribbon-collection>
<e-ribbon-items>
<e-ribbon-item type="Button" :buttonSettings="cutButton">
</e-ribbon-item>
<e-ribbon-item type="Button" :buttonSettings="copyButton">
</e-ribbon-item>
<e-ribbon-item type="Button" :buttonSettings="formatButton">
</e-ribbon-item>
</e-ribbon-items>
</e-ribbon-collection>
</e-ribbon-collections>
</e-ribbon-group>
<e-ribbon-group header="Gallery">
<e-ribbon-collections>
<e-ribbon-collection>
<e-ribbon-items>
<e-ribbon-item type="Gallery" :gallerySettings="gallerySettings">
</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 { RibbonGallery } 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
},
provide: {
ribbon: [RibbonGallery]
},
data: function () {
return {
cutButton: { iconCss: "e-icons e-cut", content: "Cut" },
copyButton: { iconCss: "e-icons e-copy", content: "Copy" },
formatButton: { iconCss: "e-icons e-format-painter", content: "Format Painter" },
pasteSettigs: {
iconCss: "e-icons e-paste", content: "Paste",
items: [{ text: "Keep Source Format" }, { text: "Merge format" }, { text: "Keep text only" }]
},
gallerySettings: {
popupWidth: '350',
groups: [{
itemWidth: '100',
itemHeight: '30',
header: 'Styles',
items: [{
content: 'Normal',
}, {
content: 'No Spacing'
}, {
content: 'Heading 1'
}, {
content: 'Heading 2'
}, {
content: 'Title'
}, {
content: 'Subtitle'
}]
}]
}
};
}
};
</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>Group styling
You can use the cssClass property to customize the appearance of gallery groups.
<template>
<ejs-ribbon>
<e-ribbon-tabs>
<e-ribbon-tab header="Home">
<e-ribbon-groups>
<e-ribbon-group header="Clipboard" groupIconCss="e-icons e-paste">
<e-ribbon-collections>
<e-ribbon-collection>
<e-ribbon-items>
<e-ribbon-item type="SplitButton" :splitButtonSettings="pasteSettigs">
</e-ribbon-item>
</e-ribbon-items>
</e-ribbon-collection>
<e-ribbon-collection>
<e-ribbon-items>
<e-ribbon-item type="Button" :buttonSettings="cutButton">
</e-ribbon-item>
<e-ribbon-item type="Button" :buttonSettings="copyButton">
</e-ribbon-item>
<e-ribbon-item type="Button" :buttonSettings="formatButton">
</e-ribbon-item>
</e-ribbon-items>
</e-ribbon-collection>
</e-ribbon-collections>
</e-ribbon-group>
<e-ribbon-group header="Gallery">
<e-ribbon-collections>
<e-ribbon-collection>
<e-ribbon-items>
<e-ribbon-item type="Gallery" :gallerySettings="gallerySettings">
</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 { provide } from "vue";
import { RibbonGallery } 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";
provide('ribbon', [RibbonGallery]);
const cutButton = { iconCss: "e-icons e-cut", content: "Cut" };
const copyButton = { iconCss: "e-icons e-copy", content: "Copy" };
const formatButton = { iconCss: "e-icons e-format-painter", content: "Format Painter" };
const pasteSettigs = {
iconCss: "e-icons e-paste", content: "Paste",
items: [{ text: "Keep Source Format" }, { text: "Merge format" }, { text: "Keep text only" }]
};
const gallerySettings = {
groups: [{
header: 'Styles',
cssClass: "custom-group",
items: [{
content: 'Normal',
}, {
content: 'No Spacing'
}, {
content: 'Heading 1'
}, {
content: 'Heading 2'
}]
}]
};
</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";
.custom-group {
font-style: italic;
}
</style><template>
<ejs-ribbon>
<e-ribbon-tabs>
<e-ribbon-tab header="Home">
<e-ribbon-groups>
<e-ribbon-group header="Clipboard" groupIconCss="e-icons e-paste">
<e-ribbon-collections>
<e-ribbon-collection>
<e-ribbon-items>
<e-ribbon-item type="SplitButton" :splitButtonSettings="pasteSettigs">
</e-ribbon-item>
</e-ribbon-items>
</e-ribbon-collection>
<e-ribbon-collection>
<e-ribbon-items>
<e-ribbon-item type="Button" :buttonSettings="cutButton">
</e-ribbon-item>
<e-ribbon-item type="Button" :buttonSettings="copyButton">
</e-ribbon-item>
<e-ribbon-item type="Button" :buttonSettings="formatButton">
</e-ribbon-item>
</e-ribbon-items>
</e-ribbon-collection>
</e-ribbon-collections>
</e-ribbon-group>
<e-ribbon-group header="Gallery">
<e-ribbon-collections>
<e-ribbon-collection>
<e-ribbon-items>
<e-ribbon-item type="Gallery" :gallerySettings="gallerySettings">
</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 { RibbonGallery } 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
},
provide: {
ribbon: [RibbonGallery]
},
data: function () {
return {
cutButton: { iconCss: "e-icons e-cut", content: "Cut" },
copyButton: { iconCss: "e-icons e-copy", content: "Copy" },
formatButton: { iconCss: "e-icons e-format-painter", content: "Format Painter" },
pasteSettigs: {
iconCss: "e-icons e-paste", content: "Paste",
items: [{ text: "Keep Source Format" }, { text: "Merge format" }, { text: "Keep text only" }]
},
gallerySettings: {
groups: [{
header: 'Styles',
cssClass: "custom-group",
items: [{
content: 'Normal',
}, {
content: 'No Spacing'
}, {
content: 'Heading 1'
}, {
content: 'Heading 2'
}]
}]
}
};
}
};
</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";
.custom-group {
font-style: italic;
}
</style>Setting item count
You can customize the number if items to be displayed in Ribbon gallery by using the itemCount property, enabling you to specify the desired number of items. By default the itemCount will be 3.
The following example showcases the utilization of the itemCount property, displaying a ribbon gallery with 4 items.
<template>
<ejs-ribbon>
<e-ribbon-tabs>
<e-ribbon-tab header="Home">
<e-ribbon-groups>
<e-ribbon-group header="Clipboard" groupIconCss="e-icons e-paste">
<e-ribbon-collections>
<e-ribbon-collection>
<e-ribbon-items>
<e-ribbon-item type="SplitButton" :splitButtonSettings="pasteSettigs">
</e-ribbon-item>
</e-ribbon-items>
</e-ribbon-collection>
<e-ribbon-collection>
<e-ribbon-items>
<e-ribbon-item type="Button" :buttonSettings="cutButton">
</e-ribbon-item>
<e-ribbon-item type="Button" :buttonSettings="copyButton">
</e-ribbon-item>
<e-ribbon-item type="Button" :buttonSettings="formatButton">
</e-ribbon-item>
</e-ribbon-items>
</e-ribbon-collection>
</e-ribbon-collections>
</e-ribbon-group>
<e-ribbon-group header="Gallery">
<e-ribbon-collections>
<e-ribbon-collection>
<e-ribbon-items>
<e-ribbon-item type="Gallery" :gallerySettings="gallerySettings">
</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 { provide } from "vue";
import { RibbonGallery } 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";
provide('ribbon', [RibbonGallery]);
const cutButton = { iconCss: "e-icons e-cut", content: "Cut" };
const copyButton = { iconCss: "e-icons e-copy", content: "Copy" };
const formatButton = { iconCss: "e-icons e-format-painter", content: "Format Painter" };
const pasteSettigs = {
iconCss: "e-icons e-paste", content: "Paste",
items: [{ text: "Keep Source Format" }, { text: "Merge format" }, { text: "Keep text only" }]
};
const gallerySettings = {
itemCount: 4,
groups: [{
header: 'Styles',
items: [{
content: 'Normal',
}, {
content: 'No Spacing'
}, {
content: 'Heading 1'
}, {
content: 'Heading 2'
}]
}]
};
</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>
<e-ribbon-tabs>
<e-ribbon-tab header="Home">
<e-ribbon-groups>
<e-ribbon-group header="Clipboard" groupIconCss="e-icons e-paste">
<e-ribbon-collections>
<e-ribbon-collection>
<e-ribbon-items>
<e-ribbon-item type="SplitButton" :splitButtonSettings="pasteSettigs">
</e-ribbon-item>
</e-ribbon-items>
</e-ribbon-collection>
<e-ribbon-collection>
<e-ribbon-items>
<e-ribbon-item type="Button" :buttonSettings="cutButton">
</e-ribbon-item>
<e-ribbon-item type="Button" :buttonSettings="copyButton">
</e-ribbon-item>
<e-ribbon-item type="Button" :buttonSettings="formatButton">
</e-ribbon-item>
</e-ribbon-items>
</e-ribbon-collection>
</e-ribbon-collections>
</e-ribbon-group>
<e-ribbon-group header="Gallery">
<e-ribbon-collections>
<e-ribbon-collection>
<e-ribbon-items>
<e-ribbon-item type="Gallery" :gallerySettings="gallerySettings">
</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 { RibbonGallery } 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
},
provide: {
ribbon: [RibbonGallery]
},
data: function () {
return {
cutButton: { iconCss: "e-icons e-cut", content: "Cut" },
copyButton: { iconCss: "e-icons e-copy", content: "Copy" },
formatButton: { iconCss: "e-icons e-format-painter", content: "Format Painter" },
pasteSettigs: {
iconCss: "e-icons e-paste", content: "Paste",
items: [{ text: "Keep Source Format" }, { text: "Merge format" }, { text: "Keep text only" }]
},
gallerySettings: {
itemCount: 4,
groups: [{
header: 'Styles',
items: [{
content: 'Normal',
}, {
content: 'No Spacing'
}, {
content: 'Heading 1'
}, {
content: 'Heading 2'
}]
}]
}
};
}
};
</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>Setting selected item
You can use the selectedItemIndex property to define the currently selected item in the Ribbon gallery items.
<template>
<ejs-ribbon>
<e-ribbon-tabs>
<e-ribbon-tab header="Home">
<e-ribbon-groups>
<e-ribbon-group header="Clipboard" groupIconCss="e-icons e-paste">
<e-ribbon-collections>
<e-ribbon-collection>
<e-ribbon-items>
<e-ribbon-item type="SplitButton" :splitButtonSettings="pasteSettigs">
</e-ribbon-item>
</e-ribbon-items>
</e-ribbon-collection>
<e-ribbon-collection>
<e-ribbon-items>
<e-ribbon-item type="Button" :buttonSettings="cutButton">
</e-ribbon-item>
<e-ribbon-item type="Button" :buttonSettings="copyButton">
</e-ribbon-item>
<e-ribbon-item type="Button" :buttonSettings="formatButton">
</e-ribbon-item>
</e-ribbon-items>
</e-ribbon-collection>
</e-ribbon-collections>
</e-ribbon-group>
<e-ribbon-group header="Gallery">
<e-ribbon-collections>
<e-ribbon-collection>
<e-ribbon-items>
<e-ribbon-item type="Gallery" :gallerySettings="gallerySettings">
</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 { provide } from "vue";
import { RibbonGallery } 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";
provide('ribbon', [RibbonGallery]);
const cutButton = { iconCss: "e-icons e-cut", content: "Cut" };
const copyButton = { iconCss: "e-icons e-copy", content: "Copy" };
const formatButton = { iconCss: "e-icons e-format-painter", content: "Format Painter" };
const pasteSettigs = {
iconCss: "e-icons e-paste", content: "Paste",
items: [{ text: "Keep Source Format" }, { text: "Merge format" }, { text: "Keep text only" }]
};
const gallerySettings = {
selectedItemIndex: 1,
groups: [{
header: 'Styles',
items: [{
content: 'Normal',
}, {
content: 'No Spacing'
}, {
content: 'Heading 1'
}, {
content: 'Heading 2'
}]
}]
};
</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>
<e-ribbon-tabs>
<e-ribbon-tab header="Home">
<e-ribbon-groups>
<e-ribbon-group header="Clipboard" groupIconCss="e-icons e-paste">
<e-ribbon-collections>
<e-ribbon-collection>
<e-ribbon-items>
<e-ribbon-item type="SplitButton" :splitButtonSettings="pasteSettigs">
</e-ribbon-item>
</e-ribbon-items>
</e-ribbon-collection>
<e-ribbon-collection>
<e-ribbon-items>
<e-ribbon-item type="Button" :buttonSettings="cutButton">
</e-ribbon-item>
<e-ribbon-item type="Button" :buttonSettings="copyButton">
</e-ribbon-item>
<e-ribbon-item type="Button" :buttonSettings="formatButton">
</e-ribbon-item>
</e-ribbon-items>
</e-ribbon-collection>
</e-ribbon-collections>
</e-ribbon-group>
<e-ribbon-group header="Gallery">
<e-ribbon-collections>
<e-ribbon-collection>
<e-ribbon-items>
<e-ribbon-item type="Gallery" :gallerySettings="gallerySettings">
</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 { RibbonGallery } 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
},
provide: {
ribbon: [RibbonGallery]
},
data: function () {
return {
cutButton: { iconCss: "e-icons e-cut", content: "Cut" },
copyButton: { iconCss: "e-icons e-copy", content: "Copy" },
formatButton: { iconCss: "e-icons e-format-painter", content: "Format Painter" },
pasteSettigs: {
iconCss: "e-icons e-paste", content: "Paste",
items: [{ text: "Keep Source Format" }, { text: "Merge format" }, { text: "Keep text only" }]
},
gallerySettings: {
selectedItemIndex: 1,
groups: [{
header: 'Styles',
items: [{
content: 'Normal',
}, {
content: 'No Spacing'
}, {
content: 'Heading 1'
}, {
content: 'Heading 2'
}]
}]
}
};
}
};
</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>Setting popup height
You can specify the height of the gallery popup by using the popupHeight property.
Setting popup width
you can specify the width of the gallery popup by using the popupWidth property.
The example demonstrates the customization of popup with popupHeight and popupWidth properties.
<template>
<ejs-ribbon>
<e-ribbon-tabs>
<e-ribbon-tab header="Home">
<e-ribbon-groups>
<e-ribbon-group header="Clipboard" groupIconCss="e-icons e-paste">
<e-ribbon-collections>
<e-ribbon-collection>
<e-ribbon-items>
<e-ribbon-item type="SplitButton" :splitButtonSettings="pasteSettigs">
</e-ribbon-item>
</e-ribbon-items>
</e-ribbon-collection>
<e-ribbon-collection>
<e-ribbon-items>
<e-ribbon-item type="Button" :buttonSettings="cutButton">
</e-ribbon-item>
<e-ribbon-item type="Button" :buttonSettings="copyButton">
</e-ribbon-item>
<e-ribbon-item type="Button" :buttonSettings="formatButton">
</e-ribbon-item>
</e-ribbon-items>
</e-ribbon-collection>
</e-ribbon-collections>
</e-ribbon-group>
<e-ribbon-group header="Gallery">
<e-ribbon-collections>
<e-ribbon-collection>
<e-ribbon-items>
<e-ribbon-item type="Gallery" :gallerySettings="gallerySettings">
</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 { provide } from "vue";
import { RibbonGallery } 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";
provide('ribbon', [RibbonGallery]);
const cutButton = { iconCss: "e-icons e-cut", content: "Cut" }
const copyButton = { iconCss: "e-icons e-copy", content: "Copy" }
const formatButton = { iconCss: "e-icons e-format-painter", content: "Format Painter" }
const pasteSettigs = {
iconCss: "e-icons e-paste", content: "Paste",
items: [{ text: "Keep Source Format" }, { text: "Merge format" }, { text: "Keep text only" }]
}
const gallerySettings = {
popupHeight: '180',
popupWidth: '350',
groups: [{
header: 'Styles',
items: [{
content: 'Normal',
}, {
content: 'No Spacing'
}, {
content: 'Heading 1'
}, {
content: 'Heading 2'
}, {
content: 'Title'
}, {
content: 'Subtitle'
}]
}]
};
</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>
<e-ribbon-tabs>
<e-ribbon-tab header="Home">
<e-ribbon-groups>
<e-ribbon-group header="Clipboard" groupIconCss="e-icons e-paste">
<e-ribbon-collections>
<e-ribbon-collection>
<e-ribbon-items>
<e-ribbon-item type="SplitButton" :splitButtonSettings="pasteSettigs">
</e-ribbon-item>
</e-ribbon-items>
</e-ribbon-collection>
<e-ribbon-collection>
<e-ribbon-items>
<e-ribbon-item type="Button" :buttonSettings="cutButton">
</e-ribbon-item>
<e-ribbon-item type="Button" :buttonSettings="copyButton">
</e-ribbon-item>
<e-ribbon-item type="Button" :buttonSettings="formatButton">
</e-ribbon-item>
</e-ribbon-items>
</e-ribbon-collection>
</e-ribbon-collections>
</e-ribbon-group>
<e-ribbon-group header="Gallery">
<e-ribbon-collections>
<e-ribbon-collection>
<e-ribbon-items>
<e-ribbon-item type="Gallery" :gallerySettings="gallerySettings">
</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 { RibbonGallery } 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
},
provide: {
ribbon: [RibbonGallery]
},
data: function () {
return {
cutButton: { iconCss: "e-icons e-cut", content: "Cut" },
copyButton: { iconCss: "e-icons e-copy", content: "Copy" },
formatButton: { iconCss: "e-icons e-format-painter", content: "Format Painter" },
pasteSettigs: {
iconCss: "e-icons e-paste", content: "Paste",
items: [{ text: "Keep Source Format" }, { text: "Merge format" }, { text: "Keep text only" }]
},
gallerySettings: {
popupHeight: '180',
popupWidth: '350',
groups: [{
header: 'Styles',
items: [{
content: 'Normal',
}, {
content: 'No Spacing'
}, {
content: 'Heading 1'
}, {
content: 'Heading 2'
}, {
content: 'Title'
}, {
content: 'Subtitle'
}]
}]
}
};
}
};
</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
You can customize the default appearance and content of Ribbon gallery items by using the template property.
Popup Template
You can customize the appearance of Ribbon gallery popup by using the popupTemplate property.
The below example demonstrates the customization of both the template and popupTemplate properties:
<template>
<ejs-ribbon id="ribbon" >
<e-ribbon-tabs>
<e-ribbon-tab header="Home">
<e-ribbon-groups>
<e-ribbon-group header="Clipboard" groupIconCss='e-icons e-paste'>
<e-ribbon-collections>
<e-ribbon-collection>
<e-ribbon-items>
<e-ribbon-item type="SplitButton" :splitButtonSettings="pasteButton">
</e-ribbon-item>
</e-ribbon-items>
</e-ribbon-collection>
<e-ribbon-collection>
<e-ribbon-items>
<e-ribbon-item type="Button" :buttonSettings="cutButton">
</e-ribbon-item>
<e-ribbon-item type="Button" :buttonSettings="copyButton">
</e-ribbon-item>
<e-ribbon-item type="Button" :buttonSettings="formatPainter">
</e-ribbon-item>
</e-ribbon-items>
</e-ribbon-collection>
</e-ribbon-collections>
</e-ribbon-group>
<e-ribbon-group header="Table Styles">
<e-ribbon-collections>
<e-ribbon-collection>
<e-ribbon-items>
<e-ribbon-item type="Gallery" :gallerySettings="gallerySettings">
</e-ribbon-item>
</e-ribbon-items>
</e-ribbon-collection>
</e-ribbon-collections>
</e-ribbon-group>
<e-ribbon-group header="Insert">
<e-ribbon-collections>
<e-ribbon-collection>
<e-ribbon-items>
<e-ribbon-item type="Button" :buttonSettings="aboveButton">
</e-ribbon-item>
<e-ribbon-item type="Button" :buttonSettings="belowButton">
</e-ribbon-item>
</e-ribbon-items>
</e-ribbon-collection>
<e-ribbon-collection>
<e-ribbon-items>
<e-ribbon-item type="Button" :buttonSettings="leftButton">
</e-ribbon-item>
<e-ribbon-item type="Button" :buttonSettings="rightButton">
</e-ribbon-item>
</e-ribbon-items>
</e-ribbon-collection>
</e-ribbon-collections>
</e-ribbon-group>
</e-ribbon-groups>
</e-ribbon-tab>
</e-ribbon-tabs>
<template v-slot:galleryTemplate="{ data }">
<div :class="'gallery-template' + data.items.cssClass">
<table class="table">
<tbody>
<tr class="row_one">
<td class="tableContent">—</td>
<td class="tableContent">—</td>
<td class="tableContent">—</td>
<td class="tableContent">—</td>
<td class="tableContent">—</td>
</tr>
<tr class="row_two">
<td class="tableContent">—</td>
<td class="tableContent">—</td>
<td class="tableContent">—</td>
<td class="tableContent">—</td>
<td class="tableContent">—</td>
</tr>
<tr class="row_three">
<td class="tableContent">—</td>
<td class="tableContent">—</td>
<td class="tableContent">—</td>
<td class="tableContent">—</td>
<td class="tableContent">—</td>
</tr>
</tbody>
</table>
</div>
</template>
</ejs-ribbon>
</template>
<script>
import { RibbonComponent, RibbonTabsDirective, RibbonTabDirective, RibbonCollectionDirective, RibbonCollectionsDirective, RibbonItemsDirective, RibbonItemDirective, RibbonGroupsDirective, RibbonGroupDirective, RibbonGallery } from "@syncfusion/ej2-vue-ribbon";
export default {
provide: {
ribbon: [RibbonGallery]
},
components: {
"ejs-ribbon": RibbonComponent,
"e-ribbon-tabs": RibbonTabsDirective,
"e-ribbon-tab": RibbonTabDirective,
"e-ribbon-collections": RibbonCollectionsDirective,
"e-ribbon-collection": RibbonCollectionDirective,
"e-ribbon-items": RibbonItemsDirective,
"e-ribbon-item": RibbonItemDirective,
"e-ribbon-groups": RibbonGroupsDirective,
"e-ribbon-group": RibbonGroupDirective
},
data: function () {
return {
pasteButton: { iconCss: 'e-icons e-paste', items: [{ text: 'Keep Source Format' }, { text: 'Merge Format' }, { text: 'Keep Text Only' }], content: 'Paste' },
cutButton: { iconCss: "e-icons e-cut", content: "Cut" },
copyButton: { iconCss: "e-icons e-copy", content: "Copy" },
formatPainter: { iconCss: "e-icons e-format-painter", content: "Format Painter" },
aboveButton: { content: "Above", iconCss: "e-icons e-insert-above" },
belowButton: { content: "Below", iconCss: "e-icons e-insert-below" },
leftButton: { content: "Left", iconCss: "e-icons e-insert-left" },
rightButton: { content: "Right", iconCss: "e-icons e-insert-right" },
gallerySettings: {
template: 'galleryTemplate',
popupTemplate: 'galleryTemplate',
itemCount: 7,
groups: [{
header: 'Plain Tables',
items: [
{
cssClass: "plainTables_item_1"
},
{
cssClass: "plainTables_item_2"
},
{
cssClass: "plainTables_item_3"
},
{
cssClass: "plainTables_item_4"
},
{
cssClass: "plainTables_item_5"
},
{
cssClass: "plainTables_item_6"
},
{
cssClass: "plainTables_item_7"
}
]
}, {
header: 'List Tables',
items: [
{
cssClass: "listTables_item_1"
},
{
cssClass: "listTables_item_2"
},
{
cssClass: "listTables_item_3"
},
{
cssClass: "listTables_item_4"
},
{
cssClass: "listTables_item_5"
},
{
cssClass: "listTables_item_6"
},
{
cssClass: "listTables_item_7"
}
]
}]
}
};
}
};
</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";
.table {
border-collapse: collapse;
}
/* plain table styles */
.plainTables_item_1 .tableContent {
border: 1px solid black;
}
.plainTables_item_2 .tableContent,
.plainTables_item_3 .tableContent {
border: 1px solid #c1c1c1;
}
.plainTables_item_4 .row_one .tableContent {
border-top: 1px solid black;
border-bottom: 1px solid black;
}
.plainTables_item_4 .row_three .tableContent {
border-bottom: 1px solid black;
}
.plainTables_item_5 .row_one .tableContent {
border-bottom: 1px solid black;
}
.plainTables_item_5 .row_one .tableContent,
.plainTables_item_7 .row_one .tableContent {
border-bottom: 1px solid black;
}
.plainTables_item_5 .row_two .tableContent:first-child,
.plainTables_item_5 .row_three .tableContent:first-child,
.plainTables_item_7 .row_two .tableContent:first-child,
.plainTables_item_7 .row_three .tableContent:first-child{
border-right: 1px solid black;
}
/* list table styles */
.listTables_item_1 .row_one .tableContent {
border-bottom: 1px solid #83caeb;
}
.listTables_item_2 .row_one .tableContent,
.listTables_item_2 .row_two .tableContent ,
.listTables_item_2 .row_three .tableContent {
border-bottom: 1px solid #83caeb;
border-top: 1px solid #83caeb;
}
.listTables_item_3 .row_one .tableContent {
border-top: 1px solid #156082;
border-bottom: 1px solid #156082;
background-color: #156082;
color: white;
}
.listTables_item_3 .row_three .tableContent {
border-bottom: 1px solid #156082;
}
.listTables_item_5 .row_one .tableContent,
.listTables_item_7 .row_one .tableContent {
border-bottom: 1px solid white;
}
.listTables_item_5 .row_two .tableContent:first-child,
.listTables_item_5 .row_three .tableContent:first-child,
.listTables_item_7 .row_two .tableContent:first-child,
.listTables_item_7 .row_three .tableContent:first-child{
border-right: 1px solid white;
}
.listTables_item_5 .tableContent {
background-color: #156082;
color: white;
}
.listTables_item_7 .row_one .tableContent {
border-bottom: 1px solid black;
}
.listTables_item_7 .row_two .tableContent:first-child,
.listTables_item_7 .row_three .tableContent:first-child{
border-right: 1px solid black;
}
.listTables_item_4 .row_one .tableContent {
border-top: 1px solid #156082;
border-bottom: 1px solid #156082;
}
.listTables_item_4 .row_three .tableContent {
border-bottom: 1px solid #156082;
}
</style>To know more about the built-in Ribbon items, please refer to the Ribbon Items section.