@@ -432,32 +432,53 @@ affected. If you need to shift the border/background with the icon, use Bootstra
432 432 433 433
<span class="badge badge-info small">v2.7.0+</span>
434 434 435 -
BootstrapVue includes two spinning animation options for icons: `spin` and `pulse`. Both animations
436 -
spin the icon clockwise, but pulse uses a stepped spin. A third animation called `cylon` is also
437 -
provided.
435 +
BootstrapVue includes the following built-in animations for icons:
438 436 439 -
To use the spin animation, set the `animation` prop to one of the animation names `'spin'`,
440 -
`'pulse'` or `'cylon'`.
437 +
- `'spin'` smoothly spins the icon clockwise
438 +
- `'spin-reverse'` smoothly spins the icon counter-clockwise
439 +
- `'spin-pulse'` spins the icon clockwise, but in a pulsed step style
440 +
- `'spin-reverse-pulse'` spins the icon counter-clockwise, but in a pulsed step style
441 +
- `'cylon'` slides the icon left-right
442 +
- '`cylon-vertical'` slides the icon up-down
443 + 444 +
To use the animation, set the `animation` prop to one of the animation names above.
441 445 442 446
```html
443 447
<template>
444 -
<div>
445 -
<p>Spinning animation:</p>
446 -
<b-icon icon="arrow-clockwise" animation="spin" font-scale="4"></b-icon>
447 - 448 -
<p class="mt-3">Pulsing animation:</p>
449 -
<b-icon icon="arrow-clockwise" animation="pulse" font-scale="4"></b-icon>
450 - 451 -
<p class="mt-3">Cylon animation:</p>
452 -
<b-icon icon="three-dots" animation="cylon" font-scale="4"></b-icon>
448 +
<b-row class="text-md-center">
449 +
<b-col md="6" class="mb-3">
450 +
<p>Spinning animation:</p>
451 +
<b-icon icon="arrow-clockwise" animation="spin" font-scale="4"></b-icon>
452 +
</b-col>
453 +
<b-col md="6" class="mb-3">
454 +
<p>Reverse spinning animation:</p>
455 +
<b-icon icon="arrow-counterclockwise" animation="spin-reverse" font-scale="4"></b-icon>
456 +
</b-col>
457 +
<b-col md="6" class="mb-3">
458 +
<p>Pulsing spin animation:</p>
459 +
<b-icon icon="arrow-clockwise" animation="spin-pulse" font-scale="4"></b-icon>
460 +
</b-col>
461 +
<b-col md="6" class="mb-3">
462 +
<p>Reversed pulsing spin animation:</p>
463 +
<b-icon icon="arrow-counterclockwise" animation="spin-reverse-pulse" font-scale="4"></b-icon>
464 +
</b-col>
465 +
<b-col md="6" class="mb-3">
466 +
<p>Cylon animation:</p>
467 +
<b-icon icon="three-dots" animation="cylon" font-scale="4"></b-icon>
468 +
</b-col>
469 +
<b-col md="6" class="mb-3">
470 +
<p>Vertical cylon animation:</p>
471 +
<b-icon icon="three-dots-vertical" animation="cylon-vertical" font-scale="4"></b-icon>
472 +
</b-col>
453 473
</div>
454 474
</template>
455 475 456 -
<!-- b-icon-spin-aminations.vue -->
476 +
<!-- b-icon-aminations.vue -->
457 477
```
458 478 459 -
Note with the `cylon` animation, the left-right movement extends past the icon's bounding box by
460 -
`25%`, so you may need to adjust padding or margins to compensate for your use case.
479 +
Note with the `cylon` animations, the left-right movement (or up-down movement) extends past the
480 +
icon's bounding box by `+/- 25%`, so you may need to adjust padding or margins to compensate for
481 +
your use case.
461 482 462 483
As the animations are CSS based, they are applied _after_ any SVG transforms have taken place:
463 484
@@ -468,7 +489,7 @@ As the animations are CSS based, they are applied _after_ any SVG transforms hav
468 489
</div>
469 490
</template>
470 491 471 -
<!-- b-icon-spin-aminations-transforms.vue -->
492 +
<!-- b-icon-aminations-transforms.vue -->
472 493
```
473 494 474 495
The BootstrapVue defined icon animation effects require BootstrapVue's custom CSS. The `animation`
@@ -538,20 +559,66 @@ individual icons (`<b-icon>` or `<b-icon-{icon-name}>`) to create complex icons:
538 559
</div>
539 560
</template>
540 561 541 -
<!-- icons-stacking.vue -->
562 +
<!-- b-iconsstack.vue -->
542 563
```
543 564 544 -
`<b-iconstack>` supports the same `variant`, `font-size`, and transformation props available on
545 -
individual icons.
565 +
`<b-iconstack>` supports the same `variant`, `font-size`, `animation` and transformation props
566 +
available on individual icons.
546 567 547 568
Stacked icon notes:
548 569 549 570
- Remember to set the `stacked` prop on the inner icon components
550 571
- The `font-scale` prop cannot be used on the inner icon components
551 572
- The `width` and `height` attributes cannot be applied to the inner icon components
552 573
- Stacked icons **cannot** be stacked inside another `<b-iconstack>`
553 -
- Note the animation props on the child icons will have no effect, however you _can_ use the
554 -
animation props on the `<b-iconstack>` component.
574 + 575 +
### Stacked icon animation
576 + 577 +
The `<b-iconstack>` component supports the same animations as individual icons:
578 + 579 +
```html
580 +
<template>
581 +
<div>
582 +
<b-iconstack font-scale="5" animation="spin">
583 +
<b-icon stacked icon="camera" variant="info" scale="0.75" shift-v="-0.25"></b-icon>
584 +
<b-icon stacked icon="circle-slash" variant="danger"></b-icon>
585 +
</b-iconstack>
586 +
</div>
587 +
</template>
588 + 589 +
<!-- b-iconstack-animation.vue -->
590 +
```
591 + 592 +
Individual icons within the icon stack can also be animated (except on IE 11):
593 + 594 +
```html
595 +
<template>
596 +
<div>
597 +
<b-iconstack font-scale="5" animation="cylon">
598 +
<b-icon
599 +
stacked
600 +
icon="camera"
601 +
animation="spin"
602 +
variant="info"
603 +
scale="0.75"
604 +
shift-v="-0.25"
605 +
></b-icon>
606 +
<b-icon stacked icon="circle-slash" variant="danger"></b-icon>
607 +
</b-iconstack>
608 +
</div>
609 +
</template>
610 + 611 +
<!-- b-iconstack-animation-child-icons.vue -->
612 +
```
613 + 614 +
**Notes:**
615 + 616 +
- IE 11 does not support animation of child elements within an SVG, hence only the `<b-iconstack>`
617 +
component can be animated. The child icon(s) animation will not be visible to IE 11 users.
618 +
- The BootstrapVue defined animation effects of this component is dependent on the
619 +
`prefers-reduced-motion` media query. See the
620 +
[reduced motion section of our accessibility documentation](/docs/reference/accessibility) for
621 +
additional details.
555 622 556 623
## Using in components
557 624 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