@@ -61,8 +61,7 @@ styling on the content.
61 61 62 62
Use the `src` prop to specify a URL of an image to use as the avatar content. The image should have
63 63
an aspect ratio of `1:1` (meaning the width and height should be equal), otherwise image aspect
64 -
distortion will occur. The image will be scaled up or down to fit within the avatar's bounding box,
65 -
and will be sized to show the avatar's [variant background](#variants) around the edge.
64 +
distortion will occur. The image will be scaled up or down to fit within the avatar's bounding box.
66 65 67 66
```html
68 67
<template>
@@ -84,8 +83,9 @@ and will be sized to show the avatar's [variant background](#variants) around th
84 83
fallback to the value of the `icon` or `text` props. If neither the `icon` or `text` props are
85 84
provided, then the default avatar icon will be shown. Also, when the image fails to load, the
86 85
`img-error` event will be emitted.
87 -
- <span class="badge badge-secondary">2.12.0+</span> Setting the [variant prop](#variants) to an
88 -
empty string will remove the visible background border around the image.
86 +
- [Variant colors](#variants) when using images not normally visible, unless the image fails load.
87 +
The variant will affect the focus styling when the image avatar is also an
88 +
[actionalble avatar](#actionalble-avatars).
89 89 90 90
### Icon content
91 91
@@ -270,6 +270,8 @@ Easily create avatars that respond to clicks, or avatars that change the URL/rou
270 270
Actionable avatars will appear in the document tab sequence, and are accessible for both screen
271 271
reader and keyboard-only users.
272 272 273 +
Image avatars, when actionalble, employ a basic scale transform on the image when hovered.
274 + 273 275
### Button
274 276 275 277
Want to trigger the opening of a modal or trigger an action? Set the `button` prop to instruct
@@ -278,10 +280,20 @@ the `click` event whenever clicked.
278 280 279 281
```html
280 282
<template>
281 -
<div>
282 -
<b-avatar button @click="onClick" variant="primary" text="FF" class="align-baseline"></b-avatar>
283 -
Button Avatar
284 -
</div>
283 +
<b-list-group>
284 +
<b-list-group-item>
285 +
<b-avatar button @click="onClick" variant="primary" text="FF" class="align-baseline"></b-avatar>
286 +
Button Text Avatar
287 +
</b-list-group-item>
288 +
<b-list-group-item>
289 +
<b-avatar button @click="onClick" src="https://placekitten.com/300/300"></b-avatar>
290 +
Button Image Avatar
291 +
</b-list-group-item>
292 +
<b-list-group-item>
293 +
<b-avatar button @click="onClick" icon="star-fill" class="align-center"></b-avatar>
294 +
Button Icon Avatar
295 +
</b-list-group-item>
296 +
</b-list-group>
285 297
</template>
286 298 287 299
<script>
@@ -315,10 +327,20 @@ The `to` prop can either be a string path, or a `Location` object. The `to` prop
315 327 316 328
```html
317 329
<template>
318 -
<div>
319 -
<b-avatar href="#foobar" variant="info" src="https://placekitten.com/300/300"></b-avatar>
320 -
Link Avatar
321 -
</div>
330 +
<b-list-group>
331 +
<b-list-group-item>
332 +
<b-avatar href="#foo" variant="primary" text="FF" class="align-baseline"></b-avatar>
333 +
Link Text Avatar
334 +
</b-list-group-item>
335 +
<b-list-group-item>
336 +
<b-avatar href="#bar" src="https://placekitten.com/300/300"></b-avatar>
337 +
Link Image Avatar
338 +
</b-list-group-item>
339 +
<b-list-group-item>
340 +
<b-avatar href="#baz" icon="star-fill" class="align-center"></b-avatar>
341 +
Link Icon Avatar
342 +
</b-list-group-item>
343 +
</b-list-group>
322 344
</template>
323 345 324 346
<!-- b-avatar-href.vue -->
@@ -411,6 +433,121 @@ inward, while negative values will move the badge outward.
411 433
<!-- b-avatar-badge-offset.vue -->
412 434
```
413 435 436 +
## Avatar groups
437 + 438 +
<span class="badge badge-info small">v2.14.0+</span>
439 + 440 +
Group multiple avatars together by wrapping them in a `<b-avatar-group>` component:
441 + 442 +
```html
443 +
<template>
444 +
<div>
445 +
<b-avatar-group size="60px">
446 +
<b-avatar></b-avatar>
447 +
<b-avatar text="BV" variant="primary"></b-avatar>
448 +
<b-avatar src="https://placekitten.com/300/300" variant="info"></b-avatar>
449 +
<b-avatar text="OK" variant="danger"></b-avatar>
450 +
<b-avatar variant="warning"></b-avatar>
451 +
<b-avatar src="https://placekitten.com/320/320" variant="dark"></b-avatar>
452 +
<b-avatar icon="music-note" variant="success"></b-avatar>
453 +
</b-avatar-group>
454 +
</div>
455 +
</template>
456 + 457 +
<!-- b-avatar-group.vue -->
458 +
```
459 + 460 +
**Notes:**
461 + 462 +
- The `variant`, `square` and `rounded` props on `<b-avatar-group>` will take precedence over the
463 +
respective props on individual avatars.
464 + 465 +
### Group size
466 + 467 +
To size the avatars, use the prop `size` on `<b-avatar-group>`. The `size` prop accepts the same
468 +
type of values as the `size` prop on `<b-avatar>`. Note that the `size` prop will be ignored on
469 +
individual avatars when they are placed inside a `<b-avatar-group>`.
470 + 471 +
```html
472 +
<template>
473 +
<div>
474 +
<b-avatar-group size="5rem">
475 +
<b-avatar></b-avatar>
476 +
<b-avatar></b-avatar>
477 +
<b-avatar></b-avatar>
478 +
<b-avatar></b-avatar>
479 +
<b-avatar></b-avatar>
480 +
</b-avatar-group>
481 +
</div>
482 +
</template>
483 + 484 +
<!-- b-avatar-group-size.vue -->
485 +
```
486 + 487 +
### Group variant
488 + 489 +
Use the `variant` prop to color all child avatars in the `<b-avatar-group>`. Note that the `variant`
490 +
prop, when set, will override the the `variant` specified on individual avatars.
491 + 492 +
```html
493 +
<template>
494 +
<div>
495 +
<b-avatar-group variant="success">
496 +
<b-avatar></b-avatar>
497 +
<b-avatar variant="info"></b-avatar>
498 +
<b-avatar></b-avatar>
499 +
<b-avatar></b-avatar>
500 +
<b-avatar></b-avatar>
501 +
</b-avatar-group>
502 +
</div>
503 +
</template>
504 + 505 +
<!-- b-avatar-group-variant.vue -->
506 +
```
507 + 508 +
### Group rounding
509 + 510 +
Similar to the `variant` prop, the `<b-avatar-group>` props `square` and `rounded` take precedence
511 +
over the respective props on individual child avatars.
512 + 513 +
```html
514 +
<template>
515 +
<div>
516 +
<b-avatar-group rounded="lg">
517 +
<b-avatar></b-avatar>
518 +
<b-avatar></b-avatar>
519 +
<b-avatar></b-avatar>
520 +
<b-avatar></b-avatar>
521 +
<b-avatar></b-avatar>
522 +
</b-avatar-group>
523 +
</div>
524 +
</template>
525 + 526 +
<!-- b-avatar-group-rounded.vue -->
527 +
```
528 + 529 +
### Group overlap
530 + 531 +
By default child avatars inside a `<b-avatar-group>` will overlap by a factor of `0.3` (relative to
532 +
the size of the avatar). You can control the overlap amount by setting the `overlap` prop to a value
533 +
between `0` and `1`, where `0` means no overlap and `1` means 100% overlap.
534 + 535 +
```html
536 +
<template>
537 +
<div>
538 +
<b-avatar-group overlap="0.65">
539 +
<b-avatar></b-avatar>
540 +
<b-avatar></b-avatar>
541 +
<b-avatar></b-avatar>
542 +
<b-avatar></b-avatar>
543 +
<b-avatar></b-avatar>
544 +
</b-avatar-group>
545 +
</div>
546 +
</template>
547 + 548 +
<!-- b-avatar-group-overlap.vue -->
549 +
```
550 + 414 551
## Accessibility
415 552 416 553
Use the `aria-label` prop to provide an accessible, screen reader friendly, label for your avatar.
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4