イイダリョウのブログ。【Vue.js】Vuetifyでボタンを並べてみる(v-app、v-content、v-container、v-layout、v-flex、v-btn)2019-08-29【Vue.js】Vuetifyでボタンを並べてみる(v-app、v-content、v-container、v-layout、v-flex、v-btn)JSVue.jsの続きです。前回はVuetifyを事始めました。今回はもう少し進んで、ボタンを3つ並べてみました。v-layout、v-flex、v-btnなどを使いました。})elオプションで#appと紐付け、vuetifyオプションでvuetify()インスタンスを作っただけ。<v-container>こんにちは、びゅうてぃふぁい。</v-app></div>HTMLの方が特徴的でv-app、v-content、v-containerなどのタグが見受けられる。これは何か?これらはVertifyの一番基本的なタグでおそらくいつでも書かれるべきもの。下記の記事にわかりやすい解説があった。<v-app><!--中略--></v-app>v-appはVeutifyを使うために必須の要素です。Vuetifyのコンポーネントは必ずv-app要素の内側に書く必要があります。v-appは必須の属性なのね。これに囲まれた中身がVuetifyの対象と認識される。>サイドメニューの表示・非表示にメインコンテンツを連動させる場合はv-contentでコンテンツを囲む必要があります。v-contentはレイアウトシステムでサイドメニューと連動させるために必要なタグ。>こんにちは、びゅうてぃふぁい。>v-containerはその名の通りコンテナです。オプション属性がいろいろとあって、fluid属性を付与することで左右いっぱいにコンテナを広げたり、fill-height属性を付与することでv-containerの内部要素を上下中央寄せにしたりできます。v-appとv-contentはページの大枠でv-containerがページの本体部分という感じか。ここに属性を加えて大きさなどを設定できる。グリッド設定(v-layout、v-flex)とボタン(v-btn)flexbox設定とボタンを設置してみた少し改造した。flexbox設定で横並びにして、中にボタンを設置。wrap><!--中略--></v-layout>先ほどの解説記事から引用グリッドシステムを使うために必要です。意味としてはと同じです。my-5><!--中略--></v-flex>同じく先ほどの記事からv-layoutの内側に設置することでグリッドデザインを実現できます。Vuetifyは12分割のグリッドシステムを採用しています。v-flexにxs12、sm6、md4のような属性を与えることでブラウザの幅で可変するようになります。md4は下記の分割になる。他にスペース設定を入れた。my-5はy(縦)方向の上下に4pxの5倍で20pxのマージン。センタリングはtext-center。Vuetify.jsv-btnもうちょっとVuetifyらしさを体験したくて、v-flexの中にボタンを設置してみた。HTMLコード<v-btn>押して</v-btn>v-btnを使う。中のテキストがボタンの中に表示される。Vuetify.jsたったこれだけでボタンが配置されて、CSSスタイルも当たってhoverアクションもある。最後にグリッドシステムの設定とボタンの設置がCSSの記述ゼロで実現できました!その代わり、HTMLの属性はどんどん長くなりますね...。(bootstrapを思い出します)さくっと管理画面を作ったりするにはやはりCSSフレームワークは便利です!引き続き触っていきます。07:43Tweet関連記事2019-12-20【Vue.js】Vuexのミューテーション(mutations)に設定した処理を実行するVuexの続きです。APIを使ってページのテキスト読み上げボタンを実装してみたテキスト読み上げのスクリーンリーダーについて調べたところ、...2019-09-11【Vue.js】Vuetifyにパンくず、スライダー、タイル、アコーディオン、カレンダーを配置(v-...Vue.jsの続きです。前回はVuetifyのヘッダー、フッターを配置し...2019-09-04【Vue.js】Vuetifyにヘッダー、フッターを配置(v-app-bar、v-footer)Vue.jsの続きです。前回はボタンを配置してみました。今回はヘ...2019-08-25【Vue.js】UIフレームワーク「Vuetify」をCDNリンクで事始めたVue.jsの続きでず。はてなブログProフロントエンドエンジニア。神奈川に住まう四十路のオジキ。DTP→Webデザイナーから転向し今に至る。引き続きコツコツの日々。(24)リンクTwitterInstagramYoutubeCodePenGitHubPinterestQuolaFacebooknoteQiitaはてなブログをはじめよう!idr_zzさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。