v-navigation-drawerコンポーネントは、アプリケーション全体をナビゲーションするためのものです。ナビゲーションドロワーはvue-routerなしで動作するように設定されています。下のいくつかの例では、v-cardでラップしています。基本的には、あなたのアプリケーションでは v-appの中にv-navigation-drawerを配置してください。

ナビゲーションドロワーは、主にアプリケーション内のページへのリンクを格納するために使用されます。 v-modelの開始値として null を使用すると、モバイルでは閉じられ、デスクトップでは開かれるようにドロワーが初期化されます。 nav プロパティを使用して、ドロワーとv-list コンポーネントをペアにするのが一般的です。

確認したいコンポーネントを下から選び、利用できる props、slots、events、functions を確認してください。


ナビゲーションドロワーは、あらゆるアプリケーションの設計に合わせてカスタマイズできます。ここでは、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.

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

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