참으로 오랫만에 글을 쓰는것 같습니다. 지난 번에는 Vue.js를 이용해서 원하는 페이지의 전체 큰 틀을 만들어보는 내용을 작성했었는데... 이번에는 그 내부로 좀 더 들어가서 navigation bar에서 표시되는 내용을 꾸며 보도록 하겠습니다.
보통 navigation bar에는 개인 사용자의 기본 정보와 제공되는 페이지 link 가 표시되는데, 최종 목표는 아래와 같이 nav bar를 제공하고, 각 link가 정상적으로 동작하게 하는것으로 하겠습니다.
1. Vuetify를 통한 Navigation Bar적용 확인
Vuetify에서는 Navigation Bar를 적용하기 위해서 v-navigation-drawer를 사용합니다. 해당 내용은 기존에 작성했던 내용이 있어서 링크를 걸어놓겠습니다.
2021.03.02 - [Vue.js] - [Vue.js] 11. use v-navigation-drawer
[Vue.js] 11. use v-navigation-drawer
바로전에 App Bar를 구성해 보았습니다. 그 요소중에서 App Bar Navigator에 대해서 좀 더 깊이 알아보겠습니다. 사실 기존에 구현한 내용은 Navigator를 통해서 생성한 icon을 클릭했을때 아무런 반응이
ayoteralab.tistory.com
저 역시 기억이 가물가물해서 다시 분석해보면, Vue Project에서 가장 기본이 되는 Root는 src > App.vue부터 시작이 되게 됩니다. 기존에 이 코드내에서 App Bar를 구성하기 위해서 별도의 components를 구성하였고, 아래와 같이 호출을 하는 방식이였습니다.
<template>
<v-app id="App">
<main-app-bar></main-app-bar>
<v-main>
<router-view/>
</v-main>
<main-footer></main-footer>
</v-app>
</template>다음과 같이, 전체 화면에서 공통으로 App Bar와 Footer를 별도 구성하였습니다. 그렇다면, 실제 App Bar는 어떻게 구성이 되어 있을까요??
[AppBar.vue]
<!-- Main App Bar -->
<v-app-bar app dense color="#689F38" dark>
<!-- Navigation Bar Icon -->
<v-app-bar-nav-icon @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
<!-- Navigation Bar Icon -->
<v-app-bar-title>AT Project</v-app-bar-title>
<v-spacer></v-spacer>
<v-btn icon color="white" to="GridTest">
<v-icon>mdi-battery-charging</v-icon>
</v-btn>
<v-btn icon color="white" to="ChartTest">
<v-icon>mdi-account</v-icon>
</v-btn>
<v-menu offset-y>
<template v-slot:activator="{ on, attrs }">
<v-btn icon color="yellow" v-bind="attrs" v-on="on">
<v-icon>mdi-dots-vertical</v-icon>
</v-btn>
</template>
<v-list>
<v-list-item v-for="n in 5" :key="n" @click="() => {}">
<v-list-item-title>Option {{ n }}</v-list-item-title>
</v-list-item>
</v-list>
</v-menu>
</v-app-bar>
<!-- Main App Bar -->이 부분에서 Navigation Bar를 위해서 존재하는 코드는 <v-app-bar-nav-icon /> 입니다. 해당 icon을 클릭하면 나타나는 그런 구조입니다.
2. v-navigation-drawer 부문 구성하기
실질적으로 navigation bar를 꾸미는 부분은 Main App Bar부분 이하에 작성이 되게 됩니다.
<!-- Navigation Bar -->
<v-navigation-drawer v-model="drawer" absolute temporary>
<v-system-bar></v-system-bar>
<v-list>
<v-list-item>
<v-list-item-avatar>
<v-img src="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FpwK7B%2Fbtq1nHeA7cd%2FzuAXKpziY3xsZyJrtOgPKK%2Fimg.png"></v-img>
</v-list-item-avatar>
</v-list-item>
<v-list-item link>
<v-list-item-content>
<v-list-item-title class="text-h6">
Ayotera Lab
</v-list-item-title>
<v-list-item-subtitle>ayoteralab.tistory.com/</v-list-item-subtitle>
</v-list-item-content>
<v-list-item-action>
<v-icon>mdi-menu-down</v-icon>
</v-list-item-action>
</v-list-item>
</v-list>
<v-divider></v-divider>
<v-list nav dense>
<v-list-item-group v-model="selectedItem" color="primary">
<v-list-item v-for="(item, i) in items" :key="i" :to="item.to">
<v-list-item-icon>
<v-icon v-text="item.icon"></v-icon>
</v-list-item-icon>
<v-list-item-content>
<v-list-item-title v-text="item.text"></v-list-item-title>
</v-list-item-content>
</v-list-item>
</v-list-item-group>
</v-list>
</v-navigation-drawer>
<!-- Navigation Bar -->위에 작성한 코드는 실질적으로 처음에 보여드린 navigation bar를 구현한 코드입니다. 아마 해당 코드를 위에서부터 쭉 훑어 보신다면 크게 무리없이 이해하실 수 있을 것 같습니다. 그렇다면 여기서 크게 주의해야할 부분은 따로 아래에서 설명드리겠습니다.
3. 주의사항
[v-list-item]
navigation bar에서 메뉴를 리스트화 한 부분에서는 v-for를 사용하였습니다. 어차피 단순한 메뉴의 나열이기 때문에 많은 반복되는 코드를 작성할 필요가 없기 때문입니다. 역시 v-for를 위해서는 data( )부문에 해당 변수에 대한 정의가 필요합니다.
items: [
{ text: '분기 별 우량주', icon: 'mdi-bank', to: 'GridTest' },
{ text: 'A', icon: 'mdi-alpha-a-box-outline', to: 'HelloWorld' },
{ text: 'B', icon: 'mdi-alpha-b-box-outline', to: 'qss' },
{ text: 'C', icon: 'mdi-alpha-c-box-outline' },
{ text: 'D', icon: 'mdi-alpha-d-box-outline' },
{ text: 'E', icon: 'mdi-alpha-e-box-outline' },
{ text: 'F', icon: 'mdi-alpha-f-box-outline' },
],다음과 같이 구현이 가능합니다. 그렇다면 icon은 어디서 가져오는 것이며... to는 왜 지정한건가요??
[icon]
Vuetify에서 사용하는 icon은 표준 material design icons를 따릅니다. 따라서 아래의 공식 사이트에서 확인하시면서 원하는 icon의 적용이 가능합니다.
https://materialdesignicons.com/
Material Design Icons
Material Design Icons' growing icon collection allows designers and developers targeting various platforms to download icons in the format, color and size they need for any project. Loading... Sponsored by Icons8 Material Icon Sets
materialdesignicons.com
다음과 같이 원하는 icon을 클릭하면 세부적인 이름이 나타나고, 해당 이름앞에 mdi- 를 붙여서 코드를 작성하면 적용되어 표시가 되게 됩니다.
[to로 링크 구현]
이제 해당 메뉴를 클릭하면 원하는 경로로 이동하게 됩니다. 해당 경로는 router에 정의된 경로로 자동 적용이 됩니다. router는 src > router > index.js에 정의를 하게 되어있습니다. 또한, v-list-item내 v-for에는 아래와 같이 적용을 하면 완성이 됩니다.
<v-list-item v-for="(item, i) in items" :key="i" :to="item.to">
</v-list-item>:to에는 위에 data( )내 변수로 지정한 명을 넣고 실제로 해당 위치에 원하는 route명을 넣으면 됩니다. 실제로 router에는 아래와 같이 적용이 되어 있으며, 실제로 클릭할 경우 아래와 같이 정상적으로 이동하는 것을 확인 할 수 있습니다.
{
path: '/GridTest',
name: 'GridTest',
component: GridTest,
},아참 주의할 점은 :to에는 router의 name이 아닌 path명을 넣어야 한다는 점은 꼭 기억하시기 바랍니다.
자 [분기 별 우량주] 메뉴를 선택하면, 위의 router에 path로 명기된 GridTest로 정상적으로 이동함을 확인되었습니다. 이렇게 navigation을 완성하였습니다.
- Ayotera Lab -
댓글