[笔记] 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 + 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 两种模式的
按赞加入粉丝团

延伸阅读