ショップ

企業向け

Vuetify では、 v-app コンポーネントや v-navigation-drawer, v-app-bar, v-footerなどのappプロパティが、<v-content>周りで適切なサイズになる事でアプリケーション作成を手助けします。レイアウトのサイズを決める事に苦労することなく本当にユニークなUIを実現することができます。v-app コンポーネントはすべてのアプリケーションで必要です。 v-app コンポーネントは多くのVuetifyコンポーネントのマウントポイントであり、デフォルトアプリケーションのvariant (dark/light) を子コンポーネントに伝達します。そしてsafariなど多種ブラウザに対応しています。 v-app はアプリケーションで一度のみ使用されるべきです。

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

This is an example of the default application markup for Vuetify. You can place your layout elements anywhere, as long as you apply the app property. The key component in all of this is v-content. This will be dynamically sized depending upon the structure of your designated app components. You can use combinations of any or all of the above components including v-bottom-navigation.

When using vue-router it is recommended that you place your views inside v-content.

Below is a list of all the components that support the app prop and can be used as layout elements in your application. These can be mixed and matched and only one of each particular component should exist at any time. You can, however, swap them out and the layout will accommodate. For some examples displaying how you can build various layouts, checkout the Pre-made layouts page.

Each of these application components have a designated location and priority that it affects within the layout system.

  • v-system-bar: Is always placed at the top of an application with higher priority than v-app-bar.
  • v-app-bar: Is always placed at the top of an application with a lower priority than v-system-bar.
  • v-navigation-drawer: Can be placed on the left or right side of an application and can be configured to sit next to or below v-app-bar.
  • v-footer: Is always placed at the bottom of an application with a lower priority than v-bottom-navigation.
  • v-bottom-navigation: Is always placed at the bottom of an application with a higher priority than v-footer.

In a nutshell, that means that v-system-bar is always above v-app-bar, v-navigation-drawer can occupy the left or right side and v-footer always sits on top of v-bottom-navigation.

Vuetify Application

The application service is used to configure your Vuetify layout. It communicates with the v-content component so that it's able to properly size the application content. It has a number of properties that can be accessed:

These values are automatically updated when you add and remove components with the app prop. They are NOT editable and exist in a READONLY state. You can access these values by referencing the application property on the $vuetify object.

By default, v-content is assigned the TR tag of main which denotes that it is the main content area of the body of a document or application.

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

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