Skip to content

Commit 7b10b65

Browse files
dxvladislavvolkovdxvladislavvolkov
committed
Migrate Layout/Buttons/Popup/Interactive Wrapper demos to the new ng nested component syntax
1 parent b5a9487 commit 7b10b65

File tree

10 files changed

+115
-115
lines changed

10 files changed

+115
-115
lines changed

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

Lines changed: 21 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,43 @@
11
<dx-box direction="row" width="100%" [height]="75">
2-
<dxi-item class="rect demo-dark" [ratio]="1"> ratio = 1 </dxi-item>
3-
<dxi-item class="rect demo-light" [ratio]="2"> ratio = 2 </dxi-item>
4-
<dxi-item class="rect demo-dark" [ratio]="1"> ratio = 1 </dxi-item>
2+
<dxi-box-item class="rect demo-dark" [ratio]="1"> ratio = 1 </dxi-box-item>
3+
<dxi-box-item class="rect demo-light" [ratio]="2"> ratio = 2 </dxi-box-item>
4+
<dxi-box-item class="rect demo-dark" [ratio]="1"> ratio = 1 </dxi-box-item>
55
</dx-box>
66
<br />
77
<dx-box direction="row" width="100%" [height]="75">
8-
<dxi-item class="rect demo-dark" [ratio]="0" [baseSize]="150">
8+
<dxi-box-item class="rect demo-dark" [ratio]="0" [baseSize]="150">
99
150px
10-
</dxi-item>
11-
<dxi-item class="demo-light" [ratio]="1">
10+
</dxi-box-item>
11+
<dxi-box-item class="demo-light" [ratio]="1">
1212
<dx-box
1313
direction="row"
1414
width="100%"
1515
[height]="75"
1616
align="center"
1717
crossAlign="center"
1818
>
19-
<dxi-item [ratio]="0" [baseSize]="50">
19+
<dxi-box-item [ratio]="0" [baseSize]="50">
2020
<div class="small"></div>
21-
</dxi-item>
22-
<dxi-item [ratio]="0" [baseSize]="50">
21+
</dxi-box-item>
22+
<dxi-box-item [ratio]="0" [baseSize]="50">
2323
<div class="small"></div>
24-
</dxi-item>
25-
<dxi-item [ratio]="0" [baseSize]="50">
24+
</dxi-box-item>
25+
<dxi-box-item [ratio]="0" [baseSize]="50">
2626
<div class="small"></div>
27-
</dxi-item>
27+
</dxi-box-item>
2828
</dx-box>
29-
</dxi-item>
30-
<dxi-item class="rect demo-dark" [ratio]="0" baseSize="10%"> 10% </dxi-item>
29+
</dxi-box-item>
30+
<dxi-box-item class="rect demo-dark" [ratio]="0" baseSize="10%"> 10% </dxi-box-item>
3131
</dx-box>
3232
<br />
3333
<dx-box direction="col" width="100%" [height]="250">
34-
<dxi-item class="rect demo-dark header" [ratio]="1"> Header </dxi-item>
35-
<dxi-item [ratio]="2" [baseSize]="0">
34+
<dxi-box-item class="rect demo-dark header" [ratio]="1"> Header </dxi-box-item>
35+
<dxi-box-item [ratio]="2" [baseSize]="0">
3636
<dx-box direction="row" width="100%" [height]="125">
37-
<dxi-item class="rect demo-dark" [ratio]="1"> Left Bar </dxi-item>
38-
<dxi-item class="rect demo-light" [ratio]="1"> Content </dxi-item>
39-
<dxi-item class="rect demo-dark" [ratio]="1"> Right Bar </dxi-item>
37+
<dxi-box-item class="rect demo-dark" [ratio]="1"> Left Bar </dxi-box-item>
38+
<dxi-box-item class="rect demo-light" [ratio]="1"> Content </dxi-box-item>
39+
<dxi-box-item class="rect demo-dark" [ratio]="1"> Right Bar </dxi-box-item>
4040
</dx-box>
41-
</dxi-item>
42-
<dxi-item class="rect demo-dark footer" [ratio]="1"> Footer </dxi-item>
41+
</dxi-box-item>
42+
<dxi-box-item class="rect demo-dark footer" [ratio]="1"> Footer </dxi-box-item>
4343
</dx-box>

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

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@
5050
<div class="dx-fieldset-header">Embedded in a Toolbar</div>
5151
<div class="dx-field">
5252
<dx-toolbar>
53-
<dxi-item
53+
<dxi-toolbar-item
5454
location="before"
5555
widget="dxDropDownButton"
5656
[options]="{
@@ -64,9 +64,9 @@
6464
onSelectionChanged: onAlignmentChanged
6565
}"
6666
>
67-
</dxi-item>
67+
</dxi-toolbar-item>
6868

