패널 헤더 왼쪽에 아이콘이 있는 Vuetify 확장 패널

패널 헤더 왼쪽에 아이콘이 있는 Vuetify 확장 패널

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>

둘 다 원하는 결과를 얻지 못했습니다.

승인된 답변은 작동하지만 아이콘 회전은 중단됩니다.더 나은 접근법은 순서를 사용하는 것입니다.

<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

다음과 같이 헤더 패널 제목을 하나의 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>

이 펜을 확인해 주세요

언급URL : https://stackoverflow.com/questions/59713131/vuetify-expansion-panels-with-icon-on-the-left-side-of-panels-header