Skip to content

Commit 20b5f89

Browse files
pharret31pharret31
authored
Stepper: create Overview demo (jQuery, React, Angular, Vue) (DevExpress#29611)
1 parent afcbf4a commit 20b5f89

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

43 files changed

+1890
-5
lines changed

‎apps/demos/Demos/Stepper/Overview/Angular/app/app.component.css‎

Lines changed: 98 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
::ng-deep demo-app {
2+
display: flex;
3+
flex-direction: column;
4+
}
5+
6+
::ng-deep .stepper-demo {
7+
display: flex;
8+
height: 700px;
9+
gap: 20px;
10+
}
11+
12+
::ng-deep .widget-container {
13+
display: flex;
14+
align-items: center;
15+
justify-content: center;
16+
width: calc(100% - 280px);
17+
min-width: 320px;
18+
overflow: clip;
19+
gap: 20px;
20+
}
21+
22+
::ng-deep .widget-wrapper {
23+
display: inline-flex;
24+
flex-direction: column;
25+
align-items: center;
26+
justify-content: center;
27+
row-gap: 80px;
28+
width: 100%;
29+
height: 100%;
30+
}
31+
32+
::ng-deep .widget-wrapper-vertical {
33+
display: flex;
34+
flex-direction: row;
35+
justify-content: space-around;
36+
}
37+
38+
::ng-deep .widget-wrapper-vertical .stepper-wrapper {
39+
width: auto;
40+
max-width: 33%;
41+
}
42+
43+
::ng-deep .widget-wrapper-vertical .stepper-label {
44+
text-align: center;
45+
white-space: nowrap;
46+
}
47+
48+
::ng-deep .widget-wrapper-vertical #customText {
49+
width: auto;
50+
}
51+
52+
::ng-deep .dx-stepper-vertical {
53+
height: 400px;
54+
width: 100%;
55+
}
56+
57+
::ng-deep .stepper-wrapper {
58+
width: 100%;
59+
display: flex;
60+
flex-direction: column;
61+
align-items: center;
62+
gap: 16px;
63+
}
64+
65+
::ng-deep .stepper-label {
66+
font-weight: 600;
67+
}
68+
69+
::ng-deep .options {
70+
display: flex;
71+
flex-direction: column;
72+
flex-shrink: 0;
73+
width: 300px;
74+
box-sizing: border-box;
75+
padding: 20px;
76+
background-color: rgba(191, 191, 191, 0.15);
77+
gap: 16px;
78+
height: 100%;
79+
}
80+
81+
::ng-deep .caption {
82+
font-weight: 500;
83+
font-size: 18px;
84+
}
85+
86+
::ng-deep .option {
87+
display: flex;
88+
flex-direction: column;
89+
row-gap: 4px;
90+
}
91+
92+
::ng-deep .option-separator {
93+
border-bottom: 1px solid var(--dx-color-border);
94+
}
95+
96+
::ng-deep .dx-buttongroup .dx-button {
97+
width: 50%;
98+
}

‎apps/demos/Demos/Stepper/Overview/Angular/app/app.component.html‎

