# vuetify
###### tags: `Vuetify`

* 1 component 1elements(0or1 container)?divでも良さげ？
## プロジェクトへの導入
コマンド
`$ vue add vuetify`
こんな質問がくる


vue2の時はvuetify2を使う
vue3の時はvuetify3を使う
->vue3で2を使おうとしたらエラーが出た。
->対応してないって公式が言ってた
## 用語
### Props
vue の方で勉強
* 引数みたいなもの
* タグの開始の方に色々書く
* ex) 書き方例

<v-data-table
:items = "items" // ":"動的に設定する値につける詳しくはVueのv-bind
item-key="name" // Proosに値を指定する
hide-default-header // 型booleanのやつは置いておくだけでdefoult設定になる
>

### イベント
* ユーザーが行うアクションのこと
* ex) レコードをクリックするや値を入力するなど
* ex) 書き方例

    <v-data-table
      :headers="headers"
      :items="users"
      hide-default-footer
      disable-sort
      @click:row="onRowClick" // @はv-onの省略
    >

### Slots
vue の方で勉強
* ex) 書き方例

<v-data-table
      :headers="headers"
      :items="desserts"
      item-key="name"
      class="elevation-1"
      :search="search"
      :custom-filter="filterOnlyCapsText"
    >
    //ここから
      <template v-slot:top>
        <v-text-field
          v-model="search"
          label="Search (UPPER CASE ONLY)"
          class="mx-4"
        >
        </v-text-field>
    // ここまで
</v-data-table>

## コンポーネント

### v-data-table
#### url
* api
* https://vuetifyjs.com/ja/api/v-data-table/
* 使用例
* https://vuetifyjs.com/ja/components/data-tables/
#### ざっくり説明
* テーブルを表示したい時に使う
* 同じフォーマットのデータを複数行を表示したいときに使うと良い(個人の感想)

* このテーブルに対してできること
* レコードをクリックしてイベントを発生させることができる
* レコードを複数選択して何か行える
*
#### Props
* item
* 使用するデータテーブル(配列)を指定できる
* headers
* テーブルのヘッダーを登録している配列を指定できる
* show-select
* テーブルのレコードを選択できるようにする

#### イベント
* click:row
* レコードがクリックされたら何かする
*
#### Slots
* top
* テーブルの上にコンテンツを追加する
* 検索を追加する方法は使用例にURLにある
* item.<name\>
* 特定のカラムを詳細に設定できる
*

### v-icon
#### url
* api
https://vuetifyjs.com/ja/api/v-icon/
* 使用例
https://vuetifyjs.com/ja/components/icons/
* 使えるアイコン
https://materialdesignicons.com/
#### ざっくり説明
* iconを表示したい時に使うタグ
* ボタンの上に表示したり、ボタンの代わりにすることができる
* いいね とかがそんな感じ
* 開始と終わりのタグの間に使用するアイコンの名前を書く
#### Props
* 装飾する際に使うものが多い
#### Slots

### v-switch
#### url
* api
https://vuetifyjs.com/ja/api/v-switch/
* 使用例
https://vuetifyjs.com/ja/components/switches/
#### ざっくり説明
* switchボタンを制御するコンポーネント
#### Props
* 装飾する際に使うものが多い
#### event
* change
* switchボタンの値が変更されたら
#### Slots
* label
* ラベルにlodingのような特殊なことを実装したいときに使う

### v-checkbox
#### url
* api
https://vuetifyjs.com/ja/api/v-checkbox/
* 使用例
https://vuetifyjs.com/ja/components/checkboxes/
#### ざっくり説明

#### Props
* 装飾する際に使うものが多い
#### イベント
* change
* checkboxの値が変更されたら
#### Slots
* label
* ラベルにurlを混ぜるのような特殊なことを実装したいときに使う

### v-select

##### url
* api
https://vuetifyjs.com/ja/api/v-select/
* 使用例
https://vuetifyjs.com/ja/components/selects/
#### ざっくり説明
* selectboxの制御をするコンポーネント
* AutocompletesやComboboxなどもある
#### Props

* item
* セレクトボックスの選択肢
* item-text
* 画面に表示したい値のキーを指定
* item-value
* 実際に保持(サーバなどに送信)したい値のキーを指定

* v-modelとの関係

// この場合は選択されたitem-valueがselectに格納されている
<v-select
    v-model="select"
    :items="items"
    item-text="state"
    item-value="abbr"
></v-select>
// この場合はtextもvalueもselectに格納されている
// return-objectでオブジェクト毎戻り値？に指定しているから
<v-select
    v-model="select"
    :items="items"
    item-text="state"
    item-value="abbr"
    return-object
></v-select>

下のやつを`consol.log(this.select)`で表示した場合

