diff --git a/NEWS.md b/NEWS.md index 5c69a4f..4497bf2 100644 --- a/NEWS.md +++ b/NEWS.md @@ -1,4 +1,7 @@ # argonR 0.2.0.9000 +- change the icon parameter of `argonTabSet()`, `argonCard()`, `argonAlert()`, +`argonDropdownItem()` and `argonNavItem()` +Now you can use `icon("cogs")` from shiny or `argonIcon()` as usual - add offset arg to `argonColumn()` - Add btn_text argument to `argonCard()` - Fix #1: headroom.js and add the corresponding argument to `argonNavbar()` diff --git a/R/argonAlert.R b/R/argonAlert.R index 21d662a..73b6f9a 100644 --- a/R/argonAlert.R +++ b/R/argonAlert.R @@ -3,7 +3,7 @@ #' Build an argon alert #' #' @param ... Alert content. -#' @param icon Alert icon. +#' @param icon Alert icon. Expect \link{argonIcon} or \link[shiny]{icon}. #' @param status Alert status. See \url{https://demos.creative-tim.com/argon-design-system/docs/components/alerts.html}. #' @param closable Whether to make the alert closable or not. TRUE by default. #' @@ -11,7 +11,7 @@ #' if (interactive()) { #' library(argonR) #' argonAlert( -#' icon = "basket", +#' icon = argonIcon("basket"), #' status = "danger", #' "This is an alert", #' closable = TRUE @@ -33,7 +33,7 @@ argonAlert <- function(..., icon = NULL, status = "default", closable = TRUE) { if (!is.null(icon)) { htmltools::tags$span( class = "alert-inner--icon", - argonIcon(icon) + icon ) }, htmltools::tags$span( diff --git a/R/argonCard.R b/R/argonCard.R index 1c0e16f..d6417ae 100644 --- a/R/argonCard.R +++ b/R/argonCard.R @@ -11,7 +11,7 @@ #' @param shadow_size Card shadow size. Only if shadow is TRUE. NULL by default. #' @param hover_shadow Only if shadow is TRUE. Whether to enlarge the shadow on hover. FALSE by default. #' @param border_level Border level. O by default. -#' @param icon Card icon. +#' @param icon Card icon. Expect \link{argonIcon} or \link[shiny]{icon}. #' @param btn_text Button text. src arg must not be NULL so that this button appears. #' @param status Card status. See \url{https://demos.creative-tim.com/argon-design-system/docs/foundation/colors.html}. #' @param background_color Card background color. NULL by default. See \url{https://demos.creative-tim.com/argon-design-system/docs/foundation/colors.html}. @@ -29,7 +29,7 @@ #' title = "Card 1", #' hover_lift = TRUE, #' shadow = TRUE, -#' icon = "check-bold", +#' icon = argonIcon("check-bold"), #' src = "#", #' "Argon is a great free UI package based on Bootstrap 4 #' that includes the most important components and features." @@ -84,7 +84,7 @@ argonCard <- function(..., title = NULL, src = NULL, hover_lift = FALSE, if (!is.null(title)) { htmltools::tags$div( class = if (!is.null(background_color)) { - "cqrd-header bg-transparent" + "card-header bg-transparent" } else { "card-header" }, @@ -93,7 +93,7 @@ argonCard <- function(..., title = NULL, src = NULL, hover_lift = FALSE, # icon if(!is.null(icon)) { argonIconWrapper( - iconTag = argonIcon(name = icon, color = status), + iconTag = icon, circle = TRUE, size = "sm", shadow = TRUE, diff --git a/R/argonNavbar.R b/R/argonNavbar.R index 6f0ef9f..0a8b7b4 100644 --- a/R/argonNavbar.R +++ b/R/argonNavbar.R @@ -179,7 +179,7 @@ argonNavMenu <- function(..., side = "left") { #' #' @param name Item name. #' @param src HTML target page. -#' @param icon Item icon of any. +#' @param icon Item icon of any. Expect \link{argonIcon} or \link[shiny]{icon}. #' @param tooltip Text to display when the item is hovered. #' #' @author David Granjon, \email{dgranjon@@ymail.com} @@ -195,7 +195,7 @@ argonNavItem <- function(name = NULL, src = NULL, icon = NULL, tooltip = NULL) { `data-toggle` = "tooltip", title = "", `data-original-title` = tooltip, - htmltools::tags$i(class = paste0("fa fa-", icon)), + icon, htmltools::tags$span(class = "nav-link-inner--text d-lg-none", name) ) ) @@ -246,7 +246,7 @@ argonDropdown <- function(..., name, size = NULL) { #' @param name Item name. #' @param description Item description if any. #' @param src HTML target page. -#' @param icon Item icon of any. +#' @param icon Item icon of any. Expect \link{argonIcon} or \link[shiny]{icon}. #' @param status Icon and name color status. See \url{https://demos.creative-tim.com/argon-design-system/docs/foundation/colors.html}. #' #' @author David Granjon, \email{dgranjon@@ymail.com} @@ -260,7 +260,7 @@ argonDropdownItem <- function(name = NULL, description = NULL, src = NULL, # icon if any if (!is.null(icon)) { argonIconWrapper( - iconTag = argonIcon(icon, color = "white"), + iconTag = icon, gradient_color = status, circle = TRUE, size = NULL, diff --git a/R/argonTabs.R b/R/argonTabs.R index 7f1c7f9..ec22267 100644 --- a/R/argonTabs.R +++ b/R/argonTabs.R @@ -9,7 +9,7 @@ #' @param circle Whether to display circled design. FALSE by default. #' @param size Tabs size. "sm" by default. "md", "lg". #' @param width Tabs width. Between 1 and 12. -#' @param iconList A list of argonIcon such as list("atom", "cloud-upload-96"). +#' @param iconList A list of \link{argonIcon} or \link[shiny]{icon}. #' The lenght must have the same length as the number of tabs. NULL by default. #' #' @examples @@ -22,7 +22,11 @@ #' circle = FALSE, #' size = "sm", #' width = 6, -#' iconList = list("cloud-upload-96", "bell-55", "calendar-grid-58"), +#' iconList = list( +#' argonIcon("cloud-upload-96"), +#' argonIcon("bell-55"), +#' argonIcon("calendar-grid-58") +#' ), #' argonTab( #' tabName = "Tab 1", #' active = FALSE, @@ -97,7 +101,7 @@ argonTabSet <- function(..., id, card_wrapper = FALSE, horizontal = TRUE, circle role = "tab", `aria-controls` = ns(current_item_id), `aria-selected` = "true", - if (!is.null(iconList)) argonIcon(name = iconList[[i]]), + if (!is.null(iconList)) iconList[[i]], current_item_name ) ) diff --git a/docs/articles/getting_started.html b/docs/articles/getting_started.html index 5d82d00..d1e09d9 100644 --- a/docs/articles/getting_started.html +++ b/docs/articles/getting_started.html @@ -96,7 +96,7 @@

