vuetify를 사용하여 텍스트 크기 변경

헤더에 새 컴포넌트 추가

app.vue

新しく日付をヘッダーに追加
 <v-row>
 Octover 20,14:40
</v-row>

하지만 헤더에서 튀어 나온다,,,
추가한 것은 v-app-var 태그 중이므로,

app.vue

 <v-app-bar　●これ
      app
      color="primary"
      dark
      src="mountains.jpg"
      prominent
    >
      <template v-slot:img="{ props }">
        <v-img
          v-bind="props"
          gradient="to top right, rgba(19,84,122,.5), rgba(128,208,199,.8)"
        ></v-img>
      </template>

      <v-container class="pa-0">
      <!-- ヘッダー上側のアイテム -->
        <v-row>
          <v-app-bar-nav-icon @click="drawer = !drawer"></v-app-bar-nav-icon>
          <v-spacer></v-spacer>
          <!-- 検索窓 小 -->
          <search/>
        </v-row>
      <!-- ヘッダー下側のアイテム -->
        <v-row>
          <v-toolbar-title class=" ml-4">
            Vuetify Todo
            </v-toolbar-title>
        </v-row>

        <v-row >●これ
            Octover 20,14:40
        </v-row>
      </v-container>
    </v-app-bar>

공식 사이트 UI 콤포의 APP-BAR 보기
API 보기
htps : // ゔ에치 fyjs. 코 m / 엔 / 코 m 포넨 ts / 아 p rs /

prominent는
Increases the height of the toolbar content to 128px.
그래서, 128px 같은 조금 높이를 바꾸면 좋을 것 같아

hight는
Designates a specific height for the toolbar. Overrides the heights imposed by other props, e.g. prominent, dense, extended, etc.
그래서 prominent는 설정할 수있는 것 같습니다.

문자의 크기는
text and typography에 따르면

These classes can be applied to all breakpoints from xs to xl. When using a base class, .text-{value}, it is inferred to be .text-xs-${value}.
그래서 클래스를 붙이고 text-0으로 처리하는 것 같습니다.
〇〇은 일람이 있다

app.vue

    <v-app-bar
      app
      color="primary"
      dark
      src="mountains.jpg"
      prominent
      height="170"　●追加
    >
      <template v-slot:img="{ props }">
        <v-img
          v-bind="props"
          gradient="to top right, rgba(19,84,122,.5), rgba(128,208,199,.8)"
        ></v-img>
      </template>

      <v-container class="pa-0">
      <!-- ヘッダー上側のアイテム -->
        <v-row>
          <v-app-bar-nav-icon @click="drawer = !drawer"></v-app-bar-nav-icon>
          <v-spacer></v-spacer>
          <!-- 検索窓 小 -->
          <search/>
        </v-row>
      <!-- ヘッダー下側のアイテム -->
        <v-row>
          <v-toolbar-title class="text-h4 ml-4">　●テキストサイズをｈ４に
            Vuetify Todo
            </v-toolbar-title>
        </v-row>
        <v-row >
          <div class="text-subtitle-1">　●テキストサイズをサブタイトルの大きさに
            Octover 20,14:40
          </div>
        </v-row>
      </v-container>
    </v-app-bar>

사이즈가 좋은 느낌에 들어갔다!

이것을 다른 컴포지션으로 만듭니다.

components>Tools>LiveDate.vue 만들기

LiveDate.vue

<template>
  <div class="text-subtitle-1 ml-4"> ●移動
    Octover 20,14:40
  </div>
</template>

<script>
export default {

}
</script>

<style>

</style>

부모 콤포에서 로드. 원래 app.vue에 넣었기 때문에,

app.vue

......いろいろ

 <v-row >
    <live-date-time/>　●元あった所に小コンポ反映
 </v-row>
</v-container>

<script>
 export default {
 components:{
 'search':require('@/components/Tools/Search.vue').default,
 'live-date-time':require('@/components/Tools/LiveDate.vue').default, ●小コンポ読み込み
 'snackbar':require('@/components/Shared/Snackbar.vue').default