@nextcloud/vueNcAppNavigationIconCollapsible #
Props #
| Prop name | Description | Type | Values | Default |
|---|---|---|---|---|
| open | boolean | - | true |
Events #
| Event name | Properties | Description |
|---|---|---|
| click |
NcAppNavigationItem #
Props #
| Prop name | Description | Type | Values | Default |
|---|---|---|---|---|
| title | The title of the element. | string | - | |
| id | id attribute of the list item element | string | - | () => 'app-navigation-item-' + GenRandomId() |
| icon | Refers to the icon on the left, this prop accepts a class like 'icon-category-enabled'. | string | - | '' |
| loading | Displays a loading animated icon on the left of the element instead of the icon. | boolean | - | false |
| to | Passing in a route will make the root element of this component a <router-link /> that points to that route.By leaving this blank, the root element will be a <li>. | string|object | - | '' |
| exact | Pass in true if you want the matching behaviour tobe non-inclusive: https://router.vuejs.org/api/#exact | boolean | - | false |
| allowCollapse | Gives the possibility to collapse the children elements into the parent element (true) or expands the children elements (false). | boolean | - | false |
| editable | Makes the title of the item editable by providing an ActionButtoncomponent that toggles a form | boolean | - | false |
| editLabel | Only for 'editable' items, sets label for the edit action button. | string | - | '' |
| editPlaceholder | Only for items in 'editable' mode, sets the placeholder text for the editing form. | string | - | '' |
| pinned | Pins the item to the bottom left area, above the settings. Do not place 'non-pinned' AppnavigationItem components below pinnedones. | boolean | - | false |
| undo | Puts the item in the 'undo' state. | boolean | - | false |
| open | The navigation collapsible state (synced) | boolean | - | false |
| menuOpen | The actions menu open state (synced) | boolean | - | false |
| forceMenu | Force the actions to display in a three dot menu | boolean | - | false |
| menuIcon | The action's menu default icon | string | - | undefined |
| menuPlacement | The action's menu direction | string | - | 'bottom' |
| ariaDescription | Entry aria details | string | - | null |
| forceDisplayActions | To be used only when the elements in the actions menu are very important | boolean | - | false |
Events #
| Event name | Properties | Description |
|---|---|---|
| update:menuOpen | ||
| update:open | ||
| update:title | ||
| click | ||
| undo |
Slots #
| Name | Description | Bindings |
|---|---|---|
| icon | ||
| counter | ||
| menu-icon | Slot for the custom menu icon | |
| actions | ||
| extra | ||
| default |
Usage #
Simple element #
- With an icon:
<NcAppNavigationItem title="My title" icon="icon-category-enabled" />
- With a spinning loader instead of the icon:
<NcAppNavigationItem title="Loading Item" :loading="true" />
Element with actions #
Wrap the children in a template. If you have more than 2 actions, a popover menu and a menu button will be automatically created.
<div id="app-navigation-vue"><!-- Just a wrapper necessary in the docs. Not needed when NcAppNavigation is correctly used as parent. -->
<NcAppNavigationItem title="Item with actions" icon="icon-category-enabled">
<template #actions>
<NcActionButton icon="icon-edit" @click="alert('Edit')">
Edit
</NcActionButton>
<NcActionButton icon="icon-delete" @click="alert('Delete')">
Delete
</NcActionButton>
<NcActionLink icon="icon-external" title="Link" href="https://nextcloud.com" />
</template>
</NcAppNavigationItem>
</div>
Element with counter #
Just nest the counter in a template within <NcAppNavigationItem> and add #counter to it.
<NcAppNavigationItem title="Item with counter" icon="icon-folder">
<template #counter>
<NcCounterBubble>
99+
</NcCounterBubble>
</template>
</NcAppNavigationItem>
Element with children #
Wrap the children in a template with the slot property and use the prop allowCollapse to choose wether to allow or prevent the user from collapsing the items.
<NcAppNavigationItem title="Item with children" :allowCollapse="true" :open="true">
<template>
<NcAppNavigationItem title="AppNavigationItemChild1" />
<NcAppNavigationItem title="AppNavigationItemChild2" />
<NcAppNavigationItem title="AppNavigationItemChild3" />
<NcAppNavigationItem title="AppNavigationItemChild4" />
</template>
</NcAppNavigationItem>
Editable element #
Add the prop :editable=true and an edit placeholder if you need it. By default the placeholder is the previous title of the element.
<NcAppNavigationItem title="Editable Item" :editable="true"
editPlaceholder="your_placeholder_here" icon="icon-folder" @update:title="function(value){alert(value)}" />
Undo element #
Just set the undo and title props. When clicking the undo button, an undo event is emitted.
<NcAppNavigationItem :undo="true" title="Deleted important entry" @undo="alert('undo delete')" />
Pinned element #
Just set the pinned prop.
<NcAppNavigationItem title="Pinned item" :pinned="true" />
NcInputConfirmCancel #
Props #
| Prop name | Description | Type | Values | Default |
|---|---|---|---|---|
| placeholder | string | - | '' | |
| value | string | - | '' |
Events #
| Event name | Properties | Description |
|---|---|---|
| input | ||
| confirm | ||
| cancel |
Usage #
<NcInputConfirmCancel @confirm="alert('confirm')" @cancel="alert('cancel')" />