Getting Started

David Granjon

-

2019-06-04

+

2019-06-05

Source: vignettes/getting_started.Rmd @@ -177,54 +177,54 @@

name = "Getting Started", description = "Blabla", src = "", - icon = "spaceship", + icon = argonIcon("spaceship", color = "white"), status = "primary" ), argonDropdownItem( name = "Foundation", description = "Blabla", src = "", - icon = "palette", + icon = argonIcon("palette", color = "white"), status = "warning" ), argonDropdownItem( name = "Components", description = "Blabla", src = "", - icon = "ui-04", - status = "success" - ) - ) - ), - # right menu - argonNavMenu( - side = "right", - argonNavItem( - name = "facebook", - src = "https://www.facebook.com", - icon = "facebook-square", - tooltip = "Like us on Facebook" - ), - argonNavItem( - name = "instagram", - src = "https://www.instagram.com", - icon = "instagram", - tooltip = "Follow us on Instagram" - ), - argonNavItem( - name = "twitter", - src = "https://www.twitter.com", - icon = "twitter-square", - tooltip = "Follow us on Twitter" - ), - argonNavItem( - name = "github", - src = "https://www.github.com", - icon = "github", - tooltip = "Star us on Github" - ) - ) - ) + icon = argonIcon("ui-04", color = "white), + status = "success" + ) + ) + ), + # right menu + argonNavMenu( + side = "right", + argonNavItem( + name = "facebook", + src = "https://www.facebook.com", + icon = icon("facebook-square"), + tooltip = "Like us on Facebook" + ), + argonNavItem( + name = "instagram", + src = "https://www.instagram.com", + icon = icon("instagram"), + tooltip = "Follow us on Instagram" + ), + argonNavItem( + name = "twitter", + src = "https://www.twitter.com", + icon = icon("twitter-square"), + tooltip = "Follow us on Twitter" + ), + argonNavItem( + name = "github", + src = "https://www.github.com", + icon = icon("github"), + tooltip = "Star us on Github" + ) + ) + )


