purchasing/fuse-angular
3
0
Fork 0
mirror of https://github.com/richard-loafle/fuse-angular.git synced 2025-12-22 04:17:08 +00:00
Code Issues Packages Projects Releases Wiki Activity

Updated Angular Material examples

Browse Source
This commit is contained in:
Sercan Yemen
2018-06-20 16:16:02 +03:00
parent faef6ec6f8
commit 13746c2a73
138 changed files with 2124 additions and 592 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/assets/angular-material-examples/tooltip-position/tooltip-position-example.css
View File

@@ -1,9 +1,3 @@
.example-tooltip-host {
display: inline-flex;
align-items: center;
margin: 50px;
}
.example-select {
margin: 0 10px;
.example-user-input {
margin-right: 8px;
}

23
src/assets/angular-material-examples/tooltip-position/tooltip-position-example.html
View File

@@ -1,13 +1,14 @@
<div class="example-tooltip-host" matTooltip="Tooltip!" [matTooltipPosition]="position">
<span>Show tooltip</span>
<mat-form-field>
<mat-select class="example-select" [(ngModel)]="position">
<mat-option value="before">Before</mat-option>
<mat-option value="after">After</mat-option>
<mat-option value="above">Above</mat-option>
<mat-option value="below">Below</mat-option>
<mat-option value="left">Left</mat-option>
<mat-option value="right">Right</mat-option>
<mat-form-field class="example-user-input">
<mat-select placeholder="Tooltip position" [formControl]="position">
<mat-option *ngFor="let positionOption of positionOptions" [value]="positionOption">
{{ positionOption }}
</mat-option>
</mat-select>
</mat-form-field>
</div>
<button mat-raised-button
matTooltip="Info about the action"
[matTooltipPosition]="position.value"
aria-label="Button that displays a tooltip in various positions">
Action
</button>

7
src/assets/angular-material-examples/tooltip-position/tooltip-position-example.ts
View File

@@ -1,7 +1,9 @@
import {Component} from '@angular/core';
import {FormControl} from '@angular/forms';
import {TooltipPosition} from '@angular/material';
/**
* @title Tooltip with custom position
* @title Tooltip with a custom position
*/
@Component({
selector: 'tooltip-position-example',
@@ -9,5 +11,6 @@ import {Component} from '@angular/core';
styleUrls: ['tooltip-position-example.css'],
})
export class TooltipPositionExample {
position = 'before';
positionOptions: TooltipPosition[] = ['after', 'before', 'above', 'below', 'left', 'right'];
position = new FormControl(this.positionOptions[0]);
}