The hardware and bandwidth for this mirror is donated by METANET, the Webhosting and Full Service-Cloud Provider.
If you wish to report a bug, or if you are interested in having us mirror your free-software or open-source project, please feel free to contact us at mirror[@]metanet.ch.
box()
is without any doubt a central component of
{bs4Dash}
. Thanks to the AdminLTE API,
{bs4Dash}
is able to provide more interactivity to this
component. For instance, you may:
To benefit from that feature, one must pass the id parameter
and access it on the server side with input$<id>
.
Let’s consider an example:
library(shiny)
library(bs4Dash)
ui <- dashboardPage(
title = "Box API",
dashboardHeader(),
dashboardSidebar(),
dashboardBody(
tags$style("body { background-color: ghostwhite}"),
fluidRow(
actionButton("toggle_box", "Toggle Box"),
actionButton("remove_box", "Remove Box", class = "bg-danger"),
actionButton("restore_box", "Restore Box", class = "bg-success"),
actionButton("update_box", "Update Box", class = "bg-primary")
),
br(),
box(
title = textOutput("box_state"),
"Box body",
id = "mybox",
collapsible = TRUE,
closable = TRUE,
plotOutput("plot")
)
)
)
server <- function(input, output, session) {
output$plot <- renderPlot({
req(!input$mybox$collapsed)
plot(rnorm(200))
})
output$box_state <- renderText({
state <- if (input$mybox$collapsed) "collapsed" else "uncollapsed"
paste("My box is", state)
})
observeEvent(input$toggle_box, {
updateBox("mybox", action = "toggle")
})
observeEvent(input$remove_box, {
updateBox("mybox", action = "remove")
})
observeEvent(input$restore_box, {
updateBox("mybox", action = "restore")
})
observeEvent(input$update_box, {
updateBox(
"mybox",
action = "update",
options = list(
title = h2("New title", dashboardBadge(1, color = "primary")),
status = "danger",
solidHeader = TRUE,
width = 4
)
)
})
observeEvent(input$mybox$visible, {
collapsed <- if (input$mybox$collapsed) "collapsed" else "uncollapsed"
visible <- if (input$mybox$visible) "visible" else "hidden"
message <- paste("My box is", collapsed, "and", visible)
toast(
title = message,
options = list(
autohide = TRUE,
class = "bg-pink",
position = "topRight"
)
)
})
}
shinyApp(ui, server)
We call the updateBox()
function, specifying the action
to accomplish:
Knowing the state of a box significantly opens new possibilities within the application, thereby increasing interactivity. If you want to know more about the underlying mechanisms, have a look at the box widget documentation.
With {bs4Dash}
, you may embed labels, a sidebar and
dropdown menus in the box header.
Box Tools. From left to right: boxLabel, boxDropdown, collapsible and closable buttons, boxSidebar trigger.
boxLabel()
are passed in the box()
label slot. They typically contain number or a short text.
boxDropdown()
is a super powerful tool since all
dropdown items may behave like action buttons. This feature allows to
seamlessly add interactivity to the box component and gather features in
one place. In the example below, clicking on the first item triggers a
toast()
.
shinyApp(
ui = dashboardPage(
dashboardHeader(),
dashboardSidebar(),
dashboardBody(
box(
title = "Closable Box with dropdown",
closable = TRUE,
width = 12,
status = "warning",
solidHeader = FALSE,
collapsible = TRUE,
dropdownMenu = boxDropdown(
boxDropdownItem("Click me", id = "dropdownItem", icon = icon("heart")),
boxDropdownItem("item 2", href = "https://www.google.com/"),
dropdownDivider(),
boxDropdownItem("item 3", icon = icon("th"))
),
"My box"
)
)
),
server = function(input, output) {
observeEvent(input$dropdownItem, {
toast(
title = "Hi!",
options = list(
autohide = TRUE,
class = "bg-pink",
position = "topRight"
)
)
})
}
)
{bs4Dash}
provides more box components to be able to
adapt to various situations. What if you wanted to create a box with
comments, with social content?
userBox()
is intended to highlight user profiles. It has
many common parameters with box()
and overall the same
layout. The 2 major diffences between box()
and
userBox()
are:
Additionally, you may also select 2 types: centered image or left-aligned image.
The title argument expects a
userDescription()
:
userDescription(
title = "Nadia Carmichael",
subtitle = "lead Developer",
type = 2,
image = "https://adminlte.io/themes/AdminLTE/dist/img/user7-128x128.jpg",
)
userBox()
is also entirely updatable from the server
side, as it is built on top the box()
function:
shinyApp(
ui = dashboardPage(
dashboardHeader(),
dashboardSidebar(),
dashboardBody(
actionButton("update_box", "Update"),
userBox(
id = "userbox",
title = userDescription(
title = "Nadia Carmichael",
subtitle = "lead Developer",
type = 2,
image = "https://adminlte.io/themes/AdminLTE/dist/img/user7-128x128.jpg",
),
status = "primary",
gradient = TRUE,
background = "primary",
boxToolSize = "xl",
"Some text here!",
footer = "The footer here!"
)
),
title = "userBox"
),
server = function(input, output) {
observeEvent(input$update_box, {
updateBox(
"userbox",
action = "update",
options = list(
title = userDescription(
title = "Jean Box",
subtitle = "Developer",
type = 1,
image = "https://adminlte.io/themes/AdminLTE/dist/img/user3-128x128.jpg",
),
status = "danger",
background = NULL,
solidHeader = FALSE,
width = 4
)
)
})
}
)
These binaries (installable software) and packages are in development.
They may not be fully stable and should be used with caution. We make no claims about them.
socialBox
A
socialBox()
is dedicated to contain events, comments, anything related to people. The title parameter hostsuserBlock()
:Elements like
attachmentBlock()
anduserMessages()
are a good fit with this component. The...
slot may hosts multipleboxComment
, consisting in user comments. Right now, there is no programmatic way (understand no update function is available) to handle them but a future release of{bs4Dash}
will obviously fill this gap. The app below shows a combination of multiple elements in asocialBox()
: