step-by-step.R
In bs4Dash: A 'Bootstrap 4' Version of 'shinydashboard'

## ----basic-page, eval=FALSE---------------------------------------------------
# library(shiny)
# library(bs4Dash)
# 
# shinyApp(
#   ui = dashboardPage(
#     title = "Basic Dashboard",
#     header = dashboardHeader(),
#     sidebar = dashboardSidebar(),
#     controlbar = dashboardControlbar(),
#     footer = dashboardFooter(),
#     body = dashboardBody()
#   ),
#   server = function(input, output) {}
# )

## ----basic-page-image, echo=FALSE, fig.cap='Basic page template', fig.align = 'center', out.width='100%'----
knitr::include_graphics("figures/basicPage.png")

## ----page, eval=FALSE---------------------------------------------------------
# dashboardPage(
#   header,
#   sidebar,
#   body,
#   controlbar = NULL,
#   footer = NULL,
#   title = NULL,
#   freshTheme = NULL,
#   preloader = NULL,
#   options = NULL,
#   fullscreen = FALSE,
#   help = FALSE,
#   dark = FALSE,
#   scrollToTop = FALSE
# )

## ----loading, eval=FALSE------------------------------------------------------
# preloader <- list(html = tagList(spin_1(), "Loading ..."), color = "#343a40")

## ----sidebar, eval=FALSE------------------------------------------------------
# dashboardSidebar(
#   disable = FALSE,
#   width = NULL,
#   skin = "dark",
#   status = "primary",
#   elevation = 4,
#   collapsed = FALSE,
#   minified = TRUE,
#   expandOnHover = TRUE,
#   fixed = TRUE,
#   id = "sidebar",
#   customArea = NULL,
#   ...
# )

## ----sidebar-items, eval=FALSE------------------------------------------------
# sidebarUserPanel(
#   name = "Welcome Onboard!"
# )
# 
# sidebarMenu(
#   id = "sidebarmenu",
#   sidebarHeader("Header 1"),
#   menuItem(
#     "Item 1",
#     tabName = "item1",
#     icon = icon("sliders")
#   ),
#   menuItem(
#     "Item 2",
#     tabName = "item2",
#     icon = icon("id-card")
#   )
# )

## ----subitems, eval=FALSE-----------------------------------------------------
# menuItem(
#     text = "Item List 1",
#     icon = icon("bars"),
#     startExpanded = TRUE,
#     menuSubItem(
#         text = "Item 3",
#         tabName = "tab3",
#         icon = icon("circle-thin")
#     ),
#     menuSubItem(
#         text = "Item 4",
#         tabName = "tab4",
#         icon = icon("circle-thin")
#     )
# )

## ----navbar, eval=FALSE-------------------------------------------------------
# dashboardHeader(
#   title = NULL,
#   titleWidth = NULL,
#   disable = FALSE,
#   .list = NULL,
#   skin = "light",
#   status = "white",
#   border = TRUE,
#   compact = FALSE,
#   sidebarIcon = shiny::icon("bars"),
#   controlbarIcon = shiny::icon("th"),
#   fixed = FALSE,
#   leftUi = NULL,
#   rightUi = NULL
# )

## ----brand, eval=FALSE--------------------------------------------------------
# title <- dashboardBrand(
#     title = "My dashboard",
#     color = "primary",
#     href = "https://adminlte.io/themes/v3",
#     image = "https://adminlte.io/themes/v3/dist/img/AdminLTELogo.png"
# )

## ----controlbar, eval=FALSE---------------------------------------------------
# dashboardControlbar(
#     id = NULL,
#     disable = FALSE,
#     width = 250,
#     collapsed = TRUE,
#     overlay = TRUE,
#     skin = "dark",
#     pinned = NULL
# )

## ----controlbarmenu, eval=FALSE-----------------------------------------------
# controlbarMenu(
#     ...,
#     id = NULL,
#     selected = NULL,
#     type = c("tabs", "pills"),
#     position = NULL,
#     vertical = FALSE,
#     side = "left",
#     .list = NULL
# )

## ----controlbar-without-menu, eval=FALSE--------------------------------------
# dashboardControlbar(
#     div(
#         class = "p-3",
#         # any content
#     )
# )

## ----footer, eval=FALSE-------------------------------------------------------
# dashboardFooter(
#   left = a(
#     href = "https://twitter.com/divadnojnarg",
#     target = "_blank", "@DivadNojnarg"
#   ),
#   right = "2020"
# )

## ----body, eval=FALSE---------------------------------------------------------
# dashboardBody(
#   tabItems(
#     tabItem(
#       tabName = "item1",
#       fluidRow(
#         lapply(1:3, FUN = function(i) {
#           sortable(
#             width = 4,
#             p(class = "text-center", paste("Column", i)),
#             lapply(1:2, FUN = function(j) {
#               box(
#                 title = paste0("I am the ", j, "-th card of the ", i, "-th column"),
#                 width = 12,
#                 "Click on my header"
#               )
#             })
#           )
#         })
#       )
#     ),
#     tabItem(
#       tabName = "item2",
#       box(
#         title = "Card with messages",
#         width = 9,
#         userMessages(
#           width = 12,
#           status = "success",
#           userMessage(
#             author = "Alexander Pierce",
#             date = "20 Jan 2:00 pm",
#             image = "https://adminlte.io/themes/AdminLTE/dist/img/user1-128x128.jpg",
#             type = "received",
#             "Is this template really for free? That's unbelievable!"
#           ),
#           userMessage(
#             author = "Dana Pierce",
#             date = "21 Jan 4:00 pm",
#             image = "https://adminlte.io/themes/AdminLTE/dist/img/user5-128x128.jpg",
#             type = "sent",
#             "Indeed, that's unbelievable!"
#           )
#         )
#       )
#     )
#   )
# )

