diff --git a/DESCRIPTION b/DESCRIPTION
index f0dc51a..667b71e 100644
--- a/DESCRIPTION
+++ b/DESCRIPTION
@@ -1,7 +1,7 @@
Package: shinymaterial
Type: Package
Title: Implement Material Design in Shiny Applications
-Version: 0.1.0.9000
+Version: 0.2.1
Authors@R: c(
person("Eric", "Anderson", role = c("aut", "cre"), email = "eric.ray.anderson@gmail.com"),
person("Alvin", "Wang", role = c("ctb", "cph"), comment = "Materialize CSS library"),
@@ -17,12 +17,3 @@ Imports: shiny (>= 0.7.0)
Encoding: UTF-8
LazyData: true
RoxygenNote: 6.0.1
-NeedsCompilation: no
-Packaged: 2017-04-14 19:58:37 UTC; ericanderson
-Author: Eric Anderson [aut, cre],
- Alvin Wang [ctb, cph] (Materialize CSS library),
- Alan Chang [ctb, cph] (Materialize CSS library),
- Alex Mark [ctb, cph] (Materialize CSS library),
- Kevin Louie [ctb, cph] (Materialize CSS library)
-Repository: CRAN
-Date/Publication: 2017-04-15 05:14:08 UTC
diff --git a/NAMESPACE b/NAMESPACE
index 2cacbf2..dde3fb5 100644
--- a/NAMESPACE
+++ b/NAMESPACE
@@ -1,12 +1,22 @@
+export(material_button)
export(material_card)
+export(material_checkbox)
export(material_column)
export(material_depth)
+export(material_dropdown)
+export(material_floating_button)
export(material_input)
export(material_modal)
+export(material_number_box)
export(material_page)
export(material_parallax)
+export(material_password_box)
+export(material_radio_button)
export(material_row)
export(material_side_nav)
-export(material_tabs)
+export(material_slider)
+export(material_switch)
export(material_tab_content)
+export(material_tabs)
+export(material_text_box)
diff --git a/R/shiny-material-button.R b/R/shiny-material-button.R
index 8f536d1..f08aba7 100644
--- a/R/shiny-material-button.R
+++ b/R/shiny-material-button.R
@@ -1,26 +1,22 @@
-material_button <- function(input_id, label, icon = NULL) {
-
- required_arguments <- c("icon")
-
- for(required_argument.i in required_arguments){
- if(is.null(get(required_argument.i))){
- stop(
- material_missing_argument_error_message(
- argument = required_argument.i,
- input_id = input_id,
- type = "button",
- additional_text =
- paste0(
- '\nSet icon = "no_icon" to not include an icon',
- "\nPlease goto http://materializecss.com/icons.html for available icons",
- '\ne.g. icon = "search"'
- )
- )
- )
- }
- }
-
- if(icon != "no_icon"){
+#' Create a shinymaterial button
+#'
+#' Build a shinymaterial button. The initial value is zero, and increases by one on each press.
+#' @param input_id String. The input identifier used to access the value.
+#' @param label String. The button text.
+#' @param icon String. The name of the icon. Leave empty for no icon. Visit \url{http://materializecss.com/icons.html} for a list of available icons.
+#' @param depth Integer. The amount of depth of the button. The value should be between 0 and 5. Leave empty for the default depth.
+#' @param color String. The color of the button. Leave empty for the default color. Visit \url{http://materializecss.com/color.html} for a list of available colors.
+#' @examples
+#' material_button(
+#' input_id = "example_button",
+#' label = "Button",
+#' icon = "cloud",
+#' depth = 5,
+#' color = "blue lighten-2"
+#' )
+material_button <- function(input_id, label, icon = NULL, depth = NULL, color = NULL) {
+
+ if(!is.null(icon)){
icon_tag <-
shiny::HTML(
paste0(
@@ -31,14 +27,27 @@ material_button <- function(input_id, label, icon = NULL) {
} else {
icon_tag <- NULL
}
-
+
create_material_object(
js_file =
"shiny-material-button.js",
material_tag_list =
shiny::tagList(
shiny::tags$button(
- class = "waves-effect waves-light btn shiny-material-button",
+ class =
+ paste0(
+ "waves-effect waves-light btn shiny-material-button",
+ ifelse(
+ is.null(depth),
+ "",
+ paste0(" z-depth-", depth)
+ ),
+ ifelse(
+ is.null(color),
+ "",
+ paste0(" ", color)
+ )
+ ),
id = input_id,
value = 0,
icon_tag,
diff --git a/R/shiny-material-card.R b/R/shiny-material-card.R
index d7278ce..955e670 100644
--- a/R/shiny-material-card.R
+++ b/R/shiny-material-card.R
@@ -3,15 +3,25 @@
#' UI content can be placed in cards to organize items on a page.
#' @param title String. The title of the card
#' @param ... The UI elements to place in the card
+#' @param depth Integer. The amount of depth of the card. The value should be between 0 and 5. Leave empty for the default depth.
#' @examples
#' material_card(
#' title = "Example Card",
-#' shiny::tags$h1("Card Content")
+#' depth = 5,
+#' shiny::tags$h5("Card Content")
#' )
-material_card <- function(title, ...){
-
+material_card <- function(title, ..., depth = NULL){
+
shiny::tags$div(
- class = "card",
+ class =
+ paste0(
+ "card",
+ ifelse(
+ is.null(depth),
+ "",
+ paste0(" z-depth-", depth)
+ )
+ ),
shiny::tags$div(
class = "card-content",
shiny::tags$span(
diff --git a/R/shiny-material-checkbox.R b/R/shiny-material-checkbox.R
index 8b7a3c3..3dc4a10 100644
--- a/R/shiny-material-checkbox.R
+++ b/R/shiny-material-checkbox.R
@@ -1,21 +1,55 @@
-material_checkbox <- function(input_id, label, initial_value = NULL) {
+#' Create a shinymaterial checkbox
+#'
+#' Build a shinymaterial checkbox. The value is a boolean (TRUE if checked, FALSE if not checked).
+#' @param input_id String. The input identifier used to access the value.
+#' @param label String. The checkbox label.
+#' @param initial_value Boolean. Is the checkbox initially checked?
+#' @param color String. The color of the check. Leave empty for the default color. Visit \url{http://materializecss.com/color.html} for a list of available colors. \emph{This input requires using color hex codes, rather than the word form. E.g., '#ef5350', rather than 'red lighten-1'.}
+#' @examples
+#' material_checkbox(
+#' input_id = "example_checkbox",
+#' label = "Checkbox",
+#' initial_value = TRUE,
+#' color = "ef5350"
+#' )
+material_checkbox <- function(input_id, label, initial_value = FALSE, color = NULL) {
- required_arguments <- c("initial_value")
-
- for(required_argument.i in required_arguments){
- if(is.null(get(required_argument.i))){
- stop(
- material_missing_argument_error_message(
- argument = required_argument.i,
- input_id = input_id,
- type = "checkbox",
- additional_text =
+ if(!is.null(color)){
+
+ checkbox_style <-
+ shiny::tagList(
+ shiny::tags$head(
+ shiny::tags$style(
paste0(
- '\ninitial_value is a boolean (TRUE or FALSE)'
+ '
+ .shinymaterial-checkbox-', input_id,':checked + label:before {
+ top: -4px;
+ left: -3px;
+ width: 12px;
+ height: 22px;
+ border-top: 2px solid transparent;
+ border-left: 2px solid transparent;
+ border-right: 2px solid ', color, ';
+ border-bottom: 2px solid ', color, ';
+ -webkit-transform: rotate(40deg);
+ -moz-transform: rotate(40deg);
+ -ms-transform: rotate(40deg);
+ -o-transform: rotate(40deg);
+ transform: rotate(40deg);
+ -webkit-backface-visibility: hidden;
+ -webkit-transform-origin: 100% 100%;
+ -moz-transform-origin: 100% 100%;
+ -ms-transform-origin: 100% 100%;
+ -o-transform-origin: 100% 100%;
+ transform-origin: 100% 100%; }
+ '
)
+ )
)
)
- }
+
+ } else {
+ checkbox_style <- shiny::tags$div()
}
create_material_object(
@@ -31,10 +65,16 @@ material_checkbox <- function(input_id, label, initial_value = NULL) {
paste0(
'',
- '"/>'
+ ' checked="checked"/>',
+ '/>'
)
)
),
@@ -43,7 +83,8 @@ material_checkbox <- function(input_id, label, initial_value = NULL) {
label
)
)
- )
+ ),
+ checkbox_style
)
)
}
diff --git a/R/shiny-material-column.R b/R/shiny-material-column.R
index 954738f..82f30f3 100644
--- a/R/shiny-material-column.R
+++ b/R/shiny-material-column.R
@@ -1,9 +1,9 @@
#' Create a column to organize UI content
#'
#' UI content can be placed in columns to organize items on a page.
-#' @param ... The UI elements to place in the column
-#' @param width Integer. The width of the column. The value should be between 1 and 12
-#' @param offset Integer. The offset to the left of the column. The value should be between 0 and 11
+#' @param ... The UI elements to place in the column.
+#' @param width Integer. The width of the column. The value should be between 1 and 12.
+#' @param offset Integer. The offset to the left of the column. The value should be between 0 and 11.
#' @examples
#' material_column(
#' width = 4,
diff --git a/R/shiny-material-depth.R b/R/shiny-material-depth.R
index b88a77c..d5e9255 100644
--- a/R/shiny-material-depth.R
+++ b/R/shiny-material-depth.R
@@ -1,7 +1,7 @@
#' Add depth to a UI element
#'
-#' Give a UI element an illusion of depth by creating a shadow.
-#' @param ... The UI elements to place in the column
+#' Give a UI element the perception of depth by creating a shadow.
+#' @param ... The UI elements to apply the depth.
#' @param depth Integer. The amount of depth. The value should be between 0 and 5. A value of 0 can be used to remove depth from objects that have depth by default.
#' @examples
#' material_depth(
diff --git a/R/shiny-material-dropdown.R b/R/shiny-material-dropdown.R
index 9450f01..b46a4c1 100644
--- a/R/shiny-material-dropdown.R
+++ b/R/shiny-material-dropdown.R
@@ -1,40 +1,52 @@
-material_dropdown <- function(input_id, label, choices = NULL, selected = NULL, multiple = NULL) {
-
- required_arguments <- c("choices",
- "selected",
- "multiple")
-
- for(required_argument.i in required_arguments){
- if(is.null(get(required_argument.i))){
- stop(
- material_missing_argument_error_message(
- argument = required_argument.i,
- input_id = input_id,
- type = "dropdown",
- additional_text =
+#' Create a shinymaterial dropdown
+#'
+#' Build a shinymaterial dropdown.
+#' @param input_id String. The input identifier used to access the value.
+#' @param label String. The dropdown label.
+#' @param choices Named vector. The option names and underyling values.
+#' @param selected String. The initially selected underyling value.
+#' @param multiple Boolean. Can multiple items be selected?
+#' @param color String. The color of the dropdown choices. Leave empty for the default color. Visit \url{http://materializecss.com/color.html} for a list of available colors. \emph{This input requires using color hex codes, rather than the word form. E.g., '#ef5350', rather than 'red lighten-1'.}
+#' @examples
+#' material_dropdown(
+#' input_id = "example_dropdown",
+#' label = "Drop down",
+#' choices = c(
+#' "Chicken" = "c",
+#' "Steak" = "s",
+#' "Fish" = "f"
+#' ),
+#' selected = c("c"),
+#' multiple = FALSE,
+#' color = "#ef5350"
+#' )
+material_dropdown <- function(input_id, label, choices = NULL, selected = NULL, multiple = NULL, color = NULL){
+
+ if(!is.null(color)){
+
+ dropdown_style <-
+ shiny::tagList(
+ shiny::tags$head(
+ shiny::tags$style(
paste0(
- '\nSet selected = "no_selection" to select the first item in the list',
- '\nSet multiple = TRUE for a multi-select'
+ '
+ #shiny-material-dropdown-', input_id, ' ul.dropdown-content.select-dropdown li span {
+ color: ', color, ';
+ }
+ '
)
+ )
)
)
- }
+
+ } else {
+ dropdown_style <- shiny::tags$div()
}
-
+
has_names <- !is.null(names(choices))
-
- if(length(selected) > 1 & !multiple){
- stop(
- paste0(
- "Argument 'selected' must be of length 1 when argument 'mutliple' = FALSE ",
- "\ninput_id: ", input_id,
- "\ntype: ", "dropdown"
- )
- )
- }
-
+
if(length(selected) == 1){
- if(selected == "no_selection"){
+ if(is.null(selected)){
selected_index <- 1
} else {
selected_index <- which(choices == selected)
@@ -42,7 +54,7 @@ material_dropdown <- function(input_id, label, choices = NULL, selected = NULL,
} else {
selected_index <- which(choices %in% selected)
}
-
+
material_option_tag_list <- shiny::tagList()
#comment
for(i in 1:length(choices)){
@@ -66,13 +78,14 @@ material_dropdown <- function(input_id, label, choices = NULL, selected = NULL,
)
)
}
-
+
create_material_object(
js_file = "shiny-material-dropdown.js",
material_tag_list =
shiny::tagList(
shiny::tags$div(
class = "input-field",
+ id = paste0('shiny-material-dropdown-', input_id),
shiny::HTML(
paste0(
"