Question

用于切换mat-expansion-panel的默认图标是>。将hideToggle设置为true只会隐藏切换图标。有什么办法可以改变吗？我没有在官方文档中找到任何东西。如果状态分别为关闭或打开，我想使用+或-图标。

Answer 1

如Angular Material Expansion Panel documentation所述，我们可以自定义mat-extension-panel-header的样式，从而可以自定义图标。

首先，您可以通过将hideToggle属性设置为false来隐藏原始图标。此外，我们将事件绑定(opened)和(closed)分配给panelOpenState属性。您可以在here上查看mat-expansion-panel的其他属性。

<mat-expansion-panel (opened)="panelOpenState = true" (closed)="panelOpenState = false"hideToggle="true">

接下来，在您的mat-panel-description上，包括所需的自定义图标。显示的图标将取决于面板的状态。在此示例中，我们使用Material Icons中的图标。

<mat-panel-description>
  <mat-icon *ngIf="!panelOpenState">add</mat-icon>
  <mat-icon *ngIf="panelOpenState">remove</mat-icon>
</mat-panel-description>

我已经从Angular文档中编辑了原始示例，以便它使用自定义的+和minus图标来表示mat-extension-panel的展开/折叠状态。您可以通过here访问该演示。

Answer 2

有一个类.mat-expanded应用于<mat-expansion-panel>

因此，您可以使用CSS更改图标，不需要JS。

要将箭头向下更改为向上：

.mat-expanded .mat-expansion-panel-header-title .material-icons{
  transform: rotate(180deg);
}

    <mat-panel-title>
      <span class="material-icons">expand_more</span>
      Panel with icon `transform`
    </mat-panel-title>

交换图标：

.mat-expansion-panel-header-title .open,
.mat-expanded .mat-expansion-panel-header-title .close{
  display: inline-block;
}
.mat-expanded .mat-expansion-panel-header-title .open,
.mat-expansion-panel-header-title .close{
  display: none;
}

    <mat-panel-title>
      <span class="material-icons open">open_in_full</span>
      <span class="material-icons close">close_fullscreen</span>
      Panel with open/close
    </mat-panel-title>

这里是演示https://stackblitz.com/edit/angular-e2fnlm的链接

当您具有多个材料扩展面板

时，

CSS解决方案有效

Answer 3

在示例中将名称命名为mat-expansion-panel say面板。使用mat-expansion-panel的expanded属性显示或隐藏+或-图标。

import React, { useRef } from 'react';

export default function () {
   const divRef = useRef();
   const copyToCB = () => {
    const div = document.createRange();

    div.setStartBefore(divRef.current);
    div.setEndAfter(divRef.current);
    window.getSelection().empty();
    window.getSelection().addRange(div);
    document.execCommand('copy')
}
return (
    <>
        <div className="generated-voucher-code-details" ref={divRef}>
            <p>Your voucher Code is <span style={{ color: '#000000', fontWeight: '500' }}>“X1X1X1“</span>.</p>
            <p>To know more on how to redeem the gift card visit the link <span style={{ color: '#C7417B' }}>stores.com</span></p>
            <p>Choose Preferred date, Time, Number of People and Book Now.</p>
            <p>Apply voucher code in Have a Xoxo Voucher Check Box.</p>
            <p>Pay Extra Amount if any through other mode of payments.</p>
            <p>Your order is successfully placed.</p>
            <p>You will receive confirmation within 24 hours.</p>
        </div>
        <button onClick={copyToCB}>Copy to CB</button>
    </>
)
}

Answer 4

您可以在mat-icon中使用mat-expansion-panel-header。

请在stackblitz上查看this的工作示例。

对于+图标，您可以使用<mat-icon>add</mat-icon>

<mat-accordion>
  <mat-expansion-panel hideToggle>
    <mat-expansion-panel-header>
      <mat-panel-title>
        Personal data
      </mat-panel-title>
      <mat-icon>add</mat-icon>
  </mat-expansion-panel-header>

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

  <mat-form-field>
     <input matInput placeholder="Age">
  </mat-form-field>
</mat-expansion-panel>

Answer 5

将 hideToggle 添加到mat-expansion-panel中：

<mat-expansion-panel (opened)="panelOpenState = true"
                             (closed)="panelOpenState = false" hideToggle>

并添加图标：

 <mat-expansion-panel-header>
            <mat-icon>add</mat-icon>

如何更改垫子扩展面板的切换图标？

5 个答案: