イイダリョウのブログ。【Vue.js】Vuetifyにパンくず、スライダー、タイル、アコーディオン、カレンダーを配置(v-carousel、v-carousel、v-card、v-expansion-panels、v-calendar)2019-09-11【Vue.js】Vuetifyにパンくず、スライダー、タイル、アコーディオン、カレンダーを配置(v-carousel、v-carousel、v-card、v-expansion-panels、v-calendar)JSVue.jsの続きです。前回はVuetifyのヘッダー、フッターを配置してみました。今回はさらにいろんなパーツを配置してみます。パンくず(v-carousel)、スライダー(v-carousel)、タイル(v-card)、アコーディオン(v-expansion-panels)、カレンダー(v-calendar)を配置してみました。クモのようにコツコツと前回のおさらいVuetifyのヘッダー、フッダーを配置。CodePen.v-app-bar、v-footerを使用している。詳細は前回記事を参照。クモのようにコツコツと今回はさらにいろいろ配置してみた!Vuetify公式サイトのサンプルで目についたよく使いそうなUIパーツをピックアップ。)パンくずリストリストを設置してみる。CodePen.ヘッダーの下にパンくずリストが表示されている。</div>HTMLはシンプル。:items属性でitemsと紐付けし、divider属性でパンくずを繋ぐ記号を>に指定。配列の中がさらに連想配列になっていてるtextキーの値は表示される文字列disabledキーの値がtrueだとリンクが無効になるようだhrefキーの値はリンク先のURLパンくずの中身はJSで設定されている。CodePen.パンくずの下にスライダーが追加されている。})colorsの中の配列でHTMLのv-forで繰り返す色を指定。タイル(v-card)タイル状のカードを配置してみる。CodePen.スライダーの下にタイルを表示。公式サイトではタイルは1枚だがここでは3枚配置してみた。textでアクションに表示する文字v-card-actionsでホバーでグレーになったりクリックでホワンとアニメーションする設定と紐づいているようだ。v-cardの外で囲っているv-layoutとはv-flexは前々回のボタン配置で書いた横並び設定。クモのようにコツコツとアコーディオン(v-expansion-panels)アコーディオンを配置してみる。CodePen.タイルの下に配置した。タイトル部分をクリックすると本文が開く。開くと説明文がでてくるよ。開くと説明文がでてくるよ。開くと説明文がでてくるよ。開くと説明文がでてくるよ。開くと説明文がでてくるよ。開くと説明文がでてくるよ。開くと説明文がでてくるよ。</v-expansion-panels>v-expansion-panelsの中にv-expansion-panelを配置(今回はv-forで同じものをループ)v-expansion-panel-headerにタイトルv-expansion-panel-contentに本文これはとてもシンプルな構成でスタイルやUIアニメは最初から用意されている。カレンダー(v-calendar)ちょっと凝った構成のパーツを配置してみる。CodePen.アコーディオンの下に表示されている。</v-sheet>v-sheetで高さを指定v-calendarでタイプ(月表示)、表示する月、紐づけるJSのオプション(events)などを設定カレンダー上に表示されている予定はJSに書いてある。],eventsオプションのnameで表示する文字、start、endで該当する日を指定している。(endがないものは1日)最後にいろいろ配置してみたが、どれも構成がシンプルですね。HTMLで完結しているものも多い。CSSは1行も書いてません!よく「bootstrap臭」なんて揶揄がありますが、Vuetifyで漂うのは「マテリアルデザイン臭」なので、マテリアルデザインで作りたいサイトはスタイル修正をする必要はほとんどないのではないでしょうか。先日、Youtubeで初ライブ配信を行いました!いつも愛用している...2019-09-04【Vue.js】Vuetifyにヘッダー、フッターを配置(v-app-bar、v-footer)Vue.jsの続きです。前回はボタンを配置してみました。今回はヘ...2019-08-29【Vue.js】Vuetifyでボタンを並べてみる(v-app、v-content、v-contai...Vue.jsの続きです。前回はVuetifyを事始めました。今回はもう少...2019-08-25【Vue.js】UIフレームワーク「Vuetify」をCDNリンクで事始めたVue.jsの続きでず。はてなブログProフロントエンドエンジニア。神奈川に住まう四十路のオジキ。DTP→Webデザイナーから転向し今に至る。引き続きコツコツの日々。(24)リンクTwitterInstagramYoutubeCodePenGitHubPinterestQuolaFacebooknoteQiitaはてなブログをはじめよう!idr_zzさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。