Vuetify 2.0の注目機能とNuxt.jsでの試し方 - Qiita
本日 Vuetify v2.0.0 Arcadia がリリースされました！ 居ても立っても居られず、早速試してみました！ 個人的注目機能 VColorPicker リファレンス：VColorPicker vue-colorの使用を検討していた身としては、Vuetifyのコンポーネントとして提供されるのはありがたいです。 VFileInput リファレンス：VFileInput こちらも地味にVuetifyに今までなかったやつです。 「ファイルを選択」ボタンのカスタマイズは地味に面倒なので、大変ありがたいです。 VOverlay リファレンス：VOverlay こちらもたまにcssで自力でやっていたので、楽になりますね。 Nuxt.jsでVuetify 2.0を使う 素のvueの場合はvuecliでできるようですが、Nuxt.jsの場合は@nuxt/vuetifyモジュールがまだv2.0.0
傾斜をつけた割り勘計算ツールを作ってみた - Qiita
はじめに 忘年会等の飲み会イベントで幹事を任されるのは若手の宿命。 かく言う私も例外ではありませんでした。私の勤務先の場合、社員の年齢差が大きいため傾斜をつけることがほとんど。ただ、この傾斜計算、参加者全員分の年次を把握したり傾斜の具合を微調節したりと意外に面倒で時間をとられます。 いい感じのサービスがないか検索してみたものの、PCサイト用のものはスマホでレウアウトが崩れるし、スマホ向けにはネイティブアプリばかりでPCからは利用できず。意外にもPC・スマホ双方で適切に動くものは見つけられませんでした。 ないなら作ればいい、そこで会社向けに作ったのがこの割り勘計算ツール。 先日公開した割り勘計算ツール(https://t.co/w2j6PD7ZHu)のベースとなった、会社向けver。 各組織の事前に登録しておる社員を選択できて、年次情報をもとに傾斜を計算してくれる仕組み。 pic.twitt
Storybook (Vue) で Vuetifyを使う - Qiita
import Vue from "vue"; import Vuetify from "vuetify"; import "vuetify/dist/vuetify.css"; Vue.use(Vuetify, { iconfont: "md" }); addDecorator(() => ({ template: "<v-app><story/></v-app>" })); import { configure, addDecorator } from "@storybook/vue"; import Vue from "vue"; import Vuetify from "vuetify"; import "vuetify/dist/vuetify.css"; Vue.use(Vuetify, { iconfont: "md" }); addDecorator(() => ({ tem
Vuetifyのグリッドシステムの属性について - Qiita
2020/02追記 ここの記事はVuetify1系のグリッドシステムについての属性であり、2020/02時点でのVuetifyの最新は2系です。 色々属性名等が変わって参考にならない部分が増えたはずなのでご注意ください。 一応2系のグリッドシステムについては以下にまとめなおしました。 https://qiita.com/nulltemp/items/cb93565ac81a78b04097 はじめに 仕事でVuetifyを使うことになったが、グリッドシステムの属性の部分の説明がない箇所が多く、正直よく分からない。 https://v15.vuetifyjs.com/ja/framework/grid CSSのFlexboxの考えに沿って作られているようなので事前知識があれば特に困ることもないという考え方なのだろうが、生憎こちらはフロントエンドに特に詳しくもないチンパンジーなので、属性名を見
Vueでもっと幸せになりたいあなたへ。VueのUIコンポーネントライブラリVuetifyのススメ - KAYAC engineers' blog
どうもみなさまおはようございます。あるいはこんにちは。あるいはこんばんは。 KAYAC Advent Calendar 2018の12日目の記事を担当します、今年1月に中途入社しましたエンジニアのたがみです。 前職ではサーバーサイドのSEとして業務系のwebアプリを開発したり運用したりしていましたが、今はクライアントワークのフロントのエンジニアとしてwebサイトを作ったり動かしたりぶっ飛んだものにしたりしなかったりしています。 今回は、そんな私がフロントエンドになったばかりの頃に仲良くなった思い入れのある言語、Google App Scriptの話を！・・・・・・と、つい二日前までは、思っていたのですが。 Google先生を訪ねて色々と検索していたところ「あれ・・・なんか・・・Vuetifyについての日本語記事、実は少ないのでは・・・？」と気づいてしまったのです。 （もしかしたら気のせいか
Vuetifyの便利機能 - わいの日記
デザインわからん 私はデザインが苦手で、 テーマカラーとか色の組み合わせなんていい感じにできた試しがありません そんな時はVuetifyのTheme generator vuetifyjs.com テーマカラーを実際のコンポーネントに当てはめて確認しながら決められます 色を決定したらexport themeで色をコード化できます 2パターンで表示できる でも、そもそも色の組み合わせがわからん そんな時はCoolorsですね coolors.co このサイトはいい感じな色の組み合わせを提案してくれます もちろん提案してくれたものを細かくカスタマイズすることも可能です どっちも本当に重宝します デザイン(コーディングも)しっかり勉強しないと。。。 Atomic Designって本買ったから時間見つけて読まなきゃ
Vuetifyで、APIから選択肢を検索して呼び出せるドロップダウンリストをつくる - Qiita
こういうドロップダウンリストを作りたいとき、ありますよね。 プロトタイピングなどでさくっと実装したいと思っても、一から自分で作るとなると苦しい要素が満載ですが、Vuetifyを使ってみたらあっという間で感動しました。 コードはこちら https://codepen.io/kokky/pen/eQwvZM?editors=1010 そもそもVuetifyとは マテリアルデザインを採用したvue.jsのUIコンポーネント集です。Bootstrapのマテリアルデザイン版。かゆいところに手が届く！つよい！ 今回利用するのは、Vuetifyのautocomplete componentです。導入・ドキュメントはこちらから。日本語版だと、なぜかドキュメントの説明が表示されないので、英語版でアクセスしてください。 https://vuetifyjs.com/en/components/autocompl
Vuetifyチュートリアル。CSSを書かないマテリアルデザイン
フロントエンド 52124 view Vuetifyチュートリアル。CSSを書かないマテリアルデザイン 最終更新日:2019/03/23 VuetifyとはVue.jsで使える、マテリアルデザインのフレームワークです。 Vuetifyにはマージンの調整、文字サイズの変更等デザインをする上で便利なクラスや、マテリアル。 マテリアルにまつわるオプションがデフォルトで備わっています。 マテリアルやオプションを使いこなすと、凝ったレイアウトでなければ、CSSを書くことなくデザインをすることが可能です。 今回は、以下のようなよくある会員登録フォームをVuetifyでCSSを使わずに実装していきましょう！ Vuetifyの環境構築はこちらでまとめておいたので、環境がない方はこちらから初めてください。 Vuetifyが便利すぎる【マテリアルデザイン3分入門】 Vuetifyでマテリアルデザインをする流れ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Vuetify Alpha Theme
Vuetify Alpha Theme — Vuetify.js
GitHub - vuetifyjs/theme-generator: Vuetify Theme Generator
https://vuetifyjs.com/ja/theme-generator/
Vuetify Theme Generator
Vuetify landing page - CodeSandbox
Vuetify Parallax Starter
parallax-starter/index.html at master · vuetifyjs/parallax-starter · GitHub
blog-starter/template/index.html at master · vuetifyjs/blog-starter
Vuetify Blog Starter
Vuetify Vuex
GitHub - munierujp/nuxt-vuetify-example: Nuxt.js + Vuetify.js Application Example