概要 Vuetifyでの色の指定方法は様々あります。コンポーネントのテーマ色・背景色・文字色などによって、指定方法が異なることがあります。細かい所を忘れがちなので、この記事を見れば全て思い出せるようにまとめます。 プロジェクト全体で一貫性を持って、適切に色の指定を運用すると、メンテナンス性・可読性がかなり上がるのでおすすめです。 TL;DR 忘れやすい文字による指定方法だけまとめると以下 <!-- コンポーネントテーマカラー --> <!-- テーマカラーとVuetifyカラーリストがいける --> <v-btn color="primary">...</v-btn> <v-btn color="red darken-1">...</v-btn> <v-btn color="mycolor lighten-1">...</v-btn> <!-- VuetifyカラーリストにないCSSのカラ
v-iconだけが表示されない Vuetifyは正しくインストールできて v-icon 以外は表示されている 各種ライブラリのインポートはmain.jsで行っています import Vue from 'vue' import Vuex from 'vuex' import Vuetify from "vuetify"; import "vuetify/dist/vuetify.min.css"; import App from './App.vue' Vue.config.productionTip = false Vue.use(Vuex) Vue.use(Vuetify) new Vue({ vuetify: new Vuetify(), render: h => h(App), }).$mount('#app')
Vuetify を使って困ったところ小ネタ集 Vue CLI + TypeScript + SCSS + Vue-Router + Vuex なプロジェクトに、$ vue add vuetify で Vuetify を追加した。 Vuetify はマテリアルデザインを実現するフレームワークだが、細かなところでデザインを調整したい時に上手いやり方が分からないことがあり、ちょくちょく調べている。 今回はそんな、「ちょっとググッて調整した Vuetify 周りの小ネタ」を紹介する。 目次 Overlays 表示時に縦スクロールバーが消えて画面幅がズレるのがウザい scrollable な v-dialog の縦スクロールバーが見えたり消えたりするのがウザい v-list-item で省略せず折り返し表示させたい ページヘッダのタイトルにリンクを貼る v-text-field に required
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く