docs(dropdownbutton): add KB

Author: filipKovachev

knowledge-base/dropdownbutton-divider.md

@@ -0,0 +1,39 @@
+---
+title: Add a divider between items in the DropDownButton
+description: An example of how to add a divider between each item in a DropDownButton
+type: how-to
+page_title: Add a divider for items in the DropDownButton - Kendo UI Vue Native DropDownButton
+slug: dropdownbutton-divider
+tags: divider, dropdownbutton, items
+res_type: kb
+category: knowledge-base
+---
+
+## Environment
+
+<table>
+    <tbody>
+	    <tr>
+	    	<td>Product Version</td>
+	    	<td>6.3.0</td>
+	    </tr>
+	    <tr>
+	    	<td>Product</td>
+	    	<td>Progress® Kendo UI for Vue Native</td>
+	    </tr>
+    </tbody>
+</table>
+
+## Description
+
+How can I add a divider between my items in the DropDownButton?
+
+## Solution
+
+This can be achieved by creating a custom item with an `hr` element and passing it to the [`itemRender`]({% slug api_buttons_dropdownbutton %}#toc-itemRender) prop:
+
+{% meta height: 420 %}
+{% embed_file dropdownbutton-divider/main.vue preview %}
+{% embed_file dropdownbutton-divider/main.js %}
+{% endmeta %}
+

knowledge-base/examples/dropdownbutton-divider/main.js

@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './main.vue';
+
+createApp(App).mount('#app');

knowledge-base/examples/dropdownbutton-divider/main.vue

@@ -0,0 +1,49 @@
+<template>
+    <div>
+      <DropDownButton :items="items" :item-render="itemRender" text="Export">
+        <template v-slot:itemRender="{ props }">
+          <div>
+            <hr v-if="props.itemIndex > 0" class="my-dropdown-divider" />
+  
+            <div class="k-link k-menu-link">
+              <SvgIcon :icon="props.item.svgIcon" />
+              <em>{{ `action #${props.itemIndex}: ${props.item.text}` }}</em>
+            </div>
+          </div>
+        </template>
+      </DropDownButton>
+    </div>
+  </template>
+  
+  <script>
+  import { DropDownButton } from '@progress/kendo-vue-buttons';
+  import { filePdfIcon, fileExcelIcon } from '@progress/kendo-svg-icons';
+  import { SvgIcon } from '@progress/kendo-vue-common';
+  
+  export default {
+    name: 'ExportDropdown',
+    components: {
+      DropDownButton,
+      SvgIcon,
+    },
+    data() {
+      return {
+        items: [
+          { text: 'To PDF', svgIcon: filePdfIcon },
+          { text: 'To Excel', svgIcon: fileExcelIcon },
+          { text: 'Other' },
+        ],
+        itemRender: 'itemRender',
+      };
+    },
+  };
+  </script>
+  
+  <style scoped>
+  .my-dropdown-divider {
+    margin: 4px 0;
+    border: none;
+    border-top: 1px solid #ddd;
+  }
+  </style>
+