@dzangolab/vue-layout
Requirements
- Vue >= 3.0
Installation
npm add --s @dzangolab/vue-layout
yarn add @dzangolab/vue-layout
Usin the LayoutBroker
In your app's main.js
:
import layout from '@dzangolab/vue-layout'
...
Vue.use(layout)
In your app's App.vue
component:
<template>
<LayoutBroker>
<router-view />
</LayoutBroker>
</template>
<script>
...
</script>
Using the Page component
Inside any of your components that represents a page:
<template>
<Page
contentClass="contentClass"
subtitle="subtitle"
title="Page title"
>
<template v-slot:toolbar>
<Toolbar />
</template>
<template v-slot:content>
<MyComponent ... />
</template>
<template #notifications>
<notifications></notifications>
</template>
</Page>
</template>
<script>
export default {
name: '...'
}
</script>
Page component props
contentClass
A css class set on the page__content
part of the page, ie the wrapper element around the content
slot.
subtitle
Text to be shown as the page's sub-title. This is rendered by default as the content of a <small>
tag set as a child of the title H1
tag.
title
Text to be displayed as the page's title. This is rendered as the content of an H1 tag.
Page component slots
content
The content
slot is intended to hold the main content of the page.
subtitle
Used to render the page's sub-title.
toolbar
Used to inject a toolbar in the page title area.