點燈坊

學而時習之,不亦悅乎

Tag : Vuetify

Vuetify 之 Cross Axis 與 Wrap 對齊

<v-layout> 除了提供 align-start props 外,還提供了 align-content-start,若只從官網文件,很難看出其差異,事實上 align-content-start 就是 CSS 的 align-content: start

Vuetify 之 Cross Axis 對齊

Flexbox 對於 Cross Axis 對齊,主要由 CSS 的 align-items 決定;Vuetify 的 Grid 則提供 align-startalign-endalign-centeralign-baselinealign-self 等 props,讓我們不用 CSS 即可排版。

Vuetify 之改變顯示順序

傳統 RWD 若想根據不同 Device 改變顯示順序,必須自行寫 Media Query 改變 order Property,Vuetify 提供了 order props,可直接使用。

Vuetify 之間隔等距

Flexbox 對於 間隔等距,主要由 justify-contentspace 系列設定;Vuetify 的 Grid 則提供 justify-space-betweenjustify-space-around 等 props,讓我們不用 CSS 即可排版。

Vuetify 之垂直對齊

Flexbox 對於 垂直對齊,主要由 CSS 的 row-directionjustify-content 決定;Vuetify 的 Grid 則提供 columnreversejustify-startjustify-endjustify-center 等 props,讓我們不用 CSS 即可排版。

Vuetify 之水平對齊

Flexbox 對於 水平對齊,主要由 CSS 的 row-directionjustify-content 決定;Vuetify 的 Grid 則提供 rowreversejustify-startjustify-endjustify-center 等 props,讓我們不用 CSS 即可排版。

Vuetify 之 Grid System 初體驗

如同 Bootstrap,Vuetify 也內建以 Flexbox 為基礎的 Grid System,透過內建 Component,我們不必使用 CSS 排版,但 Flexbox 觀念仍是必須的。

Vuetify 初體驗

Vuetify 是基於 Vue 的 Mobile First UI Framework,除了豐富 Mobile UI Component 外,也支援 RWD 與 Helper Class,以前開發 UI 時需使用 Bootstrap,而現在幾乎可以使用 Vuetify 取代 Bootstrap,且與 Vue CLI 完美整合。