[筆記] Vuetify Expansion 客製標題按鈕 @地瓜大的飛翔旅程

章節連結

實作過程
Demo 網址
相關文章

Vuetify 的 Expandsion 套件，對於製作展開選單的需求，可以立即套用。不過在其客製化標題上，要在標題左邊加上一些東西(例如 icon, 按鈕……)等，只要運用 slot=”header” 的特性，就可以達成。

實作過程

1. 請先依照 Vuetify 官方指引，運用 NPM 載入或是 CDN 載入即可。
2. 然後運用 Vue 的插槽 slot，將你想要的內容塞入即可。
3. 雖然說可以塞入 icon 或是 selection 的 checkbox，不過 checkbox 沒辦法跟你的點選展開的開關同步，這樣會造成選取上的困擾，請小心使用。

<v-expansion-panel-content>
      <template slot="header">
        <v-icon color="error">error</v-icon>
        <span>Item</span>
      </template>
      <v-card>
        <v-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</v-card-text>
      </v-card>
</v-expansion-panel-content>

<v-expansion-panel-content>

<v-icon color="error">error</v-icon>

</template>

<v-card>

<v-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</v-card-text>

</v-card>

</v-expansion-panel-content>