69-
<dxi-item
69+
<dxi-toolbar-item
7070
location="before"
7171
widget="dxDropDownButton"
7272
[options]="{
@@ -78,9 +78,9 @@
7878
dropDownContentTemplate: 'colorpicker'
7979
}"
8080
>
81-
</dxi-item>
81+
</dxi-toolbar-item>
8282

83-
<dxi-item
83+
<dxi-toolbar-item
8484
location="before"
8585
widget="dxDropDownButton"
8686
[options]="{
@@ -94,9 +94,9 @@
9494
itemTemplate: 'fontItem'
9595
}"
9696
>
97-
</dxi-item>
97+
</dxi-toolbar-item>
9898

99-
<dxi-item
99+
<dxi-toolbar-item
100100
location="before"
101101
widget="dxDropDownButton"
102102
[options]="{
@@ -110,7 +110,7 @@
110110
onSelectionChanged: onLineHeightChanged
111111
}"
112112
>
113-
</dxi-item>
113+
</dxi-toolbar-item>
114114

115115
<div
116116
*dxTemplate="let data of 'fontItem'"

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

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -5,24 +5,24 @@
55
keyExpr="ID"
66
(onSelectionChanged)="selectedChanged($event)"
77
>
8-
<dxo-selection mode="single"></dxo-selection>
9-
<dxo-paging [enabled]="false"></dxo-paging>
10-
<dxo-editing mode="popup">
11-
<dxo-texts confirmDeleteMessage=""></dxo-texts>
12-
</dxo-editing>
8+
<dxo-data-grid-selection mode="single"></dxo-data-grid-selection>
9+
<dxo-data-grid-paging [enabled]="false"></dxo-data-grid-paging>
10+
<dxo-data-grid-editing mode="popup">
11+
<dxo-data-grid-texts confirmDeleteMessage=""></dxo-data-grid-texts>
12+
</dxo-data-grid-editing>
1313

14-
<dxi-column dataField="Prefix" caption="Title"></dxi-column>
15-
<dxi-column dataField="FirstName"></dxi-column>
16-
<dxi-column dataField="LastName"></dxi-column>
17-
<dxi-column dataField="Position" [width]="130"></dxi-column>
18-
<dxi-column dataField="StateID" [width]="125" caption="State">
19-
<dxo-lookup
14+
<dxi-data-grid-column dataField="Prefix" caption="Title"></dxi-data-grid-column>
15+
<dxi-data-grid-column dataField="FirstName"></dxi-data-grid-column>
16+
<dxi-data-grid-column dataField="LastName"></dxi-data-grid-column>
17+
<dxi-data-grid-column dataField="Position" [width]="130"></dxi-data-grid-column>
18+
<dxi-data-grid-column dataField="StateID" [width]="125" caption="State">
19+
<dxo-data-grid-lookup
2020
[dataSource]="states"
2121
displayExpr="Name"
2222
valueExpr="ID"
23-
></dxo-lookup>
24-
</dxi-column>
25-
<dxi-column dataField="BirthDate" [width]="125" dataType="date"></dxi-column>
23+
></dxo-data-grid-lookup>
24+
</dxi-data-grid-column>
25+
<dxi-data-grid-column dataField="BirthDate" [width]="125" dataType="date"></dxi-data-grid-column>
2626
</dx-data-grid>
2727

