[Vue.js] Tool Bar 구현하기

2020/11/26 - [프로그래밍/Vue.js] - Vue.js 개발 환경 구축하기

Vue.js 개발 환경 구축하기

 

지난 블로그에서는 Vue.js 개발환경을 구축해보았습니다.

이제 실제 화면들을 구축해볼텐데, html, css등에 자신이 있으신분들이라면 직접 하나하나 css를 만들어가면서 할 수 있습니다. 다만... 저같은 경우는 디자인의 디 자도 모르는 디린이기 때문에 Material UI framework를 사용하고자 합니다.

 

vuetifyjs.com/en/

Vuetify — A Material Design Framework for Vue.js

Vuetify는 Vue.js 유저들에게 Material Design을 손쉽게 사용할 수 있도록 만들어 놓은 프레임워크입니다.

당당하게 No design skills required 라는 말이 타이틀에 있을 정도로 손쉽게 UI를 사용할 수 있습니다.

 

우리는 지난 시간에 vue add vuetify 라는 명령어를 이용하여 vuetify를 저희 프로젝트에 설치하였습니다.

이제 이것을 이용하여 안드로이드에서 자주 사용하는 App bar와 Navigation drawer를 구현해볼 것입니다.

 

홈페이지에 보면 마치 사용할 수있는 ui 컴포넌트들을 예제와 함께 정리해놓은 탭이 있습니다.

 

Bar -> Toolbar에 보니 괜찮은 예제가 있습니다. 이걸 차용하겠습니다.

<v-card
    color="grey lighten-4"
    flat
    height="200px"
    >
    <v-toolbar
        :color="bar.class"
        :dark="bar.dark"
    >
        <v-app-bar-nav-icon></v-app-bar-nav-icon>
        <v-toolbar-title>Title</v-toolbar-title>
        <v-spacer></v-spacer>
        <v-btn icon>
        <v-icon>mdi-magnify</v-icon>
        </v-btn>
        <v-btn icon>
        <v-icon>mdi-heart</v-icon>
        </v-btn>
        <v-btn icon>
        <v-icon>mdi-dots-vertical</v-icon>
        </v-btn>
    </v-toolbar>
</v-card>

예제에서 사용한 템플레이트입니다.

일단 우측에 아이콘들은 저는 필요 없으니 삭제 해주고 컬러는 primary로 변경해보겠습니다. 그리고 높이는 dense로 처리하였습니다.

 

<v-card
  color="grey lighten-4"
  flat
>
  <v-app-bar
    color="primary"
    dark
    dense
  >
    <v-app-bar-nav-icon />
    <v-toolbar-title>Stock Rebalancing</v-toolbar-title>
    <v-spacer />
  </v-app-bar>
</v-card>

 

이제 프로젝트의 App.vue 파일에 template의 항목에 넣어보도록 합시다.

<template>
  <v-app>
    <v-card
      color="grey lighten-4"
      flat
    >
      <v-app-bar
        color="primary"
        dark
        dense
      >
        <v-app-bar-nav-icon />
        <v-toolbar-title>Stock Rebalancing</v-toolbar-title>
        <v-spacer />
      </v-app-bar>
    </v-card>   
  </v-app>
</template>

npm serve를 하면 아래와 같은 화면을 볼 수 있습니다.