Vuetify stepper 於mobile 尺寸無法顯示label問題

Willy
Sep 1, 2022

--

使用 Vuetify stepper 時,發現一直無法顯示step下方的文字,compoents如下圖:

stepper components

畫面中step下方文字完全沒有顯示。

模擬裝置資訊

將裝置寬度切至大於960px 後,下方文字又出現了。

搜尋了很多文章發現,應該是原先vuetify設計的機制中,假如裝置寬度小於960px會將其文字隱藏,也許是覺得在小畫面中不顯示文字UI體驗比較好?

於github中發現此篇

所以我們只要將上面的css加入,複寫原先vuetify的css即可。

而我這邊增加了important才有效果。

參考連結

--

--

Willy
Willy

Written by Willy

前端修練筆記本,記錄一些踩雷及學習過程,希望能順便幫助一些,在學習或開發路上卡關的人們。

No responses yet