Bootstrap 4 Module
Install
npm install --save @ribajs/bs4
Regist
To regist the module include import bs4Module from '@ribajs/bs4'; in your main.ts file and regist the module with riba.module.regist(bs4Module);:
import { Riba, coreModule } from '@ribajs/core';
import { ready } from '@ribajs/utils/src/dom';
import bs4Module from '@ribajs/bs4';
const riba = new Riba();
const model = {};
riba.module.regist(coreModule);
riba.module.regist(bs4Module);
ready(() => {
riba.bind(document.body, model);
});
Binders
scroll-to-on-[event]
Scrolls to an element by event and selector
bs4-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 | top | bottom | left | right. When auto is specified, it will dynamically reorient the tooltip. |
Components
bs4-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) |
bs4-accordion
Component to collapse multiple cards like an accordion as it exists on the original bootstrap example.
Each accordion item is added by an <template> element with a title attribut`and his content as the accordion item body.
Attributes
| Name | Required | Default | Description |
|---|---|---|---|
collapse-icon-src |
No | Source of an collapse icon if you want to display an icon | |
collapse-icon-src |
No | 16 |
Size of the collapse icon in px |
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 |
bs4-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 |
| scrollEement | 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.
bs4-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.
<bs4-tabs
option-tabs-angle="vertical"
tab-0-title="Tab 0"
tab-0-content="<p class='my-3'>Hello from <strong>tab 0</strong></p>"
tab-1-title="Tab 1"
tab-1-content="<p class='my-3'>Hello from <strong>tab 1</strong></p>"
tab-2-title="Tab 2"
tab-2-content="<p class='my-3'>Hello from <strong>tab 2</strong></p>"
tab-3-title="Tab 3"
tab-3-content="<p class='my-3'>Hello from <strong>tab 3</strong></p>"
tab-4-title="Tab 4"
tab-4-content="<p class='my-3'>Hello from <strong>tab 4</strong></p>"
tab-5-title="Tab 5"
tab-5-content="<p class='my-3'>Hello from <strong>tab 5</strong></p>"
tab-6-title="Tab 6"
tab-6-content="<p class='my-3'>Hello from <strong>tab 6</strong></p>"
tab-7-title="Tab 7"
tab-7-content="<p class='my-3'>Hello from <strong>tab 7</strong></p>"
tab-8-title="Tab 8"
tab-8-content="<p class='my-3'>Hello from <strong>tab 8</strong></p>"
tab-9-title="Tab 9"
tab-9-content="<p class='my-3'>Hello from <strong>tab 9</strong></p>"
></bs4-tabs>
bs4-tabs-attr
git clone --recurse-submodules https://github.com/ribajs/riba.git
cd riba/examples/bs4-tabs-attr
npm install
npm run start
Sometimes it is useful to define the tabs via templates, for example if the html content of the tabs are too complex.
<bs4-tabs>
<template title="Tab 0">
<img class="img-fluid my-3" src="https://via.placeholder.com/150/7c00b5/FFFFFF?text=Tab%200" alt="Tab 0">
</template>
<template title="Tab 1">
<img class="img-fluid my-3" src="https://via.placeholder.com/150/00b56a/FFFFFF?text=Tab%201" alt="Tab 1">
</template>
<template title="Tab 2">
<img class="img-fluid my-3" src="https://via.placeholder.com/150/001f3f/FFFFFF?text=Tab%202" alt="Tab 2">
</template>
<template title="Tab 3">
<img class="img-fluid my-3" src="https://via.placeholder.com/150/0074D9/FFFFFF?text=Tab%203" alt="Tab 3">
</template>
<template title="Tab 4">
<img class="img-fluid my-3" src="https://via.placeholder.com/150/7FDBFF/FFFFFF?text=Tab%204" alt="Tab 4">
</template>
<template title="Tab 5">
<img class="img-fluid my-3" src="https://via.placeholder.com/150/39CCCC/FFFFFF?text=Tab%205" alt="Tab 5">
</template>
<template title="Tab 6">
<img class="img-fluid my-3" src="https://via.placeholder.com/150/3D9970/FFFFFF?text=Tab%206" alt="Tab 6">
</template>
<template title="Tab 7">
<img class="img-fluid my-3" src="https://via.placeholder.com/150/2ECC40/FFFFFF?text=Tab%207" alt="Tab 7">
</template>
<template title="Tab 8">
<img class="img-fluid my-3" src="https://via.placeholder.com/150/FF851B/FFFFFF?text=Tab%208" alt="Tab 8">
</template>
<template title="Tab 9">
<img class="img-fluid my-3" src="https://via.placeholder.com/150/85144b/FFFFFF?text=Tab%209" alt="Tab 9">
</template>
</bs4-tabs>
bs4-tabs-tpl
git clone --recurse-submodules https://github.com/ribajs/riba.git
cd riba/examples/bs4-tabs-tpl
npm install
npm run start
bs4-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 bs4-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 bs4-toggle-button component you need to create a object of EventDispatcher like this:
import { EventDispatcher } from '@ribajs/core';
// The id must be identical to the id of the `bs4-toggle-button`
const id = 'example-sidebar';
const toggleButtonEvents = new EventDispatcher('bs4-toggle-button:' + id);
toggleButtonEvents.on('toggle', () => {
// do something
});
After reacting to the toggle event, you should fire an event yourself to let the bs4-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.
bs4-sidebar
A sidebar component as it is also used for this Riba website.
You can use the bs4-toggle-button component to open or close the sidebar at any point in the DOM.
Attributes
| Name | Required | Default | Description |
|---|---|---|---|
| id | Yes | The 'id' is required to react to events of the bs4-toggle-button, the target-id attribute of the bs4-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' |
| width | No | "250px" |
The width of the sidebar with unit (e.g. "px") |
| auto-show-on-wider-than | No | 1199 |
Auto show the sidebar if the viewport width is wider than this value, pass -1 to disable auto show |
| auto-hide-on-slimmer-than | No | 1200 |
Auto hide the sidebar if the viewport width is slimmer than this value, pass -1 to disable auto hide |
| watch-new-page-ready-event | No | true |
Watch the routers newPageReady event to update the sidebar state, e.g. hide on slime than after route changes |
| force-hide-on-location-pathnames | No | [] |
You can force to hide the sidebar on corresponding URL pathames e.g. you can hide the sidebar on home with ['/'] |
| force-show-on-location-pathnames | No | [] |
Like force-hide-on-location-pathnames, but to force to open the sidebar |
| overlay-on-slimmer-than | No | 1200 |
If the viewport width is wider than this value the sidebar adds a margin to the container (detected with the container-selector) to reduce its content, if the viewport width is slimmer than this value the sidebar opens over the content |
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', 'overlay-left' or 'overlay-right' |
| containerSelector | Passed attribute value, see container-selector attribute |
| position | Passed attribute value, see position attribute |
| width | Passed attribute value, see width attribute |
| autoShowInWiderThan | Passed attribute value, see auto-show-on-wider-than attribute |
| autoHideOnSlimmerThan | Passed attribute value, see auto-hide-on-slimmer-than attribute |
| forceHideOnLocationPathnames | Passed attribute value, see force-hide-on-location-pathnames attribute |
| force-show-on-location-pathnames | Passed attribute value, see force-show-on-location-pathnames attribute |
| overlayOnSlimmerThan | Passed attribute value, see overlay-on-slimmer-than attribute |
Hello World!
bs4-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 <bs4-dropdown class="dropup">...</bs4-dropdown> and add the attribute rv-on-click="toggle" to the element which should trigger the toggle.
bs4-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"