descriptionBlock creates a description block, perfect for writing statistics to insert in a box.
boxPad creates a vertical container for descriptionBlock. It has to be included in a box.
Build an adminLTE3 card
To update box on the server side.
Usage
descriptionBlock(
number = NULL,
numberColor = NULL,
numberIcon = NULL,
header = NULL,
text = NULL,
rightBorder = TRUE,
marginBottom = FALSE
)
cardPad(..., color = NULL, style = NULL)
bs4Card(
...,
title = NULL,
footer = NULL,
status = NULL,
solidHeader = FALSE,
background = NULL,
width = 6,
height = NULL,
collapsible = TRUE,
collapsed = FALSE,
closable = FALSE,
maximizable = FALSE,
icon = NULL,
gradient = FALSE,
boxToolSize = "sm",
elevation = NULL,
headerBorder = TRUE,
label = NULL,
dropdownMenu = NULL,
sidebar = NULL,
id = NULL
)
updatebs4Card(
id,
action = c("remove", "toggle", "toggleMaximize", "restore", "update"),
options = NULL,
session = shiny::getDefaultReactiveDomain()
)
box(
...,
title = NULL,
footer = NULL,
status = NULL,
solidHeader = FALSE,
background = NULL,
width = 6,
height = NULL,
collapsible = TRUE,
collapsed = FALSE,
closable = FALSE,
maximizable = FALSE,
icon = NULL,
gradient = FALSE,
boxToolSize = "sm",
elevation = NULL,
headerBorder = TRUE,
label = NULL,
dropdownMenu = NULL,
sidebar = NULL,
id = NULL
)
updateCard(
id,
action = c("remove", "toggle", "toggleMaximize", "restore", "update"),
options = NULL,
session = shiny::getDefaultReactiveDomain()
)
updateBox(
id,
action = c("remove", "toggle", "toggleMaximize", "restore", "update"),
options = NULL,
session = shiny::getDefaultReactiveDomain()
)
boxPad(..., color = NULL, style = NULL)Arguments
- number
Any number.
- numberColor
Number color. Valid colors are defined as follows:
primary: #007bff .secondary: #6c757d .info: #17a2b8 .success: #28a745 .warning: #ffc107 .danger: #dc3545 .gray-dark: #343a40 .gray: #adb5bd .white: #fff .indigo: #6610f2 .lightblue: #3c8dbc .navy: #001f3f .purple: #605ca8 .fuchsia: #f012be .pink: #e83e8c .maroon: #d81b60 .orange: #ff851b .lime: #01ff70 .teal: #39cccc .olive: #3d9970 .
- numberIcon
Number icon, if any. Expect
icon.- header
Bold text.
- text
Additional text.
- rightBorder
TRUE by default. Whether to display a right border to separate two blocks. The last block on the right should not have a right border.
- marginBottom
FALSE by default. Set it to TRUE when the descriptionBlock is used in a boxPad context.
- ...
Contents of the box.
- color
Background color. Valid colors are defined as follows:
primary: #007bff .secondary: #6c757d .info: #17a2b8 .success: #28a745 .warning: #ffc107 .danger: #dc3545 .gray-dark: #343a40 .gray: #adb5bd .white: #fff .indigo: #6610f2 .lightblue: #3c8dbc .navy: #001f3f .purple: #605ca8 .fuchsia: #f012be .pink: #e83e8c .maroon: #d81b60 .orange: #ff851b .lime: #01ff70 .teal: #39cccc .olive: #3d9970 .
- style
Custom CSS, if any.
- title
Optional title.
Optional footer text.
- status
The status of the item. This determines the item's background color. Valid statuses are defined as follows:
primary: #007bff .secondary: #6c757d .info: #17a2b8 .success: #28a745 .warning: #ffc107 .danger: #dc3545 .gray-dark: #343a40 .gray: #adb5bd .white: #fff .indigo: #6610f2 .lightblue: #3c8dbc .navy: #001f3f .purple: #605ca8 .fuchsia: #f012be .pink: #e83e8c .maroon: #d81b60 .orange: #ff851b .lime: #01ff70 .teal: #39cccc .olive: #3d9970 .
- solidHeader
Should the header be shown with a solid color background?
- background
If NULL (the default), the background of the box will be white. Otherwise, a color string. Valid colors are listed in validColors. See below:
primary: #007bff .secondary: #6c757d .info: #17a2b8 .success: #28a745 .warning: #ffc107 .danger: #dc3545 .gray-dark: #343a40 .gray: #adb5bd .white: #fff .indigo: #6610f2 .lightblue: #3c8dbc .navy: #001f3f .purple: #605ca8 .fuchsia: #f012be .pink: #e83e8c .maroon: #d81b60 .orange: #ff851b .lime: #01ff70 .teal: #39cccc .olive: #3d9970 .
- width
The width of the box, using the Bootstrap grid system. This is used for row-based layouts. The overall width of a region is 12, so the default card width of 6 occupies 1/2 of that width. For column-based layouts, use
NULLfor the width; the width is set by the column that contains the box.- height
The height of a box, in pixels or other CSS unit. By default the height scales automatically with the content.
- collapsible
If TRUE, display a button in the upper right that allows the user to collapse the box.
- collapsed
If TRUE, start collapsed. This must be used with
collapsible=TRUE.- closable
If TRUE, display a button in the upper right that allows the user to close the box.
- maximizable
If TRUE, the card can be displayed in full screen mode.
- icon
Header icon. Displayed before title. Expect
icon.- gradient
Whether to allow gradient effect for the background color. Default to FALSE.
- boxToolSize
Size of the toolbox: choose among "xs", "sm", "md", "lg".
- elevation
Card elevation.
- headerBorder
Whether to display a border between the header and body. TRUE by default
- label
Slot for boxLabel.
List of items in the boxtool dropdown menu. Use boxDropdown.
Slot for boxSidebar.
- id
Card id.
- action
Action to trigger:
c("remove", "toggle", "toggleMaximize", "restore", "update").- options
If action is update, a list of new options to configure the box, such as
list(title = "new title", status = NULL, solidHeader = FALSE, background = "red", width = 6, height = "200px", collapsible = FALSE, closable = FALSE).- session
Shiny session.
See also
Other boxWidgets:
attachmentBlock(),
bs4CardLabel(),
bs4CardSidebar(),
bs4Carousel(),
bs4SocialCard(),
bs4Timeline(),
cardDropdown(),
cardProfile(),
userPost()
Other boxWidgets:
attachmentBlock(),
bs4CardLabel(),
bs4CardSidebar(),
bs4Carousel(),
bs4SocialCard(),
bs4Timeline(),
cardDropdown(),
cardProfile(),
userPost()
Other cards:
bs4CardLayout(),
bs4SocialCard(),
bs4TabCard(),
bs4UserCard(),
renderbs4InfoBox(),
renderbs4ValueBox()
Author
David Granjon, dgranjon@ymail.com
Examples
# Box with descriptionBlock
if (interactive()) {
library(shiny)
library(bs4Dash)
shinyApp(
ui = dashboardPage(
dashboardHeader(),
dashboardSidebar(),
dashboardBody(
box(
solidHeader = FALSE,
title = "Status summary",
background = NULL,
width = 4,
status = "danger",
footer = fluidRow(
column(
width = 6,
descriptionBlock(
number = "17%",
numberColor = "pink",
numberIcon = icon("caret-up"),
header = "$35,210.43",
text = "TOTAL REVENUE",
rightBorder = TRUE,
marginBottom = FALSE
)
),
column(
width = 6,
descriptionBlock(
number = "18%",
numberColor = "secondary",
numberIcon = icon("caret-down"),
header = "1200",
text = "GOAL COMPLETION",
rightBorder = FALSE,
marginBottom = FALSE
)
)
)
)
),
title = "Description Blocks"
),
server = function(input, output) { }
)
}
if (interactive()) {
library(shiny)
library(bs4Dash)
shinyApp(
ui = dashboardPage(
dashboardHeader(),
dashboardSidebar(),
dashboardBody(
box(
title = "Box with right pad",
status = "warning",
fluidRow(
column(width = 6),
column(
width = 6,
boxPad(
color = "purple",
descriptionBlock(
header = "8390",
text = "VISITS",
rightBorder = FALSE,
marginBottom = TRUE
),
descriptionBlock(
header = "30%",
text = "REFERRALS",
rightBorder = FALSE,
marginBottom = TRUE
),
descriptionBlock(
header = "70%",
text = "ORGANIC",
rightBorder = FALSE,
marginBottom = FALSE
)
)
)
)
)
),
title = "boxPad"
),
server = function(input, output) { }
)
}
# A box with label, sidebar, dropdown menu
if (interactive()) {
library(shiny)
library(bs4Dash)
shinyApp(
ui = dashboardPage(
dashboardHeader(),
dashboardSidebar(),
dashboardBody(
box(
title = "Closable Box with dropdown",
closable = TRUE,
width = 12,
status = "warning",
solidHeader = FALSE,
collapsible = TRUE,
label = boxLabel(
text = 1,
status = "danger"
),
dropdownMenu = boxDropdown(
boxDropdownItem("Link to google", href = "https://www.google.com"),
boxDropdownItem("item 2", href = "#"),
dropdownDivider(),
boxDropdownItem("item 3", href = "#", icon = icon("table-cells"))
),
sidebar = boxSidebar(
startOpen = TRUE,
id = "mycardsidebar",
sliderInput(
"obs",
"Number of observations:",
min = 0,
max = 1000,
value = 500
)
),
plotOutput("distPlot")
)
)
),
server = function(input, output) {
output$distPlot <- renderPlot({
hist(rnorm(input$obs))
})
}
)
}
# Toggle a box on the client
if (interactive()) {
library(shiny)
library(bs4Dash)
ui <- dashboardPage(
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-info"),
actionButton("update_box2", "Update Box 2", class = "bg-info"),
br(),
br(),
box(
title = textOutput("box_state"),
id = "mybox",
status = "danger",
background = "maroon",
solidHeader = TRUE,
gradient = TRUE,
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$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)
showNotification(message, type = "warning", duration = 1)
})
observeEvent(input$update_box, {
updateBox(
"mybox",
action = "update",
options = list(
title = h2("hello", dashboardBadge(1, color = "primary")),
status = "warning",
solidHeader = TRUE,
width = 12,
background = NULL,
height = "900px",
closable = FALSE
)
)
})
observeEvent(input$update_box2, {
updateBox(
"mybox",
action = "update",
options = list(
status = NULL,
solidHeader = FALSE,
width = 4,
background = "green",
height = "500px",
closable = TRUE
)
)
})
}
shinyApp(ui, server)
}