-
Notifications
You must be signed in to change notification settings - Fork 772
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(demo): add demo to show fxHide with used with custom breakpoint
Add demo showing custom breakpoint working with `fxHide.yba-min-height` Refs #961.
- Loading branch information
1 parent
7d2db14
commit 6e7c3ac
Showing
8 changed files
with
154 additions
and
52 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
33 changes: 33 additions & 0 deletions
33
src/apps/demo-app/src/app/stack-overflow/hide-custom-bp/hide-custom-bp.component.scss
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 @@ | ||
| .bounds { | ||
| background-color:#ddd; | ||
| height :800px; | ||
| } | ||
|
|
||
| .sec1 { | ||
| background: red; | ||
| color:white; | ||
| text-transform: uppercase; | ||
| padding: 20px; | ||
| } | ||
|
|
||
| .sec2 { | ||
| background: yellow; | ||
| color:blue; | ||
| padding: 20px; | ||
| } | ||
|
|
||
| .sec3 { | ||
| background: blue; | ||
| color:white; | ||
| text-transform: uppercase; | ||
| padding: 20px; | ||
| } | ||
|
|
||
| .sec1, .sec2, .sec3 { | ||
| padding-top:20px; | ||
| text-align:center | ||
| } | ||
|
|
||
| .content { | ||
| min-width: 300px; | ||
| } |
67 changes: 67 additions & 0 deletions
67
src/apps/demo-app/src/app/stack-overflow/hide-custom-bp/hide-with-custom-bp.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,67 @@ | ||
| import {Component, Directive} from '@angular/core'; | ||
| import {BREAKPOINT, ShowHideDirective} from '@angular/flex-layout'; | ||
|
|
||
| const YBA_BREAKPOINT = { | ||
| alias: 'yba', | ||
| suffix: 'Yba', | ||
| mediaQuery: 'screen and (max-height: 600px)', | ||
| overlapping: false, | ||
| }; | ||
|
|
||
| export const YBA_BREAKPOINT_PROVIDER = { | ||
| provide: BREAKPOINT, | ||
| useValue: [YBA_BREAKPOINT], | ||
| multi: true | ||
| }; | ||
|
|
||
| const inputs = ['fxHide', 'fxHide.yba']; | ||
| const selector = `[fxHide], [fxHide.yba]`; | ||
|
|
||
| @Directive({selector, inputs}) | ||
| export class CustomHideDirective extends ShowHideDirective { | ||
| protected inputs = inputs; | ||
| } | ||
|
|
||
| @Component({ | ||
| selector: 'demo-hide-custom-bp', | ||
| styleUrls: [ | ||
| 'hide-custom-bp.component.scss' | ||
| ], | ||
| template: ` | ||
| <mat-card class="card-demo"> | ||
| <mat-card-title><a | ||
| href="http://bit.ly/2D2dAxM" | ||
| target="_blank">StackBlitz</a></mat-card-title> | ||
| <mat-card-subtitle>Hide when height < 800px using custom breakpoint <span | ||
| style="font-weight: bold; color: #7a7af7;">fxHide.yba</span> | ||
| </mat-card-subtitle> | ||
| <mat-card-content> | ||
| <div class="content" | ||
| fxHide.yba | ||
| fxLayout="row" | ||
| fxLayout.md="column" | ||
| fxFlexFill> | ||
| <div fxFlex="15" fxFlex.md="55" class="sec1" fxFlex.xs="55"> | ||
| first-section | ||
| </div> | ||
| <div fxFlex="30" fxFlex.md="15" class="sec2"> | ||
| second-section | ||
| </div> | ||
| <div fxFlex="55" fxFlex.md="30" class="sec3" fxFlex.xs="15"> | ||
| third-section | ||
| </div> | ||
| </div> | ||
| </mat-card-content> | ||
| <mat-card-footer class="bottomPad"> | ||
| <div class="hint"><div fxLayout="row" fxLayout.xs="column" fxFlexFill fxHide.yba > | ||
| </div> | ||
| </mat-card-footer> | ||
| </mat-card> | ||
| ` | ||
| }) | ||
| export class HideWithCustomBPComponent { | ||
| } | ||
|
|
||
|
|
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
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