https://codepen.io/hereiscasio/pen/ZmYyYK?editors=1000

Used UI Component ( #2 )

#1 Toolbars #2 Button groups

UI 圖來源件此

Discussion

除新元件外，今天比較特別的地方有 2（ 但其實仔細去看程式碼不難 ），此處要給出的概念就是：活用 FCC

• A. Nested Cards
• B. Nested Grids

// toolbar in outer card 
<v-toolbar flat color='transparent' class="pt-2 pl-2 ma-2">
    <v-app-bar-nav-icon class='opactiy-5'></v-app-bar-nav-icon>
</v-toolbar>

首先 v-toolbar 不是非得放在 v-card 裡，甚至也不一定要使用 v-toolbar，直接在 v-card-title 中塞漢堡圖標並調整 styling 也能達成相同目的，此處特點在於漢堡圖標因為太常用，已經被 Vuetify 規格化了：v-app-bar-nav-icon，但事實上你也可寫成：<v-btn icon><v-icon v-text='menu'></v-icon></v-btn>。至於 flat 是移除預設的隱影。

// toolbar in inner card
<v-toolbar color="transparent" class="mb-2">
    <v-btn-toggle v-model="toggle_none" id='panel-controller'>
        <v-btn text icon>
            <v-icon>pause</v-icon>
        </v-btn>
        <v-btn text icon>
            <v-icon>stop</v-icon>
        </v-btn>
    </v-btn-toggle>        
    <v-spacer></v-spacer>
    <span class="grey--text">CURRENT SESSION: 1:48:09</span>
</v-toolbar>

v-spacer 如圖面上所示，一種 placeholder，佔位用的，它也能在別的 UI 組件中使用。而 v-btn-toggle 其實就是 Button groups，專門用於一次控制一堆 buttons 的選取狀態（ 例如 UI 上若有一排 buttons 必須做成可以多選，這若是自己 DIY 是有一點囉唆 ）