The argonNavbar() function accepts argonNavMenu(), which in turns takes argonNavItem() and argonDropdown().

@@ -380,493 +380,494 @@

name = "Getting Started", description = "BlaBlaBlaBlaBlaBlaBlaBlaBlaBlaBlaBlaBlaBlaBlaBlaBlaBla", src = "test.html", - icon = "spaceship", - status = "primary" - ), - argonDropdownItem( - name = "Foundation", - description = "BlaBlaBlaBlaBlaBlaBlaBlaBlaBlaBlaBlaBlaBlaBlaBlaBlaBla", - src = "", - icon = "palette", - status = "warning" - ), - argonDropdownItem( - name = "Components", - description = "BlaBlaBlaBlaBlaBlaBlaBlaBlaBlaBlaBlaBlaBlaBlaBlaBlaBla", - src = "", - icon = "ui-04", - status = "success" - ) - ) - ), - # right menu - argonNavMenu( - side = "right", - argonNavItem( - name = "facebook", - src = "https://www.facebook.com", - icon = "facebook-square", - tooltip = "Like us on Facebook" - ), - argonNavItem( - name = "instagram", - src = "https://www.instagram.com", - icon = "instagram", - tooltip = "Follow us on Instagram" - ), - argonNavItem( - name = "twitter", - src = "https://www.twitter.com", - icon = "twitter-square", - tooltip = "Follow us on Twitter" - ), - argonNavItem( - name = "github", - src = "https://www.github.com", - icon = "github", - tooltip = "Star us on Github" - ) - ) - ), - footer = argonFooter( - has_card = FALSE, - #status = "info", - #gradient = TRUE, - argonContainer( - size = "lg", - argonRow( - argonColumn( - width = 6, - argonIconWrapper( - iconTag = argonIcon("atom"), - size = "lg", - status = "success", - shadow = TRUE, - hover_shadow = TRUE - ), - argonH1( - display = 3, - "Insert anything in the footer" - ), - argonLead( - "The Arctic Ocean freezes every winter and much of - the sea-ice then thaws every summer, and that process - will continue whatever" - ) - ), - argonColumn( - width = 6, - argonCarousel( - width = 12, - id = "carousel2", - argonCarouselItem( - src = "https://demos.creative-tim.com/argon-design-system/assets/img/theme/img-1-1200x1000.jpg", - active = TRUE - ), - argonCarouselItem( - src = "https://demos.creative-tim.com/argon-design-system/assets/img/theme/img-2-1200x1000.jpg", - active = FALSE - ) - ) %>% argonPersp(side = "right") - ) - ) - ) - ) %>% argonMargin(orientation = "t", value = 20), - # main content - argonSection( - size = "lg", - status = "default", - gradient = TRUE, - separator = TRUE, - separator_color = "white", - shape = TRUE, - argonColumn( - argonRow( - argonColumn( - width = 6, - argonH1( - display = 3, - "ArgonR, HTML static template for R", - htmltools::span("completed with examples") - ) %>% argonTextColor(color = "white"), - argonLead( - "Argon is a great free UI package based on Bootstrap - 4 that includes the most important components and features" - ) %>% argonTextColor(color = "white") - ), - argonColumn( - width = 6, - argonImage( - src = "inst/images/imac.svg", - floating = TRUE - ) %>% argonPersp(side = "right") - %>% argonBlur() - ) - ) - ) %>% argonPadding(orientation = "x", value = 0) - ), - argonSection( - size = "lg", - status = NULL, - gradient = FALSE, - separator = FALSE, - separator_color = NULL, - shape = FALSE, - argonRow( - argonColumn( - width = 4, - argonCard( - status = "primary", - width = 12, - title = "Card 1", - hover_lift = TRUE, - shadow = TRUE, - icon = "check-bold", - src = "#", - "Argon is a great free UI package based on Bootstrap 4 - that includes the most important components and features." - ) %>% argonTooltip(position = "left", title = "I am a nice card") - ), - argonColumn( - width = 4, - argonCard( - status = "success", - width = 12, - title = "Card 2", - hover_lift = TRUE, - shadow = TRUE, - icon = "istanbul", - src = "#", - "Argon is a great free UI package based on Bootstrap 4 - that includes the most important components and features" - ) %>% argonTooltip(position = "top", title = "I am a nice card") - ), - argonColumn( - width = 4, - argonCard( - status = "warning", - width = 12, - title = "Card 3", - hover_lift = TRUE, - shadow = TRUE, - icon = "planet", - src = "#", - "Argon is a great free UI package based on Bootstrap 4 - that includes the most important components and features" - ) %>% argonTooltip(position = "bottom", title = "I am a nice card") - ) - ), - - # badges - argonH1(display = 3, "ArgonR elements") %>% argonPadding(orientation = "t", value = 5), - argonLead("Badges") %>% argonMuted(), - argonRow( - argonColumn( - width = 3, - argonBadge( - text = "My badge", - src = "https://www.google.com", - pill = TRUE, - status = "danger" - ) - ), - argonColumn( - width = 3, - argonBadge( - text = "My badge", - src = "https://www.google.com", - pill = TRUE, - status = "primary" - ) - ), - argonColumn( - width = 3, - argonBadge( - text = "My badge", - pill = TRUE, - status = "warning" - ) - ), - argonColumn( - width = 3, - argonBadge( - text = "My badge", - src = "https://www.google.com", - pill = FALSE, - status = "success" - ) - ) - ), - - # progress - argonLead("Progress") %>% argonMuted(), - argonRow( - argonColumn( - width = 4, - argonProgress(value = 10, status = "danger", text = "Custom Text") - ), - argonColumn( - width = 4, - argonProgress(value = 40, status = "info", text = NULL) - ), - argonColumn( - width = 4, - argonProgress(value = 90, status = "warning", text = argonIcon("atom")) - ) - ), - - # alerts - argonLead("Alerts") %>% argonMuted(), - argonRow( - argonColumn( - width = 4, - argonAlert( - icon = "basket", - status = "danger", - "This is an alert", - closable = TRUE - ) - ), - argonColumn( - width = 4, - argonAlert( - icon = "ui-02", - status = "success", - "This is an alert", - closable = TRUE - ) - ), - argonColumn( - width = 4, - argonAlert( - icon = "ui-03", - status = "info", - "This is an alert", - closable = TRUE - ) - ) - ), - - # tabs - argonLead("Tabs") %>% argonMuted(), - argonRow( - argonTabSet( - id = "tab-1", - card_wrapper = TRUE, - horizontal = TRUE, - circle = FALSE, - size = "sm", - width = 6, - iconList = list("cloud-upload-96", "bell-55", "calendar-grid-58"), - argonTab( - tabName = "Tab 1", - active = FALSE, - tabText1 - ), - argonTab( - tabName = "Tab 2", - active = TRUE, - tabText2 - ), - argonTab( - tabName = "Tab 3", - active = FALSE, - tabText3 - ) - ), - argonTabSet( - id = "tab-2", - card_wrapper = TRUE, - horizontal = FALSE, - circle = TRUE, - size = "sm", - argonTab( - tabName = "Tab 4", - active = FALSE, - tabText1 - ), - argonTab( - tabName = "Tab 5", - active = TRUE, - tabText2 - ), - argonTab( - tabName = "Tab 6", - active = FALSE, - tabText3 - ) - ) - ) - ) %>% argonMargin(orientation = "t", value = -200) - %>% argonPadding(orientation = "t", value = 0), - argonSection( - size = "lg", - status = "warning", - gradient = TRUE, - separator = TRUE, - separator_color = "white", - shape = FALSE, - argonContainer( - size = "lg", - argonRow( - argonColumn( - width = 6, - argonH1( - display = 3, - "Load modals", - htmltools::span("by clicking on buttons") - ) %>% argonTextColor(color = "white"), - argonButton( - name = "Click me!", - status = "danger", - icon = "atom", - size = "lg", - toggle_modal = TRUE, - modal_id = "modal1" - ) - ), - argonColumn( - width = 6, - argonModal( - id = "modal1", - title = "This is a modal", - status = "danger", - gradient = TRUE, - "YOU SHOULD READ THIS!", - br(), - "A small river named Duden flows by their place and supplies it with the necessary regelialia." - ), - argonImage( - floating = TRUE, - src = "https://demos.creative-tim.com/argon-design-system/assets/img/ill/ill-2.svg", - hover_lift = TRUE - ) %>% argonTooltip(position = "right", title = "I am a nice floating image") - %>% argonBlur(text = "Hi There!", text_color = "white") - ) - ) %>% argonPadding(orientation = "y", value = 5), - argonPagination( - size = "lg", - align = "center", - argonPaginationItem( - name = 1, - src = "test.html" - ), - argonPaginationItem( - name = 2, - src = "https://www.google.com" - ) - ) - ) - ), - argonSection( - size = "lg", - status = "white", - argonRow( - argonIconWrapper( - iconTag = argonIcon("atom"), - size = "lg", - status = "danger", - shadow = TRUE, - hover_shadow = TRUE - ), - argonH1(display = 3, "ArgonR social") %>% argonPadding(orientation = "l", value = 5) - ), - argonRow( - argonColumn( - width = 3, - argonUser( - title = "Ryan Tompson", - subtitle = "Web Developer", - src = "https://demos.creative-tim.com/argon-design-system/assets/img/theme/team-1-800x800.jpg" - ) %>% argonBlur(text = "Ryan Tompson", text_color = "default") - ), - argonColumn( - width = 3, - argonUser( - title = "Romina Hadid", - subtitle = "Marketing Strategist", - src = "https://demos.creative-tim.com/argon-design-system/assets/img/theme/team-2-800x800.jpg" - ) %>% argonBlur(text = "Romina Hadid", text_color = "default") - ), - argonColumn( - width = 3, - argonUser( - title = "Alexander Smith", - subtitle = "UI/UX Designer", - src = "https://demos.creative-tim.com/argon-design-system/assets/img/theme/team-3-800x800.jpg" - ) %>% argonBlur(text = "Alexander Smith", text_color = "default") - ), - argonColumn( - width = 3, - argonUser( - title = "John Doe", - subtitle = "Founder and CEO", - src = "https://demos.creative-tim.com/argon-design-system/assets/img/theme/team-4-800x800.jpg" - ) %>% argonBlur(text = "John Doe", text_color = "default") - ) - ) - # br(), br(), - # argonContainer( - # argonProfile( - # title = "John", - # subtitle = "Japan, Kagoshima", - # src = "https://image.flaticon.com/icons/svg/1006/1006540.svg", - # url = "https://www.google.com", - # url_1 = "https://www.google.com", - # url_2 = "https://www.google.com", - # stats = argonProfileStats( - # argonProfileStat( - # value = 22, - # description = "Friends" - # ), - # argonProfileStat( - # value = 10, - # description = "Photos" - # ), - # argonProfileStat( - # value = 89, - # description = "Comments" - # ) - # ), - # "An artist of considerable range, Ryan — - # the name taken by Melbourne-raised, - # Brooklyn-based Nick Murphy — writes, - # performs and records all of his own music, - # giving it a warm, intimate feel with a solid - # groove structure. An artist of considerable - # range." - # ) - # ) - ), - argonSection( - size = "lg", - status = "default", - cascade = TRUE, - - argonH1(display = 3, "ArgonR Cascade Effect") %>% - argonPadding(orientation = "l", value = 5) %>% - argonPadding(orientation = "b", value = 5) %>% - argonTextColor(color = "white"), - - argonCascade( - argonCascadeItem(name = "diamond", src = "https://www.google.com"), - argonCascadeItem(name = "album-2", size = "sm"), - argonCascadeItem(name = "app", size = "sm"), - argonCascadeItem(name = "atom", size = "sm"), - argonCascadeItem(name = "bag-17", src = "https://www.google.com"), - argonCascadeItem(name = "bell-55"), - argonCascadeItem(name = "credit-card"), - argonCascadeItem(name = "briefcase-24", size = "sm", "https://www.google.com"), - argonCascadeItem(name = "building", size = "sm"), - argonCascadeItem(name = "button-play", size = "sm"), - argonCascadeItem(name = "calendar-grid-58"), - argonCascadeItem(name = "camera-compact"), - argonCascadeItem(name = "chart-bar-32") - ) - ) -) - -argonPageTemplate(filename = "example", path = getwd(), example) + icon = argonIcon(name = "spaceship" color = "primary") + ), + argonDropdownItem( + name = "Foundation", + description = "BlaBlaBlaBlaBlaBlaBlaBlaBlaBlaBlaBlaBlaBlaBlaBlaBlaBla", + src = "", + icon = argonIcon(name = "palette" color = "warning") + ), + argonDropdownItem( + name = "Components", + description = "BlaBlaBlaBlaBlaBlaBlaBlaBlaBlaBlaBlaBlaBlaBlaBlaBlaBla", + src = "", + icon = argonIcon(name = "ui-04" color = "success") + ) + ) + ), + # right menu + argonNavMenu( + side = "right", + argonNavItem( + name = "facebook", + src = "https://www.facebook.com", + icon = icon("facebook-square"), + tooltip = "Like us on Facebook" + ), + argonNavItem( + name = "instagram", + src = "https://www.instagram.com", + icon = icon("instagram"), + tooltip = "Follow us on Instagram" + ), + argonNavItem( + name = "twitter", + src = "https://www.twitter.com", + icon = icon("twitter-square"), + tooltip = "Follow us on Twitter" + ), + argonNavItem( + name = "github", + src = "https://www.github.com", + icon = icon("github"), + tooltip = "Star us on Github" + ) + ) + ), + footer = argonFooter( + has_card = FALSE, + #status = "info", + #gradient = TRUE, + argonContainer( + size = "lg", + argonRow( + argonColumn( + width = 6, + argonIconWrapper( + iconTag = argonIcon("atom"), + size = "lg", + status = "success", + shadow = TRUE, + hover_shadow = TRUE + ), + argonH1( + display = 3, + "Insert anything in the footer" + ), + argonLead( + "The Arctic Ocean freezes every winter and much of + the sea-ice then thaws every summer, and that process + will continue whatever" + ) + ), + argonColumn( + width = 6, + argonCarousel( + width = 12, + id = "carousel2", + argonCarouselItem( + src = "https://demos.creative-tim.com/argon-design-system/assets/img/theme/img-1-1200x1000.jpg", + active = TRUE + ), + argonCarouselItem( + src = "https://demos.creative-tim.com/argon-design-system/assets/img/theme/img-2-1200x1000.jpg", + active = FALSE + ) + ) %>% argonPersp(side = "right") + ) + ) + ) + ) %>% argonMargin(orientation = "t", value = 20), + # main content + argonSection( + size = "lg", + status = "default", + gradient = TRUE, + separator = TRUE, + separator_color = "white", + shape = TRUE, + argonColumn( + argonRow( + argonColumn( + width = 6, + argonH1( + display = 3, + "ArgonR, HTML static template for R", + htmltools::span("completed with examples") + ) %>% argonTextColor(color = "white"), + argonLead( + "Argon is a great free UI package based on Bootstrap + 4 that includes the most important components and features" + ) %>% argonTextColor(color = "white") + ), + argonColumn( + width = 6, + argonImage( + src = "inst/images/imac.svg", + floating = TRUE + ) %>% argonPersp(side = "right") + %>% argonBlur() + ) + ) + ) %>% argonPadding(orientation = "x", value = 0) + ), + argonSection( + size = "lg", + status = NULL, + gradient = FALSE, + separator = FALSE, + separator_color = NULL, + shape = FALSE, + argonRow( + argonColumn( + width = 4, + argonCard( + status = "primary", + width = 12, + title = "Card 1", + hover_lift = TRUE, + shadow = TRUE, + icon = argonIcon("check-bold"), + src = "#", + "Argon is a great free UI package based on Bootstrap 4 + that includes the most important components and features." + ) %>% argonTooltip(position = "left", title = "I am a nice card") + ), + argonColumn( + width = 4, + argonCard( + status = "success", + width = 12, + title = "Card 2", + hover_lift = TRUE, + shadow = TRUE, + icon = argonIcon("istanbul"), + src = "#", + "Argon is a great free UI package based on Bootstrap 4 + that includes the most important components and features" + ) %>% argonTooltip(position = "top", title = "I am a nice card") + ), + argonColumn( + width = 4, + argonCard( + status = "warning", + width = 12, + title = "Card 3", + hover_lift = TRUE, + shadow = TRUE, + icon = argonIcon("planet"), + src = "#", + "Argon is a great free UI package based on Bootstrap 4 + that includes the most important components and features" + ) %>% argonTooltip(position = "bottom", title = "I am a nice card") + ) + ), + + # badges + argonH1(display = 3, "ArgonR elements") %>% argonPadding(orientation = "t", value = 5), + argonLead("Badges") %>% argonMuted(), + argonRow( + argonColumn( + width = 3, + argonBadge( + text = "My badge", + src = "https://www.google.com", + pill = TRUE, + status = "danger" + ) + ), + argonColumn( + width = 3, + argonBadge( + text = "My badge", + src = "https://www.google.com", + pill = TRUE, + status = "primary" + ) + ), + argonColumn( + width = 3, + argonBadge( + text = "My badge", + pill = TRUE, + status = "warning" + ) + ), + argonColumn( + width = 3, + argonBadge( + text = "My badge", + src = "https://www.google.com", + pill = FALSE, + status = "success" + ) + ) + ), + + # progress + argonLead("Progress") %>% argonMuted(), + argonRow( + argonColumn( + width = 4, + argonProgress(value = 10, status = "danger", text = "Custom Text") + ), + argonColumn( + width = 4, + argonProgress(value = 40, status = "info", text = NULL) + ), + argonColumn( + width = 4, + argonProgress(value = 90, status = "warning", text = argonIcon("atom")) + ) + ), + + # alerts + argonLead("Alerts") %>% argonMuted(), + argonRow( + argonColumn( + width = 4, + argonAlert( + icon = argonIcon("basket"), + status = "danger", + "This is an alert", + closable = TRUE + ) + ), + argonColumn( + width = 4, + argonAlert( + icon = argonIcon("ui-02"), + status = "success", + "This is an alert", + closable = TRUE + ) + ), + argonColumn( + width = 4, + argonAlert( + icon = argonIcon("ui-03"), + status = "info", + "This is an alert", + closable = TRUE + ) + ) + ), + + # tabs + argonLead("Tabs") %>% argonMuted(), + argonRow( + argonTabSet( + id = "tab-1", + card_wrapper = TRUE, + horizontal = TRUE, + circle = FALSE, + size = "sm", + width = 6, + iconList = list( + argonIcon("cloud-upload-96"), + argonIcon("bell-55"), + argonicon("calendar-grid-58") + ), + argonTab( + tabName = "Tab 1", + active = FALSE, + tabText1 + ), + argonTab( + tabName = "Tab 2", + active = TRUE, + tabText2 + ), + argonTab( + tabName = "Tab 3", + active = FALSE, + tabText3 + ) + ), + argonTabSet( + id = "tab-2", + card_wrapper = TRUE, + horizontal = FALSE, + circle = TRUE, + size = "sm", + argonTab( + tabName = "Tab 4", + active = FALSE, + tabText1 + ), + argonTab( + tabName = "Tab 5", + active = TRUE, + tabText2 + ), + argonTab( + tabName = "Tab 6", + active = FALSE, + tabText3 + ) + ) + ) + ) %>% argonMargin(orientation = "t", value = -200) + %>% argonPadding(orientation = "t", value = 0), + argonSection( + size = "lg", + status = "warning", + gradient = TRUE, + separator = TRUE, + separator_color = "white", + shape = FALSE, + argonContainer( + size = "lg", + argonRow( + argonColumn( + width = 6, + argonH1( + display = 3, + "Load modals", + htmltools::span("by clicking on buttons") + ) %>% argonTextColor(color = "white"), + argonButton( + name = "Click me!", + status = "danger", + icon = "atom", + size = "lg", + toggle_modal = TRUE, + modal_id = "modal1" + ) + ), + argonColumn( + width = 6, + argonModal( + id = "modal1", + title = "This is a modal", + status = "danger", + gradient = TRUE, + "YOU SHOULD READ THIS!", + br(), + "A small river named Duden flows by their place and supplies it with the necessary regelialia." + ), + argonImage( + floating = TRUE, + src = "https://demos.creative-tim.com/argon-design-system/assets/img/ill/ill-2.svg", + hover_lift = TRUE + ) %>% argonTooltip(position = "right", title = "I am a nice floating image") + %>% argonBlur(text = "Hi There!", text_color = "white") + ) + ) %>% argonPadding(orientation = "y", value = 5), + argonPagination( + size = "lg", + align = "center", + argonPaginationItem( + name = 1, + src = "test.html" + ), + argonPaginationItem( + name = 2, + src = "https://www.google.com" + ) + ) + ) + ), + argonSection( + size = "lg", + status = "white", + argonRow( + argonIconWrapper( + iconTag = argonIcon("atom"), + size = "lg", + status = "danger", + shadow = TRUE, + hover_shadow = TRUE + ), + argonH1(display = 3, "ArgonR social") %>% argonPadding(orientation = "l", value = 5) + ), + argonRow( + argonColumn( + width = 3, + argonUser( + title = "Ryan Tompson", + subtitle = "Web Developer", + src = "https://demos.creative-tim.com/argon-design-system/assets/img/theme/team-1-800x800.jpg" + ) %>% argonBlur(text = "Ryan Tompson", text_color = "default") + ), + argonColumn( + width = 3, + argonUser( + title = "Romina Hadid", + subtitle = "Marketing Strategist", + src = "https://demos.creative-tim.com/argon-design-system/assets/img/theme/team-2-800x800.jpg" + ) %>% argonBlur(text = "Romina Hadid", text_color = "default") + ), + argonColumn( + width = 3, + argonUser( + title = "Alexander Smith", + subtitle = "UI/UX Designer", + src = "https://demos.creative-tim.com/argon-design-system/assets/img/theme/team-3-800x800.jpg" + ) %>% argonBlur(text = "Alexander Smith", text_color = "default") + ), + argonColumn( + width = 3, + argonUser( + title = "John Doe", + subtitle = "Founder and CEO", + src = "https://demos.creative-tim.com/argon-design-system/assets/img/theme/team-4-800x800.jpg" + ) %>% argonBlur(text = "John Doe", text_color = "default") + ) + ) + # br(), br(), + # argonContainer( + # argonProfile( + # title = "John", + # subtitle = "Japan, Kagoshima", + # src = "https://image.flaticon.com/icons/svg/1006/1006540.svg", + # url = "https://www.google.com", + # url_1 = "https://www.google.com", + # url_2 = "https://www.google.com", + # stats = argonProfileStats( + # argonProfileStat( + # value = 22, + # description = "Friends" + # ), + # argonProfileStat( + # value = 10, + # description = "Photos" + # ), + # argonProfileStat( + # value = 89, + # description = "Comments" + # ) + # ), + # "An artist of considerable range, Ryan — + # the name taken by Melbourne-raised, + # Brooklyn-based Nick Murphy — writes, + # performs and records all of his own music, + # giving it a warm, intimate feel with a solid + # groove structure. An artist of considerable + # range." + # ) + # ) + ), + argonSection( + size = "lg", + status = "default", + cascade = TRUE, + + argonH1(display = 3, "ArgonR Cascade Effect") %>% + argonPadding(orientation = "l", value = 5) %>% + argonPadding(orientation = "b", value = 5) %>% + argonTextColor(color = "white"), + + argonCascade( + argonCascadeItem(name = "diamond", src = "https://www.google.com"), + argonCascadeItem(name = "album-2", size = "sm"), + argonCascadeItem(name = "app", size = "sm"), + argonCascadeItem(name = "atom", size = "sm"), + argonCascadeItem(name = "bag-17", src = "https://www.google.com"), + argonCascadeItem(name = "bell-55"), + argonCascadeItem(name = "credit-card"), + argonCascadeItem(name = "briefcase-24", size = "sm", "https://www.google.com"), + argonCascadeItem(name = "building", size = "sm"), + argonCascadeItem(name = "button-play", size = "sm"), + argonCascadeItem(name = "calendar-grid-58"), + argonCascadeItem(name = "camera-compact"), + argonCascadeItem(name = "chart-bar-32") + ) + ) +) + +argonPageTemplate(filename = "example", path = getwd(), example)


diff --git a/docs/news/index.html b/docs/news/index.html index db6f0dc..9b6caab 100644 --- a/docs/news/index.html +++ b/docs/news/index.html @@ -133,6 +133,7 @@

argonR 0.2.0.9000 Unreleased