Add AppSidebarTab material design example

Signed-off-by: Raimund Schlüßler <raimund.schluessler@mailbox.org>
nextcloud-libraries · May 8, 2021 · a3bc8b9 · a3bc8b9
1 parent abb7bab
commit a3bc8b9
Showing 1 changed file with 22 additions and 10 deletions.
diff --git a/src/components/AppSidebar/AppSidebar.vue b/src/components/AppSidebar/AppSidebar.vue
@@ -30,16 +30,28 @@ include a standard-header like it's used by the files app.
 ### Standard usage
 
 ```vue
-<AppSidebar
-	title="cat-picture.jpg"
-	subtitle="last edited 3 weeks ago">
-	<AppSidebarTab icon="icon-settings" name="Settings" id="settings">
-		Settings tab content
-	</AppSidebarTab>
-	<AppSidebarTab icon="icon-share" name="Sharing" id="share">
-		Sharing tab content
-	</AppSidebarTab>
-</AppSidebar>
+<template>
+	<AppSidebar
+		title="cat-picture.jpg"
+		subtitle="last edited 3 weeks ago">
+		<AppSidebarTab icon="icon-settings" name="Settings" id="settings">
+			<Cog slot="icon" :size="24" decorative />
+			Settings tab content
+		</AppSidebarTab>
+		<AppSidebarTab icon="icon-share" name="Sharing" id="share">
+			Sharing tab content
+		</AppSidebarTab>
+	</AppSidebar>
+</template>
+<script>
+	import Cog from 'vue-material-design-icons/Cog.vue'
+
+	export default {
+		components: {
+			Cog,
+		},
+	}
+</script>
 ```
 
 ### Editable title