Lines changed: 123 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,123 @@
1+
<div class="stepper-demo">
2+
<div class="widget-container">
3+
<div class="widget-wrapper" [ngClass]="'widget-wrapper-' + orientation">
4+
<div class="stepper-wrapper">
5+
<div id="iconsLabel" class="stepper-label">Icons and Labels</div>
6+
<dx-stepper
7+
id="icons"
8+
[elementAttr]="{ 'aria-labelledby': 'iconsLabel' }"
9+
[selectedIndex]="2"
10+
[orientation]="orientation"
11+
[linear]="navigationMode"
12+
[selectOnFocus]="selectOnFocus"
13+
[rtlEnabled]="rtlMode"
14+
>
15+
<dxi-item
16+
[text]="steps[0].text"
17+
[label]="steps[0].label"
18+
[icon]="steps[0].icon"
19+
/>
20+
<dxi-item
21+
[text]="steps[1].text"
22+
[label]="steps[1].label"
23+
[icon]="steps[1].icon"
24+
/>
25+
<dxi-item
26+
[text]="steps[2].text"
27+
[label]="steps[2].label"
28+
[icon]="steps[2].icon"
29+
[optional]="steps[2].optional"
30+
/>
31+
<dxi-item
32+
[text]="steps[3].text"
33+
[label]="steps[3].label"
34+
[icon]="steps[3].icon"
35+
/>
36+
<dxi-item
37+
[text]="steps[4].text"
38+
[label]="steps[4].label"
39+
[icon]="steps[4].icon"
40+
/>
41+
</dx-stepper>
42+
</div>
43+
<div class="stepper-wrapper">
44+
<div id="numbersLabel" class="stepper-label">Numbers and Labels</div>
45+
<dx-stepper
46+
id="numbers"
47+
[elementAttr]="{ 'aria-labelledby': 'numbersLabel' }"
48+
[selectedIndex]="2"
49+
[orientation]="orientation"
50+
[linear]="navigationMode"
51+
[selectOnFocus]="selectOnFocus"
52+
[rtlEnabled]="rtlMode"
53+
>
54+
<dxi-item [label]="steps[0].label" />
55+
<dxi-item [label]="steps[1].label" />
56+
<dxi-item [label]="steps[2].label" [optional]="steps[2].optional" />
57+
<dxi-item [label]="steps[3].label" />
58+
<dxi-item [label]="steps[4].label" />
59+
</dx-stepper>
60+
</div>
61+
<div class="stepper-wrapper">
62+
<div id="customTextLabel" class="stepper-label">Custom Text</div>
63+
<dx-stepper
64+
id="customText"
65+
[elementAttr]="{ 'aria-labelledby': 'customTextLabel' }"
66+
[selectedIndex]="2"
67+
[orientation]="orientation"
68+
[linear]="navigationMode"
69+
[selectOnFocus]="selectOnFocus"
70+
[rtlEnabled]="rtlMode"
71+
>
72+
<dxi-item [text]="steps[0].text" />
73+
<dxi-item [text]="steps[1].text" />
74+
<dxi-item [text]="steps[2].text" />
75+
<dxi-item [text]="steps[3].text" />
76+
<dxi-item [text]="steps[4].text" />
77+
</dx-stepper>
78+
</div>
79+
</div>
80+
</div>
81+
82+
<div class="options">
83+
<div class="caption">Options</div>
84+
85+
<div class="option">
86+
<div>Orientation</div>
87+
<dx-button-group
88+
id="orientation"
89+
keyExpr="value"
90+
[items]="orientations"
91+
[selectedItemKeys]="[orientation]"
92+
(onItemClick)="onOrientationClick($event)"
93+
/>
94+
</div>
95+
<div class="option">
96+
<div>Navigation Mode</div>
97+
<dx-button-group
98+
id="navigationMode"
99+
keyExpr="value"
100+
[items]="navigationModes"
101+
[selectedItemKeys]="[navigationMode]"
102+
(onItemClick)="onNavigationModeClick($event)"
103+
/>
104+
</div>
105+
<div class="option-separator"></div>
106+
<div class="option">
107+
<dx-check-box
108+
id="selectOnFocus"
109+
text="Select step on focus"
110+
[value]="selectOnFocus"
111+
(onValueChanged)="onSelectOnFocusChanged($event)"
112+
/>
113+
</div>
114+
<div class="option">
115+
<dx-check-box
116+
id="rtlMode"
117+
text="Right-to-left mode"
118+
[value]="rtlMode"
119+
(onValueChanged)="onRtlModeChanged($event)"
120+
/>
121+
</div>
122+
</div>
123+
</div>

