Vuetify Application 정리

더 북 소사이어티의 레이아웃. Vuetify와는 별 관련 없다.

 

 

1. App bar

 (1) 스크롤 시 보라색 부분은 사라지고 메뉴만이 위에 표시된다: shrink-on-scroll, scroll-threshold=" "

 (2) 메뉴 구현

<template v-slot:extension>
    <v-tabs align-with-title>
      <v-tab>블로그 Blog</v-tab>
      <v-tab>분야 Category</v-tab>

      (...)

      <v-tab>소개 About</v-tab>
    </v-tabs>
</template>

 

 

2. Navigation Drawer

 

  <v-navigation-drawer permanent>
    <v-list
    dense
    nav
    >
        <v-list-item
        v-for="item in items"
        :key="item.title"
        link
        >
            <v-list-item-content>
            <v-list-item-title>{{ item.title }}</v-list-item-title>
            </v-list-item-content>
        </v-list-item>
    </v-list>
</v-navigation-drawer>

 

3. Content

 

 

4. Footer

<template>
  <v-footer padless>
    <v-col>
      The Book Society
    </v-col>
  </v-footer>
</template>