[筆記] Vuetify Expansion 客製標題按鈕

章節連結

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


實作過程

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

Demo 網址

[網址]:https://codesandbox.io/s/exapnsion-with-custom-header-vuetify-114-qbqu4


相關文章

★全文分享★  [指南] Vuetify 2 Dark Mode 配色設定與一些細節
[指南] Vuetify 2 Dark Mode 配色設定與一些細節
知名的 Vuetify 框架中,有內建 Dark Mode 的功能,開發者也可以針對其顏色進行一番設定。這邊筆記下針對不同的情境,其設定檔的處理方式。說明根據官方文件說法,預設主色和你所宣告的其他主色
★全文分享★  [筆記] Vuetify select autocomplete 套件限制多選數量
[筆記] Vuetify select autocomplete 套件限制多選數量
在使用 Vuetify 前端框架開發時,當要給使用者進行「多選」需求時,偶會遇上「限制使用者選取數量」的情境。不過這功能目前 Vuetify 官方並沒有給出官方解法,於是嘗試自己用 Vuetify 所提供的既
★全文分享★  [筆記] Vuetify + Babel + Vue.config.js 最佳化實踐
[筆記] Vuetify + Babel + Vue.config.js 最佳化實踐
Vue 搭配 Vuetify 建立專案,在最後打包 Build 的過程中,會有一系列的調教設定過程。這其中包含了 Babel (瀏覽器向下相容) 、Tree-Shaking (按需載入) 和打包細項 ( Vue-Cli 以 Webpack 為基礎,讓打包編譯變
★全文分享★  [筆記] Vuetify 客製化製作彈出 + 滾動選單
[筆記] Vuetify 客製化製作彈出 + 滾動選單
Vuetify 的 Selection 部分,雖說是節省了建立下拉選單的時間,不過這回遇上要客製化的場合,那麼就得抽絲剝繭,將所需要的功能、程式碼和CSS取出。實作過程[CSS]靜態部分1. dark 和 light 兩種模式的
按讚加入粉絲團

延伸閱讀