Themes

David Granjon

2019-11-27

There are currently two supported themes for bs4Dash: the classic one and an old school theme from bootswatch. To trigger it, just set old_school = TRUE in the bs4DashPage() function.

Default theme


library(shiny)
library(bs4Dash)

 shiny::shinyApp(
   ui = bs4DashPage(
     navbar = bs4DashNavbar(),
     sidebar = bs4DashSidebar(
      skin = "light",
      bs4SidebarMenu(
       bs4SidebarHeader("Main content"),
       bs4SidebarMenuItem(
         "Classic theme",
         tabName = "classic",
         icon = "desktop"
       )
      )
     ),
     controlbar = bs4DashControlbar(
      skin = "light"
     ),
     footer = bs4DashFooter(),
     title = "Classic theme",
     body = bs4DashBody(
      bs4TabItems(
       bs4TabItem(
         tabName = "classic",
         fluidRow(
          bs4Box(
           height = "600px",
           title = "Box 1"
          ),
          bs4Box(
           height = "600px",
           title = "Box 2"
          )
         )
       )
      )
     )
   ),
   server = function(input, output) {}
 )

Old school theme


library(shiny)
library(bs4Dash)

 shiny::shinyApp(
   ui = bs4DashPage(
     old_school = TRUE,
     navbar = bs4DashNavbar(),
     sidebar = bs4DashSidebar(
      skin = "light",
      bs4SidebarMenu(
       bs4SidebarHeader("Main content"),
       bs4SidebarMenuItem(
         "Old-school theme",
         tabName = "old-school",
         icon = "desktop"
       )
      )
     ),
     controlbar = bs4DashControlbar(
      skin = "light"
     ),
     footer = bs4DashFooter(),
     title = "Old-school theme",
     body = bs4DashBody(
      bs4TabItems(
       bs4TabItem(
         tabName = "old-school",
         fluidRow(
          bs4Box(
           height = "600px",
           title = "Box 1"
          ),
          bs4Box(
           height = "600px",
           title = "Box 2"
          )
         )
       )
      )
     )
   ),
   server = function(input, output) {}
 )

Limitations

Currently, the right and left siderbars are not handled by the old school design, but elements inside are correctly converted, as they are treated as proper elements. This is due to the fact that the original boostwatch sketchy theme does not have any sidebar.