|
1 | 1 | # Avatar |
2 | 2 |
|
3 | | -> Avatars are typically used to display a user profile as a picture, an icon, or short text. |
4 | | -> `<b-avatar>` provides several props for customizing its appearance such as color variant and |
5 | | -> roundedness, and optionally supports acting as a button, link or |
| 3 | +> Avatars are a custom BootstrapVue component, and are typically used to display a user profile as a |
| 4 | +> picture, an icon, or short text. `<b-avatar>` provides several props for customizing its appearance |
| 5 | +> such as color variant and roundedness, and optionally supports acting as a button, link or |
6 | 6 | > [router link](/docs/reference/router-links). |
7 | 7 |
|
8 | 8 | ## Overview |
|
24 | 24 |
|
25 | 25 | ## Avatar types |
26 | 26 |
|
27 | | -### Icon |
| 27 | +The avatar content can be either a short text string, an iamge, or an icon. Avatar content defaults to |
| 28 | +the [`'person-fill'` icon](/docs/icons) when no other content is specified. |
| 29 | + |
| 30 | +### Text content |
| 31 | + |
| 32 | +TBD |
| 33 | + |
| 34 | +### Image content |
28 | 35 |
|
29 | 36 | TBD |
30 | 37 |
|
31 | | -### Image |
| 38 | +### Icon content |
32 | 39 |
|
33 | 40 | TBD |
34 | 41 |
|
35 | | -### Text |
| 42 | +### Custom content |
| 43 | + |
| 44 | +Use the `default` slot to render custom content in the avatar, for finer grained control of |
| 45 | +its appearance. |
36 | 46 |
|
37 | 47 | TBD |
38 | 48 |
|
| 49 | +**Note:** the default slot takes precedence over the `text`, `src` and `icon` props. |
| 50 | + |
39 | 51 | ## Styling |
40 | 52 |
|
41 | 53 | ### Variants |
42 | 54 |
|
| 55 | +Use the `variant` prop to specify on of bootstrap them variant colors: |
| 56 | + |
43 | 57 | TBD |
44 | 58 |
|
45 | 59 | ### Sizing |
46 | 60 |
|
47 | 61 | TBD |
48 | 62 |
|
49 | | -### Rounding and square |
| 63 | +### Square |
50 | 64 |
|
51 | 65 | TBD |
52 | 66 |
|
| 67 | +```html |
| 68 | +<template> |
| 69 | + <div> |
| 70 | + <b-avatar square></b-avatar> |
| 71 | + </div> |
| 72 | +</template> |
| 73 | + |
| 74 | +<!-- b-avatar-square.vue --> |
| 75 | +``` |
| 76 | + |
| 77 | +### Rounding |
| 78 | + |
| 79 | +TBD |
| 80 | + |
| 81 | +```html |
| 82 | +<template> |
| 83 | + <div style="font-size: 3rem;"> |
| 84 | + <b-avatar rounded="sm"></b-avatar> |
| 85 | + <b-avatar rounded></b-avatar> |
| 86 | + <b-avatar rounded="lg"></b-avatar> |
| 87 | + </div> |
| 88 | +</template> |
| 89 | + |
| 90 | +<!-- b-avatar-rounding.vue --> |
| 91 | +``` |
| 92 | + |
53 | 93 | ## Actionalble avatars |
54 | 94 |
|
| 95 | +Easily create avatars that respond to clicks, or change the URL/route. |
| 96 | + |
55 | 97 | ### Button |
56 | 98 |
|
57 | 99 | TBD |
58 | 100 |
|
59 | 101 | ### Link |
60 | 102 |
|
61 | 103 | TBD |
| 104 | + |
| 105 | +## Accessibility |
| 106 | + |
| 107 | +Use the `aria-label` prop to provide an accessible, screen reader friendly, label for your avatar. |
| 108 | +The default `aria-label` is `'avatar'`. |
| 109 | + |
| 110 | +## Implementation notes |
| 111 | + |
| 112 | +TBD |
0 commit comments