Binders
scroll-to-on-[event]
Scrolls to an element by event and selector
bs5-tooltip
Options
Options can be passed via data attributes, e.g data-placement="right"
| Name | Default | Description |
|---|---|---|
| placement | 'top' |
How to position the tooltip - `auto |
Components
bs5-icon
Loads and displays an svg icon.
Attributes
| Name | Description |
|---|---|
| size | Sets the width and height of the icon |
| width | Sets the width of the icon |
| height | Sets the height of the icon |
| src | The source url of the icon image |
| color | Color of the icon |
| direction | Direction of the icon (default is top) |
bs5-accordion
Component to collapse multiple cards like an accordion as it exists on the original bootstrap example.
Each accordion item is added by a <template> element with a title attribute and its content as the accordion item body.
Attributes
| Name | Required | Default | Description |
|---|---|---|---|
collapse-icon-src |
No | Source of a collapse icon if you want to display an icon | |
collapse-icon-size |
No | 16 |
Size of the collapse icon in px |
show-only-one |
No | true |
Only allow one accordion item to be open at a time |
Template methods
| Name | Arguments | Description |
|---|---|---|
| hide | item, index | Hides / closes / collapses the accordion item |
| show | item, index | Shows / opens / expands the accordion item |
| toggle | item, index | Toggles (closes or opens) the accordion item |
Template properties
| Name | Description |
|---|---|
| items | An array of all accordion items |
| collapseSelector | See collapse-selector attribute |
Child Template Attributes
| Name | Required | Description |
|---|---|---|
| title | Yes | Title of the accordion item |
| show | No | Set this to true if the accordion item should be visable on start |
| icon-direction | No | Starting icon direction for the collapse icon |
bs5-contents
Generates a jumpable table of contents of all found headings.
Attributes
| Name | Required | Default | Description |
|---|---|---|---|
| headers-start | No | 1 |
Headers start depth e.g. 1 for h1 |
| headers-depth | No | 2 |
Headers end depth e.g. 5 for h5 |
| header-parent-selector | Yes | Selector to search for headers | |
| find-header-id-depth | No | 1 |
Depth in how many parents elements should be searched for an id for each found header element |
| scroll-offset | No | 0 |
Scroll offset after click on an element |
| scroll-element | No | window |
Container element which should be scrolled (default is window) |
Template properties
| Name | Description |
|---|---|
| anchors | Array of found headers / anchors with the properties element, href, title, childs |
| headersStart | Passed attribute value, see headers-start attribute |
| headersDepth | Passed attribute value, see headers-depth attribute |
| headersParentSelector | Passed attribute value, see headers-parent-selector attribute |
| findHeaderIdDepth | Passed attribute value, see find-header-id-depth attribute |
| scrollOffset | Passed attribute value, see scroll-offset attribute |
| scrollElement | Passed attribute value, see scroll-element attribute |
Header 1
Gummi bears cheesecake chupa chups marshmallow. Pie marshmallow chocolate bar topping macaroon muffin lemon drops tiramisu. Powder cake lollipop cotton candy cookie pastry carrot cake jujubes. Cake tart topping cake gummi bears cookie liquorice marshmallow. Jelly powder carrot cake pie bear claw. Cupcake candy sugar plum jelly gummies donut lollipop chocolate bar gingerbread. Icing donut halvah sweet roll lollipop jelly beans caramels jelly beans cake. Tiramisu toffee gummi bears. Candy canes bear claw bonbon cupcake. Muffin chupa chups icing bear claw. Soufflé tootsie roll biscuit wafer apple pie marzipan. Powder ice cream toffee dessert sweet oat cake cheesecake candy canes sesame snaps. Marzipan pastry fruitcake halvah ice cream jelly beans biscuit lemon drops chocolate cake.
Header 2
Tootsie roll marshmallow marzipan biscuit jelly beans marshmallow jujubes topping. Cheesecake gummies lollipop chocolate cake bear claw cupcake. Topping toffee brownie chupa chups sesame snaps lollipop candy. Ice cream biscuit icing dessert toffee. Liquorice caramels soufflé. Powder tiramisu halvah sugar plum. Danish tiramisu chupa chups. Sweet donut gummi bears apple pie macaroon chupa chups cheesecake pie cupcake. Donut marzipan liquorice carrot cake pudding bonbon. Muffin lemon drops tart oat cake. Chocolate cake halvah dessert dessert. Dragée chupa chups halvah biscuit muffin chocolate bar danish. Jujubes sesame snaps chocolate cake jelly beans cookie candy lollipop.
Header 3
Jelly-o chocolate wafer biscuit brownie soufflé biscuit apple pie. Fruitcake macaroon lemon drops sweet roll jujubes liquorice. Jelly toffee bear claw croissant tiramisu. Brownie sweet roll cheesecake chupa chups. Oat cake caramels gummi bears caramels. Biscuit sugar plum marshmallow jelly candy canes. Liquorice chocolate bar biscuit jelly-o danish powder tart. Lollipop cotton candy lemon drops dragée tart toffee muffin. Chupa chups bear claw chocolate candy dragée cookie jelly dessert. Tiramisu donut danish gummi bears brownie icing brownie. Cheesecake gummies brownie cheesecake lemon drops biscuit jelly beans icing cake. Gummi bears icing liquorice gummi bears tootsie roll sweet roll soufflé cake jelly beans.
Header 4
Jelly-o chocolate wafer biscuit brownie soufflé biscuit apple pie. Fruitcake macaroon lemon drops sweet roll jujubes liquorice. Jelly toffee bear claw croissant tiramisu. Brownie sweet roll cheesecake chupa chups. Oat cake caramels gummi bears caramels. Biscuit sugar plum marshmallow jelly candy canes. Liquorice chocolate bar biscuit jelly-o danish powder tart. Lollipop cotton candy lemon drops dragée tart toffee muffin. Chupa chups bear claw chocolate candy dragée cookie jelly dessert. Tiramisu donut danish gummi bears brownie icing brownie. Cheesecake gummies brownie cheesecake lemon drops biscuit jelly beans icing cake. Gummi bears icing liquorice gummi bears tootsie roll sweet roll soufflé cake jelly beans.
Header 5
Jelly-o chocolate wafer biscuit brownie soufflé biscuit apple pie. Fruitcake macaroon lemon drops sweet roll jujubes liquorice. Jelly toffee bear claw croissant tiramisu. Brownie sweet roll cheesecake chupa chups. Oat cake caramels gummi bears caramels. Biscuit sugar plum marshmallow jelly candy canes. Liquorice chocolate bar biscuit jelly-o danish powder tart. Lollipop cotton candy lemon drops dragée tart toffee muffin. Chupa chups bear claw chocolate candy dragée cookie jelly dessert. Tiramisu donut danish gummi bears brownie icing brownie. Cheesecake gummies brownie cheesecake lemon drops biscuit jelly beans icing cake. Gummi bears icing liquorice gummi bears tootsie roll sweet roll soufflé cake jelly beans.
Header 6
Jelly-o chocolate wafer biscuit brownie soufflé biscuit apple pie. Fruitcake macaroon lemon drops sweet roll jujubes liquorice. Jelly toffee bear claw croissant tiramisu. Brownie sweet roll cheesecake chupa chups. Oat cake caramels gummi bears caramels. Biscuit sugar plum marshmallow jelly candy canes. Liquorice chocolate bar biscuit jelly-o danish powder tart. Lollipop cotton candy lemon drops dragée tart toffee muffin. Chupa chups bear claw chocolate candy dragée cookie jelly dessert. Tiramisu donut danish gummi bears brownie icing brownie. Cheesecake gummies brownie cheesecake lemon drops biscuit jelly beans icing cake. Gummi bears icing liquorice gummi bears tootsie roll sweet roll soufflé cake jelly beans.
Header 7
Jelly-o chocolate wafer biscuit brownie soufflé biscuit apple pie. Fruitcake macaroon lemon drops sweet roll jujubes liquorice. Jelly toffee bear claw croissant tiramisu. Brownie sweet roll cheesecake chupa chups. Oat cake caramels gummi bears caramels. Biscuit sugar plum marshmallow jelly candy canes. Liquorice chocolate bar biscuit jelly-o danish powder tart. Lollipop cotton candy lemon drops dragée tart toffee muffin. Chupa chups bear claw chocolate candy dragée cookie jelly dessert. Tiramisu donut danish gummi bears brownie icing brownie. Cheesecake gummies brownie cheesecake lemon drops biscuit jelly beans icing cake. Gummi bears icing liquorice gummi bears tootsie roll sweet roll soufflé cake jelly beans.
Header 8
Jelly-o chocolate wafer biscuit brownie soufflé biscuit apple pie. Fruitcake macaroon lemon drops sweet roll jujubes liquorice. Jelly toffee bear claw croissant tiramisu. Brownie sweet roll cheesecake chupa chups. Oat cake caramels gummi bears caramels. Biscuit sugar plum marshmallow jelly candy canes. Liquorice chocolate bar biscuit jelly-o danish powder tart. Lollipop cotton candy lemon drops dragée tart toffee muffin. Chupa chups bear claw chocolate candy dragée cookie jelly dessert. Tiramisu donut danish gummi bears brownie icing brownie. Cheesecake gummies brownie cheesecake lemon drops biscuit jelly beans icing cake. Gummi bears icing liquorice gummi bears tootsie roll sweet roll soufflé cake jelly beans.
Header 9
Jelly-o chocolate wafer biscuit brownie soufflé biscuit apple pie. Fruitcake macaroon lemon drops sweet roll jujubes liquorice. Jelly toffee bear claw croissant tiramisu. Brownie sweet roll cheesecake chupa chups. Oat cake caramels gummi bears caramels. Biscuit sugar plum marshmallow jelly candy canes. Liquorice chocolate bar biscuit jelly-o danish powder tart. Lollipop cotton candy lemon drops dragée tart toffee muffin. Chupa chups bear claw chocolate candy dragée cookie jelly dessert. Tiramisu donut danish gummi bears brownie icing brownie. Cheesecake gummies brownie cheesecake lemon drops biscuit jelly beans icing cake. Gummi bears icing liquorice gummi bears tootsie roll sweet roll soufflé cake jelly beans.
bs5-tabs
Attributes
| Name | Required | Default | Description |
|---|---|---|---|
option-tabs-auto-height |
No | false |
Sets the tab content height to the highest tab content height (so that ervery tab content has the same height) |
option-tabs-angle |
No | 'horizontal' |
Tabs angle, can be 'horizontal' or 'vertical' |
tab-[index]-title' |
No | Title of tab with [index] (starts at 0) | |
tab-[index]-content |
No | Content of tab with index | |
tab-[index]-handle |
No | Tab handle (is used for identification, if not set, it is automatically generated from the title) |
You can define the tab tilte and content with the tab-[index]-title and tab-[index]-content attributes.
Sometimes it is useful to define the tabs via templates, for example if the html content of the tabs are too complex.
bs5-toggle-button
This components is used to trigger a toggle event used in other components or parts of your project.
This site itself uses the bs5-toggle-button to open or close the sidebar.
Attributes
| Name | Required | Default | Description |
|---|---|---|---|
| target-id | Yes | The id with which the toggle event is triggered |
Template methods
| Name | Arguments | Description |
|---|---|---|
| toggle | Triggeres the toggle event |
Template properties
| Name | Description |
|---|---|
| state | Can be 'hidden' or something else |
| isActive | Is false if the state is 'hidden' or 'removed' |
| targetId | Passed attribute value, see target-id attribute |
To react on the "toggle" event triggered by the bs5-toggle-button component you need to create a object of EventDispatcher like this:
import { EventDispatcher } from '@ribajs/events';
// The id must be identical to the id of the `bs5-toggle-button`
const id = 'example-sidebar';
const toggleButtonEvents = new EventDispatcher('bs5-toggle-button:' + id);
toggleButtonEvents.on('toggle', () => {
// do something
});
After reacting to the toggle event, you should fire an event yourself to let the bs5-toggle-button component know that your logic has toggled:
toggleButtonEvents.trigger('toggled', 'hidden');
Before you click on this button, make sure that the preview of the sidebar component example is open.
bs5-sidebar
A sidebar component as it is also used for this Riba website.
You can use the bs5-toggle-button component to open or close the sidebar at any point in the DOM. Use the rv-bs5-co-[breakpoint]-[attribute] binder to set different attribute values per viewport breakpoint (e.g. overlap on mobile, side on desktop).
Attributes
| Name | Required | Default | Description |
|---|---|---|---|
| id | Yes | The 'id' is required to react to events of the bs5-toggle-button, the target-id attribute of the bs5-toggle-button must be identical to this id |
|
| container-selector | No | Selector string to get the container element from DOM | |
| position | No | "left" |
The sidebar can be positioned 'right' or 'left' |
| mode | No | "overlap" |
Display mode: 'overlap' (floats over content), 'side' (pushes content aside), 'move' (moves entire page) |
| width | No | "250px" |
The width of the sidebar with unit (e.g. "px") |
| auto-show | No | false |
Automatically show the sidebar (use with breakpoint binders for responsive behavior) |
| auto-hide | No | false |
Automatically hide the sidebar (use with breakpoint binders for responsive behavior) |
| watch-new-page-ready-event | No | true |
Watch the router's newPageReady event to update the sidebar state after route changes |
| force-hide-on-location-pathnames | No | [] |
Force hide the sidebar on corresponding URL pathnames, e.g. ['/'] for the home page |
| force-show-on-location-pathnames | No | [] |
Like force-hide-on-location-pathnames, but to force the sidebar open |
| close-on-swipe | No | true |
Close sidebar when user swipes (overlap mode only) |
| prevent-scrolling-on-overlap | No | true |
Prevent body scrolling when sidebar overlaps content |
Responsive Attributes
Use rv-bs5-co-[breakpoint]-[attribute] binders to set different values per viewport breakpoint:
<bs5-sidebar id="main-sidebar"
rv-bs5-co-xs-auto-hide="true"
rv-bs5-co-xl-auto-hide="false"
rv-bs5-co-xs-auto-show="false"
rv-bs5-co-xl-auto-show="true"
rv-bs5-co-xs-mode="'overlap'"
rv-bs5-co-xl-mode="'side'"
>
Available breakpoints: xxs, xs, sm, md, lg, xl, xxl
Template methods
| Name | Arguments | Description |
|---|---|---|
| hide | Hides / closes the sidebar | |
| show | Shows / opens the sidebar | |
| toggle | Toggles (closes or opens) the sidebar |
Template properties
| Name | Description |
|---|---|
| state | The current state of the sidebar, can be 'hidden', 'side-left', 'side-right', 'overlap-left', 'overlap-right', 'move-left' or 'move-right' |
| containerSelector | Passed attribute value, see container-selector attribute |
| position | Passed attribute value, see position attribute |
| mode | Passed attribute value, see mode attribute |
| width | Passed attribute value, see width attribute |
| autoShow | Passed attribute value, see auto-show attribute |
| autoHide | Passed attribute value, see auto-hide attribute |
| forceHideOnLocationPathnames | Passed attribute value, see force-hide-on-location-pathnames attribute |
| forceShowOnLocationPathnames | Passed attribute value, see force-show-on-location-pathnames attribute |
Hello World!
bs5-dropdown
Instead of adding data-toggle="dropdown" to your html element (as it is with the original bootstrap 4) you need to set the wrapper element tag name to <bs5-dropdown class="dropup">...</bs5-dropdown> and add the attribute rv-on-click="toggle" to the element which should trigger the toggle.
bs5-slideshow
Multiple Items
Variable Width
Autoplay
Autoplay with interval
With captions
Responsive
This demo shows how you can start autoplay on small devices and stop on medium devices using responsive attribute options like autoplay="false" md-autoplay="true" controls="false" lg-controls="true" indicators="false" lg-indicators="true"