jaro/flowbite-vue
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: Implemented avatar component

Browse Source
This commit is contained in:
Ilya Sosidka
2022-09-06 13:15:06 +03:00
parent d7daf5b4d9
commit a3e93e1ef1
10 changed files with 238 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
docs/components/avatar/examples/AvatarBorderedExample.vue Normal file
View File

@@ -0,0 +1,9 @@
<template>
<div class="vp-raw flex">
<Avatar status="online" bordered img="https://flowbite.com/docs/images/people/profile-picture-5.jpg" class="mr-2.5" />
<Avatar status="online" bordered rounded img="https://flowbite.com/docs/images/people/profile-picture-5.jpg" class="mr-2.5" />
</div>
</template>
<script setup>
import { Avatar } from '../../../../src/index'
</script>

11
docs/components/avatar/examples/AvatarDotIndicatorExample.vue Normal file
View File

@@ -0,0 +1,11 @@
<template>
<div class="vp-raw flex">
<Avatar img="https://flowbite.com/docs/images/people/profile-picture-5.jpg" class="mr-2.5" status="online" />
<Avatar img="https://flowbite.com/docs/images/people/profile-picture-5.jpg" class="mr-2.5" status="busy" />
<Avatar img="https://flowbite.com/docs/images/people/profile-picture-5.jpg" class="mr-2.5" status="away" />
<Avatar img="https://flowbite.com/docs/images/people/profile-picture-5.jpg" class="mr-2.5" status="online" />
</div>
</template>
<script setup>
import { Avatar } from '../../../../src/index'
</script>

15
docs/components/avatar/examples/AvatarDotIndicatorPositionExample.vue Normal file
View File

@@ -0,0 +1,15 @@
<template>
<div class="vp-raw flex">
<Avatar status="online" status-position="top-left" img="https://flowbite.com/docs/images/people/profile-picture-5.jpg" class="mr-2.5" />
<Avatar status="online" status-position="top-left" rounded img="https://flowbite.com/docs/images/people/profile-picture-5.jpg" class="mr-2.5" />
<Avatar status="online" status-position="top-right" img="https://flowbite.com/docs/images/people/profile-picture-5.jpg" class="mr-2.5" />
<Avatar status="online" status-position="top-right" rounded img="https://flowbite.com/docs/images/people/profile-picture-5.jpg" class="mr-2.5" />
<Avatar status="online" status-position="bottom-left" img="https://flowbite.com/docs/images/people/profile-picture-5.jpg" class="mr-2.5" />
<Avatar status="online" status-position="bottom-left" rounded img="https://flowbite.com/docs/images/people/profile-picture-5.jpg" class="mr-2.5" />
<Avatar status="online" status-position="bottom-right" img="https://flowbite.com/docs/images/people/profile-picture-5.jpg" class="mr-2.5" />
<Avatar status="online" status-position="bottom-right" rounded img="https://flowbite.com/docs/images/people/profile-picture-5.jpg" class="mr-2.5" />
</div>
</template>
<script setup>
import { Avatar } from '../../../../src/index'
</script>

5
docs/components/avatar/examples/AvatarExample.vue
View File

@@ -1,6 +1,7 @@
<template>
<div class="vp-raw flex flex-col">
<Avatar></Avatar>
<div class="vp-raw flex">
<Avatar status="online" img="https://flowbite.com/docs/images/people/profile-picture-5.jpg" class="mr-2.5" />
<Avatar status="online" img="https://flowbite.com/docs/images/people/profile-picture-5.jpg" rounded />
</div>
</template>
<script setup>

14
docs/components/avatar/examples/AvatarSizeExample.vue Normal file
View File

@@ -0,0 +1,14 @@
<template>
<div class="vp-raw">
<div class="flex items-center">
<Avatar size="xs" img="https://flowbite.com/docs/images/people/profile-picture-5.jpg" class="mr-2.5" />
<Avatar size="sm" img="https://flowbite.com/docs/images/people/profile-picture-5.jpg" class="mr-2.5" />
<Avatar size="md" img="https://flowbite.com/docs/images/people/profile-picture-5.jpg" class="mr-2.5" />
<Avatar size="lg" img="https://flowbite.com/docs/images/people/profile-picture-5.jpg" class="mr-2.5" />
<Avatar size="xl" img="https://flowbite.com/docs/images/people/profile-picture-5.jpg" class="mr-2.5" />
</div>
</div>
</template>
<script setup>
import { Avatar } from '../../../../src/index'
</script>