mirror of
https://github.com/richard-loafle/fuse-angular.git
synced 2025-01-10 04:25:08 +00:00
<mat-select> wrapped with <mat-form-field> and fixed relative issues.
This commit is contained in:
mustafahlvc
parent
cb89da4647
commit
688b443ea8
|
|
@ -72,27 +72,28 @@
|
|||
<mat-divider></mat-divider>
|
||||
|
||||
<h3>Router Animation:</h3>
|
||||
<mat-select class="p-0" [(ngModel)]="fuseSettings.routerAnimation">
|
||||
<mat-option value="none">
|
||||
None
|
||||
</mat-option>
|
||||
<mat-option value="slideUp">
|
||||
Slide up
|
||||
</mat-option>
|
||||
<mat-option value="slideDown">
|
||||
Slide down
|
||||
</mat-option>
|
||||
<mat-option value="slideRight">
|
||||
Slide right
|
||||
</mat-option>
|
||||
<mat-option value="slideLeft">
|
||||
Slide left
|
||||
</mat-option>
|
||||
<mat-option value="fadeIn">
|
||||
Fade in
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
|
||||
<mat-form-field class="w-100-p">
|
||||
<mat-select class="p-0" [(ngModel)]="fuseSettings.routerAnimation">
|
||||
<mat-option value="none">
|
||||
None
|
||||
</mat-option>
|
||||
<mat-option value="slideUp">
|
||||
Slide up
|
||||
</mat-option>
|
||||
<mat-option value="slideDown">
|
||||
Slide down
|
||||
</mat-option>
|
||||
<mat-option value="slideRight">
|
||||
Slide right
|
||||
</mat-option>
|
||||
<mat-option value="slideLeft">
|
||||
Slide left
|
||||
</mat-option>
|
||||
<mat-option value="fadeIn">
|
||||
Fade in
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -49,18 +49,18 @@
|
|||
<!-- Front -->
|
||||
<div class="fuse-widget-front mat-white-bg mat-elevation-z2">
|
||||
<div class="pl-16 pr-8 py-16 h-52" fxLayout="row" fxLayoutAlign="space-between center">
|
||||
<mat-select class="simplified font-size-16" [(ngModel)]="widgets.widget1.currentRange"
|
||||
aria-label="Change range">
|
||||
<mat-option *ngFor="let range of widgets.widget1.ranges | keys"
|
||||
[value]="range.key">
|
||||
{{range.value}}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
|
||||
<mat-form-field>
|
||||
<mat-select class="simplified font-size-16" [(ngModel)]="widgets.widget1.currentRange"
|
||||
aria-label="Change range">
|
||||
<mat-option *ngFor="let range of widgets.widget1.ranges | keys"
|
||||
[value]="range.key">
|
||||
{{range.value}}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
<button mat-icon-button fuseWidgetToggle aria-label="more">
|
||||
<mat-icon>more_vert</mat-icon>
|
||||
</button>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="pt-8 pb-32" fxLayout="column" fxLayoutAlign="center center">
|
||||
|
|
@ -306,14 +306,14 @@
|
|||
|
||||
<div class="px-16 border-bottom" fxLayout="row" fxLayoutAlign="space-between center">
|
||||
<div class="h3">{{widgets.widget6.title}}</div>
|
||||
<div class="py-16">
|
||||
<mat-form-field>
|
||||
<mat-select class="simplified" [(ngModel)]="widget6.currentRange" aria-label="Change range">
|
||||
<mat-option *ngFor="let range of widgets.widget6.ranges | keys"
|
||||
[value]="range.key">
|
||||
{{range.value}}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
</div>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
|
||||
<div class="h-400">
|
||||
|
|
@ -356,8 +356,7 @@
|
|||
|
||||
<div class="px-16 border-bottom" fxLayout="row" fxLayoutAlign="space-between center">
|
||||
<div class="h3">{{widgets.widget7.title}}</div>
|
||||
|
||||
<div class="py-16">
|
||||
<mat-form-field>
|
||||
<mat-select class="simplified" [(ngModel)]="widget7.currentRange"
|
||||
aria-label="Change range">
|
||||
<mat-option *ngFor="let range of widgets.widget7.ranges | keys"
|
||||
|
|
@ -365,7 +364,7 @@
|
|||
{{range.value}}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
</div>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
|
||||
<div class="p-16" fxLayout="row" fxLayoutAlign="space-between center"
|
||||
|
|
@ -438,16 +437,14 @@
|
|||
<div class="fuse-widget-front mat-white-bg mat-elevation-z2">
|
||||
<div class="px-16 border-bottom" fxLayout="row" fxLayoutAlign="space-between center">
|
||||
<div class="h3">{{widgets.widget9.title}}</div>
|
||||
|
||||
<div class="py-16">
|
||||
<mat-form-field>
|
||||
<mat-select [(ngModel)]="widget9.currentRange" aria-label="Change range">
|
||||
<mat-option *ngFor="let range of widgets.widget9.ranges | keys"
|
||||
[value]="range.key">
|
||||
{{range.value}}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
|
||||
</div>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
|
||||
<div class="p-16" fxLayout="column" fxLayoutAlign="center" fxLayout.gt-xs="row"
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<!-- SIDENAV HEADER -->
|
||||
<div fxLayout="column" fxLayoutAlign="space-between start"
|
||||
class="header p-24 mat-accent-bg" class.gt-md="header p-24 white-fg">
|
||||
class="header p-24 pb-4 mat-accent-bg" class.gt-md="header p-24 pb-4 white-fg">
|
||||
<div class="logo" fxFlex fxLayout="row" fxLayoutAlign="start center">
|
||||
<mat-icon class="logo-icon s-32" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'50ms',scale:'0.2'}}">mail</mat-icon>
|
||||
<span class="logo-text" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'100ms',x:'-25px'}}">Mailbox</span>
|
||||
|
|
@ -8,13 +8,14 @@
|
|||
|
||||
<div class="account" fxLayout="column" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'300ms'}}">
|
||||
<div class="title">John Doe</div>
|
||||
<mat-select class="account-selection" placeholder="Mail Selection"
|
||||
floatPlaceholder="never"
|
||||
[ngModel]="selectedAccount">
|
||||
<mat-option *ngFor="let account of (accounts | keys)" [value]="account.key">
|
||||
{{account.value}}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
<mat-form-field floatPlaceholder="never">
|
||||
<mat-select class="account-selection" placeholder="Mail Selection"
|
||||
[ngModel]="selectedAccount">
|
||||
<mat-option *ngFor="let account of (accounts | keys)" [value]="account.key">
|
||||
{{account.value}}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<!-- SIDENAV HEADER -->
|
||||
<div fxLayout="column" fxLayoutAlign="space-between start"
|
||||
class="header p-24 mat-accent-bg" class.gt-md="header p-24 white-fg">
|
||||
class="header p-24 pb-4 mat-accent-bg" class.gt-md="header p-24 pb-4 white-fg">
|
||||
<div class="logo" fxFlex fxLayout="row" fxLayoutAlign="start center">
|
||||
<mat-icon class="logo-icon s-32" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'50ms',scale:'0.2'}}">check_box</mat-icon>
|
||||
<span class="logo-text" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'100ms',x:'-25px'}}">To-do</span>
|
||||
|
|
@ -8,13 +8,14 @@
|
|||
|
||||
<div class="account" fxLayout="column" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'300ms'}}">
|
||||
<div class="title">John Doe</div>
|
||||
<mat-select class="account-selection" placeholder="Todo Selection"
|
||||
floatPlaceholder="never"
|
||||
[ngModel]="selectedAccount">
|
||||
<mat-option *ngFor="let account of (accounts | keys)" [value]="account.key">
|
||||
{{account.value}}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
<mat-form-field floatPlaceholder="never">
|
||||
<mat-select class="account-selection" placeholder="Todo Selection"
|
||||
[ngModel]="selectedAccount">
|
||||
<mat-option *ngFor="let account of (accounts | keys)" [value]="account.key">
|
||||
{{account.value}}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user