#' Place UI content within a side-nav tab
#'
#' Use this function to create side-nav tabs in your application.
#' @param side_nav_tabs Named vector. The side-nav tab display names and corresponding side-nav tab ids.
#' @param icons String vector. The names of the icons. Leave blank for no icons, or use "none". The length of the vector must match the length of side_nav_tabs. Visit \url{https://materializecss.com/icons.html} for a list of available icons.
#' @param color String. The accent color of the side-nav tab wave animation. Leave blank for the default color. Visit \url{https://materializecss.com/waves.html} for a list of available colors. \emph{Side-nav tab color requires using word forms of colors (e.g. "purple").}
#' @param font_color String. The side-nav tabs font color. Leave blank for the default color. Visit \url{https://materializecss.com/color.html} for a list of available colors. \emph{Side-nav tab color requires using word forms of colors (e.g. "deep-purple"). Also, lighten or darken effects do not work on side-nav tab colors.}
#' @seealso \code{\link{material_side_nav_tab_content}}
#' @examples
#' 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("cloud", "none"),
#' color = "teal"
#' )
material_side_nav_tabs <- function(side_nav_tabs, icons = NULL, color = NULL, font_color = NULL){
if(!is.null(icons)){
side_nav_tabs_length <- length(side_nav_tabs)
icons_length <- length(icons)
if(side_nav_tabs_length != icons_length){
stop(paste0("Length side_nav_tabs (",
side_nav_tabs_length,
") not equal to length icons (", icons_length, ")."))
}
}
material_side_nav_tabs <- shiny::tagList()
for(i in 1:length(side_nav_tabs)){
icon_tag.i <- NULL
if(!is.null(icons)){
if(icons[[i]] != ""){
icon_tag.i <-
shiny::HTML(
paste0(
'<i class="material-icons">',
icons[[i]],
'</i>')
)
}
}
material_side_nav_tabs[[i]] <-
shiny::tags$li(
class = "shiny-material-side-nav-tab",
id = paste0(side_nav_tabs[[i]], "_tab_id"),
shiny::tags$a(
class =
paste0(
"waves-effect ",
ifelse(
is.null(color),
"",
paste0("waves-", color)
),
ifelse(
is.null(font_color),
"",
paste0(" ", font_color, "-text")
)
),
href = "javascript:void(0)",
onclick = paste0(
"$('.shiny-material-side-nav-tab-content').hide();",
"$('.shiny-material-side-nav-tab-content').trigger('hide');",
"$('.shiny-material-side-nav-tab-content').trigger('hidden');",
"$('.shiny-material-side-nav-tab').removeClass('active');",
"$('#", side_nav_tabs[[i]], "').show();",
"$('#", side_nav_tabs[[i]], "').trigger('show');",
"$('#", side_nav_tabs[[i]], "').trigger('shown');",
"$('#", paste0(side_nav_tabs[[i]], "_tab_id"), "').addClass('active');",
"$('#side_nav_tabs_click_info').trigger('click');"
),
icon_tag.i, names(side_nav_tabs)[[i]]
)
)
}
shiny::tagList(
shiny::tags$div(id = "side_nav_tabs_click_info"),
material_side_nav_tabs
)
}
Add the following code to your website.
For more information on customizing the embed code, read Embedding Snippets.