[material-ui][Avatar] Add AvatarGroup spacing demo (#44209)

mui · Oct 29, 2024 · d275037 · d275037
1 parent 9b9f562
commit d275037
Show file tree

Hide file tree

Showing 4 changed files with 73 additions and 0 deletions.
diff --git a/docs/data/material/components/avatars/Spacing.js b/docs/data/material/components/avatars/Spacing.js
@@ -0,0 +1,26 @@
+import * as React from 'react';
+import Avatar from '@mui/material/Avatar';
+import AvatarGroup from '@mui/material/AvatarGroup';
+import Stack from '@mui/material/Stack';
+
+export default function Spacing() {
+  return (
+    <Stack spacing={4}>
+      <AvatarGroup spacing="medium">
+        <Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" />
+        <Avatar alt="Travis Howard" src="/static/images/avatar/2.jpg" />
+        <Avatar alt="Cindy Baker" src="/static/images/avatar/3.jpg" />
+      </AvatarGroup>
+      <AvatarGroup spacing="small">
+        <Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" />
+        <Avatar alt="Travis Howard" src="/static/images/avatar/2.jpg" />
+        <Avatar alt="Cindy Baker" src="/static/images/avatar/3.jpg" />
+      </AvatarGroup>
+      <AvatarGroup spacing={24}>
+        <Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" />
+        <Avatar alt="Travis Howard" src="/static/images/avatar/2.jpg" />
+        <Avatar alt="Cindy Baker" src="/static/images/avatar/3.jpg" />
+      </AvatarGroup>
+    </Stack>
+  );
+}
diff --git a/docs/data/material/components/avatars/Spacing.tsx b/docs/data/material/components/avatars/Spacing.tsx
@@ -0,0 +1,26 @@
+import * as React from 'react';
+import Avatar from '@mui/material/Avatar';
+import AvatarGroup from '@mui/material/AvatarGroup';
+import Stack from '@mui/material/Stack';
+
+export default function Spacing() {
+  return (
+    <Stack spacing={4}>
+      <AvatarGroup spacing="medium">
+        <Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" />
+        <Avatar alt="Travis Howard" src="/static/images/avatar/2.jpg" />
+        <Avatar alt="Cindy Baker" src="/static/images/avatar/3.jpg" />
+      </AvatarGroup>
+      <AvatarGroup spacing="small">
+        <Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" />
+        <Avatar alt="Travis Howard" src="/static/images/avatar/2.jpg" />
+        <Avatar alt="Cindy Baker" src="/static/images/avatar/3.jpg" />
+      </AvatarGroup>
+      <AvatarGroup spacing={24}>
+        <Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" />
+        <Avatar alt="Travis Howard" src="/static/images/avatar/2.jpg" />
+        <Avatar alt="Cindy Baker" src="/static/images/avatar/3.jpg" />
+      </AvatarGroup>
+    </Stack>
+  );
+}
diff --git a/docs/data/material/components/avatars/Spacing.tsx.preview b/docs/data/material/components/avatars/Spacing.tsx.preview
@@ -0,0 +1,15 @@
+<AvatarGroup spacing="medium">
+  <Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" />
+  <Avatar alt="Travis Howard" src="/static/images/avatar/2.jpg" />
+  <Avatar alt="Cindy Baker" src="/static/images/avatar/3.jpg" />
+</AvatarGroup>
+<AvatarGroup spacing="small">
+  <Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" />
+  <Avatar alt="Travis Howard" src="/static/images/avatar/2.jpg" />
+  <Avatar alt="Cindy Baker" src="/static/images/avatar/3.jpg" />
+</AvatarGroup>
+<AvatarGroup spacing={24}>
+  <Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" />
+  <Avatar alt="Travis Howard" src="/static/images/avatar/2.jpg" />
+  <Avatar alt="Cindy Baker" src="/static/images/avatar/3.jpg" />
+</AvatarGroup>
diff --git a/docs/data/material/components/avatars/avatars.md b/docs/data/material/components/avatars/avatars.md
@@ -77,6 +77,12 @@ The `renderSurplus` prop is useful when you need to render the surplus based on
 
 {{"demo": "CustomSurplusAvatars.js"}}
 
+### Spacing
+
+You can change the spacing between avatars using the `spacing` prop. You can use one of the presets (`"medium"`, the default, or `"small"`) or set a custom numeric value.
+
+{{"demo": "Spacing.js"}}
+
 ## With badge
 
 {{"demo": "BadgeAvatars.js"}}