Skip to content

Commit 078b1cd

Browse files
EugeniyKiyashkoEugeniyKiyashko
authored
Stepper: implement Step Template demo (#29557)
1 parent 73f5558 commit 078b1cd

Some content is hidden

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

41 files changed

+1028
-1
lines changed

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

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
::ng-deep demo-app {
2+
display: flex;
3+
flex-direction: column;
4+
align-items: center;
5+
justify-content: center;
6+
row-gap: 16px;
7+
height: 760px;
8+
min-width: 320px;
9+
}
10+
11+
::ng-deep .stepper-label {
12+
font-weight: 600;
13+
}
14+
15+
::ng-deep #customStepShape {
16+
margin-bottom: 64px;
17+
}
18+
19+
::ng-deep #customStepShape .dx-step-indicator {
20+
border-radius: 4px;
21+
}
22+
23+
::ng-deep #titleOnly {
24+
margin-bottom: 64px;
25+
align-items: center;
26+
}
27+
28+
::ng-deep #titleOnly .dx-step {
29+
padding-inline: 2px;
30+
}
31+
32+
::ng-deep #titleOnly .dx-step-content {
33+
padding-block: 4px;
34+
}
35+
36+
::ng-deep #titleOnly .dx-step-label {
37+
width: auto;
38+
max-width: 100%;
39+
}
40+
41+
::ng-deep #titleOnly .dx-step-title {
42+
background-color: var(--dx-color-main-bg);
43+
padding-inline: 8px;
44+
}
45+
46+
::ng-deep #titleOnly .dx-step.dx-state-focused .dx-step-label {
47+
box-shadow: 0 0 0 2px var(--dx-color-main-bg), 0 0 0 4px var(--dx-color-primary), 0 0 0 8px var(--dx-color-main-bg);
48+
border-radius: 4px;
49+
}
50+
51+
::ng-deep #iconOnly {
52+
align-items: center;
53+
}
54+
55+
::ng-deep #iconOnly .dx-step-content {
56+
margin-block: 4px;
57+
}
58+
59+
::ng-deep #iconOnly .dx-icon {
60+
padding: 6px;
61+
background-color: var(--dx-color-main-bg);
62+
}
63+
64+
::ng-deep #iconOnly .dx-state-focused .dx-icon {
65+
box-shadow: 0 0 0 2px var(--dx-color-primary), 0 0 0 6px var(--dx-color-main-bg);
66+
border-radius: 4px;
67+
}
68+
69+
::ng-deep #iconOnly :is(.dx-step-selected, .dx-step-completed) .dx-icon {
70+
color: var(--dx-color-primary);
71+
}

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

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
<div class="stepper-label">Custom Step Shape</div>
2+
<dx-stepper
3+
id="customStepShape"
4+
[dataSource]="steps"
5+
[selectedIndex]="2"
6+
[linear]="false"
7+
>
8+
<div *dxTemplate="let data of 'item'">
9+
<div class="dx-step-indicator">
10+
<i class="dx-icon" [ngClass]="'dx-icon-' + data.icon"></i>
11+
</div>
12+
<div class="dx-step-label">
13+
<div class="dx-step-title">{{ data.title }}</div>
14+
<div class="dx-step-optional-mark" *ngIf="data.optional">(Optional)</div>
15+
</div>
16+
</div>
17+
</dx-stepper>
18+
<div class="stepper-label">Title Only</div>
19+
<dx-stepper
20+
id="titleOnly"
21+
[dataSource]="steps"
22+
[selectedIndex]="2"
23+
[linear]="false"
24+
>
25+
<div *dxTemplate="let data of 'item'">
26+
<div class="dx-step-label">
27+
<div class="dx-step-title">{{ data.title }}</div>
28+
</div>
29+
</div>
30+
</dx-stepper>
31+
<div class="stepper-label">Icon Only</div>
32+
<dx-stepper
33+
id="iconOnly"
34+
[dataSource]="steps"
35+
[selectedIndex]="2"
36+
[linear]="false"
37+
>
38+
<div *dxTemplate="let data of 'item'">
39+
<i class="dx-icon" [ngClass]="'dx-icon-' + data.icon"></i>
40+
</div>
41+
</dx-stepper>

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

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
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 } from 'devextreme-angular';
6+
import { Item } from 'devextreme/ui/stepper';
7+
import { AppService } from './app.service';
8+
9+
if (!/localhost/.test(document.location.host)) {
10+
enableProdMode();
11+
}
12+
13+
let modulePrefix = '';
14+
// @ts-ignore
15+
if (window && window.config?.packageConfigPaths) {
16+
modulePrefix = '/app';
17+
}
18+
19+
@Component({
20+
selector: 'demo-app',
21+
templateUrl: `.${modulePrefix}/app.component.html`,
22+
styleUrls: [`.${modulePrefix}/app.component.css`],
23+
})
24+
export class AppComponent {
25+
steps: Item[];
26+
27+
constructor(private readonly appService: AppService) {
28+
this.steps = this.appService.getSteps();
29+
}
30+
}
31+
32+
@NgModule({
33+
imports: [
34+
BrowserModule,
35+
DxStepperModule,
36+
],
37+
declarations: [AppComponent],
38+
bootstrap: [AppComponent],
39+
providers: [AppService],
40+
})
41+
export class AppModule { }
42+
43+
platformBrowserDynamic().bootstrapModule(AppModule);

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

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
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+
10+
constructor() {
11+
this.steps = [{
12+
text: 'A',
13+
title: 'Cart',
14+
icon: 'cart',
15+
},
16+
{
17+
text: 'B',
18+
title: 'Shipping Info',
19+
icon: 'clipboardtasklist',
20+
},
21+
{
22+
text: 'C',
23+
title: 'Promo Code',
24+
icon: 'gift',
25+
optional: true,
26+
},
27+
{
28+
text: 'D',
29+
title: 'Checkout',
30+
icon: 'packagebox',
31+
},
32+
{
33+
text: 'E',
34+
title: 'Ordered',
35+
icon: 'checkmarkcircle',
36+
}];
37+
}
38+
39+
getSteps(): Item[] {
40+
return this.steps;
41+
}
42+
}

