更改默认扩展面板箭头的箭头样式答案

【问题标题】：Change arrow style for default expansion panel arrow更改默认扩展面板箭头的箭头样式
【发布时间】：2018-03-15 07:57:51
【问题描述】：

我有一个如下所示的角度扩展面板。

但是我想把箭头的设计改成这样：

未展开：

扩展：

怎么样？或者我可以在有角度的材料中这样做吗？代码如下：

HTML：

<md-expansion-panel>
  <md-expansion-panel-header>
    <md-panel-title>
      Personal data
    </md-panel-title>
    <md-panel-description>
      Type your name and age
    </md-panel-description>
  </md-expansion-panel-header>

  <md-form-field>
    <input mdInput placeholder="First name">
  </md-form-field>

  <md-form-field>
    <input mdInput placeholder="Age">
  </md-form-field>
</md-expansion-panel>

TS：

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

/**
 * @title Basic expansion panel
 */
@Component({
  selector: 'expansion-overview-example',
  templateUrl: 'expansion-overview-example.html',
})
export class ExpansionOverviewExample {}

【问题讨论】：

标签： css angular angular-material angular-material2

【解决方案1】：

是的，这是可能的。为您的扩展面板提供参考 ID，例如example 并将hideToggle 属性设置为true。

在<md-panel-description>中，您可以放置您的图标并使用面板的expanded属性来显示或隐藏相关图标。

  <md-expansion-panel  class="custom-header" hideToggle="true" #example>
    <md-expansion-panel-header>
      <md-panel-title>
        Personal data
      </md-panel-title>
      <md-panel-description>
        Type your name and age
        <md-icon *ngIf="!example.expanded">play_arrow</md-icon>
        <md-icon *ngIf="example.expanded">arrow_drop_down</md-icon>
      </md-panel-description>
    </md-expansion-panel-header>

    <md-form-field>
      <input mdInput placeholder="First name">
    </md-form-field>

    <md-form-field>
      <input mdInput placeholder="Age">
    </md-form-field>
  </md-expansion-panel>

要在图标和面板描述之间提供空间，请在您的 component.css 中添加以下类：

.custom-header .mat-expansion-panel-header-title, 
.custom-header .mat-expansion-panel-header-description {
  flex-basis: 0;
}

.custom-header .mat-expansion-panel-header-description {
  justify-content: space-between;
  align-items: center;
}

我使用了材质图标。如果需要，您可以放置自定义图标。这是stackblitz demo的链接。

【讨论】：

您更正了 material.angular.io/components/expansion/examples 的源代码，因为 class="custom-header" 在 mat-accordion 上，但不起作用
非常感谢朋友。
@Faisal 有没有办法为多个扩展面板动态生成id？
@Zuber，用例是什么？
@Zuber，如果您使用循环生成它们，那么模板中的每个面板都可以使用相同的键。

【解决方案2】：

扩展了@Faisal 的答案，根据最新版本的角度材料，我们将使用mat 前缀而不是md 作为材料组件。

Angular 材质 8.1.4

<mat-expansion-panel class="mb-15px" hideToggle="true" #xyz>
<mat-expansion-panel-header>
  <mat-panel-title class="font-weight-bold font-small">
    Info
  </mat-panel-title>
  <mat-panel-description>
    <mat-icon *ngIf="!xyz.expanded">play_arrow</mat-icon>
    <mat-icon *ngIf="xyz.expanded">arrow_drop_down</mat-icon>
  </mat-panel-description>
</mat-expansion-panel-header>
<mat-expansion-panel class="mb-15px" hideToggle="true" #xyz>

Stackblitz Demo

【讨论】：

@ErayT 尝试将不同的Id 分配给不同的面板。在这里我使用了#xyz。您必须提供唯一的id，例如#xyz、#abc 等等……

【解决方案3】：

另一个漂亮的解决方案 .. 只需使用 fxFlex 添加一个跨度

  <mat-panel-description>
       <span fxFlex></span>
       <img src="">
   </mat-panel-description>

不要忘记将 hideToggle 添加到 mat-expansion-panel

<mat-expansion-panel hideToggle>

【讨论】：