feat: add avatar-group component

saadeghi · May 21, 2021 · b5f37bc · b5f37bc
1 parent 19b402d
commit b5f37bc
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 0 deletions.
diff --git a/src/components/styled/avatar.css b/src/components/styled/avatar.css
@@ -16,3 +16,9 @@
     }
   }
 }
+.avatar-group{
+  @apply flex overflow-hidden;
+  .avatar{
+    @apply rounded-full border-4 border-base-100 overflow-hidden;
+  }
+}
diff --git a/src/docs/pages/components/avatar.vue b/src/docs/pages/components/avatar.vue
@@ -15,6 +15,46 @@
       </Avatar>
     </Wrapper>
 
+    <Wrapper title="avatar-group" classes="flex items-center space-x-8 flex-wrap">
+      <div class="avatar-group -space-x-6">
+        <Avatar classes="w-16 h-16">
+          <img src="http://daisyui.com/[email protected]">
+        </Avatar>
+        <Avatar classes="w-16 h-16">
+          <img src="http://daisyui.com/[email protected]">
+        </Avatar>
+        <Avatar classes="w-16 h-16">
+          <img src="http://daisyui.com/[email protected]">
+        </Avatar>
+        <Avatar classes="w-16 h-16">
+          <img src="http://daisyui.com/[email protected]">
+        </Avatar>
+      </div>
+    </Wrapper>
+
+    <Wrapper title="avatar-group" classes="flex items-center space-x-8 flex-wrap">
+      <div class="avatar-group -space-x-5">
+        <Avatar classes="w-10 h-10">
+          <img src="http://daisyui.com/[email protected]">
+        </Avatar>
+        <Avatar classes="w-10 h-10">
+          <img src="http://daisyui.com/[email protected]">
+        </Avatar>
+        <Avatar classes="w-10 h-10">
+          <img src="http://daisyui.com/[email protected]">
+        </Avatar>
+        <Avatar classes="w-10 h-10">
+          <img src="http://daisyui.com/[email protected]">
+        </Avatar>
+        <div class="avatar placeholder">
+          <div class="bg-neutral-focus text-neutral-content rounded-full w-10 h-10">
+            <span>+99</span>
+          </div>
+        </div>
+      </div>
+    </Wrapper>
+
+
     <Wrapper title="avatar circle" classes="flex items-center space-x-8 flex-wrap">
       <Avatar classes="mb-8 rounded-full w-32 h-32">
         <img src="https://i.pravatar.cc/500?img=32" />