‎apps/demos/Demos/Stepper/StepTemplate/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>

‎apps/demos/Demos/Stepper/StepTemplate/React/App.tsx‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import React from 'react';
2+
import Stepper from 'devextreme-react/stepper';
3+
4+
import { steps } from './data.ts';
5+
import CustomStepShape from './CustomStepShape.tsx';
6+
import TitleOnly from './TitleOnly.tsx';
7+
import IconOnly from './IconOnly.tsx';
8+
9+
export default function App() {
10+
return (
11+
<>
12+
<div className="stepper-label">Custom Step Shape</div>
13+
<Stepper
14+
id="customStepShape"
15+
dataSource={steps}
16+
defaultSelectedIndex={2}
17+
linear={false}
18+
itemRender={CustomStepShape}
19+
/>
20+
<div className="stepper-label">Title Only</div>
21+
<Stepper
22+
id="titleOnly"
23+
dataSource={steps}
24+
defaultSelectedIndex={2}
25+
linear={false}
26+
itemRender={TitleOnly}
27+
/>
28+
<div className="stepper-label">Icon Only</div>
29+
<Stepper
30+
id="iconOnly"
31+
dataSource={steps}
32+
defaultSelectedIndex={2}
33+
linear={false}
34+
itemRender={IconOnly}
35+
/>
36+
</>
37+
);
38+
}

‎apps/demos/Demos/Stepper/StepTemplate/React/CustomStepShape.tsx‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import React from 'react';
2+
3+
export default function CustomStepShape(data) {
4+
return (
5+
<>
6+
<div className="dx-step-indicator">
7+
<i className={`dx-icon dx-icon-${data.icon}`}></i>
8+
</div>
9+
<div className="dx-step-label">
10+
<div className="dx-step-title">{data.title}</div>
11+
{data.optional && <div className="dx-step-optional-mark">(Optional)</div>}
12+
</div>
13+
</>
14+
);
15+
}

‎apps/demos/Demos/Stepper/StepTemplate/React/IconOnly.tsx‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import React from 'react';
2+
3+
export default function IconOnly(data) {
4+
return (
5+
<i className={`dx-icon dx-icon-${data.icon}`}></i>
6+
);
7+
}

‎apps/demos/Demos/Stepper/StepTemplate/React/TitleOnly.tsx‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import React from 'react';
2+
3+
export default function TitleOnly(data) {
4+
return (
5+
<div className="dx-step-label">
6+
<div className="dx-step-title">{data.title}</div>
7+
</div>
8+
);
9+
}

‎apps/demos/Demos/Stepper/StepTemplate/React/data.ts‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
export const steps = [{
2+
text: 'A',
3+
title: 'Cart',
4+
icon: 'cart',
5+
}, {
6+
text: 'B',
7+
title: 'Shipping Info',
8+
icon: 'clipboardtasklist',
9+
}, {
10+
text: 'C',
11+
title: 'Promo Code',
12+
icon: 'gift',
13+
optional: true,
14+
}, {
15+
text: 'D',
16+
title: 'Checkout',
17+
icon: 'packagebox',
18+
}, {
19+
text: 'E',
20+
title: 'Ordered',
21+
icon: 'checkmarkcircle',
22+
}];

0 commit comments

Comments
 (0)