Vuetify(2)

이번에도 vuetify의 태그에 대해서 알아보겠습니다.

제가 쓰면서 신기했던 그리고 자주 쓰는 부분을 위주로 진행합니다.

 

1. <v-card>

첫번째는 v-card 태그입니다.

생각하신 대로 카드 형태를 만들어주는 태그입니다.

<template>
  <div>
    <v-container>
      <v-card style="width: 30%" height="100">
        Vue.js
      </v-card>
    </v-container>
  </div>
</template>

예상한 카드 형태의 모양을 볼 수 있습니다.

1-1. <v-card-title>

이름에서 알 수 있듯이 카드의 제목을 담당합니다.

<template>
  <div>
    <v-container>
      <v-card style="width: 30%" height="100">
        <v-card-title>Title Name</v-card-title>
        Vue.js
      </v-card>
    </v-container>
  </div>
</template>

위 코드에 title 태그만 추가해 보았습니다.

제목이 나타납니다.
(기본 설정이 저 정도의 제목으로 나타나는 것이므로 활용을 잘 한다면 멋진 카드를 만들 수 있을 것 같습니다.)

1-2. <v-card-subtitle>

역시 이름 그대로 부제목을 나타날 수 있게 해줍니다.

<template>
  <div>
    <v-container>
      <v-card style="width: 30%" height="200">
        <v-card-title>Title Name</v-card-title>
        <v-card-subtitle>SubTitle</v-card-subtitle>
        Vue.js
      </v-card>
    </v-container>
  </div>
</template>

위 코드에 또 추가를 해보았습니다.

제목 밑에 부제목이 잘 나타납니다.
(활용을 잘 한다면 멋진 카드가 나타날 것 같습니다.)

1-3. <v-card-text>

v-text-field와 비슷한 태그라고 생각되는데, 카드 안에서 전용으로 쓰는 태그입니다.

글자만을 적을 때 사용한다면 효과적이라고 생각됩니다.

<template>
  <div>
    <v-container>
      <v-card style="width: 30%" height="200">
        <v-card-title>Title Name</v-card-title>
        <v-card-subtitle>SubTitle</v-card-subtitle>
        <v-card-text>
          Oh! Hello Vue.js!
        </v-card-text>
        <v-card-text>
          Vuetify를 공부 중 입니다.
        </v-card-text>
      </v-card>
    </v-container>
  </div>
</template>

v-card-text를 적용한 모습입니다. 아까 그냥 적은 것 보다 훨씬 나아보인다고 생각합니다.

앞으로 v-card 안에 글을 적을 때에는 v-card-text를 활용하면 좋을 것 같다는 생각이 듭니다.

1-4. <v-card-actions>

카드 안에서 action을 할 수 있게 합니다.

보통은 버튼(v-btn)을 많이 사용하는 듯 합니다.

<template>
  <div>
    <v-container>
      <v-card style="width: 30%" height="300">
        <v-card-title>Title Name</v-card-title>
        <v-card-subtitle>SubTitle</v-card-subtitle>
        <v-card-text>
          Oh! Hello Vue.js!
        </v-card-text>
        <v-card-text>
          Vuetify를 공부 중 입니다.
        </v-card-text>
        <v-card-actions>
          <v-btn outlined id="click">Click</v-btn>
        </v-card-actions>
      </v-card>
    </v-container>
  </div>
</template>

<style>
  #click {
    color: purple;
    background: yellow;
  }
</style>

다음과 같은 클릭 버튼을 만들 수 있습니다. 

참고로 style 적용의 경우 v-btn의 옵션인 color 속성으로 정할 수 있지만, 이상하게 저는 그렇게 설정이 되지 않아서 css로 설정하도록 했습니다.

 

card 관련 태그들은 이정도를 알면 기본적인 카드를 꾸미는데는 문제 없을 것이라고 생각됩니다.

그 외의 card 관련 궁금한 것들은 다음의 주소로 가면 됩니다.

https://vuetifyjs.com/ko/components/cards/

 

2. <v-toolbar>

툴바를 생성합니다.

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

<template>
  <div>
    <v-container>
      <v-card style="width: 30%" height="300">
        <v-toolbar dark>ToolBar</v-toolbar>
        <v-card-title>Title Name</v-card-title>
        <v-card-subtitle>SubTitle</v-card-subtitle>
        <v-card-text>
          Oh! Hello Vue.js!
        </v-card-text>
        <v-card-text>
          Vuetify를 공부 중 입니다.
        </v-card-text>
      </v-card>
    </v-container>
  </div>
</template>

툴바를 생성했습니다. 

