如何以编程方式切换 Angular 材质扩展面板 [英] How to toggle Angular material expansion panel programmatically

问题描述

我刚刚开始使用 Material Design 进行 Angular 4 项目.

I just started working on an Angular 4 project with material design.

我目前正在使用扩展组件，API 声明用户无法切换禁用的扩展面板，但仍可以通过编程方式对其进行操作.但是，我不知道如何以编程方式切换面板.

I am currently working with the expansion component, the API states that a disabled expansion panel can't be toggled by the user, but can still be manipulated programmatically. I don't know however, how you can toggle your panel programmatically.

在 Angular 中模拟这种情况的首选方法是什么?

What is the preferred way in Angular to simulate this?

推荐答案

expanded 设置为 true 以展开扩展面板，设置为 false 以关闭扩展面板.在以下示例中，扩展面板以编程方式打开和关闭.请参考此链接

expanded is set to true to expand the expansion panel and set to false to close the expansion panel. In the following example, expansion panel is programetically opened and closed. Please refer this link

TS 文件

import {Component} from '@angular/core';

/**
 * @title Expansion panel as accordion
 */
@Component({
  selector: 'expansion-steps-example',
  templateUrl: 'expansion-steps-example.html',
  styleUrls: ['expansion-steps-example.css']
})
export class ExpansionStepsExample {
  step = 0;

  setStep(index: number) {
    this.step = index;
  }

  nextStep() {
    this.step++;
  }

  prevStep() {
    this.step--;
  }
}

HTML 文件

<mat-accordion class="example-headers-align">
  <mat-expansion-panel [expanded]="step === 0" (opened)="setStep(0)" hideToggle="true">
    <mat-expansion-panel-header>
      <mat-panel-title>
        Personal data
      </mat-panel-title>
      <mat-panel-description>
        Type your name and age
        <mat-icon>account_circle</mat-icon>
      </mat-panel-description>
    </mat-expansion-panel-header>

    <mat-form-field>
      <input matInput placeholder="First name">
    </mat-form-field>

    <mat-form-field>
      <input matInput type="number" min="1" placeholder="Age">
    </mat-form-field>

    <mat-action-row>
      <button mat-button color="primary" (click)="nextStep()">Next</button>
    </mat-action-row>
  </mat-expansion-panel>

  <mat-expansion-panel [expanded]="step === 1" (opened)="setStep(1)" hideToggle="true">
    <mat-expansion-panel-header>
      <mat-panel-title>
        Destination
      </mat-panel-title>
      <mat-panel-description>
        Type the country name
        <mat-icon>map</mat-icon>
      </mat-panel-description>
    </mat-expansion-panel-header>

    <mat-form-field>
      <input matInput placeholder="Country">
    </mat-form-field>

    <mat-action-row>
      <button mat-button color="warn" (click)="prevStep()">Previous</button>
      <button mat-button color="primary" (click)="nextStep()">Next</button>
    </mat-action-row>
  </mat-expansion-panel>

  <mat-expansion-panel [expanded]="step === 2" (opened)="setStep(2)" hideToggle="true">
    <mat-expansion-panel-header>
      <mat-panel-title>
        Day of the trip
      </mat-panel-title>
      <mat-panel-description>
        Inform the date you wish to travel
        <mat-icon>date_range</mat-icon>
      </mat-panel-description>
    </mat-expansion-panel-header>

    <mat-form-field>
      <input matInput placeholder="Date" [matDatepicker]="picker" (focus)="picker.open()" readonly>
    </mat-form-field>
    <mat-datepicker #picker></mat-datepicker>

    <mat-action-row>
      <button mat-button color="warn" (click)="prevStep()">Previous</button>
      <button mat-button color="primary" (click)="nextStep()">End</button>
    </mat-action-row>
  </mat-expansion-panel>

</mat-accordion>

这篇关于如何以编程方式切换 Angular 材质扩展面板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！