Bootstrap 4 Module Reference

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, Utils } from '@ribajs/core';
import bs4Module from '@ribajs/bs4';
const riba = new Riba();
const model = {};
riba.module.regist(bs4Module);
Utils.domIsReady(() => {
  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

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.

Sometimes it is useful to define the tabs via templates, for example if the html content of the tabs are too complex.

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
isClosed Is true if the state is 'hidden'
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');

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

bs4-navbar

Component to collapse the Bootstrap 4 navbar.

Attributes

Name Required Default Description
collapse-selector No '.navbar-collapse' The selector of the collabseable child element
animated No true Set the attribute to animated="false" to disable collapse animations

Template methods

Name Arguments Description
hide Hides / closes / collapses the navbar collabseable child element
show Shows / opens / expands the navbar collabseable child element
toggle Toggles (closes or opens) the navbar collabseable child element

Template properties

Name Description
isCollapsed true if navbar collabseable child element is collapsed, otherwise false
collapseSelector See collapse-selector attribute

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"

Custom Templates