Vuetify

ショップ

企業向け

Vuetifyを使用すると、ウィンドウサイズに応じてアプリケーションのレイアウトを制御できます。たとえば、特定のブレークポイントをターゲットとする特定の grid prop またはヘルパークラス(つまり display )を使用することで実現できます。 Vuetifyは、以下で説明するように5つの定義済みブレークポイントを提供しますが、ニーズに合わせて簡単に変更できます。

Material Design Viewport Breakpoints
DeviceCodeTypesRange
Extra smallxssmall to large handset< 600px
Smallsmsmall to medium tablet600px > < 960px
Mediummdlarge tablet to laptop960px > < 1264px*
Largelgdesktop1264px* > < 1904px*
Extra largexl4k and ultra-wides> 1904px*
* -16px on Desktop

Vuetify は、使用可能なブレークポイントをアプリケーション内からアクセス可能なオブジェクトに変換します。これにより、ビューポートのサイズに基づいて特定のプロパティと属性を割り当て/適用できます。オブジェクトは$vuetify.breakpointにあります。

独自のブレークポイントで閾値をピクセル数で定義できますが、現在は 2 段階のプロセスです: 1. スタイルを更新するには、$grid-breakpoints SASS 変数をオーバーライドする必要があります(SASS variables を参照してください)。2. javascript 側で同じ値を使用するには、アプリケーションのブートストラップ中に次のように渡す必要があります:

実際の例を試してみましょう。モバイル デバイスで フルスクリーン ダイアログに変換する v-dialog コンポーネントがあります。通常は、ビューポートのサイズを監視したり、ページが読み込まれるたびにチェックしたりする必要があります。

これは多くの定型文です。組み込みの v-resize ディレクティブを使用することを選択した場合でも、サイズ変更メソッドを定義する必要があります。 breakpointオブジェクトを使用すると、このロジックを完全にスキップして、アプリケーションのビルドに戻ることができます。

We can simplify this process by simply checking the value of the mobile property on the $vuetify.breakpoint object.

準備はいいですか? 以下から続きが読めます。

Caught a mistake or want to contribute to the documentation? Edit Layout on GitHub!