# A box with label, sidebar, dropdown menu
if (interactive()) {
library(shiny)
library(shinydashboard)
library(shinydashboardPlus)
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",
style = "circle"
),
dropdownMenu = boxDropdown(
boxDropdownItem("Link to google", href = "http://www.google.com"),
boxDropdownItem("item 2", href = "#"),
dropdownDivider(),
boxDropdownItem("item 3", href = "#", icon = icon("th"))
),
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(shinydashboard)
library(shinydashboardPlus)
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",
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", dashboardLabel(1, status = "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)
}
# Box with dropdown items and input
if (interactive()) {
library(shiny)
library(shinydashboard)
library(shinydashboardPlus)
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, {
showNotification("Hello", duration = 1, type = "message")
})
}
)
}
# Box with boxPad container + descriptionBlock
if (interactive()) {
library(shiny)
library(shinydashboard)
library(shinydashboardPlus)
shinyApp(
ui = dashboardPage(
dashboardHeader(),
dashboardSidebar(),
dashboardBody(
box(title = "Box with right pad",
status = "warning",
fluidRow(
column(width = 6),
column(
width = 6,
boxPad(
color = "green",
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) { }
)
}
# Box with descriptionBlock
if (interactive()) {
library(shiny)
library(shinydashboard)
library(shinydashboardPlus)
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 = "green",
numberIcon = icon("caret-up"),
header = "$35,210.43",
text = "TOTAL REVENUE",
rightBorder = TRUE,
marginBottom = FALSE
)
),
column(
width = 6,
descriptionBlock(
number = "18%",
numberColor = "red",
numberIcon = icon("caret-down"),
header = "1200",
text = "GOAL COMPLETION",
rightBorder = FALSE,
marginBottom = FALSE
)
)
)
)
),
title = "Description Blocks"
),
server = function(input, output) { }
)
}
Run the code above in your browser using DataLab