vuetify使ってテキストサイズの変更

9287 ワード
Vue.js Vuetify Vue.js テキストリンク

ヘッダーに新しいコンポを追加

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を見る
https://vuetifyjs.com/en/components/app-bars/

prominentは
Increases the height of the toolbar content to 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-〇〇で対処するっぽい
〇〇は一覧がある

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