Material design in Shiny apps


RStudio and Shiny are trademarks of RStudio, Inc

Installation


 CRAN:          install.packages(shinymaterial)
 DEVELOPMENT:   devtools::install_github("ericrayanderson/shinymaterial")


Basic Template

library(shiny)
library(shinymaterial)

# Wrap shinymaterial apps in material_page
ui <- material_page(
  title = "Basic Page",
  tags$h1("Page Content")
)

server <- function(input, output) {
  
}
shinyApp(ui = ui, server = server)



Dashboard Template

library(shiny)
library(shinymaterial)

# Wrap shinymaterial apps in material_page
ui <- material_page(
  title = "Basic Page + Side-Nav with Tabs",
  nav_bar_fixed = TRUE,
  # Place side-nav in the beginning of the UI
  material_side_nav(
    fixed = TRUE,
    # Place side-nav tabs within side-nav
    material_side_nav_tabs(
      side_nav_tabs = c(
        "Example Side-Nav Tab 1" = "example_side_nav_tab_1",
        "Example Side-Nav Tab 2" = "example_side_nav_tab_2"
      ),
      icons = c("cast", "insert_chart")
    )
  ),
  # Define side-nav tab content
  material_side_nav_tab_content(
    side_nav_tab_id = "example_side_nav_tab_1",
    tags$h1("First Side-Nav Tab Content")
  ),
  material_side_nav_tab_content(
    side_nav_tab_id = "example_side_nav_tab_2",
    tags$h1("Second Side-Nav Tab Content")
  )
)

server <- function(input, output) {
  
}
shinyApp(ui = ui, server = server)



Tabs & Side-Nav Template

library(shiny)
library(shinymaterial)

# Wrap shinymaterial apps in material_page
ui <- material_page(
  title = "Basic Page + Side-Nav + Tabs",
  # Place side-nav in the beginning of the UI
  material_side_nav(
    fixed = FALSE,
    tags$h3("Side-Nav Content")
  ),
  # Define tabs
  material_tabs(
    tabs = c(
      "First Tab" = "first_tab",
      "Second Tab" = "second_tab"
    )
  ),
  # Define tab content
  material_tab_content(
    tab_id = "first_tab",
    tags$h1("First Tab Content")
  ),
  material_tab_content(
    tab_id = "second_tab",
    tags$h1("Second Tab Content")
  )
)

server <- function(input, output) {
  
}
shinyApp(ui = ui, server = server)
clicking on



Parallax

library(shiny)
library(shinymaterial)

# Wrap shinymaterial apps in material_page
ui <- material_page(
  title = "Basic Page + Parallax",
  # Typically the image will be placed in a folder labeled 'www' 
  # at the same level as the application (server.R & ui.R)
  material_parallax(
    image_source =
      "https://upload.wikimedia.org/wikipedia/commons/thumb/8/8d/Freudenberg_sg_Switzerland.jpg/1920px-Freudenberg_sg_Switzerland.jpg"
  ),
  tags$h1("Page Content")
)

server <- function(input, output) {
  
}
shinyApp(ui = ui, server = server)

Cards

Miles Per Gallon Density

material_card(
 title = 
   "Miles Per Gallon Density",
 plotOutput("mpg_density")
)
        

Depth


 material_button(
   input_id = "example_button",
   label = "BUTTON",
   depth = 5
 )
        
Card
Card
Card


Inputs














 material_button(
   input_id = "example_button",
   label = "BUTTON"
 )
        

 material_dropdown(
   input_id = "example_dropdown",
   label = "Dropdown",
   choices = c(
     "Chicken" = "c",
     "Steak" = "s",
     "Fish" = "f"
   ),
   selected = "s"
 )
        
File

Input colors


 material_button(
   input_id = "example_button",
   label = "DEEP_ORANGE",
   color = "deep-orange"
 )
        

Modals


 material_modal(
   modal_id = "example_modal",
   button_text = "Modal",
   button_icon = "open_in_browser",
   title = "Showcase Modal Title",
   tags$p("Modal Content")
 )
        

Parallax


 material_parallax(
   # Image in a folder labeled "www"
   image_source = "trains.jpg"
 )
        

Progress Spinner

library(shiny)
library(shinymaterial)
  
  ui <- material_page(
    title = "Spinner Example",
    numericInput(inputId = "n", label = "", value = 10),
    plotOutput("n_plot")
 )
  
  server <- function(input, output, session) {
    
    output$n_plot <- renderPlot({
    
      #--- Show the spinner ---#
      material_spinner_show(session, "n_plot")
      
      #--- Simulate calculation step ---#
      Sys.sleep(time = 5)
      
      #--- Hide the spinner ---#
      material_spinner_hide(session, "n_plot")
      
      plot(1:input$n)
    })
    
  }
  shinyApp(ui = ui, server = server)
        

Server Side


open_material_modal()
side_nav_tabs_info()
update_material_checkbox()
update_material_date_picker()
update_material_dropdown()
update_material_number_box()
update_material_password_box()
update_material_radio_button()
update_material_slider()
update_material_switch()
update_material_text_box()


Dashboard
Basic App
Parallax
Cryptocurrency

CRAN

  • Version
    0.5.3
  • Date
    6.2.2018
  • New Functions
    open_material_modal()
    side_nav_tabs_info()
  • Function Updates
    New parameters
    material_modal()
    close_button_label, display_button

    material_page()
    include_nav_bar
  • Materialize
    v0.99.0
  • Version
    0.5.2
  • Date
    3.2.2018
  • New Functions
    material_file_input()
    material_spinner_hide()
    material_spinner_show()
    update_material_checkbox()
    update_material_date_picker
    update_material_dropdown()
    update_material_number_box()
    update_material_password_box()
    update_material_radio_button()
    update_material_slider()
    update_material_switch()
    update_material_text_box()
  • Function Updates
    New parameters
    material_page()
    include_fonts, nav_bar_fixed
  • Materialize
    v0.99.0
  • Version
    0.4.1
  • Date
    10.28.2017
  • New Functions
    material_side_nav_tabs()
    material_side_nav_tab_content()
    material_date_picker()
  • Function Updates
    New parameters
    material_page()
    font_color
  • Materialize
    v0.99.0
  • Version
    0.3.0
  • Date
    07.05.2017
  • New Functions
    None
  • Function Updates
    Various bug fixes
  • Materialize
    v0.99.0
  • Version
    0.2.1
  • Date
    04.29.2017
  • New Functions
    material_button()
    material_checkbox()
    material_depth()
    material_dropdown()
    material_floating_button()
    material_modal()
    material_number_box()
    material_password_box()
    material_radio_button()
    material_slider()
    material_switch()
    material_text_box()
  • Function Updates
    New parameters
    material_card()
    depth

    material_page()
    nav_bar_color, background_color

    material_side_nav()
    image_source, background_color

    material_tabs()
    color
  • Materialize
    v0.98.2
  • Version
    0.1.0
  • Date
    04.15.2017
  • New Functions
    material_card()
    material_column()
    material_input()
    material_page()
    material_parallax()
    material_row()
    material_side_nav()
    material_tabs()
    material_tab_content()
  • Function Updates
    None
  • Materialize
    v0.98.1

Development

  • Install
    devtools::install_github("ericrayanderson/shinymaterial")
  • Date
    On going
  • New Functions
    None
  • Function Updates
    None
  • Materialize
    v0.99.0