點燈坊

學而時習之,不亦悅乎

Vuetify 之改變顯示順序

Sam Xiao's Avatar 2019-07-03

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

Version

macOS Mojave 10.14.5
Node 12.4.0
Vue CLI 3.8.4
Vue 2.6.10
Vuetify 1.5.5
CSS 3
Chrome 75.0.3770.100

Chrome

order000

Navigation bar 顯示在最下方。

order001

當寬度變小時,navigation bar 改顯示在 Header 之下。

Vue File

App.vue

<template>
  <v-container fluid>
    <v-layout column>
      <v-flex>
        <header class="general">Header</header>
      </v-flex>
      <v-flex order-xs0 order-sm1>
        <nav class="main-nav general">
          <ul>
            <v-layout row>
              <li><a href="#">Home</a></li>
              <li><a href="#">Tutorial</a></li>
              <li><a href="#">Archives</a></li>
              <li><a href="#">Tags</a></li>
              <li><a href="#">Search</a></li>
            </v-layout>
          </ul>
        </nav>
      </v-flex>
      <v-flex>
        <main class="general">Content</main>
      </v-flex>
      <v-flex>
        <footer class="general">Footer</footer>
      </v-flex>
    </v-layout>
  </v-container>
</template>

<script>
export default {
  name: 'App',
}
</script>

<style scoped>
.general {
  margin-bottom: 5px;

}

.main-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.main-nav li {
  margin-right: 10px;
}
</style>

第 7 行

<v-flex order-xs0 order-sm1>
  <nav class="main-nav general">
    <ul>
      <v-layout row>
        <li><a href="#">Home</a></li>
        <li><a href="#">Tutorial</a></li>
        <li><a href="#">Archives</a></li>
        <li><a href="#">Tags</a></li>
        <li><a href="#">Search</a></li>
      </v-layout>
    </ul>
  </nav>
</v-flex>

<v-flex> 多了 order-xs0order-sm1 props:

  • 當 device 為 xs 時 (small to large handset),其 CSS 的 order0
  • 當 device 為 sm 時 (small to medium tablet),其 CSS 的 order1

也就是當 tablet 以上時,order1,navigation bar 會顯示在最下方。

否則為 small mobile phone,order 為 default 值 0,如原本 HTML 順序顯示在 Header 之下。

order
order-(size)(1-12)
根據不同 device 改變顯示順序

size:可為 xssmmdlgxl

(1-12):可指定 112

order003

當 device 為 iPhone 時,order-xs0 並沒有任何動作,此時 order0,所以 navigation bar 在 Header 之下。

order002

當 device 為 iPad 時,order-sm1 相當於 CSS :

@media {min-width: 600px}
.flex.order-sm1 {
  order: 1;
}

此時 order1,所以 navigation bar 在最下方。

Conclusion

  • Vuetify 的 order props 同時結合 device 與 size,語意比 CSS 更佳,也更易維護

Reference

Vuetify, Grid system
Vuetify, Breakpoints