MorphemeAppShell
The VAppShell component is a Vue component that provides a layout shell for a web application. It includes slots for different sections of the layout, such as the header, footer, navbar, main content, and aside content.
Usage
Basic Usage
To use the VAppShell component, you can simply include it in your template like this:
Fluid
Use fluid prop to make container fluid.
Stacked
Here's an example of stacked layout.
Sidebar with header
Here's an example of sidebar layout with header.
Three Column
Here's an example of three column layout.
Props
| Name | Type | Default | Description |
|---|---|---|---|
fluid | boolean | false | If true, the main content area will have no padding and will take up the full width of the screen. |
paddedContainer | boolean | false | If true, the main content area's container will have padding. |
paddedContent | boolean | false | If true, the main content area's content wrapper will have padding. |
mainClass | string | undefined | A CSS class to apply to the main content area. |
contentClass | string | undefined | A CSS class to apply to the main content area's content wrapper. |
containerClass | string | undefined | A CSS class to apply to the main content area's container. |
Slots
| Name | Description |
|---|---|
default | This slot is used to add content to the main section of the app shell. |
header | This slot is used to add content to the header section of the app shell. |
aside | This slot is used to add content to the aside section of the app shell. |
navigation | This slot is used to add content to the navigation section of the app shell. |
container.after | This slot is used to add content after the container section of the app shell |
content.after | This slot is used to add content after the content section of the app shell. |
footer | This slot is used to add content to the footer section of the app shell. |
Storybook
View Storybook documentation here.