From b30ddc63170f2d5e51c950b226e58c90ff66e7a7 Mon Sep 17 00:00:00 2001 From: Andrew Seguin Date: Tue, 29 May 2018 13:09:46 -0700 Subject: [PATCH] chore(table): add expandable rows demo (#11506) --- .../expandable-rows/expandable-rows.html | 28 ----- .../table/expandable-rows/expandable-rows.ts | 60 ---------- src/demo-app/table/table-demo.ts | 1 + .../table-expandable-rows-example.css | 46 +++++++ .../table-expandable-rows-example.html | 35 ++++++ .../table-expandable-rows-example.ts | 113 ++++++++++++++++++ 6 files changed, 195 insertions(+), 88 deletions(-) delete mode 100644 src/demo-app/table/expandable-rows/expandable-rows.html delete mode 100644 src/demo-app/table/expandable-rows/expandable-rows.ts create mode 100644 src/material-examples/table-expandable-rows/table-expandable-rows-example.css create mode 100644 src/material-examples/table-expandable-rows/table-expandable-rows-example.html create mode 100644 src/material-examples/table-expandable-rows/table-expandable-rows-example.ts diff --git a/src/demo-app/table/expandable-rows/expandable-rows.html b/src/demo-app/table/expandable-rows/expandable-rows.html deleted file mode 100644 index 488f7a4ee67..00000000000 --- a/src/demo-app/table/expandable-rows/expandable-rows.html +++ /dev/null @@ -1,28 +0,0 @@ - - - - - - - - - - - - - - - -
{{column}} {{element[column]}} -
- The symbol for {{element.name}} is {{element.symbol}} -
-
- - - \ No newline at end of file diff --git a/src/demo-app/table/expandable-rows/expandable-rows.ts b/src/demo-app/table/expandable-rows/expandable-rows.ts deleted file mode 100644 index d0ed013a21b..00000000000 --- a/src/demo-app/table/expandable-rows/expandable-rows.ts +++ /dev/null @@ -1,60 +0,0 @@ -/** - * @license - * Copyright Google LLC All Rights Reserved. - * - * Use of this source code is governed by an MIT-style license that can be - * found in the LICENSE file at https://angular.io/license - */ - -import {animate, state, style, transition, trigger} from '@angular/animations'; -import {Component, OnInit, ViewChild} from '@angular/core'; -import {MatPaginator, MatSort, MatTableDataSource} from '@angular/material'; -import {ELEMENT_DATA, PeriodicElement} from 'table/element-data'; - -@Component({ - moduleId: module.id, - selector: 'expandable-rows', - templateUrl: 'expandable-rows.html', - animations: [ - trigger('detailExpand', [ - state('collapsed', style({height: '0px', minHeight: '0'})), - state('expanded', style({height: '*'})), - transition('expanded <=> collapsed', - animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')), - ]), - ], - styles: [` - table { - width: 100%; - } - - tr.demo-detail-row { - height: 0; - } - - tr.demo-element-row:not(.demo-expanded):hover { - background: #F5F5F5; - } - - tr.demo-element-row:not(.demo-expanded):active { - background: #EFEFEF; - } - - .demo-element-row td { - border-bottom-width: 0; - } - `] -}) -export class ExpandableRowsDemo implements OnInit { - dataSource = new MatTableDataSource(ELEMENT_DATA.slice()); - columnsToDisplay = ['name', 'weight', 'symbol', 'position']; - expandedElement: PeriodicElement; - - @ViewChild(MatSort) sort: MatSort; - @ViewChild(MatPaginator) paginator: MatPaginator; - - ngOnInit() { - this.dataSource.sort = this.sort; - this.dataSource.paginator = this.paginator; - } -} diff --git a/src/demo-app/table/table-demo.ts b/src/demo-app/table/table-demo.ts index a1c8c3c28b6..098f477f614 100644 --- a/src/demo-app/table/table-demo.ts +++ b/src/demo-app/table/table-demo.ts @@ -29,5 +29,6 @@ export class TableDemo { 'table-row-context', 'table-selection', 'table-sorting', + 'table-expandable-rows', ]; } diff --git a/src/material-examples/table-expandable-rows/table-expandable-rows-example.css b/src/material-examples/table-expandable-rows/table-expandable-rows-example.css new file mode 100644 index 00000000000..cc604026faa --- /dev/null +++ b/src/material-examples/table-expandable-rows/table-expandable-rows-example.css @@ -0,0 +1,46 @@ +table { + width: 100%; +} + +tr.example-detail-row { + height: 0; +} + +tr.example-element-row:not(.example-expanded-row):hover { + background: #f5f5f5; +} + +tr.example-element-row:not(.example-expanded-row):active { + background: #efefef; +} + +.example-element-row td { + border-bottom-width: 0; +} + +.example-element-detail { + overflow: hidden; + display: flex; +} + +.example-element-diagram { + min-width: 80px; + border: 2px solid black; + padding: 8px; + font-weight: lighter; + margin: 8px 0; + height: 104px; +} + +.example-element-symbol { + font-weight: bold; + font-size: 48px; +} + +.example-element-description { + padding: 16px; +} + +.example-element-description-attribution { + opacity: 0.5; +} diff --git a/src/material-examples/table-expandable-rows/table-expandable-rows-example.html b/src/material-examples/table-expandable-rows/table-expandable-rows-example.html new file mode 100644 index 00000000000..bf38ae1cdfd --- /dev/null +++ b/src/material-examples/table-expandable-rows/table-expandable-rows-example.html @@ -0,0 +1,35 @@ + + + + + + + + + + + + + + + +
{{column}} {{element[column]}} +
+
+
{{element.position}}
+
{{element.symbol}}
+
{{element.name}}
+
{{element.weight}}
+
+
+ {{element.description}} + -- Wikipedia +
+
+
diff --git a/src/material-examples/table-expandable-rows/table-expandable-rows-example.ts b/src/material-examples/table-expandable-rows/table-expandable-rows-example.ts new file mode 100644 index 00000000000..9d2b3b81356 --- /dev/null +++ b/src/material-examples/table-expandable-rows/table-expandable-rows-example.ts @@ -0,0 +1,113 @@ +import {Component} from '@angular/core'; +import {animate, state, style, transition, trigger} from '@angular/animations'; + +/** + * @title Table with expandable rows + */ +@Component({ + selector: 'table-expandable-rows-example', + styleUrls: ['table-expandable-rows-example.css'], + templateUrl: 'table-expandable-rows-example.html', + animations: [ + trigger('detailExpand', [ + state('collapsed', style({height: '0px', minHeight: '0', display: 'none'})), + state('expanded', style({height: '*'})), + transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')), + ]), + ], +}) +export class TableExpandableRowsExample { + dataSource = ELEMENT_DATA; + columnsToDisplay = ['name', 'weight', 'symbol', 'position']; + expandedElement: PeriodicElement; +} + +export interface PeriodicElement { + name: string; + position: number; + weight: number; + symbol: string; + description: string; +} + +const ELEMENT_DATA: PeriodicElement[] = [ + { + position: 1, + name: 'Hydrogen', + weight: 1.0079, + symbol: 'H', + description: `Hydrogen is a chemical element with symbol H and atomic number 1. With a standard + atomic weight of 1.008, hydrogen is the lightest element on the periodic table.` + }, { + position: 2, + name: 'Helium', + weight: 4.0026, + symbol: 'He', + description: `Helium is a chemical element with symbol He and atomic number 2. It is a + colorless, odorless, tasteless, non-toxic, inert, monatomic gas, the first in the noble gas + group in the periodic table. Its boiling point is the lowest among all the elements.` + }, { + position: 3, + name: 'Lithium', + weight: 6.941, + symbol: 'Li', + description: `Lithium is a chemical element with symbol Li and atomic number 3. It is a soft, + silvery-white alkali metal. Under standard conditions, it is the lightest metal and the + lightest solid element.` + }, { + position: 4, + name: 'Beryllium', + weight: 9.0122, + symbol: 'Be', + description: `Beryllium is a chemical element with symbol Be and atomic number 4. It is a + relatively rare element in the universe, usually occurring as a product of the spallation of + larger atomic nuclei that have collided with cosmic rays.` + }, { + position: 5, + name: 'Boron', + weight: 10.811, + symbol: 'B', + description: `Boron is a chemical element with symbol B and atomic number 5. Produced entirely + by cosmic ray spallation and supernovae and not by stellar nucleosynthesis, it is a + low-abundance element in the Solar system and in the Earth's crust.` + }, { + position: 6, + name: 'Carbon', + weight: 12.0107, + symbol: 'C', + description: `Carbon is a chemical element with symbol C and atomic number 6. It is nonmetallic + and tetravalent—making four electrons available to form covalent chemical bonds. It belongs + to group 14 of the periodic table.` + }, { + position: 7, + name: 'Nitrogen', + weight: 14.0067, + symbol: 'N', + description: `Nitrogen is a chemical element with symbol N and atomic number 7. It was first + discovered and isolated by Scottish physician Daniel Rutherford in 1772.` + }, { + position: 8, + name: 'Oxygen', + weight: 15.9994, + symbol: 'O', + description: `Oxygen is a chemical element with symbol O and atomic number 8. It is a member of + the chalcogen group on the periodic table, a highly reactive nonmetal, and an oxidizing + agent that readily forms oxides with most elements as well as with other compounds.` + }, { + position: 9, + name: 'Fluorine', + weight: 18.9984, + symbol: 'F', + description: `Fluorine is a chemical element with symbol F and atomic number 9. It is the + lightest halogen and exists as a highly toxic pale yellow diatomic gas at standard + conditions.` + }, { + position: 10, + name: 'Neon', + weight: 20.1797, + symbol: 'Ne', + description: `Neon is a chemical element with symbol Ne and atomic number 10. It is a noble gas. + Neon is a colorless, odorless, inert monatomic gas under standard conditions, with about + two-thirds the density of air.` + }, +];