One of the goals of bsplus is to provide access to some useful Bootstrap components for rmarkdown html-documents and shiny apps:
Present more information: carousel
Another goal is to provide some tools to help build shiny apps.
A collapsible element is attached to a button or link, which is used to show (or hide) the element.
The first step is to create the collapsible element, using
bs_collapse() with an
id. By default, this element is initially hidden.
bs_collapse( id = "ex_collapse", content = tags$div(class = "well", "Yeah Yeah Yeah") )
Next, you create a tag, like a button, a then attach the
id of the collapsible element to it.
To see more of the collapse function-family, please see its article.
An accordion is a set of collapsible panels constructed such that one panel, at most, is open at a time.
There are two main functions:
bs_accordion(), used to establish the accordion framework
bs_append(), used to add a panel (
content) to the accordion.
title will be text, and
content can be HTML.
bs_accordion(id = "meet_the_beatles") %>% bs_append(title = "John", content = "Rhythm guitar, vocals") %>% bs_append(title = "Paul", content = "Bass guitar, vocals") %>% bs_append(title = "George", content = "Lead guitar, vocals") %>% bs_append(title = "Ringo", content = "Drums, vocals")
Modal windows are a great way to deliver help-documentation, although they certainly have other uses.
The first step is to define a modal widow, giving it an
id. The shiny function
includeMarkdown() can be useful to compose the content.
bs_modal( id = "modal_markdown", title = "Using Markdown", body = includeMarkdown(system.file("markdown", "modal.md", package = "bsplus")) )
To allow activation of the modal window, attach its
id to a button (or link).
The verb attach implies that you can attach an
id to as many links you like. Thus:
A tooltip can be used to embed a short note into a tag; by default they are activated by hovering over the tag.
bs_button("John Lennon", button_type = "default") %>% bs_embed_tooltip(title = "Rhythm Guitar, vocals")
A popover can be used to embed a longer note into a tag; by default they are activated by clicking on the tag. A popover has a
title, which is generally text, and
content, which can be HTML.
bs_button("John Lennon", button_type = "default") %>% bs_embed_popover( title = "More information", content = "Although he wrote \"I Am the Walrus\", he later insisted that the Walrus was Paul." )
According to the Bootstrap site, popovers are not activated automatically; to activate them you can call
use_bs_popovers() once on your page.
An carousel can be useful to cycle through slides with related content. There like the accordion, there are two main functions:
bs_carousel(), used to establish the carousel framework
bs_append(), used to add a slide containing
content, which is HTML, and an optional
bs_carousel(id = "the_beatles", use_indicators = TRUE) %>% bs_append( content = bs_carousel_image(src = image_uri("img/john.jpg")), caption = bs_carousel_caption("John Lennon", "Rhythm guitar, vocals") ) %>% bs_append( content = bs_carousel_image(src = image_uri("img/paul.jpg")), caption = bs_carousel_caption("Paul McCartney", "Bass guitar, vocals") ) %>% bs_append( content = bs_carousel_image(src = image_uri("img/george.jpg")), caption = bs_carousel_caption("George Harrison", "Lead guitar, vocals") ) %>% bs_append( content = bs_carousel_image(src = image_uri("img/ringo.jpg")), caption = bs_carousel_caption("Ringo Starr", "Drums, vocals") )
I think the carousel has potential not shown in this example. The content of each slide is HTML, so a carousel could contain images (as shown here), shiny inputs or outputs. Another possibility may be to use the the
frame aesthetic offered by gganimate to cycle through ggplot2 plots.
Finally, there are a couple of helper functions for customizing Bootstrap tags:
bs_set_aria(). These can be useful because not all of the options for Bootstrap components are represented in the arguments of functions in this package.
Let’s say that you want to be able to dismiss a popover by clicking anywhere in the browser window other than the button. To do this, you have to set the attribute
data-trigger to the value
"focus". The function
bs_set_data() makes things a little easier for you by prepending
"data-" to each name and serializing the values to the format specified by the Bootstrap API.
bs_button("Click for popover", button_type = "primary") %>% bs_embed_popover( title = "To dismiss", content = "Click anywhere in the browser window, except the button.", trigger = "focus" )
Both of these functions are used to set attributes on tags;
bs_set_data() is used for attributes that start with
bs_set_aria() is used for attributes that start with
"aria-". To see more of these helper functions, please read their reference.