-
Notifications
You must be signed in to change notification settings - Fork 773
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(grid): add CSS Grid directives and demo
* Add five demos from gridbyexample.com * Add testing for all components * Change `BaseFxDirective` to `BaseDirective`. `BaseFxDirective` will remain but is deprecated and will be removed in beta.17 * Bump testing for Edge to v16 due to Grid incompatability * Design doc: https://docs.google.com/document/d/1YjKHAV7-wh5UZd4snoyw6bVWe1X5JF-zDaUFa8-JDtE
- Loading branch information
1 parent
85aa013
commit f13d395
Showing
78 changed files
with
5,309 additions
and
96 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,64 @@ | ||
# CSS Grid with Angular Layout | ||
|
||
### Introduction | ||
|
||
CSS Grid is a relatively new, powerful layout library available in all evergreen browsers. It provides | ||
an extra level of dimensionality for constructing web layouts compared to Flexbox. We have added 11 new | ||
directives with responsive functionality to the Angular Layout library to enable developers to easily add | ||
the new engine to their apps. | ||
|
||
### Usage | ||
|
||
The new suite of directives is extensive, and covers the majority of CSS Grid functionality. The | ||
following table shows the parity between directives and CSS properties: | ||
|
||
| Grid Directive | CSS Property(s) | Extra Inputs | | ||
| ---------------- |:-----------------------------------------:| --------------------------:| | ||
| `gdAlignColumns` | `align-content` and `align-items` | `gdInline` for inline-grid | | ||
| `gdAlignRows` | `justify-content` and `justify-items` | `gdInline` for inline-grid | | ||
| `gdArea` | `grid-area` | none | | ||
| `gdAreas` | `grid-areas` | `gdInline` for inline-grid | | ||
| `gdAuto` | `grid-auto-flow` | `gdInline` for inline-grid | | ||
| `gdColumn` | `grid-column` | none | | ||
| `gdColumns` | `grid-template-columns` | `gdInline` for inline-grid<br>`!` at the end means `grid-auto-columns` | | ||
| `gdGap` | `grid-gap` | `gdInline` for inline-grid | | ||
| `gdGridAlign` | `justify-self` and `align-self` | none | | ||
| `gdRow` | `grid-row` | none | | ||
| `gdRows` | `grid-template-rows` | `gdInline` for inline-grid<br>`!` at the end means `grid-auto-rows` | | ||
|
||
Note: unless otherwise specified, the above table represents exact parity. The inputs for the | ||
directives will be mapped verbatim to the CSS property without sanitization | ||
|
||
### Limitations | ||
|
||
While CSS Grid has excellent cross-browser and mobile support, it is currently unsupported in IE11 | ||
due to an outdated spec implementation | ||
|
||
### Using with Flexbox | ||
|
||
The new CSS Grid directives can be used in concert with the existing Flexbox directives seamlessly. | ||
Simply import the top-level `FlexLayoutModule`, or both `FlexModule` and `GridModule` as follows: | ||
|
||
```typescript | ||
import {FlexLayoutModule} from '@angular/flex-layout'; | ||
``` | ||
|
||
```typescript | ||
import {FlexModule} from '@angular/flex-layout/flex'; | ||
import {GridModule} from '@angular/flex-layout/grid'; | ||
``` | ||
|
||
This allows you to use, for example, Flexbox inside a CSS Grid as follows: | ||
|
||
```html | ||
<div gdAuto> | ||
<div fxLayout="row"> | ||
<div fxFlex></div> | ||
</div> | ||
</div> | ||
``` | ||
|
||
### References | ||
|
||
The design doc for this part of the library can be found | ||
[here](https://docs.google.com/document/d/1YjKHAV7-wh5UZd4snoyw6bVWe1X5JF-zDaUFa8-JDtE) |
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
25 changes: 25 additions & 0 deletions
25
src/apps/demo-app/src/app/grid/docs-grid/docs-grid.component.spec.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,25 @@ | ||
import { async, ComponentFixture, TestBed } from '@angular/core/testing'; | ||
|
||
import { DocsLayoutComponent } from './docs-grid.component'; | ||
|
||
describe('DocsLayoutComponent', () => { | ||
let component: DocsLayoutComponent; | ||
let fixture: ComponentFixture<DocsLayoutComponent>; | ||
|
||
beforeEach(async(() => { | ||
TestBed.configureTestingModule({ | ||
declarations: [ DocsLayoutComponent ] | ||
}) | ||
.compileComponents(); | ||
})); | ||
|
||
beforeEach(() => { | ||
fixture = TestBed.createComponent(DocsLayoutComponent); | ||
component = fixture.componentInstance; | ||
fixture.detectChanges(); | ||
}); | ||
|
||
it('should create', () => { | ||
expect(component).toBeTruthy(); | ||
}); | ||
}); |
13 changes: 13 additions & 0 deletions
13
src/apps/demo-app/src/app/grid/docs-grid/docs-grid.component.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,13 @@ | ||
import {Component} from '@angular/core'; | ||
|
||
@Component({ | ||
selector: 'demo-docs-grid', | ||
template: ` | ||
<demo-grid-layout class="small-demo"></demo-grid-layout> | ||
<demo-grid-nested class="small-demo"></demo-grid-nested> | ||
<demo-grid-minmax class="small-demo"></demo-grid-minmax> | ||
<demo-grid-position class="small-demo"></demo-grid-position> | ||
<demo-grid-overlay class="small-demo"></demo-grid-overlay> | ||
` | ||
}) | ||
export class DocsGridComponent {} |
25 changes: 25 additions & 0 deletions
25
src/apps/demo-app/src/app/grid/grid-layout/grid-layout.component.spec.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,25 @@ | ||
import { async, ComponentFixture, TestBed } from '@angular/core/testing'; | ||
|
||
import { FlexOffsetValuesComponent } from './grid-layout.component'; | ||
|
||
describe('FlexOffsetValuesComponent', () => { | ||
let component: FlexOffsetValuesComponent; | ||
let fixture: ComponentFixture<FlexOffsetValuesComponent>; | ||
|
||
beforeEach(async(() => { | ||
TestBed.configureTestingModule({ | ||
declarations: [ FlexOffsetValuesComponent ] | ||
}) | ||
.compileComponents(); | ||
})); | ||
|
||
beforeEach(() => { | ||
fixture = TestBed.createComponent(FlexOffsetValuesComponent); | ||
component = fixture.componentInstance; | ||
fixture.detectChanges(); | ||
}); | ||
|
||
it('should create', () => { | ||
expect(component).toBeTruthy(); | ||
}); | ||
}); |
31 changes: 31 additions & 0 deletions
31
src/apps/demo-app/src/app/grid/grid-layout/grid-layout.component.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,31 @@ | ||
import {Component} from '@angular/core'; | ||
|
||
// Example taken from https://gridbyexample.com/examples/example13/ | ||
/* tslint:disable */ | ||
@Component({ | ||
selector: 'demo-grid-layout', | ||
template: ` | ||
<mat-card class="card-demo"> | ||
<mat-card-title>Basic Responsive Grid App</mat-card-title> | ||
<mat-card-content class="containerX"> | ||
<div class="colorNested box" style="height: auto;"> | ||
<div gdAreas.xs="header | sidebar | content | sidebar2 | footer" gdGap="1em" | ||
gdColumns.xs="none" | ||
gdAreas.sm="header header | sidebar content | sidebar2 sidebar2 | footer footer" | ||
gdColumns.sm="20%!" | ||
gdAreas.gt-sm="header header header | sidebar content sidebar2 | footer footer footer" | ||
gdColumns.gt-sm="120px auto 120px" gdGap.gt-sm="20px" [ngStyle]="{'max-width': 'auto'}" | ||
[ngStyle.gt-sm]="{'max-width': '600px'}"> | ||
<div class="blocks one" gdArea="header">Header</div> | ||
<div class="blocks two" gdArea="sidebar">Sidebar</div> | ||
<div class="blocks three" gdArea="sidebar2">Sidebar 2</div> | ||
<div class="blocks four" gdArea="content">Content | ||
<br /> More content than we had before so this column is now quite tall.</div> | ||
<div class="blocks five" gdArea="footer">Footer</div> | ||
</div> | ||
</div> | ||
</mat-card-content> | ||
</mat-card> | ||
` | ||
}) | ||
export class GridLayoutComponent {} |
25 changes: 25 additions & 0 deletions
25
src/apps/demo-app/src/app/grid/grid-minmax/grid-minmax.component.spec.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,25 @@ | ||
import { async, ComponentFixture, TestBed } from '@angular/core/testing'; | ||
|
||
import { GridMinmaxComponent } from './grid-minmax.component'; | ||
|
||
describe('GridMinmaxComponent', () => { | ||
let component: GridMinmaxComponent; | ||
let fixture: ComponentFixture<GridMinmaxComponent>; | ||
|
||
beforeEach(async(() => { | ||
TestBed.configureTestingModule({ | ||
declarations: [ GridMinmaxComponent ] | ||
}) | ||
.compileComponents(); | ||
})); | ||
|
||
beforeEach(() => { | ||
fixture = TestBed.createComponent(GridMinmaxComponent); | ||
component = fixture.componentInstance; | ||
fixture.detectChanges(); | ||
}); | ||
|
||
it('should create', () => { | ||
expect(component).toBeTruthy(); | ||
}); | ||
}); |
40 changes: 40 additions & 0 deletions
40
src/apps/demo-app/src/app/grid/grid-minmax/grid-minmax.component.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,40 @@ | ||
import { Component } from '@angular/core'; | ||
|
||
// Example taken from https://gridbyexample.com/examples/example29/ | ||
@Component({ | ||
selector: 'demo-grid-minmax', | ||
template: ` | ||
<mat-card class="card-demo"> | ||
<mat-card-title>Grid with Minmax</mat-card-title> | ||
<mat-card-content class="containerX"> | ||
<div class="colorNested" style="height: auto;"> | ||
<div gdGap="10px" gdColumns="repeat(auto-fill, minmax(200px, 1fr))"> | ||
<div class="box" gdColumn="auto / span 2">A</div> | ||
<div class="box">B</div> | ||
<div class="box">C</div> | ||
<div class="box">D</div> | ||
<div class="box">E</div> | ||
<div class="box">F</div> | ||
<div class="box" gdColumn="auto / span 2" gdRow="auto / span 2">G</div> | ||
<div class="box">H</div> | ||
<div class="box">I</div> | ||
<div class="box">J</div> | ||
<div class="box" gdColumn="auto / span 3">K</div> | ||
<div class="box">L</div> | ||
<div class="box">M</div> | ||
</div> | ||
</div> | ||
</mat-card-content> | ||
</mat-card> | ||
`, | ||
styles: [`.box { | ||
/*background-color: #444;*/ | ||
/*color: #fff;*/ | ||
border-radius: 5px; | ||
padding: 20px; | ||
font-size: 150%; | ||
}`] | ||
}) | ||
export class GridMinmaxComponent { | ||
} |
25 changes: 25 additions & 0 deletions
25
src/apps/demo-app/src/app/grid/grid-nested/grid-nested.component.spec.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,25 @@ | ||
import { async, ComponentFixture, TestBed } from '@angular/core/testing'; | ||
|
||
import { GridNestedComponent } from './grid-nested.component'; | ||
|
||
describe('GridNestedComponent', () => { | ||
let component: GridNestedComponent; | ||
let fixture: ComponentFixture<GridNestedComponent>; | ||
|
||
beforeEach(async(() => { | ||
TestBed.configureTestingModule({ | ||
declarations: [ GridNestedComponent ] | ||
}) | ||
.compileComponents(); | ||
})); | ||
|
||
beforeEach(() => { | ||
fixture = TestBed.createComponent(GridNestedComponent); | ||
component = fixture.componentInstance; | ||
fixture.detectChanges(); | ||
}); | ||
|
||
it('should create', () => { | ||
expect(component).toBeTruthy(); | ||
}); | ||
}); |
33 changes: 33 additions & 0 deletions
33
src/apps/demo-app/src/app/grid/grid-nested/grid-nested.component.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,33 @@ | ||
import { Component } from '@angular/core'; | ||
|
||
// Example taken from https://gridbyexample.com/examples/example21/ | ||
@Component({ | ||
selector: 'demo-grid-nested', | ||
template: ` | ||
<mat-card class="card-demo"> | ||
<mat-card-title>Nested Grid</mat-card-title> | ||
<mat-card-content class="containerX"> | ||
<div class="colorNested" style="height: auto;"> | ||
<div gdGap="20px" gdColumns="repeat(4, [col] 150px)" gdRows="repeat(2, [row] auto)"> | ||
<div class="box" gdColumn="col / span 2" gdRow="row">A</div> | ||
<div class="box" gdColumn="col 3 / span 2" gdRow="row">B</div> | ||
<div class="box" gdColumn="col / span 2" gdRow="row 2">C</div> | ||
<div class="box" gdColumn="col 3 / span 2" gdRow="row 2" gdGap="10px" | ||
gdColumns="1fr 1fr"> | ||
<div class="box one" gdColumn="1 / 3" gdRow="1">E</div> | ||
<div class="box two" gdColumn="1" gdRow="2">F</div> | ||
<div class="box three" gdColumn="2" gdRow="2">G</div> | ||
</div> | ||
</div> | ||
</div> | ||
</mat-card-content> | ||
</mat-card> | ||
`, | ||
styles: [`.box { | ||
border-radius: 5px; | ||
padding: 20px; | ||
font-size: 150%; | ||
}`] | ||
}) | ||
export class GridNestedComponent { | ||
} |
25 changes: 25 additions & 0 deletions
25
src/apps/demo-app/src/app/grid/grid-overlay/grid-overlay.component.spec.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,25 @@ | ||
import { async, ComponentFixture, TestBed } from '@angular/core/testing'; | ||
|
||
import { GridOverlayComponent } from './grid-overlay.component'; | ||
|
||
describe('GridOverlayComponent', () => { | ||
let component: GridOverlayComponent; | ||
let fixture: ComponentFixture<GridOverlayComponent>; | ||
|
||
beforeEach(async(() => { | ||
TestBed.configureTestingModule({ | ||
declarations: [ GridOverlayComponent ] | ||
}) | ||
.compileComponents(); | ||
})); | ||
|
||
beforeEach(() => { | ||
fixture = TestBed.createComponent(GridOverlayComponent); | ||
component = fixture.componentInstance; | ||
fixture.detectChanges(); | ||
}); | ||
|
||
it('should create', () => { | ||
expect(component).toBeTruthy(); | ||
}); | ||
}); |
Oops, something went wrong.