Material Design specificationのバージョン2では、Googleは架空のアプリを通じて現実世界のデザインの限界を探求するために Material studies を作成しました。Vuetifyプリセットは、事前に構成されたフレームワークオプション、SASS変数、およびアプリケーションのルックアンドフィールを即座に変更するカスタムスタイルを通じて、これらの調査を統合します。
デフォルトのVuetifyプリセットは、すべてのフレームワークサービスにベースライン値を提供します。各オブジェクトキーは、$vuetify オブジェクトのサービスに対応し、Vuetifyコンストラクターのpresetまたはカスタムuser optionsで上書きできます。
Material Design は、高度にカスタマイズされたデザインを実装する際に使用すると非常に多くの作業を行うことができる可能性がある、独断的な視覚言語です。新しい研究では、マテリアルテーマの_柔軟性_を紹介し、デフォルトのマテリアルの外観なしでユニークなアプリケーションを作成することがいかに簡単かを説明します。
Vuetifyプリセットは現在進行形で開発中の機能であり、Vuetifyが新しい機能を獲得するにつれて、今後強化される予定です。
現在、合計7 Material Studiesから選択でき、それぞれに対応するプリセットプラグインがあります。
コンソールで vue add vuetify-preset- {name} と入力します。ここでの「{name}」は利用可能なMaterial Studiesのいずれかに対応します。プラグインがインストールされると、vuetify.jsファイルは選択したpresetをimportするように更新されます。
開発を開始するには、コマンドラインに yarn serve または npm run serve と入力します。 VuetifyサービスプラグインはVue CLIにブートストラップし、プリセットからのすべての変数とスタイルの変更を自動的に適用します。ジェネレーターとサービスプラグインの機能の詳細については、Plugin Development Guide をご覧ください。
Vuetifyのオプションは、上から順に デフォルト、プリセット、ユーザー の順にマージされます。デフォルト](https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/presets/default/index.ts) プリセットは、最初にVuetifyコンストラクタのオプションで指定されたpresetプロパティにマージされます。該当する場合は、ユーザーが提供したオプションがグローバルデフォルトとプリセットにマージされます。
Studies は技術的なものよりも視覚的なものであるため、プリセットは私たちの 最善の推測 による実装です。 多くの場合、Studiesのガイドライン内の情報が不足しているため、スタイルや機能性を推測しなければなりません。また、Studiesの一部がサポート されていない 、またはサポート されない 状況もあります。
- It requires changes to the framework
- It's not currently possible with CSS
- We haven't figured out how to support it yet
プリセットをインストールすると、メインの public/index.html ファイルが必要なフォントとウェイトのみ更新されます。たとえば、Studyでは400,500,600フォントウェイトのみが必要な場合があります。これにより、Vuetify の一部のヘルパークラスが機能しなくなる可能性があります。例えば font-weight-thin は 300 フォントウェイトが必要です。ウェイトは、後で public.html のフォントリンクを更新することで、いつでも変更できます。
VuetifyでSASS variablesを更新するために、スタイルは開発中およびアプリケーションが本番用にビルドされたときに再コンパイルされます。このため、最初のコンパイル時間は長くなり、variablesファイルを編集するたびにトリガーされます。アプリケーションが Vuetifyローダーの制限 の影響を受けない場合、vuetify/lib/framework から Vuetify をインポートすることができます。これにより、コンパイル時間を最大50%短縮することができます。
Vuetifyのプリセットは、Vue CLIを使ったフレームワークワイドなオプションとカスタムスタイリングを提供するnpmパッケージです。SASS 変数ファイル、CSS オーバーライドファイル、Vue CLI Generator と Plugin Service で構成されています。プリセットによって提供される機能の一部は以下の通りです:
- 既存のVuetify機能を構成するためのカスタムSASS変数を注入します。例えばコンポーネント。プリセットは、Vue CLIプラグインAPI を使用して、コンパイル時にSASS変数を巻き上げます。
カスタムプリセットは、それ自体が preset プロパティを含むことはできません。
このファイルは Vue CLI Generatorで、アプリケーション内の vuetify.js ファイルを更新して定義済みのプリセットを含めます。
このファイルは、yarn serveまたはnpm run serveの実行時にアプリケーションにフックするVue CLI Plugin Service です。injectSassVariablesメソッドは、ターゲットファイルの変数をすべての SASS/SCSSファイルに注入します。
これには、Vuetifyコンストラクターに渡されるフレームワーク構成オプションが含まれます。これらのオプションは、ユーザーが指定した値と フレームワークのデフォルト と組み合わせます。
これは、ターゲットに対応する変数を持たないスタイル変更に対するキャッチオールです。既存のコンポーネントに新しい CSS プロパティを追加する必要がある場合に便利です。
This is a SASS/SCSS variables file which will overwrite existing framework values. You can find more information about available variables on the Vuetify SASS Variables documentation page or within the API section of a component.