Skip to content

Commit 8d70698

Browse files
crisbetocrisbeto
committed
main - bb2829d docs(material/table): use CSS transition for animation (#30454)
1 parent ff2947c commit 8d70698

File tree

10 files changed

+141
-84
lines changed

10 files changed

+141
-84
lines changed

‎docs-content/examples-highlighted/material/table/table-expandable-rows/table-expandable-rows-example-css.html‎

Lines changed: 25 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,10 @@
66
<span class="hljs-attribute">height</span>: <span class="hljs-number">0</span>;
77
}
88

9+
<span class="hljs-selector-tag">tr</span><span class="hljs-selector-class">.example-element-row</span> {
10+
<span class="hljs-attribute">cursor</span>: pointer;
11+
}
12+
913
<span class="hljs-selector-tag">tr</span><span class="hljs-selector-class">.example-element-row</span><span class="hljs-selector-pseudo">:not</span>(<span class="hljs-selector-class">.example-expanded-row</span>)<span class="hljs-selector-pseudo">:hover</span> {
1014
<span class="hljs-attribute">background</span>: whitesmoke;
1115
}
@@ -18,9 +22,21 @@
1822
<span class="hljs-attribute">border-bottom-width</span>: <span class="hljs-number">0</span>;
1923
}
2024

21-
<span class="hljs-selector-class">.example-element-detail</span> {
25+
<span class="hljs-selector-class">.example-element-detail-wrapper</span> {
2226
<span class="hljs-attribute">overflow</span>: hidden;
27+
<span class="hljs-attribute">display</span>: grid;
28+
grid-template-rows: <span class="hljs-number">0</span>fr;
29+
grid-template-<span class="hljs-attribute">columns</span>: <span class="hljs-number">100%</span>;
30+
<span class="hljs-attribute">transition</span>: grid-template-rows <span class="hljs-number">225ms</span> <span class="hljs-built_in">cubic-bezier</span>(<span class="hljs-number">0.4</span>, <span class="hljs-number">0</span>, <span class="hljs-number">0.2</span>, <span class="hljs-number">1</span>);
31+
}
32+
33+
<span class="hljs-selector-class">.example-element-detail-wrapper-expanded</span> {
34+
grid-template-rows: <span class="hljs-number">1</span>fr;
35+
}
36+
37+
<span class="hljs-selector-class">.example-element-detail</span> {
2338
<span class="hljs-attribute">display</span>: flex;
39+
<span class="hljs-attribute">min-height</span>: <span class="hljs-number">0</span>;
2440
}
2541

2642
<span class="hljs-selector-class">.example-element-diagram</span> {
@@ -45,3 +61,11 @@
4561
<span class="hljs-selector-class">.example-element-description-attribution</span> {
4662
<span class="hljs-attribute">opacity</span>: <span class="hljs-number">0.5</span>;
4763
}
64+
65+
<span class="hljs-selector-class">.example-toggle-button</span> {
66+
<span class="hljs-attribute">transition</span>: transform <span class="hljs-number">225ms</span> <span class="hljs-built_in">cubic-bezier</span>(<span class="hljs-number">0.4</span>, <span class="hljs-number">0</span>, <span class="hljs-number">0.2</span>, <span class="hljs-number">1</span>);
67+
}
68+
69+
<span class="hljs-selector-class">.example-toggle-button-expanded</span> {
70+
<span class="hljs-attribute">transform</span>: <span class="hljs-built_in">rotate</span>(<span class="hljs-number">180deg</span>);
71+
}

‎docs-content/examples-highlighted/material/table/table-expandable-rows/table-expandable-rows-example-html.html‎

Lines changed: 24 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -3,37 +3,40 @@
33
<span class="hljs-attr">class</span>=<span class="hljs-string">&quot;mat-elevation-z8&quot;</span>&gt;</span>
44
@for (column of columnsToDisplay; track column) {
55
<span class="hljs-tag">&lt;<span class="hljs-name">ng-container</span> <span class="hljs-attr">matColumnDef</span>=<span class="hljs-string">&quot;{{column}}&quot;</span>&gt;</span>
6-
<span class="hljs-tag">&lt;<span class="hljs-name">th</span> <span class="hljs-attr">mat-header-cell</span> *<span class="hljs-attr">matHeaderCellDef</span>&gt;</span> {{column}} <span class="hljs-tag">&lt;/<span class="hljs-name">th</span>&gt;</span>
7-
<span class="hljs-tag">&lt;<span class="hljs-name">td</span> <span class="hljs-attr">mat-cell</span> *<span class="hljs-attr">matCellDef</span>=<span class="hljs-string">&quot;let element&quot;</span>&gt;</span> {{element[column]}} <span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span>
6+
<span class="hljs-tag">&lt;<span class="hljs-name">th</span> <span class="hljs-attr">mat-header-cell</span> *<span class="hljs-attr">matHeaderCellDef</span>&gt;</span>{{column}}<span class="hljs-tag">&lt;/<span class="hljs-name">th</span>&gt;</span>
7+
<span class="hljs-tag">&lt;<span class="hljs-name">td</span> <span class="hljs-attr">mat-cell</span> *<span class="hljs-attr">matCellDef</span>=<span class="hljs-string">&quot;let element&quot;</span>&gt;</span>{{element[column]}}<span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span>
88
<span class="hljs-tag">&lt;/<span class="hljs-name">ng-container</span>&gt;</span>
99
}
1010
<span class="hljs-tag">&lt;<span class="hljs-name">ng-container</span> <span class="hljs-attr">matColumnDef</span>=<span class="hljs-string">&quot;expand&quot;</span>&gt;</span>
1111
<span class="hljs-tag">&lt;<span class="hljs-name">th</span> <span class="hljs-attr">mat-header-cell</span> *<span class="hljs-attr">matHeaderCellDef</span> <span class="hljs-attr">aria-label</span>=<span class="hljs-string">&quot;row actions&quot;</span>&gt;</span><span class="hljs-symbol">&amp;nbsp;</span><span class="hljs-tag">&lt;/<span class="hljs-name">th</span>&gt;</span>
1212
<span class="hljs-tag">&lt;<span class="hljs-name">td</span> <span class="hljs-attr">mat-cell</span> *<span class="hljs-attr">matCellDef</span>=<span class="hljs-string">&quot;let element&quot;</span>&gt;</span>
13-
<span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">mat-icon-button</span> <span class="hljs-attr">aria-label</span>=<span class="hljs-string">&quot;expand row&quot;</span> (<span class="hljs-attr">click</span>)=<span class="hljs-string">&quot;(expandedElement = expandedElement === element ? null : element); $event.stopPropagation()&quot;</span>&gt;</span>
14-
@if (expandedElement === element) {
15-
<span class="hljs-tag">&lt;<span class="hljs-name">mat-icon</span>&gt;</span>keyboard_arrow_up<span class="hljs-tag">&lt;/<span class="hljs-name">mat-icon</span>&gt;</span>
16-
} @else {
17-
<span class="hljs-tag">&lt;<span class="hljs-name">mat-icon</span>&gt;</span>keyboard_arrow_down<span class="hljs-tag">&lt;/<span class="hljs-name">mat-icon</span>&gt;</span>
18-
}
13+
<span class="hljs-tag">&lt;<span class="hljs-name">button</span>
14+
<span class="hljs-attr">mat-icon-button</span>
15+
<span class="hljs-attr">aria-label</span>=<span class="hljs-string">&quot;expand row&quot;</span>
16+
(<span class="hljs-attr">click</span>)=<span class="hljs-string">&quot;toggle(element); $event.stopPropagation()&quot;</span>
17+
<span class="hljs-attr">class</span>=<span class="hljs-string">&quot;example-toggle-button&quot;</span>
18+
[<span class="hljs-attr">class.example-toggle-button-expanded</span>]=<span class="hljs-string">&quot;isExpanded(element)&quot;</span>&gt;</span>
19+
<span class="hljs-tag">&lt;<span class="hljs-name">mat-icon</span>&gt;</span>keyboard_arrow_down<span class="hljs-tag">&lt;/<span class="hljs-name">mat-icon</span>&gt;</span>
1920
<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
2021
<span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span>
2122
<span class="hljs-tag">&lt;/<span class="hljs-name">ng-container</span>&gt;</span>
2223

2324
<span class="hljs-comment">&lt;!-- Expanded Content Column - The detail row is made up of this one column that spans across all columns --&gt;</span>
2425
<span class="hljs-tag">&lt;<span class="hljs-name">ng-container</span> <span class="hljs-attr">matColumnDef</span>=<span class="hljs-string">&quot;expandedDetail&quot;</span>&gt;</span>
2526
<span class="hljs-tag">&lt;<span class="hljs-name">td</span> <span class="hljs-attr">mat-cell</span> *<span class="hljs-attr">matCellDef</span>=<span class="hljs-string">&quot;let element&quot;</span> [<span class="hljs-attr">attr.colspan</span>]=<span class="hljs-string">&quot;columnsToDisplayWithExpand.length&quot;</span>&gt;</span>
26-
<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;example-element-detail&quot;</span>
27-
[@<span class="hljs-attr">detailExpand</span>]=<span class="hljs-string">&quot;element == expandedElement ? &#x27;expanded&#x27; : &#x27;collapsed&#x27;&quot;</span>&gt;</span>
28-
<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;example-element-diagram&quot;</span>&gt;</span>
29-
<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;example-element-position&quot;</span>&gt;</span> {{element.position}} <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
30-
<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;example-element-symbol&quot;</span>&gt;</span> {{element.symbol}} <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
31-
<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;example-element-name&quot;</span>&gt;</span> {{element.name}} <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
32-
<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;example-element-weight&quot;</span>&gt;</span> {{element.weight}} <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
33-
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
34-
<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;example-element-description&quot;</span>&gt;</span>
35-
{{element.description}}
36-
<span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;example-element-description-attribution&quot;</span>&gt;</span> -- Wikipedia <span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
27+
<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;example-element-detail-wrapper&quot;</span>
28+
[<span class="hljs-attr">class.example-element-detail-wrapper-expanded</span>]=<span class="hljs-string">&quot;isExpanded(element)&quot;</span>&gt;</span>
29+
<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;example-element-detail&quot;</span>&gt;</span>
30+
<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;example-element-diagram&quot;</span>&gt;</span>
31+
<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;example-element-position&quot;</span>&gt;</span>{{element.position}}<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
32+
<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;example-element-symbol&quot;</span>&gt;</span>{{element.symbol}}<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
33+
<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;example-element-name&quot;</span>&gt;</span>{{element.name}}<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
34+
<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;example-element-weight&quot;</span>&gt;</span>{{element.weight}}<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
35+
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
36+
<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;example-element-description&quot;</span>&gt;</span>
37+
{{element.description}}
38+
<span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;example-element-description-attribution&quot;</span>&gt;</span> -- Wikipedia <span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
39+
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
3740
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
3841
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
3942
<span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span>
@@ -42,8 +45,8 @@
4245
<span class="hljs-tag">&lt;<span class="hljs-name">tr</span> <span class="hljs-attr">mat-header-row</span> *<span class="hljs-attr">matHeaderRowDef</span>=<span class="hljs-string">&quot;columnsToDisplayWithExpand&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">tr</span>&gt;</span>
4346
<span class="hljs-tag">&lt;<span class="hljs-name">tr</span> <span class="hljs-attr">mat-row</span> *<span class="hljs-attr">matRowDef</span>=<span class="hljs-string">&quot;let element; columns: columnsToDisplayWithExpand;&quot;</span>
4447
<span class="hljs-attr">class</span>=<span class="hljs-string">&quot;example-element-row&quot;</span>
45-
[<span class="hljs-attr">class.example-expanded-row</span>]=<span class="hljs-string">&quot;expandedElement === element&quot;</span>
46-
(<span class="hljs-attr">click</span>)=<span class="hljs-string">&quot;expandedElement = expandedElement === element ? null : element&quot;</span>&gt;</span>
48+
[<span class="hljs-attr">class.example-expanded-row</span>]=<span class="hljs-string">&quot;isExpanded(element)&quot;</span>
49+
(<span class="hljs-attr">click</span>)=<span class="hljs-string">&quot;toggle(element)&quot;</span>&gt;</span>
4750
<span class="hljs-tag">&lt;/<span class="hljs-name">tr</span>&gt;</span>
4851
<span class="hljs-tag">&lt;<span class="hljs-name">tr</span> <span class="hljs-attr">mat-row</span> *<span class="hljs-attr">matRowDef</span>=<span class="hljs-string">&quot;let row; columns: [&#x27;expandedDetail&#x27;]&quot;</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;example-detail-row&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">tr</span>&gt;</span>
4952
<span class="hljs-tag">&lt;/<span class="hljs-name">table</span>&gt;</span>

‎docs-content/examples-highlighted/material/table/table-expandable-rows/table-expandable-rows-example-ts.html‎

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
<span class="hljs-keyword">import</span> {Component} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@angular/core&#x27;</span>;
2-
<span class="hljs-keyword">import</span> {animate, state, style, transition, trigger} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@angular/animations&#x27;</span>;
32
<span class="hljs-keyword">import</span> {MatIconModule} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@angular/material/icon&#x27;</span>;
43
<span class="hljs-keyword">import</span> {MatButtonModule} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@angular/material/button&#x27;</span>;
54
<span class="hljs-keyword">import</span> {MatTableModule} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@angular/material/table&#x27;</span>;
@@ -11,20 +10,23 @@
1110
<span class="hljs-attr">selector</span>: <span class="hljs-string">&#x27;table-expandable-rows-example&#x27;</span>,
1211
<span class="hljs-attr">styleUrl</span>: <span class="hljs-string">&#x27;table-expandable-rows-example.css&#x27;</span>,
1312
<span class="hljs-attr">templateUrl</span>: <span class="hljs-string">&#x27;table-expandable-rows-example.html&#x27;</span>,
14-
<span class="hljs-attr">animations</span>: [
15-
trigger(<span class="hljs-string">&#x27;detailExpand&#x27;</span>, [
16-
state(<span class="hljs-string">&#x27;collapsed,void&#x27;</span>, style({<span class="hljs-attr">height</span>: <span class="hljs-string">&#x27;0px&#x27;</span>, <span class="hljs-attr">minHeight</span>: <span class="hljs-string">&#x27;0&#x27;</span>})),
17-
state(<span class="hljs-string">&#x27;expanded&#x27;</span>, style({<span class="hljs-attr">height</span>: <span class="hljs-string">&#x27;*&#x27;</span>})),
18-
transition(<span class="hljs-string">&#x27;expanded &lt;=&gt; collapsed&#x27;</span>, animate(<span class="hljs-string">&#x27;225ms cubic-bezier(0.4, 0.0, 0.2, 1)&#x27;</span>)),
19-
]),
20-
],
2113
<span class="hljs-attr">imports</span>: [MatTableModule, MatButtonModule, MatIconModule],
2214
})
2315
<span class="hljs-keyword">export</span> <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">TableExpandableRowsExample</span> </span>{
2416
dataSource = ELEMENT_DATA;
2517
columnsToDisplay = [<span class="hljs-string">&#x27;name&#x27;</span>, <span class="hljs-string">&#x27;weight&#x27;</span>, <span class="hljs-string">&#x27;symbol&#x27;</span>, <span class="hljs-string">&#x27;position&#x27;</span>];
2618
columnsToDisplayWithExpand = [...this.columnsToDisplay, <span class="hljs-string">&#x27;expand&#x27;</span>];
2719
expandedElement: PeriodicElement | <span class="hljs-literal">null</span>;
20+
21+
<span class="hljs-comment">/** Checks whether an element is expanded. */</span>
22+
<span class="hljs-function"><span class="hljs-title">isExpanded</span>(<span class="hljs-params">element: PeriodicElement</span>)</span> {
23+
<span class="hljs-keyword">return</span> <span class="hljs-built_in">this</span>.expandedElement === element;
24+
}
25+
26+
<span class="hljs-comment">/** Toggles the expanded state of an element. */</span>
27+
<span class="hljs-function"><span class="hljs-title">toggle</span>(<span class="hljs-params">element: PeriodicElement</span>)</span> {
28+
<span class="hljs-built_in">this</span>.expandedElement = <span class="hljs-built_in">this</span>.isExpanded(element) ? <span class="hljs-literal">null</span> : element;
29+
}
2830
}
2931

3032
<span class="hljs-keyword">export</span> <span class="hljs-keyword">interface</span> PeriodicElement {

‎docs-content/examples-source/material/table/table-expandable-rows/table-expandable-rows-example.css‎

Lines changed: 25 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,10 @@ tr.example-detail-row {
66
height: 0;
77
}
88

9+
tr.example-element-row {
10+
cursor: pointer;
11+
}
12+
913
tr.example-element-row:not(.example-expanded-row):hover {
1014
background: whitesmoke;
1115
}
@@ -18,9 +22,21 @@ tr.example-element-row:not(.example-expanded-row):active {
1822
border-bottom-width: 0;
1923
}
2024

21-
.example-element-detail {
25+
.example-element-detail-wrapper {
2226
overflow: hidden;
27+
display: grid;
28+
grid-template-rows: 0fr;
29+
grid-template-columns: 100%;
30+
transition: grid-template-rows 225ms cubic-bezier(0.4, 0, 0.2, 1);
31+
}
32+
33+
.example-element-detail-wrapper-expanded {
34+
grid-template-rows: 1fr;
35+
}
36+
37+
.example-element-detail {
2338
display: flex;
39+
min-height: 0;
2440
}
2541

2642
.example-element-diagram {
@@ -45,3 +61,11 @@ tr.example-element-row:not(.example-expanded-row):active {
4561
.example-element-description-attribution {
4662
opacity: 0.5;
4763
}
64+
65+
.example-toggle-button {
66+
transition: transform 225ms cubic-bezier(0.4, 0, 0.2, 1);
67+
}
68+
69+
.example-toggle-button-expanded {
70+
transform: rotate(180deg);
71+
}

0 commit comments

Comments
 (0)