2828
<dx-speed-dial-action

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

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -61,14 +61,14 @@
6161
position="top"
6262
[width]="300"
6363
>
64-
<dxo-animation>
65-
<dxo-show
64+
<dxo-popover-animation>
65+
<dxo-popover-show
6666
type="pop"
6767
[from]="{ scale: 0 }"
6868
[to]="{ scale: 1 }"
69-
></dxo-show>
70-
<dxo-hide type="fade" [from]="1" [to]="0"></dxo-hide>
71-
</dxo-animation>
69+
></dxo-popover-show>
70+
<dxo-popover-hide type="fade" [from]="1" [to]="0"></dxo-popover-hide>
71+
</dxo-popover-animation>
7272
<div *dxTemplate="let data = model; of: 'content'">
7373
2012 Sales Report has to be completed so we can determine if major
7474
changes are required to sales strategy.

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

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -19,22 +19,22 @@
1919
[showBorders]="true"
2020
height="100%"
2121
>
22-
<dxo-paging [pageSize]="8"></dxo-paging>
23-
<dxo-scrolling mode="virtual"></dxo-scrolling>
24-
<dxi-column
22+
<dxo-data-grid-paging [pageSize]="8"></dxo-data-grid-paging>
23+
<dxo-data-grid-scrolling mode="virtual"></dxo-data-grid-scrolling>
24+
<dxi-data-grid-column
2525
[allowGrouping]="false"
2626
dataField="OrderNumber"
2727
[width]="130"
2828
caption="Invoice Number"
29-
></dxi-column>
30-
<dxi-column dataField="CustomerStoreCity" caption="City"></dxi-column>
31-
<dxi-column
29+
></dxi-data-grid-column>
30+
<dxi-data-grid-column dataField="CustomerStoreCity" caption="City"></dxi-data-grid-column>
31+
<dxi-data-grid-column
3232
dataField="CustomerStoreState"
3333
caption="State"
34-
></dxi-column>
35-
<dxi-column dataField="Employee"></dxi-column>
36-
<dxi-column dataField="OrderDate" dataType="date"></dxi-column>
37-
<dxi-column dataField="SaleAmount" format="currency"></dxi-column>
34+
></dxi-data-grid-column>
35+
<dxi-data-grid-column dataField="Employee"></dxi-data-grid-column>
36+
<dxi-data-grid-column dataField="OrderDate" dataType="date"></dxi-data-grid-column>
37+
<dxi-data-grid-column dataField="SaleAmount" format="currency"></dxi-data-grid-column>
3838
</dx-data-grid>
3939
</dx-resizable>
4040
</div>

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

Lines changed: 31 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,71 +1,71 @@
11
<div id="page">
22
<dx-responsive-box singleColumnScreen="sm" [(screenByWidth)]="screen">
3-
<dxi-row [ratio]="1"></dxi-row>
4-
<dxi-row [ratio]="2"></dxi-row>
5-
<dxi-row [ratio]="1"></dxi-row>
3+
<dxi-responsive-box-row [ratio]="1"></dxi-responsive-box-row>
4+
<dxi-responsive-box-row [ratio]="2"></dxi-responsive-box-row>
5+
<dxi-responsive-box-row [ratio]="1"></dxi-responsive-box-row>
66

