Vuetify 的 Expandsion 套件，對於製作展開選單的需求，可以立即套用。不過在其客製化標題上，要在標題左邊加上一些東西(例如 icon, 按鈕……)等，只要運用 slot=”header” 的特性，就可以達成。
實作過程
1. 請先依照 Vuetify 官方指引，運用 NPM 載入或是 CDN 載入即可。
2. 然後運用 Vue 的插槽 slot，將你想要的內容塞入即可。
3. 雖然說可以塞入 icon 或是 selection 的 checkbox，不過 checkbox 沒辦法跟你的點選展開的開關同步，這樣會造成選取上的困擾，請小心使用。
|
1 2 3 4 5 6 7 8 9 |
<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> |
Demo 網址
[網址]：https://codesandbox.io/s/exapnsion-with-custom-header-vuetify-114-qbqu4
相關文章
★全文分享★ [指南] Vuetify 2 Dark Mode 配色設定與一些細節
知名的 Vuetify 框架中，有內建 Dark Mode 的
★全文分享★ [筆記] Vuetify select autocomplete 套件限制多選數量
在使用 Vuetify 前端框架開發時，當要給使
★全文分享★ [筆記] Vuetify + Babel + Vue.config.js 最佳化實踐
![[筆記] Vuetify + Babel + Vue.config.js 最佳化實踐](https://smlpoints.com/wp-content/uploads/notes-vuejs-node-js-initialize-projects-1.jpg "[筆記] Vuetify + Babel + Vue.config.js 最佳化實踐")
Vue 搭配 Vuetify 建立專案，在最後打包 Build
★全文分享★ [筆記] Vuetify 客製化製作彈出 + 滾動選單
Vuetify 的 Selection 部分，雖說是節省了建立