dark 옵션을 사용하면 어둡게 할 수 있습니다.

2-1. <v-toolbar-title>

툴바의 제목을 정할 수 있게 합니다.

<template>
  <div>
    <v-container>
      <v-card style="width: 30%" height="300">
        <v-toolbar dark>
          <v-toolbar-title>ToolBar Create</v-toolbar-title>
        </v-toolbar>
        <v-card-title>Title Name</v-card-title>
        <v-card-subtitle>SubTitle</v-card-subtitle>
        <v-card-text>
          Oh! Hello Vue.js!
        </v-card-text>
        <v-card-text>
          Vuetify를 공부 중 입니다.
        </v-card-text>
      </v-card>
    </v-container>
  </div>
</template>

툴바의 제목이 설정됩니다.

아까하고 크게 다른 건 없는 것 같습니다. 그래도 툴바의 제목을 정할 때는 이 태그를 사용하면 좋을 것 같습니다.

2-2. <v-toolbar-items>

툴바의 items를 정하는 듯 합니다.

사실 이 부분은 쓰지를 않아서 어떻게 쓰는지 잘 모르겠습니다.

그래도 이런 태그가 있다는 것을 알아두는 것은 나쁘지 않을 것 같습니다.

 

v-toolbar 관련해서 더 알고 싶다면 다음의 주소로 가시면 됩니다.

https://vuetifyjs.com/ko/components/toolbars/

 

3. <v-spacer>

간단합니다. 공간을 줍니다.

그림을 보는게 더 나을 것 같습니다.

v-spacer를 사용하지 않았을 때의 모습

v-spacer를 사용한 모습

button의 위치가 다르다는 것을 알 수 있습니다.

코드입니다.

<template>
  <div>
    <v-container>
      <v-card style="width: 30%" height="300">
        <v-toolbar dark>
          <v-toolbar-title>ToolBar Create</v-toolbar-title>
          <v-spacer></v-spacer>
          <v-btn>Button</v-btn>
        </v-toolbar>
        <v-card-title>Title Name</v-card-title>
        <v-card-subtitle>SubTitle</v-card-subtitle>
        <v-card-text>
          Oh! Hello Vue.js!
        </v-card-text>
        <v-card-text>
          Vuetify를 공부 중 입니다.
        </v-card-text>
      </v-card>
    </v-container>
  </div>
</template>

오른쪽으로 밀고 싶을 때 유용하게 쓰일 것 같습니다.

 

4. v-btn

v-btn이 버튼이라는 것은 다 알고 계시겠죠

저는 여기서 한 가지 속성에 대해서 알아보려고 합니다.

4-1. loading 속성

말 그대로 loading하는 속성입니다. loading을 하고 있을 때는 버튼 활성화가 꺼져서 버튼을 누를 수가 없습니다.

코드와 화면으로 보시죠

loading 속성을 사용하면 맨 왼쪽의 버튼처럼 계속 돌아가는 그림만 볼 수 있습니다.

저건 제가 loading 속성을 true라고 설정해서 항상 돌아갈 것입니다.

중간에 click을 누르면 일정 시간동안만 사용을 못하다가 다시 사용을 할 수 있게 했습니다.

흠.. 하지만 이게 제 개인용 컴퓨터로 하니깐 실행이 잘 안되서 다른 화면을 올리지는 못할 것 같습니다.

대신 코드만 살펴보기로 합니다.

<v-btn :loading="waiting" @click="clickButton">
	Click
</v-btn>

1. :loading은 v-bind:loading을 줄인 것입니다.
   (아마 vue.js를 조금 사용하게 된다면 v-bind는 생략하는 경우가 많을 것입니다.)
2. loading에 waiting이라는 변수를 설정해놓고, @click을 통해 메서드를 실행합니다.

data: () => ({
	waiting: false
}),
methods: {
	clickButton () {
		this.waiting = true
		// do what you want
		this.waiting = false
	}
}

1. waiting의 경우 초기값은 항상 false입니다. 그래야 버튼을 클릭할 수 있으니까요.
2. 메서드를 실행하면 초기에 waiting에 true값을 줘서 더 이상 버튼을 누르지 못하게 합니다.
3. 그리고 원하는 것을 코드를 통해 실행합니다.
4. 마지막에 메서드를 빠져나오기 전 waiting 값을 false로 바꿔줘서 버튼을 활성화 합니다.

 

v-tabs 를 사용하는 방법에 대해서도 적고 싶지만, 아직 익숙치 않아서 조금 나중에 적어보려고 합니다.

이번 포스트는 이 정도로 마치겠습니다.