如何移动 Mat 扩展指示？答案

【问题标题】：How to move Mat expansion indication?如何移动 Mat 扩展指示？
【发布时间】：2017-11-22 16:29:35
【问题描述】：

是否可以将垫子扩展指示器（Angular，Material Design）移动到标题之前？

没有关于材料文档https://material.angular.io/components/expansion/overview的信息

谢谢你:)

【问题讨论】：

没有默认选项。但您可以禁用默认箭头并在面板左侧创建自己的箭头。这是 API 文档：material.angular.io/components/expansion/api
我同意@ShadowFoOrm，覆盖样式。但我认为从可用性的角度来看这是一个坏主意：谷歌创建了材料设计来使应用程序的外观和行为相同。用户希望此图标位于右侧。

标签： angular material-design

【解决方案1】：

您始终可以覆盖默认样式。

.mat-expansion-panel-header {
  flex-direction: row-reverse;

  .mat-content {
    padding-left: 12px;
  }
}

【讨论】：

我试过你的css。箭头在左边，但卡在标题上（.mat-content 代码没有应用，我不知道为什么）。
一个天才的解决方案，我只需要使用 transform:rotate 来获得我想要的行为。谢谢。
有效。但是，我必须为填充和样式执行以下操作。 stackoverflow.com/questions/46540080/…
@Java_deep，这是正确的答案吗？如果是，也许你可以标记它？
这工作得很好，但是你如何改变指示器以向右旋转，因为它在左侧

【解决方案2】：

您可以使用以下代码轻松完成此操作！

<mat-accordion>
        <mat-expansion-panel [togglePosition]="'before'">
          <mat-expansion-panel-header >
            <mat-panel-title>

            </mat-panel-title>

          </mat-expansion-panel-header>

        </mat-expansion-panel>
</mat-accordion>

只需添加 [togglePosition]=" 'before' "

【讨论】：

我很确定当我发布此内容时它不存在，但从现在开始它可能会很有用:)
对于角材料 8.0.0^ 用户，这是首选的解决方案。完美运行。谢谢。