Vue+Vuetifyで作っている以下のおもちゃの話。後でどこかにまとめて書くけど、とりあえずメモとして残す。 https://direboar.github.io/githubpage-test/dist/#/ ソースはこっち。 https://github.com/direboar/vue-vuetify-example/blob/master/src/components/SpellDetailDialog.vue モバイルとデスクトップで同じシングルファイル・コンポーネントを使って表示するようにしている。 デスクトップでは、V-Datatableを使って一覧表示したい(ソートなどしたいため) モバイルでは、V-Datatableは見切れるので、V-Listを使って表示したい項目を絞って出したい という画面要求を満たすために、モバイル用とデスクトップ用の一覧表示を完全に別に作り、hi
vuetify.jsの公式リファレンス、言語を日本語にしてるとoptionの説明がまったくでないという素敵な仕様で混乱した。 なので自分用に和訳とかもふくめてメモっておきます。 【v-app】 アプリケーションが正しく動作するためには、アプリケーションをv-appコンポーネントにラップする必要があります。このコンポーネントは、レイアウトのグリッドブレークポイントを決定するために必要です。すべてのVuetifyコンポーネントの親でなければなりません。 【layout要素に app を適用する(v-appとプロパティのappがあってややこしいな)】 app propを適用すると、position:fixedがlayout要素に自動的に適用されます。 【デフォルトのアプリケーションマークアップ】 appプロパティを適用する限り、レイアウト要素はどこにでも配置できます。このすべての主要コンポーネン
2020/02追記 ここの記事はVuetify1系のグリッドシステムについての属性であり、2020/02時点でのVuetifyの最新は2系です。 色々属性名等が変わって参考にならない部分が増えたはずなのでご注意ください。 一応2系のグリッドシステムについては以下にまとめなおしました。 https://qiita.com/nulltemp/items/cb93565ac81a78b04097 はじめに 仕事でVuetifyを使うことになったが、グリッドシステムの属性の部分の説明がない箇所が多く、正直よく分からない。 https://v15.vuetifyjs.com/ja/framework/grid CSSのFlexboxの考えに沿って作られているようなので事前知識があれば特に困ることもないという考え方なのだろうが、生憎こちらはフロントエンドに特に詳しくもないチンパンジーなので、属性名を見
長い前置き(飛ばし読み推奨) 最近、フロント側を完全に脱jQueryして、Vue.js + Vuex + VueRouter + Vuetifyで開発を進めている。 これまでもVue.js + Vuex この2つは使っていたわけなんだけど bootstrapベースであるAdminLTEと組み合わせることに限界を感じていて、 それぞれの開発者がVueライブラリを探して入れてみたり、 自作してみたりみたいなことを、それぞれの案件で繰り返していたわけだ。 心の声(もう、こんなお飾りのjQuery依存のUIフレームワークなんて実際は足枷じゃねーか。確かにデザインは綺麗なんだけど。。) そこで出会ったのがVuetify。 少し使い込んでみた感じ、グリッドレイアウトにflexboxを採用しているので レイアウトに苦戦することもあるけど、それだって新しいbootstrap4も同じだし もはや、これが時代
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く