You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+117Lines changed: 117 additions & 0 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -53,6 +53,123 @@ const myEntry: Entry = {
53
53
addNewFileMenuEntry(myEntry)
54
54
```
55
55
56
+
#### Register a sidebar tab
57
+
58
+
It is possible to provide your own sidebar tabs for the files app.
59
+
For this you need to create a [custom web component](https://developer.mozilla.org/en-US/docs/Web/API/Web_components),
60
+
which can either be done without any framework by using vanilla JavaScript but is also [possible with Vue](https://vuejs.org/guide/extras/web-components#building-custom-elements-with-vue).
61
+
62
+
This example will make use of the Vue framework for building a sidebar tab as this is the official UI framework for Nextcloud apps.
63
+
64
+
The sidebar tab consists of two parts:
65
+
1. The web component which will be rendered within the sidebar.
66
+
2. A definition object that provides all information needed by the files app.
67
+
68
+
##### SidebarTab definition object
69
+
70
+
This object provides the requires information such as:
71
+
- The order (to ensure a consistent tabs order)
72
+
- The display name for the tab navigation
73
+
- An icon, to be used in the tab navigation
74
+
- A callback to check if the sidebar tab is enabled for the current node shown in the sidebar.
75
+
- The web component tag name
76
+
77
+
The registration must happen in an `initScript`.
78
+
79
+
```ts
80
+
importtype { ISidebarTab } from'@nextcloud/files'
81
+
82
+
import { getSidebar } from'@nextcloud/files'
83
+
import { t } from'@nextcloud/l10n'
84
+
85
+
const MyTab:ISidebarTab= {
86
+
// Unique ID of the tab
87
+
id: 'my_app',
88
+
89
+
// The display name in the tab list
90
+
displayName: t('my_app', 'Sharing'),
91
+
92
+
// Pass an SVG (string) to be used as the tab button icon
93
+
iconSvgInline: '<svg>...</svg>',
94
+
95
+
// Lower values mean a more prominent position
96
+
order: 50,
97
+
98
+
// The tag name of the web component
99
+
tagName: 'my_app-files_sidebar_tab',
100
+
101
+
// Optional callback to check if the tab should be shown
102
+
enabled({ node, folder, view }) {
103
+
// you can disable this tab for some cased based on:
104
+
// - node: The node the sidebar was opened for
105
+
// - folder: The folder currently shown in the files app
106
+
// - view: The currently active files view
107
+
returntrue
108
+
},
109
+
110
+
// Optional, recommended to large tabs
111
+
async onInit() {
112
+
// This is called when the tab is about to be activated the first time.
113
+
// So this can be used to do some initialization or even to define the web component.
114
+
},
115
+
}
116
+
117
+
// the you need to register it in the sidebar
118
+
getSidebar()
119
+
.registerTab(MyTab)
120
+
```
121
+
122
+
##### SidebarTab web component
123
+
124
+
The web component needs to have those properties:
125
+
- node of type `INode`
126
+
- folder of type `IFolder`
127
+
- view of type `IView`
128
+
- active of type `boolean`
129
+
130
+
When using Vue you need to first create the Vue component:
131
+
132
+
```vue
133
+
<script setup lang="ts">
134
+
import type { IFolder, INode, IView } from '@nextcloud/files'
135
+
136
+
defineProps<{
137
+
node: INode
138
+
folder: IFolder
139
+
view: IView
140
+
active: boolean
141
+
}>()
142
+
</script>
143
+
144
+
<template>
145
+
<div>
146
+
<div>Showing node: {{ node.source }}</div>
147
+
<div>... in folder: {{ folder.source }}</div>
148
+
<div>... with view: {{ view.id }}</div>
149
+
</div>
150
+
</template>
151
+
```
152
+
153
+
Which then can be wrapped in a web component and registered.
0 commit comments