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

Question

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

但我想将箭头的设计更改为这样的：

未展开：

扩展：

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

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 {}

原文由 CloudSeph 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 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 演示 的链接。

原文由 Faisal 发布，翻译遵循 CC BY-SA 3.0 许可协议