Skip to content

Commit

Permalink
docs(application): add back missing page
Browse files Browse the repository at this point in the history
johnleider committed Jun 6, 2024
1 parent 8511c37 commit e74fb6a
Showing 7 changed files with 100 additions and 122 deletions.
41 changes: 21 additions & 20 deletions packages/docs/src/components/examples/Example.vue
Original file line number Diff line number Diff line change
@@ -7,7 +7,6 @@
>
<AppSheet class="mb-9">
<v-lazy
v-if="!preview"
v-model="hasRendered"
min-height="44"
>
@@ -46,26 +45,28 @@

<v-spacer />

<v-tooltip
v-for="({ path, ...action }, i) of actions"
:key="i"
location="top"
>
<template #activator="{ props: tooltip }">
<v-fade-transition hide-on-leave>
<v-btn
v-show="!action.hide"
:key="action.icon"
class="me-2 text-medium-emphasis"
density="comfortable"
variant="text"
v-bind="mergeProps(action as any, tooltip)"
/>
</v-fade-transition>
</template>
<template v-if="!preview">
<v-tooltip
v-for="({ path, ...action }, i) of actions"
:key="i"
location="top"
>
<template #activator="{ props: tooltip }">
<v-fade-transition hide-on-leave>
<v-btn
v-show="!action.hide"
:key="action.icon"
class="me-2 text-medium-emphasis"
density="comfortable"
variant="text"
v-bind="mergeProps(action as any, tooltip)"
/>
</v-fade-transition>
</template>

<span>{{ t(path) }}</span>
</v-tooltip>
<span>{{ t(path) }}</span>
</v-tooltip>
</template>
</v-toolbar>
</v-lazy>

1 change: 0 additions & 1 deletion packages/docs/src/data/301.json
Original file line number Diff line number Diff line change
@@ -114,7 +114,6 @@
"customization/sass-variables": "/features/sass-variables",
"customization/theme": "/features/theme",
"about/sponsors-and-backers": "/introduction/sponsors-and-backers",
"components/application": "/features/application-layout",
"components/simple-tables": "/components/tables",
"components/data-tables": "/components/data-tables/basics",
"components/date-pickers-month": "/introduction/roadmap",
1 change: 1 addition & 0 deletions packages/docs/src/data/nav.json
Original file line number Diff line number Diff line change
@@ -88,6 +88,7 @@
"routePath": "explorer",
"subtitle": "browse-components"
},
"application",
{ "divider": true },
{ "subheader": "containment" },
"bottom-sheets",
19 changes: 19 additions & 0 deletions packages/docs/src/examples/application/app-bar-drawer.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
<template>
<v-responsive class="border rounded" max-height="300">
<v-app>
<v-app-bar title="App bar"></v-app-bar>

<v-navigation-drawer>
<v-list>
<v-list-item title="Navigation drawer"></v-list-item>
</v-list>
</v-navigation-drawer>

<v-main>
<v-container>
<h1>Main Content</h1>
</v-container>
</v-main>
</v-app>
</v-responsive>
</template>
19 changes: 19 additions & 0 deletions packages/docs/src/examples/application/drawer-app-bar.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
<template>
<v-responsive class="border rounded" max-height="300">
<v-app>
<v-navigation-drawer>
<v-list>
<v-list-item title="Navigation drawer"></v-list-item>
</v-list>
</v-navigation-drawer>

<v-app-bar title="App bar"></v-app-bar>

<v-main>
<v-container>
<h1>Main Content</h1>
</v-container>
</v-main>
</v-app>
</v-responsive>
</template>
34 changes: 18 additions & 16 deletions packages/docs/src/examples/application/theme.vue
Original file line number Diff line number Diff line change
@@ -1,22 +1,24 @@
<template>
<v-app
:theme="theme"
class="rounded-lg border"
style="max-height: 200px;"
>
<v-app-bar>
<v-spacer></v-spacer>
<v-responsive class="border rounded" max-height="300">
<v-app :theme="theme">
<v-app-bar class="px-3">
<v-spacer></v-spacer>

<v-btn
:prepend-icon="theme === 'light' ? 'mdi-weather-sunny' : 'mdi-weather-night'"
@click="onClick"
>Toggle Theme</v-btn>
</v-app-bar>
<v-btn
:prepend-icon="theme === 'light' ? 'mdi-weather-sunny' : 'mdi-weather-night'"
text="Toggle Theme"
slim
@click="onClick"
></v-btn>
</v-app-bar>

<v-main>
<v-container class="text-center">Content area</v-container>
</v-main>
</v-app>
<v-main>
<v-container>
<h1>Main Content</h1>
</v-container>
</v-main>
</v-app>
</v-responsive>
</template>

<script setup>
107 changes: 22 additions & 85 deletions packages/docs/src/pages/en/components/application.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
---
disabled: true
emphasized: true
meta:
title: Application
description: Vuetify comes equipped with a default markup that makes it easy to create layouts (boilerplate) for any Vue application.
@@ -8,112 +8,49 @@ related:
- /features/theme/
- /components/app-bars/
- /components/navigation-drawers/
features:
report: true
---

