@nextcloud/vueNcAppSettingsDialog
Props
| Prop name | Description | Type | Values | Default |
|---|---|---|---|---|
| open | Determines the open / closed state of the modal | boolean | - | |
| showNavigation | Shows the navigation on desktop if true | boolean | - | false |
| container | Selector for the popover container | string | - | 'body' |
| title | Title of the settings | string | - | '' |
Events
| Event name | Properties | Description |
|---|---|---|
| update:open |
Slots
| Name | Description | Bindings |
|---|---|---|
| default |
Just nest the AppSettingSections component into NcAppSettingsDialog, providing the section's title prop. You can put your settings within each NcAppSettingsSection component.
vue
<template>
<div>
<NcButton @click="settingsOpen = true">Show Settings</NcButton>
<NcAppSettingsDialog
:open.sync="settingsOpen"
:show-navigation="true"
title="Application settings"
>
<NcAppSettingsSection id="asci-title-1" title="Example title 1">
Some example content
</NcAppSettingsSection>
<NcAppSettingsSection id="asci-title-2" title="Example title 2">
Some more content
</NcAppSettingsSection>
<NcAppSettingsSection id="asci-title-3" title="Example title 3">
Some example content
</NcAppSettingsSection>
<NcAppSettingsSection id="asci-title-4" title="Example title 4">
Some more content
</NcAppSettingsSection>
<NcAppSettingsSection id="asci-title-5" title="Example title 5">
Some example content
</NcAppSettingsSection>
<NcAppSettingsSection id="asci-title-6" title="Example title 6">
Some more content
</NcAppSettingsSection>
<NcAppSettingsSection id="asci-title-7" title="Example title 7">
Some example content
</NcAppSettingsSection>
<NcAppSettingsSection id="asci-title-8" title="Example title 8">
Some more content
</NcAppSettingsSection>
<NcAppSettingsSection id="asci-title-9" title="Example title 9">
Some more content
</NcAppSettingsSection>
<NcAppSettingsSection id="asci-title-10" title="Example title 10">
Some more content
</NcAppSettingsSection>
</NcAppSettingsDialog>
</div>
</template>
<script>
export default {
data() {
return {
settingsOpen: false
};
}
};
</script>