#### イベント
* change
* selectboxの値が変更されたら
#### Slots
* prepend-item
* 既存の項目の一番上に項目を追加できる
* セレクトオールとかをおくと便利
* append-item
* 既存の項目の一番下に項目を追加できる
* こっちは用途が思いつかない

### v-dialog
#### url
* api
https://vuetifyjs.com/ja/api/v-dialog/
* 使用例
https://vuetifyjs.com/ja/components/dialogs/

#### ざっくり説明
* ダイアログを制御するタグ
* タグの中でダイアログの中の画面情報を書く
* formとか、btnとか
#### Props
* fullscreen
* ダイアログを画面全体に表示する
* スマホや小さなタブレットなどに適している表示の仕方
* persistent
* escキーや外側をクリックしても消えないようにする
* scrollable
* ダイアログのスクロールができる
#### イベント
* click:outside
* ダイアログの外側をクリックしたら

#### Slots
* activator
* ダイアログを呼び出す何かを指定できる
* 使用例ではほとんがボタンだった

### v-text-field
#### url
* APIの説明
* https://vuetifyjs.com/ja/api/v-textarea/
* 使用例
* https://vuetifyjs.com/ja/components/text-fields/
#### ざっくり説明
* 文字を入力することができるところ
* 文字を出力することができる場所でもある

#### Props
* counter
* 文字数をカウントしてくれる
* counter = 10とあればオーバーした時に赤字になる
* color
* 入力時の下のラインの色を変化させる
* labelの色も変えれる
* `color = "success"` のようにマテリアルカラーの名称や
* `color = "rgba(255, 0, 0, 0.5)"`の様にcssみたいに書く事ができる
* clearable
* 文字列をクリアにする事ができるボタンできる
* disable or readonly
* 入力を受け付けない、文字を出力だけしたい時は必須オプション
* required (htmlのだ、これ)
* 入力がないといい感じに怒る
* label
* そのフィールドの上に題目？をかける
* hint
* フィールドの下に説明書きをかける
* label
* 出力される値
* value
* 入力される値、サーバーサイドに送られる値
* icon系
* prebendなら前、innerはこっちだけ
* appendなら後ろ、outerはこっちだけ
* icon= はこのサイトから https://pictogrammers.github.io/@mdi/font/1.1.34/
* v-model
* 変数と結びづける事ができる
* v-model="変数名"
* suffix
* フィールドの右に単位などの固定値をつけれる
* prefix
* フィールドの左に単位などの固定値をつけれる
* single line
* labelを上にフロートしない
* 値がない時にだけ見せる
* loading
*
#### Slots
* label
* labelの中にhtmlタグを使ってiconや太字にできる
### v-textarea
* textfieldを複数行入力可能にしたもの
*
### v-btn
* api
https://vuetifyjs.com/ja/api/v-btn/
* 使用例
* ボタン単体の例
* https://vuetifyjs.com/ja/components/buttons/#section-4f7f304465b9

#### ざっくり説明
* ボタンです

#### Props
* 見た目に関わるものが多い
* apiと使用例を見ればある程度できると思う
* labelはないからボタンの上の文字はタグの間に書いてね
#### イベント
* ckick
* クリックのやつ

#### Slots

## レイアウト
#### grid system
https://vuetifyjs.com/ja/components/grids/#section-6ce8610f4e8b9805
* 画面のサイズに合わせた調整をするときに使う

### v-container
#### url
https://vuetifyjs.com/ja/api/v-container/

#### ざっくり説明
* サイトのコンテンツ間にパディングを入れ、コンテンツを中央に配置する機能を提供する

#### Props

#### Slots

### v-row
#### url
https://vuetifyjs.com/ja/api/v-row/
#### ざっくり説明
* containerの中で区切りを使いたいときに使う
* このタグの中のコンポーネントを縦に並べる
* 画面サイズやrow,componentの指定サイズ的に無理な時は横にずれる
#### Props
* no-gutters
* v-col同士の隙間を無くす
* align-xsなど
* 画面サイズに合わせて`align-content `の値を設定できる
#### Slots

### v-col
#### url
https://vuetifyjs.com/ja/api/v-col/
#### ざっくり説明
* v-rowの子要素
* v-rowの中で区切りをつけたい時に使う
* このタグの中のコンポーネントを横に並べる
* 画面サイズやrow,componentの指定サイズ的に無理な時は縦にずれる
#### Props
* xsやmdなどの画面サイズ
* 画面サイズに合わせて列の表示を制御できる
* xsやmd = 1~12の段階で制御できる
#### Slots

## 参考資料
* [公式ドキュメント](https://vuetifyjs.com/ja/)

* [【チェックボックスVSトグルスイッチ】あなたは使えてますか？教えます、状況に応じて適切に使い分ける方法](
https://www.seleqt.net/design/checkbox-vs-toggle-switch/)