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

2
docs/.vitepress/config.ts
View File

@@ -35,6 +35,7 @@ function buildSidebar() {
function getComponents() {
return [
{ text: 'Alert', link: '/components/alert/alert.md' },
{ text: 'Avatar', link: 'components/avatar/avatar.md' },
{ text: 'Button', link: '/components/button/button.md' },
{ text: 'Button Group', link: '/components/buttonGroup/buttonGroup.md' },
{ text: 'Dropdown', link: '/components/dropdown/dropdown.md' },
@@ -44,7 +45,6 @@ function getComponents() {
{ text: 'Toast', link: 'components/toast/toast.md' },
{ text: '- Accordion', link: 'components/accordion/accordion.md' },
{ text: '- Avatar', link: 'components/avatar/avatar.md' },
{ text: '- Badge', link: 'components/badge/badge.md' },
{ text: '- Breadcrumb', link: 'components/breadcrumb/breadcrumb.md' },
{ text: '- Card', link: 'components/card/card.md' },

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

@@ -1,15 +1,102 @@
<script setup>
import AvatarExample from './examples/AvatarExample.vue'
import AvatarBorderedExample from './examples/AvatarBorderedExample.vue'
import AvatarDotIndicatorExample from './examples/AvatarDotIndicatorExample.vue'
import AvatarSizeExample from './examples/AvatarSizeExample.vue'
import AvatarDotIndicatorPositionExample from './examples/AvatarDotIndicatorPositionExample.vue'
</script>
# Avatar
Use the avatar component to show a visual representation of a user profile using an image element or SVG object based on multiple styles and sizes
## Default avatar
Use this example to create a circle and rounded avatar on an image element.
<AvatarExample />
```vue
<script setup>
import { Avatar } from 'flowbite-vue'
</script>
<template>
<Avatar></Avatar>
<div class="flex">
<Avatar status="online" img="https://flowbite.com/docs/images/people/profile-picture-5.jpg" />
<Avatar status="online" rounded img="https://flowbite.com/docs/images/people/profile-picture-5.jpg" />
</div>
</template>
```
<AvatarExample />
## Bordered
Use this example to create a circle and rounded avatar on an image element.
<AvatarBorderedExample />
```vue
<script setup>
import { Avatar } from 'flowbite-vue'
</script>
<template>
<div class="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>
```
## Dot indicator
<AvatarDotIndicatorExample />
```vue
<script setup>
import { Avatar } from 'flowbite-vue'
</script>
<template>
<div class="flex">
<Avatar status="online" img="https://flowbite.com/docs/images/people/profile-picture-5.jpg" class="mr-2.5" />
<Avatar status="busy" img="https://flowbite.com/docs/images/people/profile-picture-5.jpg" class="mr-2.5" />
<Avatar status="away" img="https://flowbite.com/docs/images/people/profile-picture-5.jpg" class="mr-2.5" />
<Avatar status="offline" img="https://flowbite.com/docs/images/people/profile-picture-5.jpg" class="mr-2.5" />
</div>
</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
<script setup>
import { Avatar } from 'flowbite-vue'
</script>
<template>
<div class="flex items-center">
<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>
```

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>