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>