[vue]Vuetify 기초 Toolbars 만들기 (4)

app.vue

<template>
  <v-app>
    // Bar컴포넌트 부르기 
    <testbar />
    <v-content>
     <router-view></router-view>
    </v-content>
  </v-app>
</template>

<script>
// Bar컴포넌트 부르기 
import testbar from "./components/testbar"

export default {

  name: 'App',
  components:{ testbar },
  data () {
    return {
      //
    }
  }
}
</script>

 

testBar.vue

<template>
  <nav>
    <!-- 툴바 작성 -->
    <v-toolbar flat app>
      <!-- 툴바 타이틀 작성 -->
      <v-toolbar-title class="text-uppercase grey--text">
        <span class="font-weight-light">Title 1</span>
        <span>Title 2</span>
      </v-toolbar-title>

      <v-btn flat color="grey">
        <span>로그아웃</span>
        <v-icon right>exit_to_app</v-icon>
      </v-btn>
    </v-toolbar>
  </nav>
</template>

<script>
export default {
    data() {
        return{
            drawer : true
        }
    }
};
</script>

 

 

위 코드 화면

 

testBar.vue

<template>
  <nav>
    <!-- 툴바 작성 -->
    <v-toolbar flat app>
      <!-- 툴바 타이틀 작성 -->
      <v-toolbar-title class="text-uppercase grey--text">
        <span class="font-weight-light">Title 1</span>
        <span>Title 2</span>
      </v-toolbar-title>

      <!-- 구성 요소는 사용 가능한 공간을 채우거나 두 구성 요소 사이에 공간을 만들려는 경우에 유용합니다. -->
      <v-spacer></v-spacer>
      <v-btn flat color="grey">
        <span>로그아웃</span>
        <v-icon right>exit_to_app</v-icon>
      </v-btn>
    </v-toolbar>
  </nav>
</template>

<script>
export default {
    data() {
        return{
            drawer : true
        }
    }
};
</script>

  

<v-spacer></v-spacer>를 추가하면 아래와 같이 변한다

<v-spacer></v-spacer>를 통해 여백을 넣어 로그아웃 버튼을 끝으로 넣을 수 있다.