@nextcloud/vueNcAppContent
App content container to be used for the main content of your app
Props
| Prop name | Description | Type | Values | Default |
|---|---|---|---|---|
| allowSwipeNavigation | Allows to disable the control by swipe of the app navigation open state | boolean | - | true |
| listSize | Allows you to set the default width of the resizable list in % Must be between listMinWidth and listMaxWidth | number | - | 20 |
| listMinWidth | Allows you to set the minimum width of the list column in % | number | - | 15 |
| listMaxWidth | Allows you to set the maximum width of the list column in % | number | - | 40 |
| paneConfigKey | Specify the config key for the pane config sizes Default is the global var appName if you use the webpack-vue-config | string | - | '' |
| showDetails | When in mobile view, only the list or the details are shown If you provide a list, you need to provide a variable that will be set to true by the user when an element of the list gets selected. The details will then show a back arrow to return to the list that will update this prop to false. | boolean | - | true |
Events
| Event name | Properties | Description |
|---|---|---|
| update:showDetails |
Slots
| Name | Description | Bindings |
|---|---|---|
| list | Provide a list to the app content | |
| default | Provide the main content to the app content |
General description
This components provides a wrapper around the main app's content.
Single-column layouts can just use the default slot. A resizable column can be added by providing content to the named slot list.
CSS variables
In the css section some css variables are declared and will be available for all the children of the NcAppContent component
Examples
Usage: Single-column content
vue
<template>
<NcAppContent>
<h2>Single-column main content</h2>
</NcAppContent>
</template>
Usage: Two resizable columns
vue
<template>
<NcAppContent>
<template #list>
<div>Resizable list content</div>
</template>
<div>Main content</div>
</NcAppContent>
</template>
Overriding Defaults
The default, min and max sizes (in percent) of the resizable list column can be overridden. The list size must be between the min and the max width value.
<NcAppContent
:list-size="35"
:list-min-width="20"
:list-max-width="45"
>...</NcAppContent>