Vuetify3 の基本
Vuetify3 の画面のレイアウトの基本と、ボックス（領域）を確保する方法、位置合わせや寄せの方法、色やフォントの指定方法、スペーシング、各種のコンポーネントについて説明した記事です。Vue3 そのものについての説明はありません。 サンプルコードは主に Option API および JavaScript で記述しています。 当面、すべての記事を無料公開とする予定ですが、もし筆者に対して支援いただけるという方がおられましたら、記事を購入していただけますと大変ありがたいです。
Chapters
Vuetify3 のプロジェクト作成
Vuetify3 アプリケーションの典型的なデザイン
Application (v-app)
Application Bar （v-app-bar）
Main Contents （v-main）
Container （v-container）
Navigation Drawers （v-navigation-drawer）
Footer (v-footer)
div, v-container, v-sheet, v-card の各要素の違い
領域の確保(Card): v-card
要素サイズの指定 (height, width, class="h-* w-*")
要素を横方向に並べる (block要素、d-flex)
v-layout と mx-auto を使った強制的な中央寄せ
親要素の中央（縦横とも）に配置する
要素の幅を指定して横方向に並べる: GRID (v-row / v-col)
横方向の空白を使った寄せ (v-spacer)
要素の位置の微調整: マージン、パディング (Spacing Helper)
文字サイズの指定 (Typography)
フォントの指定と外部ファイルの読み込み
色の設定 (color, bg-color, class)
アイコン: Meterial Design Icons (v-icon)
Vuetify での template 要素の使い方
Vuetify3 の v-layout について
ボタン (Button): v-btn
チェックボックス (Checkbox): v-checkbox
セレクト (Select): v-select
スライダー (Slider): v-slider / v-range-slider
ラジオボタン (Radio Button): v-radio / v-radio-group
テキストフィールド (Textfield): v-text-field
ファイル選択 (Fileinput): v-file-input
スイッチ (Switch): v-switch
テキストエリア (Textarea): v-textarea
コンボボックス (Combobox): v-combobox
フォーム系のコンポーネントで使える共通の設定
メニュー (Menu): v-menu
ダイアログ (Dialog): v-dialog
チップ (Chip): v-chip
ヒントの表示 (Tooltip): v-tooltip
リスト (List): v-list
テーブル (Tables): v-table
表によるデータの可視化 (DataTables): v-datatable
画像の表示 (Images): v-img / v-parallax
ツールバー (Toolbar): v-toolbar
画面切り替え：タブ (Tabs): v-tab
画面切り替え：カルーセル (Carousel): v-carousel
ページ送り (Pagenation): v-pagenation
選択式ボタン (Button Toggle): v-btn-toggle
プログレスバー (Progress Circle/Linear): v-progress-circle/v-progress-linear
仕切り線 (Divider): v-divider
コンポーネントのデフォルト設定とテーマ
ユーザの操作を検知する（directive）
Community
Author
Topics
- 公開
- 本文更新
- 文章量
- 約255,146字
- 価格
- 1,000円