From c356252ec30807b1b075d0cf0deda42fed06e9b7 Mon Sep 17 00:00:00 2001 From: Divad0175 Date: Sun, 14 Oct 2018 21:48:38 +0200 Subject: [PATCH] add tabs but bug in multiple selected tabs... --- NAMESPACE | 2 + R/argonTabs.R | 126 +++++++++++++++++++++++++++++++++++++++++++++ man/argonTab.Rd | 21 ++++++++ man/argonTabSet.Rd | 34 ++++++++++++ 4 files changed, 183 insertions(+) create mode 100644 R/argonTabs.R create mode 100644 man/argonTab.Rd create mode 100644 man/argonTabSet.Rd diff --git a/NAMESPACE b/NAMESPACE index fbd6df4..d851b87 100644 --- a/NAMESPACE +++ b/NAMESPACE @@ -5,3 +5,5 @@ export(argonBadge) export(argonCard) export(argonImage) export(argonSection) +export(argonTab) +export(argonTabSet) diff --git a/R/argonTabs.R b/R/argonTabs.R new file mode 100644 index 0000000..d93c017 --- /dev/null +++ b/R/argonTabs.R @@ -0,0 +1,126 @@ +#' Create a Boostrap 4 tabs +#' +#' Build an argon tabs +#' +#' @param ... Slot for \link{argonTab}. +#' @param id argonTabs id. Should be unique. +#' @param card_wrapper Whether to embed tab content in a card. FALSE by default. +#' @param horizontal Whether to display tabs horizontally. TRUE by default. +#' @param circle Whether to display circled design. FALSE by default. +#' @param size Tabs size. "sm" by default. "md", "lg". +#' +#' @examples +#' if (interactive()) { +#' } +#' +#' +#' @author David Granjon, \email{dgranjon@@ymail.com} +#' +#' @export +argonTabSet <- function(..., id, card_wrapper = FALSE, horizontal = TRUE, circle = FALSE, + size = "sm") { + + tabCl <- "nav nav-pills nav-fill flex-column" + if (horizontal) { + if (!is.null(size)) tabCl <- paste0(tabCl, " flex-", size, "-row") + } + if (circle) tabCl <- paste0(tabCl, " nav-pills-circle") + + tabItems <- list(...) + len_items <- length(tabItems) + + found_active <- FALSE + + # generate the menu + tabMenu <- htmltools::tags$div( + class = "nav-wrapper", + htmltools::tags$ul( + class = tabCl, + id = paste0(id, "-menu"), + role = "tablist", + lapply(X = 1:len_items, FUN = function(i) { + current_item <- tabItems[[i]] + current_item_cl <- current_item$attribs$class + current_item_name <- current_item$attribs$id + current_item_label <- paste0(current_item_name, "-tab") + + # make sure that if the user set 2 tabs active at the same time, + # only the first one is selected + if (!found_active) { + active <- sum(grep(x = current_item_cl, pattern = "show active")) == 1 + if (active) found_active <<- TRUE + # if there is already an active panel, set all other to inactive + } else { + active <- FALSE + } + + htmltools::tags$li( + class = "nav-item", + htmltools::a( + class = if (active) "nav-link mb-sm-3 mb-md-0 active" else "nav-link mb-sm-3 mb-md-0", + id = current_item_label, + `data-toggle` = "tab", + href = paste0("#", current_item_name), + role = "tab", + `aria-controls` = current_item_name, + `aria-selected` = "true", + current_item_name + ) + ) + }) + ) + ) + + # generate the container + tabContent <- htmltools::tags$div( + class = "tab-content", + id = id, + ... + ) + + tabWrapper <- if (card_wrapper) { + htmltools::tags$div( + class = "card shadow", + htmltools::tags$div(class = "card-body", tabContent) + ) + } else { + tabContent + } + + htmltools::tagList(tabMenu, tabWrapper) + +} + + + + +#' Create a Boostrap 4 tab item +#' +#' Build an argon tab item +#' +#' @param ... Tab content +#' @param tabName Tab name: it will be also passed as the id argument. Should be unique. +#' @param active Whether the tab is active or not. FALSE bu default. +#' +#' @author David Granjon, \email{dgranjon@@ymail.com} +#' +#' @export +argonTab <- function(..., tabName, active = FALSE) { + + tabCl <- if (active) "tab-pane fade show active" else "tab-pane fade" + + id <- tabName + # handle punctuation + id <- gsub(x = id, pattern = "[[:punct:]]", replacement = "") + # handle tab names with space + id <- gsub(x = id, pattern = " ", replacement = "") + + htmltools::tags$div( + class = tabCl, + role = "tabpanel", + id = id, + `aria-labelledby` = paste0(id, "-tab"), + ... + ) + +} \ No newline at end of file diff --git a/man/argonTab.Rd b/man/argonTab.Rd new file mode 100644 index 0000000..3806120 --- /dev/null +++ b/man/argonTab.Rd @@ -0,0 +1,21 @@ +% Generated by roxygen2: do not edit by hand +% Please edit documentation in R/argonTabs.R +\name{argonTab} +\alias{argonTab} +\title{Create a Boostrap 4 tab item} +\usage{ +argonTab(..., tabName, active = FALSE) +} +\arguments{ +\item{...}{Tab content} + +\item{tabName}{Tab name: it will be also passed as the id argument. Should be unique.} + +\item{active}{Whether the tab is active or not. FALSE bu default.} +} +\description{ +Build an argon tab item +} +\author{ +David Granjon, \email{dgranjon@ymail.com} +} diff --git a/man/argonTabSet.Rd b/man/argonTabSet.Rd new file mode 100644 index 0000000..c8e0719 --- /dev/null +++ b/man/argonTabSet.Rd @@ -0,0 +1,34 @@ +% Generated by roxygen2: do not edit by hand +% Please edit documentation in R/argonTabs.R +\name{argonTabSet} +\alias{argonTabSet} +\title{Create a Boostrap 4 tabs} +\usage{ +argonTabSet(..., id, card_wrapper = FALSE, horizontal = TRUE, + circle = FALSE, size = "sm") +} +\arguments{ +\item{...}{Slot for \link{argonTab}.} + +\item{id}{argonTabs id. Should be unique.} + +\item{card_wrapper}{Whether to embed tab content in a card. FALSE by default.} + +\item{horizontal}{Whether to display tabs horizontally. TRUE by default.} + +\item{circle}{Whether to display circled design. FALSE by default.} + +\item{size}{Tabs size. "sm" by default. "md", "lg".} +} +\description{ +Build an argon tabs +} +\examples{ +if (interactive()) { +} + + +} +\author{ +David Granjon, \email{dgranjon@ymail.com} +}