fixup! docs(NcActions): children limitations

nextcloud-libraries · Jan 30, 2024 · 08cbc01 · 08cbc01
1 parent 1cafa86
commit 08cbc01
Showing 1 changed file with 31 additions and 19 deletions.
diff --git a/src/components/NcActions/NcActions.vue b/src/components/NcActions/NcActions.vue
@@ -835,7 +835,12 @@ Although it works when actions are not direct children but wrapped in custom com
 			</td>
 			<td>
 				<NcActions>
-					<NcActionButton icon="icon-user-white">Button</NcActionButton>
+					<NcActionButton>
+						<template #icon>
+							<Account :size="20" />
+						</template>
+						Button
+					</NcActionButton>
 				</NcActions>
 			</td>
 		</tr>
@@ -845,18 +850,17 @@ Although it works when actions are not direct children but wrapped in custom com
 		<tr>
 			<td>
 				<NcActions :inline="2">
-					<MyUserActionButton />
-					<MyUserActionButton />
-					<MyUserActionButton />
-					<MyUserActionButton />
+					<MyUserActionButton v-for="i in 4" />
 				</NcActions>
 			</td>
 			<td>
-				<NcActions inline="2">
-					<NcActionButton icon="icon-user-white">Button</NcActionButton>
-					<NcActionButton icon="icon-user-white">Button</NcActionButton>
-					<NcActionButton icon="icon-user-white">Button</NcActionButton>
-					<NcActionButton icon="icon-user-white">Button</NcActionButton>
+				<NcActions :inline="2">
+					<NcActionButton v-for="i in 4">
+						<template #icon>
+							<Account :size="20" />
+						</template>
+						Button
+					</NcActionButton>
 				</NcActions>
 			</td>
 		</tr>
@@ -871,31 +875,39 @@ Although it works when actions are not direct children but wrapped in custom com
 			</td>
 			<td>
 				<NcActions>
-					<NcActionButton icon="icon-user-white">Button</NcActionButton>
-					<NcActionButton icon="icon-user-white">Button</NcActionButton>
-					<NcActionButton icon="icon-user-white">Button</NcActionButton>
-					<NcActionButton icon="icon-user-white">Button</NcActionButton>
+					<NcActionButton v-for="i in 4">
+						<template #icon>
+							<Account :size="20" />
+						</template>
+						Button
+					</NcActionButton>
 				</NcActions>
 			</td>
 		</tr>
 	</table>
 </template>
 
 <script>
+import Account from 'vue-material-design-icons/Account.vue'
+
 export default {
 	components: {
+		Account,
+
 		MyUserActionButton: {
 			name: 'MyUserActionButton',
-			render: (h) => h('NcActionButton', { props: { icon: 'icon-user-white' } }, 'Button'),
+			components: { Account },
+			render: (h) => h('NcActionButton', ['Button', h('Account', { props: { size: 20 } })]),
 		},
 
 		MyActionsList: {
 			name: 'MyActionsList',
+			components: { Account },
 			render: (h) => h('div', [
-				h('NcActionButton', { props: { icon: 'icon-user-white' } }, 'Button'),
-				h('NcActionButton', { props: { icon: 'icon-user-white' } }, 'Button'),
-				h('NcActionButton', { props: { icon: 'icon-user-white' } }, 'Button'),
-				h('NcActionButton', { props: { icon: 'icon-user-white' } }, 'Button'),
+				h('NcActionButton', ['Button', h('Account', { props: { size: 20 } })]),
+				h('NcActionButton', ['Button', h('Account', { props: { size: 20 } })]),
+				h('NcActionButton', ['Button', h('Account', { props: { size: 20 } })]),
+				h('NcActionButton', ['Button', h('Account', { props: { size: 20 } })]),
 			]),
 		}
 	}