内容简介:傳統 RWD 若想根據不同 Device 改變顯示順序,必須自行寫 Media Query 改變macOS Mojave 10.14.5Node 12.4.0
傳統 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
之下。
order
order-(size)(1-12)
根據不同 device 改變顯示順序
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 更佳,也更易維護
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
UML和模式应用
拉曼 / 李洋、郑䶮 / 机械工业出版社 / 2006-5 / 66.00元
《UML和模式应用(原书第3版)》英文版面世以来,广受业界专家和读者的好评,历经3个版本的锤炼,吸收了大量OOA,D的精华思想和现代实践方法。全书叙述清晰、用词精炼、构思巧妙,将面向对象分析设计的概念、过程、方法、原则和个人的实践建议娓娓道来,以实例为证,将软件的分析和设计的过程叙述得如逻辑推理一般,于细节处见真知。 《UML和模式应用(原书第3版)》是一本经典的面向对象分析设计技术的入门书......一起来看看 《UML和模式应用》 这本书的介绍吧!