Vuetify 扩展面板，面板标题左侧带有图标

Question

Vue.js 的 Vuetify 提供了一种将图标添加到扩展面板 ( https://vuetifyjs.com/en/components/expansion-panels#custom-icon ) 的方法。 但是，我希望将它们放在标题的左侧，如下面的屏幕截图所示。

CodePen仅显示了如何添加图标的方法，但在右侧。 我已经尝试了下面的 2 个片段，但没有任何成功。

<template v-slot:actions>
  <v-icon left>mdi-check</v-icon>
</template>

和

<v-icon left>mdi-check</v-icon>

两者都没有预期的结果。

Answer 1

接受的答案有效，但它破坏了图标旋转。 更好的方法可能是使用顺序：

<template>
    <v-expansion-panel-header>
        <template v-slot:actions>
            <v-icon class="icon">$expand</v-icon>
        </template>
        <span class="header">{{ headerText }}</span>
    </v-expansion-panel-header>
</template>

<style>
    .icon {
        order: 0;
    }

    .header {
        order: 1;
    }
</style>

https://github.com/vuetifyjs/vuetify/issues/9698#issuecomment-628132033

Answer 2

您可以通过将带有图标的标题面板标题包装在一个 div 中来实现相同的结果，如下所示：

 <v-expansion-panel-header class="justify-self-start" disable-icon-rotate>
     <div>
          <v-icon color="error">mdi-alert-circle</v-icon>
             <span>Item</span>
     </div>

</v-expansion-panel-header>

请检查这支笔

Answer 3

所以你不必用 CSS 来破解。

  <v-expansion-panel-header hide-actions>
    <template v-slot:default="{ open }">
      <div>
        <v-icon>
          <template v-if="open">mdi-chevron-up</template>
          <template v-else>mdi-chevron-down</template>
        </v-icon>
        Item
      </div>
    </template>
  </v-expansion-panel-header>