@nextcloud/vueNcAppNavigationIconCollapsible #
Props #
| Prop name | Description | Type | Values | Default |
|---|---|---|---|---|
| open | boolean | - | true |
Events #
| Event name | Properties | Description |
|---|---|---|
| click |
NcAppNavigationItem #
Author: John Molakvoæ skjnldsv@protonmail.com ,Author: Raimund Schlüßler raimund.schluessler@mailbox.org
Props #
| Prop name | Description | Type | Values | Default |
|---|---|---|---|---|
| name | The main text content of the entry. | string | - | |
| title | The title attribute of the element. | string | - | null |
| 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 | - | '' |
| href | A direct link. This will be used as the href attribute.This will ignore any to prop being defined. | string | - | null |
| 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 name 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:name | ||
| 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:
- With a spinning loader instead of the icon:
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.
Element with counter #
Just nest the counter in a template within <NcAppNavigationItem> and add #counter to it.
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.
Editable element #
Add the prop :editable=true and an edit placeholder if you need it. By default the placeholder is the previous name of the element.
Undo element #
Just set the undo and name props. When clicking the undo button, an undo event is emitted.
Link element #
Href that start by http will be treated as external and opened in a new tab
Custom title #
Pinned element #
Just set the pinned prop.
NcInputConfirmCancel #
Props #
| Prop name | Description | Type | Values | Default |
|---|---|---|---|---|
| placeholder | string | - | '' | |
| value | string | - | '' |
Events #
| Event name | Properties | Description |
|---|---|---|
| input | ||
| confirm | ||
| cancel |