update code snippets

Author: czernous-devexpress

angular/src/app/app.component.html

@@ -1,10 +1,12 @@
 <dx-drop-down-button
-    text="Sandra Johnson"
-    icon="user"
-    [items]="actions"
-    keyExpr="id"
-    displayExpr="text"
-    (onItemClick)="logAction($event)"
-    [splitButton]="true"
-    (onButtonClick)="logButtonClick()">
-</dx-drop-down-button>
+  text="Sandra Johnson"
+  icon="user"
+  [items]="actions"
+  keyExpr="id"
+  displayExpr="text"
+  (onItemClick)="logAction($event)"
+  [splitButton]="true"
+  (onButtonClick)="logButtonClick()"
+  [dropDownOptions]="dropDownOptions"
+>
+</dx-drop-down-button>

angular/src/app/app.component.ts

@@ -1,23 +1,26 @@
 import { Component } from '@angular/core';
 
 @Component({
-    selector: 'app-root',
-    templateUrl: './app.component.html',
-    styleUrls: ['./app.component.css']
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.css'],
 })
 export class AppComponent {
-    actions: Array<{id: Number, text: String, icon: String}> = [
-        { id: 1, text: "My profile", icon: "user" },
-        { id: 2, text: "Messages", icon: "email" },
-        { id: 3, text: "Contacts", icon: "group" },
-        { id: 4, text: "Log out", icon: "runner" }
-    ];
+  actions: Array<{ id: Number; text: String; icon: String }> = [
+    { id: 1, text: 'My profile', icon: 'user' },
+    { id: 2, text: 'Messages', icon: 'email' },
+    { id: 3, text: 'Contacts', icon: 'group' },
+    { id: 4, text: 'Log out', icon: 'runner' },
+  ];
+  dropDownOptions = {
+    height: 150,
+  };
 
-    logAction(e) {
-        console.log(e.itemData.text + " was clicked");
-    }
+  logAction(e) {
+    console.log(e.itemData.text + ' was clicked');
+  }
 
-    logButtonClick() {
-        console.log("Main button was clicked");
-    }
+  logButtonClick() {
+    console.log('Main button was clicked');
+  }
 }

jquery/index.js

@@ -1,23 +1,26 @@
 const actions = [
-    { id: 1, text: "My profile", icon: "user" },
-    { id: 2, text: "Messages", icon: "email" },
-    { id: 3, text: "Contacts", icon: "group" },
-    { id: 4, text: "Log out", icon: "runner" }
+  { id: 1, text: 'My profile', icon: 'user' },
+  { id: 2, text: 'Messages', icon: 'email' },
+  { id: 3, text: 'Contacts', icon: 'group' },
+  { id: 4, text: 'Log out', icon: 'runner' },
 ];
 
-$(function() {
-    $("#myDropDownButton").dxDropDownButton({
-        text: "Sandra Johnson",
-        icon: "user",
-        displayExpr: "text",
-        items: actions,
-        keyExpr: "id",
-        onItemClick: function(e) {
-            console.log(e.itemData.text + " was clicked");
-        },
-        splitButton: true,
-        onButtonClick: function() {
-            console.log("Main button was clicked");
-        }
-    });
-});
+$(function () {
+  $('#myDropDownButton').dxDropDownButton({
+    text: 'Sandra Johnson',
+    icon: 'user',
+    displayExpr: 'text',
+    items: actions,
+    keyExpr: 'id',
+    onItemClick: function (e) {
+      console.log(e.itemData.text + ' was clicked');
+    },
+    splitButton: true,
+    onButtonClick: function () {
+      console.log('Main button was clicked');
+    },
+    dropDownOptions: {
+      height: 150,
+    },
+  });
+});

react/src/App.js

@@ -6,34 +6,37 @@ import 'devextreme/dist/css/dx.light.css';
 import DropDownButton from 'devextreme-react/drop-down-button';
 
 const actions = [
-    { id: 1, text: "My profile", icon: "user" },
-    { id: 2, text: "Messages", icon: "email" },
-    { id: 3, text: "Contacts", icon: "group" },
-    { id: 4, text: "Log out", icon: "runner" }
+  { id: 1, text: 'My profile', icon: 'user' },
+  { id: 2, text: 'Messages', icon: 'email' },
+  { id: 3, text: 'Contacts', icon: 'group' },
+  { id: 4, text: 'Log out', icon: 'runner' },
 ];
-
+const dropDownOptions = {
+  height: 150,
+};
 class App extends React.Component {
-    logAction(e) {
-        console.log(e.itemData.text + " was clicked");
-    }
+  logAction(e) {
+    console.log(e.itemData.text + ' was clicked');
+  }
 
-    logButtonClick() {
-        console.log("Main button was clicked");
-    }
+  logButtonClick() {
+    console.log('Main button was clicked');
+  }
 
-    render() {
-        return (
-            <DropDownButton
-                text="Sandra Johnson"
-                icon="user"
-                items={actions}
-                keyExpr="id"
-                displayExpr="text"
-                onItemClick={this.logAction}
-                splitButton={true}
-                onButtonClick={this.logButtonClick}
-            />
-        );
-    }
+  render() {
+    return (
+      <DropDownButton
+        text="Sandra Johnson"
+        icon="user"
+        items={actions}
+        keyExpr="id"
+        displayExpr="text"
+        onItemClick={this.logAction}
+        splitButton={true}
+        onButtonClick={this.logButtonClick}
+        dropDownOptions={dropDownOptions}
+      />
+    );
+  }
 }
-export default App;
+export default App;

vue/src/App.vue

@@ -8,6 +8,7 @@
         @item-click="logAction"
         :split-button="true"
         @button-click="logButtonClick"
+        :drop-down-options="dropDownOptions"
     />
 </template>
 
@@ -27,7 +28,10 @@ export default {
     },
     data() {
         return {
-            actions
+            actions,
+            dropDownOptions: {
+                height: 150,
+            }
         }
     },
     methods: {