-
-
Notifications
You must be signed in to change notification settings - Fork 67
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
chore: improve split pane and 3d text examples
- Loading branch information
Showing
21 changed files
with
242 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
5 changes: 5 additions & 0 deletions
5
projects/demos/src/app/alert/examples/configurable/app.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 |
|---|---|---|
| @@ -1,3 +1,8 @@ | ||
| .mat-radio-button { | ||
| margin: 1em; | ||
| } | ||
|
|
||
| .mat-checkbox { | ||
| display: inline-block; | ||
| margin: 1rem 1rem 1rem 0; | ||
| } |
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
54 changes: 54 additions & 0 deletions
54
projects/demos/src/app/split-pane/examples/basic/app.component.html
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,54 @@ | ||
| <div class="split-demo"> | ||
| <mtx-split direction="horizontal" restrictMove="true" [useTransition]="true"> | ||
| <mtx-split-pane size="40"> | ||
| <mtx-split direction="vertical" restrictMove="true"> | ||
| <mtx-split-pane> | ||
| <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tiam, | ||
| quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo | ||
| consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum | ||
| dolore eu fugiat nulla pariatur.</p> | ||
| </mtx-split-pane> | ||
| <mtx-split-pane> | ||
| <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium | ||
| doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore | ||
| veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam | ||
| voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia | ||
| consequuntur magni dolores eodolor sit amet, consectetur, adipisci velit, sed | ||
| quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam | ||
| quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam | ||
| corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis | ||
| autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil | ||
| molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p> | ||
| </mtx-split-pane> | ||
| <mtx-split-pane> | ||
| <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tiam, | ||
| quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo | ||
| consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum | ||
| dolore eu fugiat nulla pariatur.</p> | ||
| </mtx-split-pane> | ||
| </mtx-split> | ||
| </mtx-split-pane> | ||
| <mtx-split-pane size="60"> | ||
| <mtx-split direction="vertical" restrictMove="true"> | ||
| <mtx-split-pane size="25"> | ||
| <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tiam, | ||
| quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo | ||
| consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum | ||
| dolore eu fugiat nulla pariatur.</p> | ||
| </mtx-split-pane> | ||
| <mtx-split-pane size="75"> | ||
| <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium | ||
| doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore | ||
| veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam | ||
| voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia | ||
| consequuntur magni dolores eodolor sit amet, consectetur, adipisci velit, sed | ||
| quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam | ||
| quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam | ||
| corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis | ||
| autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil | ||
| molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p> | ||
| </mtx-split-pane> | ||
| </mtx-split> | ||
| </mtx-split-pane> | ||
| </mtx-split> | ||
| </div> |
4 changes: 4 additions & 0 deletions
4
projects/demos/src/app/split-pane/examples/basic/app.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,4 @@ | ||
| .split-demo { | ||
| height: 500px; | ||
| border: 1px solid; | ||
| } |
8 changes: 8 additions & 0 deletions
8
projects/demos/src/app/split-pane/examples/basic/app.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,8 @@ | ||
| import { Component } from '@angular/core'; | ||
|
|
||
| @Component({ | ||
| selector: 'split-pane-example', | ||
| templateUrl: './app.component.html', | ||
| styleUrls: ['./app.component.scss'], | ||
| }) | ||
| export class AppComponent {} |
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 { AppComponent as SplitPaneBasicComponent } from './app.component'; | ||
|
|
||
| const splitPaneBasicExampleConfig = { | ||
| title: 'Basic', | ||
| component: SplitPaneBasicComponent, | ||
| files: [ | ||
| { | ||
| file: 'app.component.html', | ||
| content: require('!!highlight-loader?raw=true&lang=html!./app.component.html'), | ||
| filecontent: require('!!raw-loader!./app.component.html'), | ||
| }, | ||
| { | ||
| file: 'app.component.ts', | ||
| content: require('!!highlight-loader?raw=true&lang=typescript!./app.component.ts'), | ||
| filecontent: require('!!raw-loader!./app.component.ts'), | ||
| }, | ||
| { | ||
| file: 'app.component.scss', | ||
| content: require('!!highlight-loader?raw=true&lang=scss!./app.component.scss'), | ||
| filecontent: require('!!raw-loader!./app.component.scss'), | ||
| }, | ||
| ], | ||
| }; | ||
|
|
||
| export { SplitPaneBasicComponent, splitPaneBasicExampleConfig }; |
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 |
|---|---|---|
| @@ -1,4 +0,0 @@ | ||
| .split-demo { | ||
| height: 600px; | ||
| border: 1px solid; | ||
| } | ||
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 |
|---|---|---|
| @@ -1,15 +1,11 @@ | ||
| import { Component, OnInit } from '@angular/core'; | ||
| import { Component } from '@angular/core'; | ||
| import { ActivatedRoute } from '@angular/router'; | ||
|
|
||
| @Component({ | ||
| selector: 'app-split-pane', | ||
| templateUrl: './split-pane.component.html', | ||
| styleUrls: ['./split-pane.component.scss'] | ||
| styleUrls: ['./split-pane.component.scss'], | ||
| }) | ||
| export class SplitPaneComponent implements OnInit { | ||
|
|
||
| constructor() { } | ||
|
|
||
| ngOnInit(): void { | ||
| } | ||
|
|
||
| export class SplitPaneComponent { | ||
| constructor(public route: ActivatedRoute) {} | ||
| } |
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
28 changes: 28 additions & 0 deletions
28
projects/demos/src/app/text3d/examples/configurable/app.component.html
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,28 @@ | ||
| <h2>3D Text configuration</h2> | ||
|
|
||
| <section> | ||
| <mat-form-field> | ||
| <input matInput [(ngModel)]="text" placeholder="Text"> | ||
| </mat-form-field> | ||
| </section> | ||
|
|
||
| <section> | ||
| <label>Depth:</label> | ||
| <mat-slider min="1" max="50" thumbLabel [(ngModel)]="depth"></mat-slider> | ||
| </section> | ||
|
|
||
| <section> | ||
| <label>RotateX:</label> | ||
| <mat-slider min="0" max="360" thumbLabel [(ngModel)]="rotateX"></mat-slider> | ||
|
|
||
| <label>RotateY:</label> | ||
| <mat-slider min="0" max="360" thumbLabel [(ngModel)]="rotateY"></mat-slider> | ||
|
|
||
| <label>RotateZ:</label> | ||
| <mat-slider min="0" max="360" thumbLabel [(ngModel)]="rotateZ"></mat-slider> | ||
| </section> | ||
|
|
||
| <h2>Result</h2> | ||
|
|
||
| <mtx-text3d [text]="text" [depth]="depth" | ||
| [rotateX]="rotateX" [rotateY]="rotateY" [rotateZ]="rotateZ"></mtx-text3d> |
1 change: 1 addition & 0 deletions
1
projects/demos/src/app/text3d/examples/configurable/app.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 @@ | ||
| /** No CSS for this example */ |
14 changes: 14 additions & 0 deletions
14
projects/demos/src/app/text3d/examples/configurable/app.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,14 @@ | ||
| import { Component } from '@angular/core'; | ||
|
|
||
| @Component({ | ||
| selector: 'text-3d-example', | ||
| templateUrl: 'app.component.html', | ||
| styleUrls: ['app.component.scss'], | ||
| }) | ||
| export class AppComponent { | ||
| text = '3D Text'; | ||
| depth = 20; | ||
| rotateX = 60; | ||
| rotateY = 0; | ||
| rotateZ = 0; | ||
| } |
25 changes: 25 additions & 0 deletions
25
projects/demos/src/app/text3d/examples/configurable/index.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 { AppComponent as Text3dConfigurableComponent } from './app.component'; | ||
|
|
||
| const text3dConfigurableExampleConfig = { | ||
| title: 'Configurable 3D text', | ||
| component: Text3dConfigurableComponent, | ||
| files: [ | ||
| { | ||
| file: 'app.component.html', | ||
| content: require('!!highlight-loader?raw=true&lang=html!./app.component.html'), | ||
| filecontent: require('!!raw-loader!./app.component.html'), | ||
| }, | ||
| { | ||
| file: 'app.component.ts', | ||
| content: require('!!highlight-loader?raw=true&lang=typescript!./app.component.ts'), | ||
| filecontent: require('!!raw-loader!./app.component.ts'), | ||
| }, | ||
| { | ||
| file: 'app.component.scss', | ||
| content: require('!!highlight-loader?raw=true&lang=scss!./app.component.scss'), | ||
| filecontent: require('!!raw-loader!./app.component.scss'), | ||
| }, | ||
| ], | ||
| }; | ||
|
|
||
| export { Text3dConfigurableComponent, text3dConfigurableExampleConfig }; |
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 |
|---|---|---|
| @@ -1 +1,5 @@ | ||
| <mtx-text3d text="3D Text"></mtx-text3d> | ||
| <ng-container *ngIf="route.data | async as data"> | ||
| <ng-container *ngFor="let exampleData of data.examples"> | ||
| <example-viewer [exampleData]="exampleData"></example-viewer> | ||
| </ng-container> | ||
| </ng-container> |
Oops, something went wrong.