## ----wrapup-intro, eval=FALSE-------------------------------------------------
# shinyApp(
#   ui = dashboardPage(
#     title = "Basic Dashboard",
#     fullscreen = TRUE,
#     header = dashboardHeader(
#       title = dashboardBrand(
#         title = "bs4Dash",
#         color = "primary",
#         href = "https://www.google.fr",
#         image = "https://adminlte.io/themes/AdminLTE/dist/img/user2-160x160.jpg",
#       ),
#       skin = "light",
#       status = "white",
#       border = TRUE,
#       sidebarIcon = icon("bars"),
#       controlbarIcon = icon("th"),
#       fixed = FALSE,
#       leftUi = tagList(
#         dropdownMenu(
#           badgeStatus = "info",
#           type = "notifications",
#           notificationItem(
#             inputId = "triggerAction2",
#             text = "Error!",
#             status = "danger"
#           )
#         ),
#         dropdownMenu(
#           badgeStatus = "info",
#           type = "tasks",
#           taskItem(
#             inputId = "triggerAction3",
#             text = "My progress",
#             color = "orange",
#             value = 10
#           )
#         )
#       ),
#       rightUi = dropdownMenu(
#         badgeStatus = "danger",
#         type = "messages",
#         messageItem(
#           inputId = "triggerAction1",
#           message = "message 1",
#           from = "Divad Nojnarg",
#           image = "https://adminlte.io/themes/v3/dist/img/user3-128x128.jpg",
#           time = "today",
#           color = "lime"
#         )
#       )
#     ),
#     sidebar = dashboardSidebar(
#       skin = "light",
#       status = "primary",
#       elevation = 3,
#       sidebarUserPanel(
#         name = "Welcome Onboard!"
#       ),
#       sidebarMenu(
#         sidebarHeader("Header 1"),
#         menuItem(
#           "Item 1",
#           tabName = "item1",
#           icon = icon("sliders")
#         ),
#         menuItem(
#           "Item 2",
#           tabName = "item2",
#           icon = icon("id-card")
#         )
#       )
#     ),
#     controlbar = dashboardControlbar(
#       skin = "light",
#       pinned = TRUE,
#       collapsed = FALSE,
#       overlay = FALSE,
#       controlbarMenu(
#         id = "controlbarmenu",
#         controlbarItem(
#           title = "Item 1",
#           sliderInput(
#             inputId = "obs",
#             label = "Number of observations:",
#             min = 0,
#             max = 1000,
#             value = 500
#           ),
#           column(
#             width = 12,
#             align = "center",
#             radioButtons(
#               inputId = "dist",
#               label = "Distribution type:",
#               c(
#                 "Normal" = "norm",
#                 "Uniform" = "unif",
#                 "Log-normal" = "lnorm",
#                 "Exponential" = "exp"
#               )
#             )
#           )
#         ),
#         controlbarItem(
#           "Item 2",
#           "Simple text"
#         )
#       )
#     ),
#     footer = dashboardFooter(
#       left = a(
#         href = "https://twitter.com/divadnojnarg",
#         target = "_blank", "@DivadNojnarg"
#       ),
#       right = "2018"
#     ),
#     body = dashboardBody(
#       tabItems(
#         tabItem(
#           tabName = "item1",
#           fluidRow(
#             lapply(1:3, FUN = function(i) {
#               sortable(
#                 width = 4,
#                 p(class = "text-center", paste("Column", i)),
#                 lapply(1:2, FUN = function(j) {
#                   box(
#                     title = paste0("I am the ", j, "-th card of the ", i, "-th column"),
#                     width = 12,
#                     "Click on my header"
#                   )
#                 })
#               )
#             })
#           )
#         ),
#         tabItem(
#           tabName = "item2",
#           box(
#             title = "Card with messages",
#             width = 9,
#             userMessages(
#               width = 12,
#               status = "success",
#               userMessage(
#                 author = "Alexander Pierce",
#                 date = "20 Jan 2:00 pm",
#                 image = "https://adminlte.io/themes/AdminLTE/dist/img/user1-128x128.jpg",
#                 type = "received",
#                 "Is this template really for free? That's unbelievable!"
#               ),
#               userMessage(
#                 author = "Dana Pierce",
#                 date = "21 Jan 4:00 pm",
#                 image = "https://adminlte.io/themes/AdminLTE/dist/img/user5-128x128.jpg",
#                 type = "sent",
#                 "Indeed, that's unbelievable!"
#               )
#             )
#           )
#         )
#       )
#     )
#   ),
#   server = function(input, output) {}
# )