@@ -127,7 +127,7 @@ Vue.use(BootstrapVueIcons)
127 127
BootstrapVue icons SCSS/CSS does not depend on any Bootstrap SASS variables, mixins, functions or
128 128
CSS classes (other than the Bootstrap `text-{variant}` text color utility classes, if using the
129 129
`variant` prop). Please note that the icons CSS is _also_ included in the main BootstrapVue SCSS/CSS
130 -
files.
130 +
files. Animations effects require BootstrapVue custom SCSS/CSS.
131 131 132 132
### Browser
133 133
@@ -439,18 +439,32 @@ affected. If you need to shift the border/background with the icon, use Bootstra
439 439 440 440
BootstrapVue includes the following built-in animations for icons:
441 441 442 +
- `'cylon'` slides the icon left-right
443 +
- `'cylon-vertical'` slides the icon up-down
444 +
- `'fade'` fades the icon in and out <span class="badge badge-info small">2.12.0+</span>
442 445
- `'spin'` smoothly spins the icon clockwise
443 446
- `'spin-reverse'` smoothly spins the icon counter-clockwise
444 447
- `'spin-pulse'` spins the icon clockwise, but in a pulsed step style
445 448
- `'spin-reverse-pulse'` spins the icon counter-clockwise, but in a pulsed step style
446 -
- `'cylon'` slides the icon left-right
447 -
- '`cylon-vertical'` slides the icon up-down
449 +
- `'throb'` scales the icon in and out <span class="badge badge-info small">2.12.0+</span>
448 450 449 451
To use the animation, set the `animation` prop to one of the animation names above.
450 452 451 453
```html
452 454
<template>
453 455
<b-row class="text-md-center">
456 +
<b-col md="6" class="mb-3">
457 +
<p>Cylon animation:</p>
458 +
<b-icon icon="three-dots" animation="cylon" font-scale="4"></b-icon>
459 +
</b-col>
460 +
<b-col md="6" class="mb-3">
461 +
<p>Vertical cylon animation:</p>
462 +
<b-icon icon="three-dots-vertical" animation="cylon-vertical" font-scale="4"></b-icon>
463 +
</b-col>
464 +
<b-col md="6" class="mb-3">
465 +
<p>Fade animation:</p>
466 +
<b-icon icon="star-fill" animation="fade" font-scale="4"></b-icon>
467 +
</b-col>
454 468
<b-col md="6" class="mb-3">
455 469
<p>Spinning animation:</p>
456 470
<b-icon icon="arrow-clockwise" animation="spin" font-scale="4"></b-icon>
@@ -468,23 +482,15 @@ To use the animation, set the `animation` prop to one of the animation names abo
468 482
<b-icon icon="arrow-counterclockwise" animation="spin-reverse-pulse" font-scale="4"></b-icon>
469 483
</b-col>
470 484
<b-col md="6" class="mb-3">
471 -
<p>Cylon animation:</p>
472 -
<b-icon icon="three-dots" animation="cylon" font-scale="4"></b-icon>
473 -
</b-col>
474 -
<b-col md="6" class="mb-3">
475 -
<p>Vertical cylon animation:</p>
476 -
<b-icon icon="three-dots-vertical" animation="cylon-vertical" font-scale="4"></b-icon>
485 +
<p>Throb animation:</p>
486 +
<b-icon icon="circle-fill" animation="throb" font-scale="4"></b-icon>
477 487
</b-col>
478 488
</div>
479 489
</template>
480 490 481 491
<!-- b-icon-aminations.vue -->
482 492
```
483 493 484 -
Note with the `cylon` animations, the left-right movement (or up-down movement) extends past the
485 -
icon's bounding box by `+/- 25%`, so you may need to adjust padding or margins to compensate for
486 -
your use case.
487 - 488 494
As the animations are CSS based, they are applied _after_ any SVG transforms have taken place:
489 495 490 496
```html
@@ -504,13 +510,18 @@ Need a different style animation? Just create a custom class defining the animat
504 510
class to the icon component, or create a new animation class in the form of
505 511
`b-icon-animation-{animationName}` and pass the custom animation name to the `animation` prop.
506 512 507 -
**Note:** The BootstrapVue defined animation effects of this component is dependent on the
508 -
`prefers-reduced-motion` media query. See the
509 -
[reduced motion section of our accessibility documentation](/docs/reference/accessibility) for
510 -
additional details.
513 +
**Animation notes:**
511 514 512 -
Side note: the `cylon` animation gets its name from the "eye" of the Cylons from the _original_
513 -
[1978 Battlestar Galactica TV series](https://www.youtube.com/watch?v=5a5bEIf0UaU).
515 +
- With the `cylon` animations, the left-right movement (or up-down movement) extends _past_ the
516 +
icon's bounding box by `+/- 25%`, so you may need to adjust padding or margins to compensate for
517 +
your use case.
518 +
- Animation durations can be [configured via SASS SCSS variables](/docs/reference/theming)
519 +
- The BootstrapVue defined animation effects of this component is dependent on the
520 +
`prefers-reduced-motion` media query. See the
521 +
[reduced motion section of our accessibility documentation](/docs/reference/accessibility#reduced-motion)
522 +
for additional details.
523 +
- The `cylon` animation gets its name from the "eye" of the Cylons from the _original_
524 +
[1978 Battlestar Galactica TV series](https://www.youtube.com/watch?v=5a5bEIf0UaU).
514 525 515 526
## Stacking icons
516 527
@@ -572,7 +583,7 @@ available on individual icons.
572 583 573 584
Stacked icon notes:
574 585 575 -
- Remember to set the `stacked` prop on the inner icon components
586 +
- Remember to set the `stacked` prop on the inner icon components!
576 587
- The `font-scale` prop cannot be used on the inner icon components
577 588
- The `width` and `height` attributes cannot be applied to the inner icon components
578 589
- Stacked icons **cannot** be stacked inside another `<b-iconstack>`
@@ -603,7 +614,7 @@ Individual icons within the icon stack can also be animated (except on IE 11):
603 614
<b-icon
604 615
stacked
605 616
icon="camera"
606 -
animation="spin"
617 +
animation="throb"
607 618
variant="info"
608 619
scale="0.75"
609 620
></b-icon>
@@ -644,20 +655,19 @@ font scaled by 125%).
644 655
<template>
645 656
<div>
646 657
<b-button size="sm" class="mb-2">
647 -
<b-icon icon="gear-fill"></b-icon> Settings
658 +
<b-icon icon="gear-fill" aria-hidden="true"></b-icon> Settings
648 659
</b-button>
649 660
<br>
650 661
<b-button variant="primary" class="mb-2">
651 -
Pay now <b-icon icon="credit-card"></b-icon>
662 +
Pay now <b-icon icon="credit-card" aria-hidden="true"></b-icon>
652 663
</b-button>
653 664
<br>
654 665
<b-button variant="outline-info" class="mb-2">
655 -
<b-icon icon="power"></b-icon> Logout
666 +
<b-icon icon="power" aria-hidden="true"></b-icon> Logout
656 667
</b-button>
657 668
<br>
658 669
<b-button size="lg" variant="primary" class="mb-2">
659 -
<b-icon icon="question-circle-fill" aria-hidden="true"></b-icon>
660 -
<span class="sr-only">Help</span>
670 +
<b-icon icon="question-circle-fill" aria-label="Help"></b-icon>
661 671
</b-button>
662 672
</div>
663 673
</template>
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