Chapter 04

コンポネントの中身を見てみよう!

sosa
sosa
2022.09.28に更新

v-タグ

Vutifyのタグは<v-○○という形で用意されています。
各タグの詳細はVuetifyの検索窓で調べることとができます。
Vueのコンポーネントは一般的に<template></template><script></script><style></style>という構造です。
Vuetifyでは<template></template><script></script>となっていて<style>で指定する部分はPropsやclassで用意されています。<style>も使えます。

Props

<v-system-bar app> のようにタグの中にある記号appはProps(propertiesの略)といって、そのタグのいろいろな属性を決めることができます。appというPropsは分かりにくいのでcolor Propsを追加してみます。
<v-system-bar app> を以下に変えて動作確認してみてください。

FrontEnd.vue
<v-system-bar app color="red">

すると1番上のバーが赤くなります。このようにPropsは半角スペースで続けて書きます。
v-system-barのPropsはAPIからPropsを見ることができます

Class

Classで色などを指定することもできます。
<v-main class="grey lighten-2">ではクラスで色を指定しています。
実際の色はマテリアルカラーで確認できます。
v-mainのPropsを見るとcolorのPropsがありませんがcolor propsでも色が変わります。各タグのPropsを見てcolorが載っていたらPropsを使って載っていない場合はclassとしたほうが無難かと思います。

アイコン

v-iconでアイコンを挿入できます。
Material Design Iconsで好きなものをクリックすると1番上に名前が表示してあるので、その名前をmdi-名前としてv-iconタグで使います。
探すのが大変ですがsearchで例えばwindowsでEnterして1番最初のをクリックするとmicrosoft-windowsと書いてあります。これにmdi-を付ければいいです。
<v-icon>mdi-square</v-icon>を以下に変えて動作確認してみてください。

<v-icon>mdi-microsoft-windows</v-icon>

するとWindowsのアイコンが表示されます。

スペーサー

親子コンポーネント間で残りの幅を分配します。言葉よりも実際に実験したほうが分かると思います。<v-system-bar app></v-system-bar>の中で<v-spacer></v-spacer>を最後にもっていったりアイコンの間に入れたりして違いを確認してください。

例(確認が終わったら元に戻してください)
<v-icon>mdi-circle</v-icon>
  <v-spacer></v-spacer>
<v-icon>mdi-triangle</v-icon>

v-app、v-system-bar app

<v-app id="inspire"> //v-appはすべてのVuetifyコンポーネントの親でなければなりません。
<v-system-bar app> //ユーザにステータスを表示するために使用できます。

基本的なアプリケーションの構成はApplicationを参照してください。