‎apps/demos/Demos/Stepper/Overview/Angular/app/app.component.ts‎

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
import { NgModule, Component, enableProdMode } from '@angular/core';
2+
import { BrowserModule } from '@angular/platform-browser';
3+
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
4+
5+
import { DxStepperModule, DxButtonGroupModule, DxCheckBoxModule } from 'devextreme-angular';
6+
import { DxButtonGroupTypes } from 'devextreme-angular/ui/button-group';
7+
import { DxCheckBoxTypes } from 'devextreme-angular/ui/check-box';
8+
import { Item } from 'devextreme/ui/stepper';
9+
import { AppService } from './app.service';
10+
11+
if (!/localhost/.test(document.location.host)) {
12+
enableProdMode();
13+
}
14+
15+
let modulePrefix = '';
16+
// @ts-ignore
17+
if (window && window.config?.packageConfigPaths) {
18+
modulePrefix = '/app';
19+
}
20+
21+
@Component({
22+
selector: 'demo-app',
23+
templateUrl: `.${modulePrefix}/app.component.html`,
24+
styleUrls: [`.${modulePrefix}/app.component.css`],
25+
})
26+
export class AppComponent {
27+
steps: Item[];
28+
orientations: any[];
29+
navigationModes: any[];
30+
31+
orientation: string;
32+
navigationMode: boolean;
33+
selectOnFocus: boolean = true;
34+
rtlMode: boolean = false;
35+
36+
constructor(private readonly appService: AppService) {
37+
this.steps = this.appService.getSteps();
38+
this.orientations = this.appService.getOrientations();
39+
this.navigationModes = this.appService.getNavigationModes();
40+
41+
this.orientation = this.orientations[0].value;
42+
this.navigationMode = this.navigationModes[0].value;
43+
}
44+
45+
onOrientationClick(e: DxButtonGroupTypes.ItemClickEvent) {
46+
this.orientation = e.itemData.value;
47+
}
48+
49+
onNavigationModeClick(e: DxButtonGroupTypes.ItemClickEvent) {
50+
this.navigationMode = e.itemData.value;
51+
}
52+
53+
onSelectOnFocusChanged(e: DxCheckBoxTypes.ValueChangedEvent) {
54+
this.selectOnFocus = e.value;
55+
}
56+
57+
onRtlModeChanged(e: DxCheckBoxTypes.ValueChangedEvent) {
58+
this.rtlMode = e.value;
59+
}
60+
}
61+
62+
@NgModule({
63+
imports: [
64+
BrowserModule,
65+
DxStepperModule,
66+
DxButtonGroupModule,
67+
DxCheckBoxModule,
68+
],
69+
declarations: [AppComponent],
70+
bootstrap: [AppComponent],
71+
providers: [AppService],
72+
})
73+
export class AppModule { }
74+
75+
platformBrowserDynamic().bootstrapModule(AppModule);

‎apps/demos/Demos/Stepper/Overview/Angular/app/app.service.ts‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
import { Injectable } from "@angular/core";
2+
import { Item } from "devextreme/ui/stepper";
3+
4+
@Injectable({
5+
providedIn: "root"
6+
})
7+
export class AppService {
8+
steps: Item[] = [];
9+
orientations = [];
10+
navigationModes = [];
11+
12+
constructor() {
13+
this.steps = [
14+
{
15+
text: "A",
16+
label: "Cart",
17+
icon: "cart"
18+
},
19+
{
20+
text: "B",
21+
label: "Shipping Info",
22+
icon: "clipboardtasklist"
23+
},
24+
{
25+
text: "C",
26+
label: "Promo Code",
27+
icon: "gift",
28+
optional: true
29+
},
30+
{
31+
text: "D",
32+
label: "Checkout",
33+
icon: "packagebox"
34+
},
35+
{
36+
text: "E",
37+
label: "Ordered",
38+
icon: "checkmarkcircle"
39+
}
40+
];
41+
42+
this.orientations = [
43+
{ text: "Horizontal", value: "horizontal" },
44+
{ text: "Vertical", value: "vertical" }
45+
];
46+
47+
this.navigationModes = [
48+
{ text: 'Non-linear', value: false },
49+
{ text: 'Linear', value: true },
50+
]
51+
}
52+
53+
getSteps(): Item[] {
54+
return this.steps;
55+
}
56+
57+
getOrientations() {
58+
return this.orientations;
59+
}
60+
61+
getNavigationModes() {
62+
return this.navigationModes;
63+
}
64+
}

‎apps/demos/Demos/Stepper/Overview/Angular/index.html‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<!DOCTYPE html>
2+
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
3+
<head>
4+
<title>DevExtreme Demo</title>
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0" />
8+
<link rel="stylesheet" type="text/css" href="../../../../node_modules/devextreme-dist/css/dx.light.css" />
9+
10+
<script src="../../../../node_modules/core-js/client/shim.min.js"></script>
11+
<script src="../../../../node_modules/zone.js/bundles/zone.umd.js"></script>
12+
<script src="../../../../node_modules/reflect-metadata/Reflect.js"></script>
13+
<script src="../../../../node_modules/systemjs/dist/system.js"></script>
14+
15+
<script src="config.js"></script>
16+
<script>
17+
System.import("app").catch(console.error.bind(console));
18+
</script>
19+
</head>
20+
21+
<body class="dx-viewport">
22+
<div class="demo-container">
23+
<demo-app>Loading...</demo-app>
24+
</div>
25+
</body>
26+
</html>

0 commit comments

Comments
 (0)