Skip to content

Commit ec8863d

Browse files
AlisherAmonulloevAlisherAmonulloev
committed
Update all frameworks to use DropDownButton component with modern patterns
- Angular: Migrate to TypeScript with proper types, DxDropDownButtonModule, and notification system - React: Convert to functional component with hooks, TypeScript, and DevExtreme types - Vue: Implement Composition API with TypeScript, proper component structure - jQuery: Update to use DropDownButton with modern JavaScript patterns and notifications - Add type definitions for Angular and Vue frameworks - Update README file structure and move image to images directory - Remove original template files and clean up project structure - All implementations now use DevExtreme notifications instead of console.log - Consistent styling with 900px containers and proper layout across frameworks
1 parent fab6ab5 commit ec8863d

30 files changed

+200
-272
lines changed

‎Angular/src/app/app.component.html‎

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,14 @@
1-
<div class="default-style">
2-
<dx-button [text]="buttonText" (onClick)="onClick($event)"></dx-button>
1+
<div id="app-container">
2+
<dx-drop-down-button
3+
text="Sandra Johnson"
4+
icon="user"
5+
[items]="actions"
6+
keyExpr="id"
7+
displayExpr="text"
8+
(onItemClick)="onItemClick($event)"
9+
[splitButton]="true"
10+
(onButtonClick)="onButtonClick()"
11+
[dropDownOptions]="dropDownOptions"
12+
>
13+
</dx-drop-down-button>
314
</div>

‎Angular/src/app/app.component.scss‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,7 @@
1-
.default-style {
2-
margin: 50px;
3-
width: 90vw;
1+
#app-container {
2+
width: 900px;
3+
position: relative;
4+
padding: 20px;
5+
border: 1px solid #ddd;
6+
margin: 50px auto;
47
}

‎Angular/src/app/app.component.ts‎

Lines changed: 17 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,30 @@
11
import { Component } from '@angular/core';
2-
import { ClickEvent } from 'devextreme/ui/button';
2+
import notify from 'devextreme/ui/notify';
3+
import { DxDropDownButtonTypes } from 'devextreme-angular/ui/drop-down-button';
4+
import { ActionItem, DropDownOptions } from './app.types';
35

46
@Component({
57
selector: 'app-root',
68
templateUrl: './app.component.html',
79
styleUrls: ['./app.component.scss'],
810
})
911
export class AppComponent {
10-
title = 'Angular';
12+
actions: ActionItem[] = [
13+
{ id: 1, text: 'My profile', icon: 'user' },
14+
{ id: 2, text: 'Messages', icon: 'email' },
15+
{ id: 3, text: 'Contacts', icon: 'group' },
16+
{ id: 4, text: 'Log out', icon: 'runner' },
17+
];
1118

12-
counter = 0;
19+
dropDownOptions: DropDownOptions = {
20+
height: 150,
21+
};
1322

14-
buttonText = 'Click count: 0';
23+
onItemClick(e: DxDropDownButtonTypes.ItemClickEvent): void {
24+
notify(`${e.itemData.text} was clicked`, 'info', 2000);
25+
}
1526

16-
onClick(e: ClickEvent): void {
17-
this.counter++;
18-
this.buttonText = `Click count: ${this.counter}`;
27+
onButtonClick(): void {
28+
notify('Main button was clicked', 'success', 2000);
1929
}
2030
}

‎Angular/src/app/app.module.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { NgModule } from '@angular/core';
22
import { BrowserModule } from '@angular/platform-browser';
3-
import { DxButtonModule } from 'devextreme-angular/ui/button';
3+
import { DxDropDownButtonModule } from 'devextreme-angular/ui/drop-down-button';
44
import { AppRoutingModule } from './app-routing.module';
55
import { AppComponent } from './app.component';
66

@@ -11,7 +11,7 @@ import { AppComponent } from './app.component';
1111
imports: [
1212
BrowserModule,
1313
AppRoutingModule,
14-
DxButtonModule,
14+
DxDropDownButtonModule,
1515
],
1616
providers: [],
1717
bootstrap: [AppComponent],

‎Angular/src/app/app.types.ts‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
export interface ActionItem {
2+
id: number;
3+
text: string;
4+
icon: string;
5+
}
6+
7+
export interface DropDownOptions {
8+
height: number;
9+
}

‎Angular/src/app/orig_app.component.html‎

Lines changed: 0 additions & 11 deletions
This file was deleted.

‎Angular/src/app/orig_app.component.ts‎

Lines changed: 0 additions & 26 deletions
This file was deleted.

‎Angular/src/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<html lang="en">
33
<head>
44
<meta charset="utf-8" />
5-
<title>Angular</title>
5+
<title>Getting Started with DevExtreme Angular DropDownButton</title>
66
<base href="/" />
77
<meta name="viewport" content="width=device-width, initial-scale=1" />
88
<link rel="icon" type="image/x-icon" href="favicon.ico" />

‎Angular/src/orig_index.html‎

Lines changed: 0 additions & 13 deletions
This file was deleted.

‎README.md‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -8,19 +8,21 @@
88

99
This repository stores code examples of the DropDownButton component for the [Getting Started with DropDownButton](https://js.devexpress.com/Documentation/Guide/UI_Components/DropDownButton/Getting_Started_with_DropDownButton/) tutorial. The DropDownButton combines the functionality of a button and a drop-down menu. This tutorial describes how to configure a DropDownButton that logs user clicks in the browser console.
1010

11-
<div align="center"><img src="./dropdownbutton.png" /></div>
11+
<div align="center"><img src="./images/dropdownbutton.png" /></div>
1212

1313
## Files to Review
1414

1515
- **Angular**
16-
- [app.component.html](angular/src/app/app.component.html)
17-
- [app.component.ts](angular/src/app/app.component.ts)
16+
- [app.component.html](Angular/src/app/app.component.html)
17+
- [app.component.ts](Angular/src/app/app.component.ts)
1818
- **jQuery**
19-
- [index.js](jquery/src/index.js)
19+
- [index.js](jQuery/src/index.js)
20+
- [index.html](jQuery/src/index.html)
2021
- **React**
21-
- [App.js](react/src/App.js)
22+
- [App.tsx](React/src/App.tsx)
2223
- **Vue**
23-
- [App.vue](vue/src/App.vue)
24+
- [App.vue](Vue/src/App.vue)
25+
- [DropDownButtonContent.vue](Vue/src/components/DropDownButtonContent.vue)
2426

2527
## Documentation
2628

0 commit comments

Comments
 (0)