移动 mat-expansion-panel 的切换位置

在 Angular Material 中，mat-expansion-panel 是一个用于插入可展开和可折叠内容的组件。默认情况下，切换展开和折叠面板的按钮位置设置为面板标题的左侧。但是，在某些情况下，你可能需要将切换按钮移到另一个位置。在本指南中，我们将介绍如何通过 Angular Material 和 CSS 移动 mat-expansion-panel 的切换位置。

首先，我们来回顾一下默认设置。以下是一个基本的 mat-expansion-panel：

<mat-expansion-panel>
  <mat-expansion-panel-header>
    <mat-panel-title>
      这是标题
    </mat-panel-title>
    <mat-panel-description>
      这是描述
    </mat-panel-description>
  </mat-expansion-panel-header>
  <p>这是内容</p>
</mat-expansion-panel>

在上面的代码中，mat-panel-title 标签包含了 mat-expansion-panel 的切换按钮，默认放在标题的左侧。

现在，我们来看看如何将切换按钮移到面板标题的右侧。我们可以通过 CSS 中的 order 属性来实现。

我们可以给标题中的每个元素添加一个 order 值，以控制它们在标题中的顺序。我们将给标题的 “这是描述” 添加 order: 1，将标题的 “这是标题” 添加 order: 2，以确保切换按钮始终位于标题的右侧。下面是 CSS 样式代码：

.mat-expansion-panel-header mat-panel-description {
  order: 1;
}

.mat-expansion-panel-header mat-panel-title {
  order: 2;
}

我们可以在我们的组件的 CSS 文件中添加这些代码。在 mat-expansion-panel 中使用带有新类的 mat-expansion-panel-header 元素，这样我们就可以将样式指定为目标面板的切换按钮。

下面是最终代码：

<mat-expansion-panel>
  <mat-expansion-panel-header class="custom-header">
    <mat-panel-description>
      这是描述
    </mat-panel-description>
    <mat-panel-title>
      这是标题
    </mat-panel-title>
  </mat-expansion-panel-header>
  <p>这是内容</p>
</mat-expansion-panel>

在 CSS 中添加样式：

.custom-header mat-panel-description {
  order: 1;
}

.custom-header mat-panel-title {
  order: 2;
}

这样做就可以让 mat-expansion-panel 的切换按钮移动到标题的右侧。

通过 CSS，我们可以控制面板标题中元素的顺序，从而移动 mat-expansion-panel 的切换按钮的位置。