Три накладывающихся значка-мат внутри кнопки-коврика из материала Angular - PullRequest
Новая
       22

Три накладывающихся значка-мат внутри кнопки-коврика из материала Angular

0 голосов
/ 05 мая 2020

Мне сложно понять, как наложить три значка на кнопку mat в Material Angular. Почему я пытаюсь это сделать? У меня есть этот код и в зависимости от случая значок меняется. Это меняется с помощью AnimationTrigger, а не ngif. Примерно так 

<button mat-icon-button (click)="chat.start()">

    <mat-icon [@enableDisable]="!chat.searching && !chat.room ? 'open' : 'closed'">power_settings_new
    </mat-icon>

    <mat-icon [@enableDisable]="!chat.searching && chat.room ? 'open' : 'closed'">exit_to_app</mat-icon>

    <mat-icon [@enableDisable]="chat.searching && !chat.room ? 'open' : 'closed'">clear</mat-icon>

</button>

Триггер анимации: 

trigger('enableDisable', [
    state('open', style({
        transform: 'scale(1)',
    })),
    state('closed', style({
        transform: 'scale(0)',
    })),
    transition('open => closed', [
        animate('0.15s')
    ]),
    transition('closed => open', [
        animate('0.15s')
    ]),
]),

Я пробовал делать такие вещи, как сделать позицию от button до relative, а затем делать это 

mat-icon {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

который работает, но они не выравниваются по центру. Что я могу сделать, чтобы это исправить?

https://stackblitz.com/edit/angular-92fjph

...