v-navigation-drawerコンポーネントは、アプリケーション全体をナビゲーションするためのものです。ナビゲーションドロワーはvue-routerなしで動作するように設定されています。下のいくつかの例では、v-cardでラップしています。基本的には、あなたのアプリケーションでは v-appの中にv-navigation-drawerを配置してください。
app プロパティを有効にして v-navigation-drawer を使用している場合は、例のように absolute prop を使用する必要はありません。
確認したいコンポーネントを下から選び、利用できる props、slots、events、functions を確認してください。
コンポーネントに position: absolute を適用します。
コンポーネントをアプリケーション レイアウトの一部として指定します。コンテンツのサイズを動的に調整するために使用されます。この小道具を使用するコンポーネントは、正常に機能するためにv-mainコンポーネントの 外側 に存在する必要があります。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 がオンのときに割り当てられる幅を指定します。
Sets the designated mobile breakpoint for the component. This will apply alternate styles for mobile devices such as the temporary prop, or activate the bottom prop when the breakpoint value is met. Setting the value to 0 will disable this functionality.
オーバーレイの色を設定します。
オーバーレイの不透明度を設定します。
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
モバイルのタッチ機能を無効にする
コンポーネントを表示するか非表示にするかを制御します。
コンポーネントに横幅を設定します。
ドロワーの下部にあるスロット
デフォルトの Vue slot
Used to modify v-img properties when using the src prop
{
height: string
src: string | srcObject
}A slot at the top of the drawer
更新されたバウンドモデル
booleanトランジションが完了したときにイベントオブジェクトを発生させます。
objectmini-variant.sync イベント
boolean1px !default;16 !default;以下に、簡単な例から複雑な例まで示します。
ナビゲーションドロワーは、あらゆるアプリケーションの設計に合わせてカスタマイズできます。ここでは、append スロットを使用してカスタム背景色と追加コンテンツ領域を適用します。
デフォルトでは、ナビゲーションドロワーには、コンテンツと分離する1pxの右境界線があります。この例では、ドロワーを左側から取り外して、それだけでfloatにします。 floating プロパティは、右側の境界線（right を使用している場合は左側）を削除します。
When using the mini-variant prop, the drawer will shrink (default 56px) 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. To have content area respond to expand-on-hover bind mini-variant.sync to a boolean. 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-breakpoint is met.