Vuetify 之改變顯示順序

傳統 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

Navigation bar 顯示在最下方。

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

當寬度變小時，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-xs0 與 order-sm1 props：

• 當 device 為 xs 時 (small to large handset)，其 CSS 的 order 為 0
• 當 device 為 sm 時 (small to medium tablet)，其 CSS 的 order 為 1

也就是當 tablet 以上時， order 為 1 ，navigation bar 會顯示在最下方。

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

size ：可為 xs 、 sm 、 md 、 lg 或 xl

(1-12) ：可指定 1 到 12

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

當 device 為 iPad 時， order-sm1 相當於 CSS ：

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

此時 order 為 1 ，所以 navigation bar 在最下方。

Conclusion

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