Merge pull request #3891 from nextcloud/fix/3461/sidebar-tabs-provide…

…-inject Fix dynamic tabs registration and a11y in NcAppSidebarTabs with provide/inject
nextcloud-libraries · Mar 28, 2023 · 490c4a1 · 490c4a1
2 parents 9f47785 + f1acfcc
commit 490c4a1
Show file tree

Hide file tree

Showing 4 changed files with 287 additions and 102 deletions.
diff --git a/src/components/NcAppSidebar/NcAppSidebar.vue b/src/components/NcAppSidebar/NcAppSidebar.vue
@@ -34,6 +34,12 @@ include a standard-header like it's used by the files app.
 	<NcAppSidebar
 		title="cat-picture.jpg"
 		subtitle="last edited 3 weeks ago">
+		<NcAppSidebarTab name="Search" id="search-tab">
+			<template #icon>
+				<Magnify :size="20" />
+			</template>
+			Search tab content
+		</NcAppSidebarTab>
 		<NcAppSidebarTab name="Settings" id="settings-tab">
 			<template #icon>
 				<Cog :size="20" />
@@ -49,18 +55,195 @@ include a standard-header like it's used by the files app.
 	</NcAppSidebar>
 </template>
 <script>
+	import Magnify from 'vue-material-design-icons/Magnify'
 	import Cog from 'vue-material-design-icons/Cog'
 	import ShareVariant from 'vue-material-design-icons/ShareVariant'
 
 	export default {
 		components: {
+			Magnify,
 			Cog,
 			ShareVariant,
 		},
 	}
 </script>
 ```
 
+### One tab
+
+Single tab is rendered without navigation.
+
+```vue
+<template>
+	<div>
+		<NcAppSidebar
+			title="cat-picture.jpg"
+			subtitle="last edited 3 weeks ago">
+			<NcAppSidebarTab name="Settings" id="settings-tab">
+				<template #icon>
+					<Cog :size="20" />
+				</template>
+				Single tab content
+			</NcAppSidebarTab>
+		</NcAppSidebar>
+	</div>
+</template>
+<script>
+import Cog from 'vue-material-design-icons/Cog'
+
+export default {
+	components: {
+		Cog,
+	},
+}
+</script>
+```
+
+### Dynamic tabs
+
+```vue
+<template>
+	<div>
+		<NcCheckboxRadioSwitch :checked.sync="showTabs[0]">Show search tab</NcCheckboxRadioSwitch>
+		<NcCheckboxRadioSwitch :checked.sync="showTabs[1]">Show settings tab</NcCheckboxRadioSwitch>
+		<NcCheckboxRadioSwitch :checked.sync="showTabs[2]">Show sharing tab</NcCheckboxRadioSwitch>
+		<NcAppSidebar
+			title="cat-picture.jpg"
+			subtitle="last edited 3 weeks ago">
+			<NcAppSidebarTab v-if="showTabs[0]" name="Search" id="search-tab">
+				<template #icon>
+					<Magnify :size="20" />
+				</template>
+				Search tab content
+			</NcAppSidebarTab>
+			<NcAppSidebarTab v-if="showTabs[1]" name="Settings" id="settings-tab">
+				<template #icon>
+					<Cog :size="20" />
+				</template>
+				Settings
+			</NcAppSidebarTab>
+			<NcAppSidebarTab v-if="showTabs[2]" name="Sharing" id="share-tab">
+				<template #icon>
+					<ShareVariant :size="20" />
+				</template>
+				Sharing tab content
+			</NcAppSidebarTab>
+		</NcAppSidebar>
+	</div>
+</template>
+<script>
+import Magnify from 'vue-material-design-icons/Magnify'
+import Cog from 'vue-material-design-icons/Cog'
+import ShareVariant from 'vue-material-design-icons/ShareVariant'
+
+export default {
+	components: {
+		Magnify,
+		Cog,
+		ShareVariant,
+	},
+	data() {
+		return {
+			showTabs: [true, true, false],
+		}
+	},
+}
+</script>
+```
+
+### Custom order
+
+```vue
+<template>
+	<NcAppSidebar
+		title="cat-picture.jpg"
+		subtitle="last edited 3 weeks ago">
+		<NcAppSidebarTab name="Search" id="search-tab" order="3">
+			<template #icon>
+				<Magnify :size="20" />
+			</template>
+			Search tab content
+		</NcAppSidebarTab>
+		<NcAppSidebarTab name="Settings" id="settings-tab" order="2">
+			<template #icon>
+				<Cog :size="20" />
+			</template>
+			Settings tab content
+		</NcAppSidebarTab>
+		<NcAppSidebarTab name="Sharing" id="share-tab" order="1">
+			<template #icon>
+				<ShareVariant :size="20" />
+			</template>
+			Sharing tab content
+		</NcAppSidebarTab>
+	</NcAppSidebar>
+</template>
+<script>
+import Magnify from 'vue-material-design-icons/Magnify'
+import Cog from 'vue-material-design-icons/Cog'
+import ShareVariant from 'vue-material-design-icons/ShareVariant'
+
+export default {
+	components: {
+		Magnify,
+		Cog,
+		ShareVariant,
+	},
+}
+</script>
+```
+
+### Activating tab programmatically
+
+```vue
+<template>
+	<div>
+		<NcMultiselect v-model="active" :options="['search-tab', 'settings-tab', 'share-tab']" />
+		<NcAppSidebar
+			title="cat-picture.jpg"
+			subtitle="last edited 3 weeks ago"
+			:active.sync="active">
+			<NcAppSidebarTab name="Search" id="search-tab">
+				<template #icon>
+					<Magnify :size="20" />
+				</template>
+				Search tab content
+			</NcAppSidebarTab>
+			<NcAppSidebarTab name="Settings" id="settings-tab">
+				<template #icon>
+					<Cog :size="20" />
+				</template>
+				Settings
+			</NcAppSidebarTab>
+			<NcAppSidebarTab name="Sharing" id="share-tab">
+				<template #icon>
+					<ShareVariant :size="20" />
+				</template>
+				Sharing tab content
+			</NcAppSidebarTab>
+		</NcAppSidebar>
+	</div>
+</template>
+<script>
+import Magnify from 'vue-material-design-icons/Magnify'
+import Cog from 'vue-material-design-icons/Cog'
+import ShareVariant from 'vue-material-design-icons/ShareVariant'
+
+export default {
+	components: {
+		Magnify,
+		Cog,
+		ShareVariant,
+	},
+	data() {
+		return {
+			active: 'search-tab',
+		}
+	},
+}
+</script>
+```
+
 ### Editable title
 
 ```vue