У меня есть Angular (8) панель расширения материала внутри складной боковой панели.
На данный момент панели расширения будут активироваться независимо от того, открыта ли боковая навигация или нет. Когда панель закрыта, значки не должны ничего делать. Элементы должны разворачиваться / разворачиваться только тогда, когда боковая навигация находится в открытом положении (широко). Прикрепленное изображение показывает боковую панель закрыта. Шевроны представлены как часть панели расширения материала. Они исчезнут, как только исчезнет способность к расширению.
Итак, в итоге, когда боковая навигация ! IsExpanded , я хотел бы удалить из домена возможность открывать расширение панель. <mat-expansion-panel [disabled]="isDisabled"> отключит панель.
В идеале я хотел бы научиться делать две вещи:
Деактивировать / убрать возможность расширения при боковой навигации закрыто, ngif.
BY Javascript, когда ! isExpanded css дисплей: нет; оказывает. Я мог бы просто спрятать шеврон как полшага, но на самом деле все это нужно go. Но я все еще хотел бы увидеть, как это сделать программно.
HTML:
<mat-expansion-panel>
<mat-expansion-panel-header>
<mat-icon *ngIf="!isExpanded">
<fa-icon [icon]="faCheck"></fa-icon>
</mat-icon>
<p *ngIf="isExpanded">
<fa-icon [icon]="faCheck"></fa-icon>
<span class="forms">Buttons & Indicators</span></p>
</mat-expansion-panel-header>
<p *ngIf="!isExpanded" p>content</p>
</mat-expansion-panel>
</mat-sidenav>
</mat-sidenav-container>
Отображает:
<mat-expansion-panel _ngcontent-lgo-c0="" class="mat-expansion-panel ng-tns-c8-7 ng-star-inserted" style=""><mat-expansion-panel-header _ngcontent-lgo-c0="" class="mat-expansion-panel-header ng-tns-c9-8 ng-trigger ng-trigger-expansionHeight ng-star-inserted" role="button" id="mat-expansion-panel-header-3" tabindex="0" aria-controls="cdk-accordion-child-3" aria-expanded="false" aria-disabled="false" style="height: 48px;" data-ol-has-click-handler=""><span class="mat-content"><!--bindings={
"ng-reflect-ng-if": "true"
}--><mat-icon _ngcontent-lgo-c0="" class="mat-icon notranslate material-icons mat-icon-no-color ng-star-inserted" role="img" aria-hidden="true" style=""><fa-icon _ngcontent-lgo-c0="" class="ng-fa-icon" ng-reflect-icon="[object Object]"><svg role="img" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="check" class="svg-inline--fa fa-check fa-w-16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"></path></svg></fa-icon></mat-icon><!--bindings={
"ng-reflect-ng-if": "false"
}--></span><!--bindings={
"ng-reflect-ng-if": "true"
}-->**<span class="mat-expansion-indicator ng-tns-c9-8 ng-trigger ng-trigger-indicatorRotate ng-star-inserted" style="transform: rotate(0deg);"></span>**</mat-expansion-panel-header><div class="mat-expansion-panel-content ng-trigger ng-trigger-bodyExpansion" role="region" aria-labelledby="mat-expansion-panel-header-3" id="cdk-accordion-child-3" style="height: 0px; visibility: hidden;"><div class="mat-expansion-panel-body"><!--bindings={
"ng-reflect-ng-if": "true"
}--><p _ngcontent-lgo-c0="" p="" class="ng-star-inserted" style="">content</p><!--bindings={}--></div></div></mat-expansion-panel>
компонент:
import { Component } from '@angular/core';
import { faFileAlt} from '@fortawesome/free-solid-svg-icons';
import {faBars} from '@fortawesome/free-solid-svg-icons/faBars';
import {faChevronLeft} from '@fortawesome/free-solid-svg-icons/faChevronLeft';
import {faLocationArrow} from '@fortawesome/free-solid-svg-icons/faLocationArrow';
import {faCheck} from '@fortawesome/free-solid-svg-icons/faCheck';
import {faWindowRestore} from '@fortawesome/free-solid-svg-icons/faWindowRestore';
import {faTable} from '@fortawesome/free-solid-svg-icons/faTable';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
title = 'style-guide';
// opened = 'opened';
isExpanded = false;
faBars = faBars;
faChevronLeft = faChevronLeft;
faFileAlt = faFileAlt;
faLocationArrow = faLocationArrow;
faCheck = faCheck;
faWindowRestore = faWindowRestore;
faTable = faTable;
}
Спасибо !!!
