Vuetify(3)

vuetify 태그에 대해 알아보는 3번째 포스트입니다.

이번에는 tab에 대해 알아보겠습니다.

 

1.<v-tabs>, <v-tab>

tab의 가장 기본적인 태그입니다.

바로 코드를 통해 살펴보겠습니다.

<template>
  <v-container>
    <v-card>
      <v-tabs>
        <v-tab>Tab1</v-tab>
        <v-tab>Tab2</v-tab>
        <v-tab>Tab3</v-tab>
      </v-tabs>
    </v-card>
  </v-container>
</template>

정말 간단한 tab 화면을 볼 수 있습니다.

tab1, tab2, tab3를 누를 수 있습니다. 아직 내용이 뜨지는 않습니다.

이제 내용도 같이 뜰 수 있게 해보겠습니다.

 

2. <v-tabs-items>, <v-tab-item>

tab 밑에 내용을 보여줄 수 있게 합니다.

<template>
  <v-container>
    <v-card>
      <v-tabs v-model="tab">
        <v-tab v-for="item in items" :key="item.name">
          {{item.name}}
        </v-tab>
      </v-tabs>
      <v-tabs-items v-model="tab">
        <v-tab-item v-for="item in items" :key="item.name">
          <v-card-text>
            {{item.content}}<br/>
            Here, You can see Something!
          </v-card-text>
        </v-tab-item>
      </v-tabs-items>
    </v-card>
  </v-container>
</template>

<script>
export default {
  name: 'App',
  data: () => ({
    tab: null,
    items: [
      { name: 'One', content: 'Tab1 Content!' },
      { name: 'Two', content: 'Tab2 Content!' },
      { name: 'Three', content: 'Tab3 Content!' },
    ]
  }),
};

코드가 좀 복잡해졌습니다. 그 대신 화면에 더 많은 것을 띄울 수 있게 되었습니다.

v-model을 사용하여 tab과 연결해서 사용되고 있습니다.

(※ 이번 tab을 써보면서 느끼는 점인데 v-for는 제가 흔히 알던 for문 과는 조금 다르게 동작을 하는 것 같습니다.)

items의 name 부분이 탭 부분에 나타나고, content 부분이 아래에 내용 부분에 나타나게 됩니다.

 

아, 블로그를 작성하면서 다른 방법을 알 수 있었습니다.

<template>
  <v-container class="mx-auto">
    <v-card width="50%">
      <v-tabs vertical>
        <v-tab>Tab1</v-tab>
        <v-tab>Tab2</v-tab>
        <v-tab>Tab3</v-tab>

        <v-tab-item>
          <v-card-text>Tab1  --  Hello Vue.js!</v-card-text>
        </v-tab-item>
        <v-tab-item>
          <v-card-text>Tab2  --  Vuetify Start</v-card-text>
        </v-tab-item>
        <v-tab-item>
          <v-card-text>Tab3  --  Vuetify + Spring</v-card-text>
        </v-tab-item>
      </v-tabs>
    </v-card>
  </v-container>
</template>

<v-tabs> 안에 <v-tab>과 <v-tab-item>을 한꺼번에 작성하면 됩니다.

그러면 이렇게 차례대로 나타나는 것을 확인할 수 있습니다.

그리고 <v-tabs> 안에 옵션으로 vertical을 설정하시면 세로 형태로 탭을 누르게 바꿀 수 있습니다.

물론 이렇게 작성한다면 'tab 하나에 다양한 내용이 들어가는 경우'에 코드를 보기 불편할 경우가 생길 수 있습니다.

간단하게 빨리 작성하시기를 원하시면 아래의 방법을 사용하고,

간단하지 않다면, 그리고 tab의 개수가 많다면 위의 방법을 사용하는게 낫다고 생각합니다.

 

하지만 대부분의 경우 v-model, v-for 을 사용하는 것을 많이 택하는 것 같군요.

 

저는 좀 허접하지만 다음처럼 했습니다.

<v-tab-item v-for="item in items" :key="item.tab">
	<v-container fluid v-if="item.tab === '설정내용1'">
    	// 보여주고 싶은 내용
    </v-container>
    <v-container fluid v-if="item.tab === '설정내용2'">
    	// 보여주고 싶은 내용
    </v-container>
</v-tab-item>

if문을 활용하여 탭 제목(?)과 일치할 때만 등장하게 했습니다.

어떤 방법을 적용하던 쓸 내용이 많다면 코드가 길어지는 것은 어쩔 수 없을 것 같습니다.

 

3. <v-tabs-slider>

이 태그는 option이 color 밖에 없습니다. 색깔을 지정하는 녀석인데

<v-tabs-slider color="yellow"></v-tabs-slider>라고 <v-tabs>와 <v-tab>사이에 설정하시면 됩니다.

제가 색깔을 지정해도 잘 되지 않아서 여러분이 직접 시도해 보시면 좋을 것 같습니다.

 

4. <v-toolbar>

v-toolbar와 v-tabs을 같이 써보는 예제도 한번 보도록 하겠습니다.
(블로그 쓰면서 처음으로 적용해 봤는데, 생각보다 이뻐서 제가 실제 적용하고 싶은 생각이 들더군요)

<template>
  <v-container>
    <v-card width="50%">
      <v-toolbar flat dark>
        <v-app-bar-nav-icon></v-app-bar-nav-icon>
        <v-toolbar-title>Title Name</v-toolbar-title>
        <template v-slot:extension>
          <v-tabs v-model="tab">
            <v-tab v-for="item in items" :key="item.name">
              {{item.name}}
            </v-tab>
          </v-tabs>
        </template>
      </v-toolbar>
      <v-tabs-items v-model="tab">
        <v-tab-item v-for="item in items" :key="item.name">
          <v-card>
            {{item.content}}
          </v-card>
        </v-tab-item>
      </v-tabs-items>
    </v-card>
  </v-container>
</template>

<script>
export default {
  name: 'App',
  data: () => ({
    tab: null,
    items: [
      { name: 'One', content: 'Tab1 Content!' },
      { name: 'Two', content: 'Tab2 Content!' },
      { name: 'Three', content: 'Tab3 Content!' },
    ]
  })
};

v-toolbar에 dark 속성을 주었더니 어둡게 되었네요.

그리고 tab의 내용이 많지 않다보니 toolbar의 크기가 굉장히 커졌습니다.

그 부분은 v-tab-item 부분에 여려가지를 넣으면 될 것입니다.

이런 식으로요!

 

실제 저정도만 만들어도 어느 웹사이트에서 본 것 같은 비주얼이 됩니다. ㅎㅎ

 

 

v-tab에 대해 알아보는 것은 이것으로 마치겠습니다.