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

feat: Added placeholder avatar

Browse Source
This commit is contained in:
Ilya Artamonov
2022-09-07 12:51:48 +03:00
parent 68440bac7f
commit 1e240f0af4
5 changed files with 136 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

90
docs/components/avatar/avatar.md
View File

@@ -6,6 +6,8 @@ import AvatarSizeExample from './examples/AvatarSizeExample.vue'
import AvatarDotIndicatorPositionExample from './examples/AvatarDotIndicatorPositionExample.vue'
import AvatarAlternativeTextExample from './examples/AvatarAlternativeTextExample.vue'
import StackedAvatarsExample from './examples/StackedAvatarsExample.vue'
import AvatarPlaceholderExample from './examples/AvatarPlaceholderExample.vue'
import AvatarPlaceholderInitialsExample from './examples/AvatarPlaceholderInitialsExample.vue'
</script>
# Avatar
@@ -46,6 +48,7 @@ import { Avatar } from 'flowbite-vue'
```
## Dot indicator
Use a dot element relative to the avatar component as an indicator for the user (eg. online or offline status).
<AvatarDotIndicatorExample />
@@ -63,27 +66,9 @@ import { Avatar } from 'flowbite-vue'
</template>
```
## Sizes
<AvatarSizeExample />
```vue
<script setup>
import { Avatar } from 'flowbite-vue'
</script>
<template>
<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>
</template>
```
## Dot indicator position
<AvatarDotIndicatorPositionExample />
```vue
@@ -103,11 +88,44 @@ import { Avatar } from 'flowbite-vue'
</div>
</template>
```
## Sizes
Choose from multiple sizing options for the avatar component from this example.
<AvatarSizeExample />
```vue
<script setup>
import { Avatar } from 'flowbite-vue'
</script>
<template>
<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>
</template>
```
## Alternative text
<AvatarAlternativeTextExample />
```vue
<script setup>
import { Avatar } from 'flowbite-vue'
</script>
<template>
<Avatar status="online" alt="Alternative text" img="https://flowbite.com/docs/images/people/profile-picture-5.jpg"/>
</template>
```
## Stacked avatars
Use this example if you want to stack a group of users by overlapping the avatar components.
<StackedAvatarsExample />
@@ -133,3 +151,37 @@ import { StackedAvatars, Avatar, StackedAvatarsCounter } from 'flowbite-vue'
</StackedAvatars>
</template>
```
## Placeholder icon
<AvatarPlaceholderExample />
```vue
<script setup>
import { Avatar } from 'flowbite-vue'
</script>
<template>
<div class="flex">
<Avatar class="mr-2.5" />
<Avatar rounded />
</div>
</template>
```
## Placeholder initials
<AvatarPlaceholderInitialsExample />
```vue
<script setup>
import { Avatar } from 'flowbite-vue'
</script>
<template>
<div class="flex">
<Avatar initials="JD" class="mr-2.5" />
<Avatar initials="JD" rounded />
</div>
</template>
```

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

@@ -0,0 +1,9 @@
<template>
<div class="vp-raw flex">
<Avatar class="mr-2.5" />
<Avatar rounded />
</div>
</template>
<script setup>
import { Avatar } from '../../../../src/index'
</script>

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

@@ -0,0 +1,9 @@
<template>
<div class="vp-raw flex">
<Avatar initials="JD" class="mr-2.5" />
<Avatar initials="JD" rounded />
</div>
</template>
<script setup>
import { Avatar } from '../../../../src/index'
</script>