iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 7
0
Modern Web

Daily UI : 開發者版系列 第 7

Vuetify:Fashion Header

https://codepen.io/hereiscasio/pen/WaqpQq

Used UI Component ( #1 )

#1 Sheets

今天只用一個新組件,因我假設一個新手要上手這個框架,它今天要做的就是持續鍛鍊已掌握的技術,也就是練習前面 Cinema Application 中所碰到的所有以及相關元件。然後希望這個很 Fashion 的 UI,能激起你的開發興趣

Discussion

<v-card 
    color="#75D4DA" class="pa-12" elevation='12'
    width="720" height="530" min-width='690'
>
    <v-row class='fill-height'>
        <v-col col='5'>
            <v-card-title ...>
            <v-card-actions ...>
        <v-col/>
        <v-col col='7'><v-col/>
    </v-row>

    <v-img ...>
</v-card>

把整張看成是一個 Cards,內部左右分兩半,比例為 5 : 7( 靠 v-col 的屬性 cols,細節請見 ),圖片則採絕對定位。從上可發現,v-card 內部的第一層並非絕對要放 Cards 相關組件( e.g. v-card-title )。<v-col col='7'><v-col/> 裡不放任何東西,只是純粹用於佔空間。圖面上唯一可以與使用者互動的就是按鈕,所以把 v-btn 放在 v-card-actions

值得一提的是,之前所講的 FCC,在實際使用時,必須要能活用,例如這張卡片上一堆文字,請問哪段文字是屬於 v-card-title,哪段是 v-card-text?雖然沒有一定,但此處提供一個思路:於此處區分它們誰是誰似乎不重要( 因圖面上文字共有三段 ),所以直接把它們全部歸納在 v- card-title 即可

<v-card-title 
    class="pr-0 white--text flex-column align-start"
>

    <h3 class="caption font-weight-bold">
        TRENDS & <br> SHOPPING GUIDES
        <v-sheet 
            class="mt-1 mb-8" width="20" height="2" color='white'>
        </v-sheet>
    </h3>
    <h1 v-html='TEXT_TITLE' class="display-1"></h1>
    <p 
        class="body-2 pt-8 font-weight-bold" 
        v-html='TEXT_DESCRIPTION'>
    </p>

</v-card-title>

可以發現,本範例有開始直接寫原生 html( 即 h3, h1, p ),若你正開始練習 FCC,請別走火入魔硬要找出那幾段文字是否 "分別" 可靠特定的 Vuetify 組件實作,直接使用原生相當具有語意化的標籤就好了。flex-columnflex-direction: columnbody-2, caption, font-weight-bold . . . 等只是裝飾文字的 class,請自行於官網的章節: Styles & animations 中找尋( 你得習慣翻查官方文件,逐漸熟悉哪些資訊列在哪個章節,以便未來快速查找 )

比較特別的是,圖面上那個細小的白色橫線,可靠 Vuetify 中、隸屬於 Low-level Component 的 v-sheet 予以實作,sheet 的概念實際上在 Google 的 Material Design 官方文件中有提到,你可搭配 Vuetify 的說明文件快速了解它到底是個什麼東西( 簡單來說這是個相當廣義的組件,不像 calendar,button . . . 等相當特定 )。

最後,因為 Vuetify 似乎不怎麼愛 position: absolute,所以通常若決定要靠這種方式排版,就可能需用上 inline style )。inline style 不可怕,慎用、少用即可,本例圖片的排版就用了今天唯一一個 inline style


上一篇
Vuetify:Cinema Application › More discussion
下一篇
Vuetify:Time is money
系列文
Daily UI : 開發者版30

尚未有邦友留言

立即登入留言