7-
<dxi-col [ratio]="1"></dxi-col>
8-
<dxi-col [ratio]="2" screen="lg"></dxi-col>
9-
<dxi-col [ratio]="1"></dxi-col>
10-
<dxi-item>
11-
<dxi-location
7+
<dxi-responsive-box-col [ratio]="1"></dxi-responsive-box-col>
8+
<dxi-responsive-box-col [ratio]="2" screen="lg"></dxi-responsive-box-col>
9+
<dxi-responsive-box-col [ratio]="1"></dxi-responsive-box-col>
10+
<dxi-responsive-box-item>
11+
<dxi-responsive-box-location
1212
[row]="0"
1313
[col]="0"
1414
[colspan]="3"
1515
screen="lg"
16-
></dxi-location>
17-
<dxi-location
16+
></dxi-responsive-box-location>
17+
<dxi-responsive-box-location
1818
[row]="0"
1919
[col]="0"
2020
[colspan]="2"
2121
screen="sm"
22-
></dxi-location>
22+
></dxi-responsive-box-location>
2323
<div *dxTemplate class="header item">
2424
<p>Header</p>
2525
</div>
26-
</dxi-item>
27-
<dxi-item>
28-
<dxi-location [row]="1" [col]="1" screen="lg"></dxi-location>
29-
<dxi-location
26+
</dxi-responsive-box-item>
27+
<dxi-responsive-box-item>
28+
<dxi-responsive-box-location [row]="1" [col]="1" screen="lg"></dxi-responsive-box-location>
29+
<dxi-responsive-box-location
3030
[row]="1"
3131
[col]="0"
3232
[colspan]="2"
3333
screen="sm"
34-
></dxi-location>
34+
></dxi-responsive-box-location>
3535
<div *dxTemplate class="content item">
3636
<p>Content</p>
3737
</div>
38-
</dxi-item>
39-
<dxi-item>
40-
<dxi-location [row]="1" [col]="0" screen="lg"></dxi-location>
41-
<dxi-location [row]="2" [col]="0" screen="sm"></dxi-location>
38+
</dxi-responsive-box-item>
39+
<dxi-responsive-box-item>
40+
<dxi-responsive-box-location [row]="1" [col]="0" screen="lg"></dxi-responsive-box-location>
41+
<dxi-responsive-box-location [row]="2" [col]="0" screen="sm"></dxi-responsive-box-location>
4242
<div *dxTemplate class="left-side-bar item">
4343
<p>Left Bar</p>
4444
</div>
45-
</dxi-item>
46-
<dxi-item>
47-
<dxi-location [row]="1" [col]="2" screen="lg"></dxi-location>
48-
<dxi-location [row]="2" [col]="1" screen="sm"></dxi-location>
45+
</dxi-responsive-box-item>
46+
<dxi-responsive-box-item>
47+
<dxi-responsive-box-location [row]="1" [col]="2" screen="lg"></dxi-responsive-box-location>
48+
<dxi-responsive-box-location [row]="2" [col]="1" screen="sm"></dxi-responsive-box-location>
4949
<div *dxTemplate class="right-side-bar item">
5050
<p>Right Bar</p>
5151
</div>
52-
</dxi-item>
53-
<dxi-item>
54-
<dxi-location
52+
</dxi-responsive-box-item>
53+
<dxi-responsive-box-item>
54+
<dxi-responsive-box-location
5555
[row]="2"
5656
[col]="0"
5757
[colspan]="3"
5858
screen="lg"
59-
></dxi-location>
60-
<dxi-location
59+
></dxi-responsive-box-location>
60+
<dxi-responsive-box-location
6161
[row]="3"
6262
[col]="0"
6363
[colspan]="2"
6464
screen="sm"
65-
></dxi-location>
65+
></dxi-responsive-box-location>
6666
<div *dxTemplate class="footer item">
6767
<p>Footer</p>
6868
</div>
69-
</dxi-item>
69+
</dxi-responsive-box-item>
7070
</dx-responsive-box>
7171
</div>

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

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,39 @@
11
<dx-splitter id="splitter">
2-
<dxi-item
2+
<dxi-splitter-item
33
[resizable]="true"
44
minSize="70px"
55
size="140px"
66
template="Left Pane"
7-
></dxi-item>
8-
<dxi-item [resizable]="true">
7+
></dxi-splitter-item>
8+
<dxi-splitter-item [resizable]="true">
99
<dx-splitter orientation="vertical">
10-
<dxi-item
10+
<dxi-splitter-item
1111
[resizable]="true"
1212
[collapsible]="true"
1313
collapsedSize="8%"
1414
maxSize="75%"
1515
template="Central Pane"
16-
></dxi-item>
17-
<dxi-item [resizable]="true" [collapsible]="true">
16+
></dxi-splitter-item>
17+
<dxi-splitter-item [resizable]="true" [collapsible]="true">
1818
<dx-splitter>
19-
<dxi-item
19+
<dxi-splitter-item
2020
[resizable]="true"
2121
[collapsible]="true"
2222
minSize="5%"
2323
size="30%"
2424
template="Nested Left Pane"
25-
></dxi-item>
26-
<dxi-item
25+
></dxi-splitter-item>
26+
<dxi-splitter-item
2727
[resizable]="true"
2828
template="Nested Central Pane"
29-
></dxi-item>
30-
<dxi-item
29+
></dxi-splitter-item>
30+
<dxi-splitter-item
3131
[resizable]="true"
3232
[collapsible]="true"
3333
minSize="5%"
3434
size="30%"
3535
template="Nested Right Pane"
36-
></dxi-item>
36+
></dxi-splitter-item>
3737

3838
<ng-container *ngFor="let pane of paneContentTemplates">
3939
<div *dxTemplate="let data of pane.name" tabindex="0">
@@ -45,7 +45,7 @@
4545
</div>
4646
</ng-container>
4747
</dx-splitter>
48-
</dxi-item>
48+
</dxi-splitter-item>
4949

5050
<ng-container *ngFor="let pane of paneContentTemplates">
5151
<div *dxTemplate="let data of pane.name" tabindex="0">
@@ -57,13 +57,13 @@
5757
</div>
5858
</ng-container>
5959
</dx-splitter>
60-
</dxi-item>
61-
<dxi-item
60+
</dxi-splitter-item>
61+
<dxi-splitter-item
6262
[resizable]="false"
6363
[collapsible]="false"
6464
size="140px"
6565
template="Right Pane"
66-
></dxi-item>
66+
></dxi-splitter-item>
6767

6868
<ng-container *ngFor="let pane of paneContentTemplates">
6969
<div *dxTemplate="let data of pane.name" tabindex="0">

0 commit comments

Comments
 (0)