skills/angular__angular
1
0
Fork 0
mirror of https://github.com/angular/angular.git synced 2026-09-14 13:54:52 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(stepper): custom icons not centered inside circle (#12947)

Browse Source
This commit is contained in:
Kristiyan Kostadinov
2018-10-19 16:59:49 +02:00
committed by Joey Perrott
parent 3ef933a6c8
commit 87e1742554
2 changed files with 41 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/stepper/step-header.html
+39 -36
View File
@@ -1,46 +1,49 @@
<div class="mat-step-header-ripple" mat-ripple [matRippleTrigger]="_getHostElement()"></div>
<div class="mat-step-icon-state-{{state}} mat-step-icon" [class.mat-step-icon-selected]="selected"
[ngSwitch]="state">
<ng-container *ngSwitchCase="'number'" [ngSwitch]="!!(iconOverrides && iconOverrides.number)">
<ng-container
*ngSwitchCase="true"
[ngTemplateOutlet]="iconOverrides.number"
[ngTemplateOutletContext]="_getIconContext()"></ng-container>
<span class="mat-step-icon-content" *ngSwitchDefault>{{index + 1}}</span>
</ng-container>
<ng-container *ngSwitchCase="'edit'" [ngSwitch]="!!(iconOverrides && iconOverrides.edit)">
<ng-container
*ngSwitchCase="true"
[ngTemplateOutlet]="iconOverrides.edit"
[ngTemplateOutletContext]="_getIconContext()"></ng-container>
<mat-icon class="mat-step-icon-content" *ngSwitchDefault>create</mat-icon>
</ng-container>
<div class="mat-step-icon-content">
<ng-container *ngSwitchCase="'number'" [ngSwitch]="!!(iconOverrides && iconOverrides.number)">
<ng-container
*ngSwitchCase="true"
[ngTemplateOutlet]="iconOverrides.number"
[ngTemplateOutletContext]="_getIconContext()"></ng-container>
<span *ngSwitchDefault>{{index + 1}}</span>
</ng-container>
<ng-container *ngSwitchCase="'done'" [ngSwitch]="!!(iconOverrides && iconOverrides.done)">
<ng-container
*ngSwitchCase="true"
[ngTemplateOutlet]="iconOverrides.done"
[ngTemplateOutletContext]="_getIconContext()"></ng-container>
<mat-icon class="mat-step-icon-content" *ngSwitchDefault>done</mat-icon>
</ng-container>
<ng-container *ngSwitchCase="'edit'" [ngSwitch]="!!(iconOverrides && iconOverrides.edit)">
<ng-container
*ngSwitchCase="true"
[ngTemplateOutlet]="iconOverrides.edit"
[ngTemplateOutletContext]="_getIconContext()"></ng-container>
<mat-icon *ngSwitchDefault>create</mat-icon>
</ng-container>
<ng-container *ngSwitchCase="'error'" [ngSwitch]="!!(iconOverrides && iconOverrides.error)">
<ng-container
*ngSwitchCase="true"
[ngTemplateOutlet]="iconOverrides.error"
[ngTemplateOutletContext]="_getIconContext()"></ng-container>
<mat-icon *ngSwitchDefault>warning</mat-icon>
</ng-container>
<ng-container *ngSwitchCase="'done'" [ngSwitch]="!!(iconOverrides && iconOverrides.done)">
<ng-container
*ngSwitchCase="true"
[ngTemplateOutlet]="iconOverrides.done"
[ngTemplateOutletContext]="_getIconContext()"></ng-container>
<mat-icon *ngSwitchDefault>done</mat-icon>
</ng-container>
<!-- Custom state. -->
<ng-container *ngSwitchDefault [ngSwitch]="!!(iconOverrides && iconOverrides[state])">
<ng-container
*ngSwitchCase="true"
[ngTemplateOutlet]="iconOverrides[state]"
[ngTemplateOutletContext]="_getIconContext()"></ng-container>
<mat-icon *ngSwitchDefault>{{state}}</mat-icon>
</ng-container>
<ng-container *ngSwitchCase="'error'" [ngSwitch]="!!(iconOverrides && iconOverrides.error)">
<ng-container
*ngSwitchCase="true"
[ngTemplateOutlet]="iconOverrides.error"
[ngTemplateOutletContext]="_getIconContext()"></ng-container>
<mat-icon *ngSwitchDefault>warning</mat-icon>
</ng-container>
<!-- Custom state. -->
<ng-container *ngSwitchDefault [ngSwitch]="!!(iconOverrides && iconOverrides[state])">
<ng-container
*ngSwitchCase="true"
[ngTemplateOutlet]="iconOverrides[state]"
[ngTemplateOutletContext]="_getIconContext()"></ng-container>
<mat-icon *ngSwitchDefault>{{state}}</mat-icon>
</ng-container>
</div>
</div>
<div class="mat-step-label"
[class.mat-step-label-active]="active"
src/lib/stepper/step-header.scss
+2 -1
View File
@@ -30,7 +30,8 @@ $mat-step-header-icon-size: 16px !default;
position: relative;
}
.mat-step-icon-content {
.mat-step-icon-content,
.mat-step-icon .mat-icon {
// Use absolute positioning to center the content, because it works better with text.
position: absolute;
top: 50%;