v-navigation-drawerコンポーネントは、アプリケーション全体をナビゲーションするためのものです。ナビゲーションドロワーはvue-routerなしで動作するように設定されています。下のいくつかの例では、v-cardでラップしています。基本的には、あなたのアプリケーションでは v-appの中にv-navigation-drawerを配置してください。
app プロパティを有効にして v-navigation-drawer を使用している場合は、例のように absolute prop を使用する必要はありません。
ナビゲーションドロワーは、主にアプリケーション内のページへのリンクを格納するために使用されます。 v-modelの開始値として null を使用すると、モバイルでは閉じられ、デスクトップでは開かれるようにドロワーが初期化されます。 nav プロパティを使用して、ドロワーとv-list コンポーネントをペアにするのが一般的です。
確認したいコンポーネントを下から選び、利用できる props、slots、events、functions を確認してください。
コンポーネントに position: absolute を適用します。
コンポーネントをアプリケーション レイアウトの一部として指定します。コンテンツのサイズを動的に調整するために使用されます。この小道具を使用するコンポーネントは、正常に機能するためにv-contentコンポーネントの 外側 に存在する必要があります。application page でレイアウトの詳細を確認できます。注: このpropは自動的にposition: fixed でレイアウト要素に適用されます。この機能は absolute propを使用して上書きできます。
Expands from the bottom of the screen on mobile devices
A clipped drawer rests under the application toolbar
指定された色をコントロールに適用します。利用できるのは色の名前 (たとえば、success または purple) または css 表記の色 (#033またはrgba(255, 0, 0, 0.5)) です。colors のページ で、組み込みクラスのリストが確認できます。
コンポーネントにダークテーマを適応します。詳しく知りたい場合は、Material Design documentationのdark themesを参照してください。
Will automatically open/close drawer when resized depending if mobile or desktop.
Disables opening of navigation drawer when route changes
Collapses the drawer to a mini-variant until hovering with the mouse
コンポーネントに position: fixed を適用します。
A floating drawer has no visible container (no border-right)
ナビゲーション ドロワーの高さを設定します。
オーバーレイを非表示にします。
コンポーネントにlightテーマを適用します。
ナビゲーションドロワーの幅を縮小し、.sync修飾子も受け入れます。これにより、ドロワーはクリックすると再び開きます
mini prop がオンのときに割り当てられる幅を指定します。
コンポーネントに指定されたモバイルブレークポイントを設定します。これにより、モバイル デバイスに代替スタイルが適用されます。
オーバーレイの色を設定します。
オーバーレイの不透明度を設定します。
The drawer remains visible regardless of screen size
ナビゲーションドロワーを右側に配置します。
Specifies a v-img as the component's background.
Remove all automated state functionality (resize, mobile, route) and manually control the drawer state
コンポーネント内で使用するカスタムタグを指定します。
A temporary drawer sits above its application and uses a scrim (overlay) to darken the background
モバイルのタッチ機能を無効にする
コンポーネントを表示するか非表示にするかを制御します。
コンポーネントに横幅を設定します。
以下に、簡単な例から複雑な例まで示します。
ナビゲーションドロワーは、あらゆるアプリケーションの設計に合わせてカスタマイズできます。ここでは、append スロットを使用してカスタム背景色と追加コンテンツ領域を適用します。
デフォルトでは、ナビゲーションドロワーには、コンテンツと分離する1pxの右境界線があります。この例では、ドロワーを左側から取り外して、それだけでfloatにします。 floating プロパティは、右側の境界線（right を使用している場合は左側）を削除します。
When using the mini-variant prop, the drawer will shrink (default 80px) and hide everything inside of v-list except the first element. In this example we use the .sync modifier that allows us to tie the expanding/contracting of the drawer programmatically.
A temporary drawer sits above its application and uses a scrim (overlay) to darken the background. This drawer behavior is mimicked by default when on mobile. Clicking outside of the drawer will cause it to close.
ナビゲーションドロワーは、アプリケーション (またはエレメント) の右側に配置することもできます。これは、ナビゲーション リンクを持たない可能性がある補助情報を含むサイド シートを作成する場合にも役立ちます。RTL を使用する場合は、ドロワーの right を明示的に定義する必要があります。
Places the component in mini-variant mode and expands once hovered. Does not alter the content area. Width can be controlled with the mini-variant-width property.
ドロワーにカスタム背景を適用します。v-imgのプロパティをカスタマイズする必要がある場合は、img スロットを使用できます。
In this example we define a custom width to accommodate our nested drawer. Using v-row we ensure that the drawer and list stack horizontally next to each other.
Using the bottom prop, we are able to relocate our drawer on mobile devices to come from the bottom of the screen. This is an alternative style and only activates once the mobile-break-point is met.