shinymaterial is an R package that implements Google's Material design in Shiny apps



Installation

install.packages(shinymaterial)

Templates

Basic

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)



Basic + Side-Nav + Tabs

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



Basic + 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)

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"
 )
        

Input colors


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

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


Modals


 material_modal(
   modal_id = "showcase_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"
 )
        


CRAN

  • 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

GitHub

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