# Application

The `v-app` component is an optional feature that serves as the root layout component as well as providing an easy way to control the theme used at the root level.

<PageFeatures />

<PromotedEntry />

In Vuetify, the `v-app` component is a convenient way to dynamically modify your application's current theme and provide an entry point for your layouts. This allows you to create truly unique interfaces without the hassle of managing your layout sizing. When an application is mounted, each layout child registers itself with the closest layout parent and is then automatically placed in your window.
## API

The order of your layout components will dictate the order in which they are registered, and ultimately placed, within your application. The following example demonstrates how the `v-app-bar` component takes priority over `v-navigation-drawer` because of its rendering order:
| Component | Description |
| - | - |
| [v-app](/api/v-app/) | Primary Component |
| [v-main](/api/v-main/) | Content area |

``` html
<template>
<v-app>
<v-app-bar title="Application"></v-app-bar>
<ApiInline hide-links />

<v-navigation-drawer>...</v-navigation-drawer>
## Guide

<v-main>...</v-main>
</v-app>
</template>
```
In Vuetify, the `v-app` component is a convenient way to dynamically modify your application's current theme and provide an entry point for your layouts. When an application is mounted, each layout child registers itself with the closest layout parent and is then automatically placed in your window.

![Pending graphic](https://cdn.vuetifyjs.com/docs/images/graphics/img-placeholder.png "Rendered Application")
::: info
More information on how to interact with the root sizing and styling is on the [Application](/features/application-layout/) page.
:::

If we swap `v-app-bar` and `v-navigation-drawer`, the registration order changes and the layout system layers the two components differently.
When placing your application level components, the order matters. Elements are stacked based on when they register and are rendered in the DOM after the first **nextTick** (to account for suspense). Layouts utilize [suspense](https://vuejs.org/guide/built-ins/suspense) to allow all layout components to register before rendering the initial layout.

``` html
<template>
<v-app>
<v-navigation-drawer>...</v-navigation-drawer>
The following example demonstrates how the `v-app-bar` component takes priority over `v-navigation-drawer` because of its rendering order:

<v-app-bar title="Application"></v-app-bar>
<ExamplesExample file="application/app-bar-drawer" open preview />

<v-main>...</v-main>
</v-app>
</template>
```
If we swap `v-app-bar` and `v-navigation-drawer`, the registration order changes and the layout system layers the two components differently.

![Pending graphic](https://cdn.vuetifyjs.com/docs/images/graphics/img-placeholder.png "Rendered Application")
<ExamplesExample file="application/drawer-app-bar" open preview />

## Theme

The `v-app` component makes it easy to enable one of your application defined themes. By default, Vuetify comes with 2 themes, **light** and **dark**. Each one is a collection of various colors used to style each individual component. Because `v-app` acts as an interface for [theme](/features/theme/) functionality, you have the ability to change it dynamically within your template.

The following example demonstrates how to use the **theme** prop to toggle the theme from dark to light.

<ExamplesExample file="application/theme" preview />

```html { resource="src/App.vue" }
<template>
<v-app :theme="theme">
<v-app-bar>
<v-spacer></v-spacer>

<v-btn
:prepend-icon="theme === 'light' ? 'mdi-weather-sunny' : 'mdi-weather-night'"
@click="onClick"
>Toggle Theme</v-btn>
</v-app-bar>

<v-main>
<v-container>Content area</v-container>
</v-main>
</v-app>
</template>

<script setup>
const theme = ref('light')
function onClick () {
theme.value = theme.value === 'light' ? 'dark' : 'light'
}
</script>
```

::: tip
All components support to override the currently inherited theme locally using the **theme** prop.
:::

## API

| Component | Description |
| - | - |
| [v-app](/api/v-app/) | Primary Component |
| [v-main](/api/v-main/) | Content area |

<ApiInline hide-links />

### Layout components

The following components are compatible with the [Application layout](/features/application-layout/) system:

| Component | Default location | Default orientation | Description |
| - | :-: | :-: | - |
| [v-system-bar](/api/v-system-bar/) | top | horizontal | Used to simulate the system bar on phones and desktop applications |
| [v-app-bar](/api/v-app-bar/) | top | horizontal | Top level application actions and navigation links |
| [v-navigation-drawer](/api/v-navigation-drawer/) | start | vertical | The primary component used for application navigation |
| [v-footer](/api/v-footer/) | bottom | horizontal | The only application component that is not bound to the current layout by default. Must explicitly specify the **app** prop |
| [v-bottom-navigation](/api/v-bottom-navigation/) | bottom | horizontal | This component is often used as a replacement for application actions and navigation links on mobile and tablet devices |

<br>

<AppFigure src="https://cdn.vuetifyjs.com/images/layouts/app.png" alt="Vuetify Application" />

::: info
More information on how to interact with the root sizing and styling is on the [Application](/features/application-layout/) page.
:::
<ExamplesExample file="application/theme" open preview />

0 comments on commit e74fb6a

Please sign in to comment.