Type: | Package |
Title: | R Interface to Argon HTML Design |
Version: | 0.2.0 |
Maintainer: | David Granjon <dgranjon@ymail.com> |
Description: | R wrapper around the argon HTML library. More at https://demos.creative-tim.com/argon-design-system/. |
URL: | https://github.com/RinteRface/argonR |
BugReports: | https://github.com/RinteRface/argonR/issues |
Imports: | htmltools, utils, rstudioapi |
Suggests: | magrittr, knitr, rmarkdown, shiny |
License: | GPL-2 |
Encoding: | UTF-8 |
LazyData: | true |
RoxygenNote: | 7.0.1 |
VignetteBuilder: | knitr |
NeedsCompilation: | no |
Packaged: | 2019-11-27 08:04:48 UTC; davidgranjon |
Author: | David Granjon [aut, cre], RinteRface [cph], Creative Tim [ctb, cph] (Argon theme for Bootstrap 4), Winston Chang [ctb, cph] (Unexported functions from htmltools) |
Repository: | CRAN |
Date/Publication: | 2019-11-27 08:30:02 UTC |
Namespaced IDs for inputs/outputs
Description
Namespaced IDs for inputs/outputs
Usage
NS(namespace, id = NULL)
ns.sep
Arguments
namespace |
The character vector to use for the namespace. This can have any length, though a single element is most common. Length 0 will cause the id to be returned without a namespace, and length 2 will be interpreted as multiple namespaces, in increasing order of specificity (i.e. starting with the top-level namespace). |
id |
The id string to be namespaced (optional). |
Format
An object of class character
of length 1.
Create a Boostrap 4 argon alert
Description
Build an argon alert
Usage
argonAlert(..., icon = NULL, status = "default", closable = TRUE)
Arguments
... |
Alert content. |
icon |
|
status |
Alert status. See https://demos.creative-tim.com/argon-design-system/docs/components/alerts.html. |
closable |
Whether to make the alert closable or not. TRUE by default. |
Author(s)
David Granjon, dgranjon@ymail.com
Examples
if (interactive()) {
library(argonR)
argonAlert(
icon = argonIcon("basket"),
status = "danger",
"This is an alert",
closable = TRUE
)
}
Create a Boostrap 4 badge
Description
Build an argon badge
Usage
argonBadge(text = NULL, src = NULL, pill = FALSE, status = "default")
Arguments
text |
Badge text. |
src |
Badge external link. |
pill |
Pill mode. FALSE by default. |
status |
Badge status. See https://demos.creative-tim.com/argon-design-system/docs/components/badge.html. |
Author(s)
David Granjon, dgranjon@ymail.com
Examples
if (interactive()) {
library(argonR)
argonBadge(
text = "My badge",
src = "https://www.google.com",
pill = FALSE,
status = "success"
)
}
Create a Boostrap 4 blur effect
Description
Build an argon blur effect
Usage
argonBlur(..., text = NULL, text_color = NULL)
Arguments
... |
Tag to be treated by the blur effect. |
text |
Text that appears on hover. |
text_color |
Text color. See https://demos.creative-tim.com/argon-design-system/docs/foundation/colors.html. |
Note
Not compatible with argonDash
Author(s)
David Granjon, dgranjon@ymail.com
Examples
if (interactive()) {
library(argonR)
argonBlur(
argonImage(
src = "inst/images/imac.svg",
floating = TRUE
)
)
}
Create a Boostrap 4 argon button
Description
Build an argon button
Usage
argonButton(
src = NULL,
name = NULL,
status = "default",
icon = NULL,
size = NULL,
block = FALSE,
disabled = FALSE,
outline = FALSE,
toggle_modal = FALSE,
modal_id = NULL
)
Arguments
src |
Button external link. |
name |
Button label. |
status |
Button color. See https://demos.creative-tim.com/argon-design-system/docs/components/buttons.html. |
icon |
|
size |
Button size: NULL, "sm" or "lg". |
block |
Whether the button fill its parent. FALSE by default. |
disabled |
Whether to disable the button. FALSE by default. |
outline |
Whether to outline the button. FALSE by default. |
toggle_modal |
Whether to use th button for a modal. FALSE by default. |
modal_id |
If toggle_modal is TRUE, nedd to provide the modal targeted. |
Author(s)
David Granjon, dgranjon@ymail.com
Examples
if(interactive()){
library(argonR)
argonButton(
name = "Click me!",
status = "danger",
icon = argonIcon("atom"),
size = "lg",
toggle_modal = TRUE,
modal_id = "modal1"
)
}
Create a Boostrap 4 card
Description
Build an argon card
Usage
argonCard(
...,
title = NULL,
src = NULL,
hover_lift = FALSE,
shadow = FALSE,
shadow_size = NULL,
hover_shadow = FALSE,
border_level = 0,
icon = NULL,
btn_text = "More",
status = "primary",
background_color = NULL,
gradient = FALSE,
floating = FALSE,
width = 6
)
Arguments
... |
Body content. |
title |
Card title. |
src |
Card external link. |
hover_lift |
Whether to apply a lift effect on hover. FALSE by default. Not compatible with floating. |
shadow |
Whether to apply a shadow effect. FALSE by default. |
shadow_size |
Card shadow size. Only if shadow is TRUE. NULL by default. |
hover_shadow |
Only if shadow is TRUE. Whether to enlarge the shadow on hover. FALSE by default. |
border_level |
Border level. O by default. |
icon |
|
btn_text |
Button text. src arg must not be NULL so that this button appears. |
status |
Card status. See https://demos.creative-tim.com/argon-design-system/docs/foundation/colors.html. |
background_color |
Card background color. NULL by default. See https://demos.creative-tim.com/argon-design-system/docs/foundation/colors.html. |
gradient |
Whether to apply a gradient effect on the card background. FALSE by default. |
floating |
Whether to animate the card by a vertical floating movement. FALSE by default. Not compatible with hover_lift. |
width |
Card width. Between 1 and 12. |
Author(s)
David Granjon, dgranjon@ymail.com
Examples
if (interactive()) {
library(argonR)
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."
)
}
Create a carousel
Description
Build an argon carousel
Usage
argonCarousel(..., id, floating = FALSE, hover_lift = FALSE, width = 6)
Arguments
... |
Slot for argonCarouselItem. |
id |
Carousel unique id. |
floating |
Whether to apply a floating effect. FALSE by default. |
hover_lift |
Whether to apply a lift effect on hover. FALSE by default. Not compatible with floating. Only if card_mode is TRUE. |
width |
Carousel width. |
Author(s)
David Granjon, dgranjon@ymail.com
Examples
if (interactive()) {
library(argonR)
argonCarousel(
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
)
)
}
Create a carousel item
Description
Build an argon carousel item
Usage
argonCarouselItem(src = NULL, active = FALSE, mode = "img")
Arguments
src |
Image url or path. |
active |
Whether the item is active or not. |
mode |
Item mode: "img" by default but also "iframe" or "video". |
Author(s)
David Granjon, dgranjon@ymail.com
Create a Boostrap 4 cascade effect
Description
Build an argon cascade effect
Usage
argonCascade(...)
Arguments
... |
Slot for argonCascadeItem. Exactly 13 items. |
Note
You must pass cascade = TRUE to argonSection
Author(s)
David Granjon, dgranjon@ymail.com
Examples
if (interactive()) {
library(argonR)
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")
)
)
}
Create a Boostrap 4 cascade item
Description
Build an argon cascade item
Usage
argonCascadeItem(name, size = NULL, src = NULL)
Arguments
name |
Icon name. |
size |
Icon size: NULL, "sm" or "lg". |
src |
Optional external url, link, ... |
Author(s)
David Granjon, dgranjon@ymail.com
Create a Boostrap 4 column
Description
Build an argon column
Usage
argonColumn(..., width = NULL, center = FALSE, offset = NULL)
Arguments
... |
Any UI element. |
width |
Optional. Column width between 1 and 12. |
center |
Whether to center column elements or not. FALSE by default. |
offset |
Column offset. NULL by default. Importantly, offset + width cannot exceed 12! |
Author(s)
David Granjon, dgranjon@ymail.com
Examples
if (interactive()) {
library(argonR)
argonColumn(
width = 4,
argonAlert(
icon = "basket",
status = "danger",
"This is an alert",
closable = TRUE
)
)
}
Create a Boostrap 4 argon contact form
Description
Build an argon contact form
Usage
argonContact(
title = NULL,
subtitle = NULL,
name = "Your name",
mail = "Email Adress",
subject = "Subject",
message,
mailto,
width = 8
)
Arguments
title |
Form title. |
subtitle |
Form subtitle. |
name |
Contact name. |
mail |
Contact mail. |
subject |
Message subject. |
message |
For message |
mailto |
Adress to which send the form. |
width |
Form width. Between 1 and 12. |
Note
Need to have an active formspree.io account. See https://formspree.io. Only works on web-server!
Author(s)
David Granjon, dgranjon@ymail.com
Create a boostrap 4 container
Description
Create a boostrap 4 container
Usage
argonContainer(..., size = NULL)
Arguments
... |
Tag to be embedded. |
size |
Container size. NULL or "lg". |
Author(s)
David Granjon, dgranjon@ymail.com
Examples
if (interactive()) {
library(argonR)
argonContainer()
}
Create a Boostrap 4 argon dropdown menu
Description
Build an argon dropdown menu
Usage
argonDropdown(..., name, size = NULL)
Arguments
... |
Slot for argonDropdownItem. |
name |
Dropdown menu name. |
size |
Dropdown size: NULL or "xl". |
Author(s)
David Granjon, dgranjon@ymail.com
Create a Boostrap 4 argon dropdown item
Description
Build an argon dropdown item
Usage
argonDropdownItem(
name = NULL,
description = NULL,
src = NULL,
icon = NULL,
status = NULL
)
Arguments
name |
Item name. |
description |
Item description if any. |
src |
HTML target page. |
icon |
|
status |
Icon and name color status. See https://demos.creative-tim.com/argon-design-system/docs/foundation/colors.html. |
Author(s)
David Granjon, dgranjon@ymail.com
Create a Boostrap 4 argon footer
Description
Build an argon footer
Usage
argonFooter(..., has_card = FALSE, status = NULL, gradient = FALSE)
Arguments
... |
Footer content. |
has_card |
Enable card rendering in the footer. FALSE by default. |
status |
Footer status color. See https://demos.creative-tim.com/argon-design-system/docs/foundation/colors.html. |
gradient |
Whether to apply a gradient. FALSE by default. |
Author(s)
David Granjon, dgranjon@ymail.com
Examples
if(interactive()){
library(argonR)
argonFooter(
has_card = FALSE,
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 = "http://www.72pxdesigns.com/wp-content/uploads/2017/06/preview-814162.png",
active = TRUE
),
argonCarouselItem(
src = "http://www.72pxdesigns.com/wp-content/uploads/2017/06/preview-814162.png",
active = FALSE
)
)
)
)
)
)
}
Create a custim h1 tag
Description
A custom h1 tag
Usage
argonH1(..., display)
Arguments
... |
Any text. |
display |
value between 1 and 4. |
Author(s)
David Granjon, dgranjon@ymail.com
Examples
if (interactive()) {
library(argonR)
argonH1(display = 3, "ArgonR elements")
}
Create a Nucleo icon
Description
Build an argon Nucleo icon
Usage
argonIcon(name, color = NULL)
Arguments
name |
icon name. |
color |
icon color. See https://demos.creative-tim.com/argon-design-system/docs/foundation/colors.html. |
Author(s)
David Granjon, dgranjon@ymail.com
Examples
if (interactive()) {
library(argonR)
argonIcon("atom")
}
Create a Nucleo icon wrapper
Description
Build an argon Nucleo icon wrapper
Usage
argonIconWrapper(
iconTag,
circle = TRUE,
size = NULL,
status = "default",
gradient_color = NULL,
shadow = TRUE,
hover_shadow = FALSE
)
Arguments
iconTag |
Slot for argonIcon |
circle |
Wrapper's shape. TRUE by default. |
size |
Wrapper size. "sm", "md" or "lg". |
status |
Wrapper color. See https://demos.creative-tim.com/argon-design-system/docs/foundation/colors.html. |
gradient_color |
icon gradient background color. |
shadow |
Whether to apply a shadow effet. TRUE by default. |
hover_shadow |
Only if shadow is TRUE. Whether to enlarge the shadow on hover. FALSE by default. |
Author(s)
David Granjon, dgranjon@ymail.com
Examples
if (interactive()) {
library(argonR)
argonIconWrapper(
iconTag = argonIcon("atom"),
size = "lg",
status = "danger",
shadow = TRUE,
hover_shadow = TRUE
)
}
Create a Boostrap 4 image container
Description
Build an argon image container
Usage
argonImage(
src = NULL,
url = NULL,
floating = FALSE,
card_mode = FALSE,
hover_lift = FALSE,
width = NULL
)
Arguments
src |
Image source or path. |
url |
Only with card_mode on. Optional external link. |
floating |
Whether to apply a floating effect. FALSE by default. |
card_mode |
Whether to include the image in a card wrapper. FALSE by default. |
hover_lift |
Whether to apply a lift effect on hover. FALSE by default. Not compatible with floating. Only if card_mode is TRUE. |
width |
Image manual width in px. |
Author(s)
David Granjon, dgranjon@ymail.com
Examples
if (interactive()) {
library(argonR)
argonImage(
floating = TRUE,
src = "https://demos.creative-tim.com/argon-design-system/assets/img/ill/ill-2.svg",
hover_lift = TRUE
)
}
Install argon assets
Description
Install argon assets
Usage
argonInstall(path = getwd())
Arguments
path |
Where to store assets. By default, getwd(). |
Note
argon assets are stored in the inst folder similarly as the package folder.
Author(s)
David Granjon, dgranjon@ymail.com
Examples
if(interactive()){
library(argonR)
argonInstall()
}
Create a custom p tag
Description
A custom p tag
Usage
argonLead(...)
Arguments
... |
Any text. |
Author(s)
David Granjon, dgranjon@ymail.com
Examples
if (interactive()) {
library(argonR)
argonLead("Badges")
}
Change tag margins
Description
Change tag margins
Usage
argonMargin(tag, orientation, value)
Arguments
tag |
Tag to be treated. |
orientation |
Margin side. See https://getbootstrap.com/docs/4.1/utilities/spacing/. |
value |
Margin value, negative or positive. See https://getbootstrap.com/docs/4.1/utilities/spacing/. |
Author(s)
David Granjon, dgranjon@ymail.com
Examples
if (interactive()) {
library(argonR)
argonMargin(tag = h1("test"), orientation = "t", value = -1)
argonMargin(tag = h1("test"), orientation = "x", value = 7)
}
Create a Boostrap 4 argon modal
Description
Build an argon modal
Usage
argonModal(..., id, title = NULL, status = NULL, gradient = FALSE)
Arguments
... |
Modal body content. |
id |
Modal unique id. Should be the same as modal_id from argonButton. |
title |
Modal title. |
status |
Modal color. See https://demos.creative-tim.com/argon-design-system/docs/foundation/colors.html. |
gradient |
Modal background gradient. FALSE by default. Does not work if status is NULL. |
Author(s)
David Granjon, dgranjon@ymail.com
Examples
if(interactive()){
library(argonR)
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."
)
}
Create a muted text
Description
Apply the class muted to a text
Usage
argonMuted(...)
Arguments
... |
Any text. |
Author(s)
David Granjon, dgranjon@ymail.com
Examples
if (interactive()) {
library(argonR)
argonMuted(argonLead("Badges"))
}
Create a Boostrap 4 argon navbar item
Description
Build an argon navbar item
Usage
argonNavItem(name = NULL, src = NULL, icon = NULL, tooltip = NULL)
Arguments
name |
Item name. |
src |
HTML target page. |
icon |
|
tooltip |
Text to display when the item is hovered. |
Author(s)
David Granjon, dgranjon@ymail.com
Create a Boostrap 4 argon navbar menu
Description
Build an argon navbar menu
Usage
argonNavMenu(..., side = "left")
Arguments
... |
Slot for argonNavItem and argonDropdown. |
side |
Nav menu side. "left by default" but can also be "right". |
Author(s)
David Granjon, dgranjon@ymail.com
Create a Boostrap 4 argon navbar
Description
Build an argon navbar
Usage
argonNavbar(
...,
href = "#",
src = NULL,
src_collapsed = NULL,
id,
headroom = TRUE
)
Arguments
... |
Slot for argonNavMenu. |
href |
Link to another HTML page. |
src |
Brand image path or url. |
src_collapsed |
Brand image path or url on small devices. Background is white. |
id |
Navbar toggle unique id. |
headroom |
Whether to apply headroom.js effect to the header. TRUE by default. |
Author(s)
David Granjon, dgranjon@ymail.com
Examples
if(interactive()){
library(argonR)
argonNavbar(
id = "main-navbar",
src = "https://demos.creative-tim.com/argon-design-system/assets/img/brand/white.png",
# left menu
argonNavMenu(
argonDropdown(
name = "Components",
size = "lg",
argonDropdownItem(
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"
)
)
)
}
Change tag padding
Description
Change tag padding
Usage
argonPadding(tag, orientation, value)
Arguments
tag |
Tag to be treated. |
orientation |
Padding side. See https://getbootstrap.com/docs/4.1/utilities/spacing/. |
value |
Padding value. See https://getbootstrap.com/docs/4.1/utilities/spacing/. |
Author(s)
David Granjon, dgranjon@ymail.com
Examples
if (interactive()) {
library(argonR)
argonPadding(tag = h1("test"), orientation = NULL, value = 5)
argonPadding(tag = h1("test"), orientation = "x", value = 2)
}
Create a Boostrap 4 argon page
Description
Build an argon page
Usage
argonPage(
...,
title = NULL,
description = NULL,
author = NULL,
navbar = NULL,
footer = NULL,
favicon = NULL,
analytics = NULL
)
Arguments
... |
Body content |
title |
App title. |
description |
Purpose. |
author |
Author. |
navbar |
Navbar. |
footer |
Footer. |
favicon |
Website favicon. The png must be located in inst/images. |
analytics |
Website analytics such as Hotjar or google analytics. Must be wrapped in tagList or list. Moreover the script must be contained in a <script></script> tag: if it is not already the case, use tags$script. |
Author(s)
David Granjon, dgranjon@ymail.com
Examples
if(interactive()){
library(argonR)
argonPage(
title = "ArgonR Static Template",
author = "Somebody",
description = "HTML Static Template",
navbar = argonNavbar(id = "navbar"),
footer = argonFooter(),
# main content
argonSection(),
argonSection(),
argonSection(),
argonSection(),
argonSection()
)
}
Create an HTML version of the argonPage
Description
Create an HTML version of the argonPage
Usage
argonPageTemplate(filename = "index", path = getwd(), argonPage, view = TRUE)
Arguments
filename |
HTML filename for instance, index.html. |
path |
Where to store the saved file. By default, getwd(). |
argonPage |
Slot for argonPage. |
view |
Whether to preview the page in a web browser. TRUE by default. |
Note
Do not forget to copy the inst folder of the package to the root of your website folder.
Author(s)
David Granjon, dgranjon@ymail.com
Examples
if(interactive()){
library(argonR)
# generate the page
example <- argonPage(
title = "ArgonR Static Template",
author = "Somebody",
description = "HTML Static Template",
navbar = argonNavbar(id = "navbar"),
footer = argonFooter(),
# main content
argonSection(),
argonSection(),
argonSection(),
argonSection(),
argonSection()
)
# create the path
path <- getwd()
# generate the static page
argonPageTemplate(filename = "example", path = path, argonPage = example)
}
Build an argon pagination container
Description
Build an argon pagination container
Usage
argonPagination(..., size = NULL, align = NULL)
Arguments
... |
Slot for argonPaginationItem. |
size |
Pagination size: NULL, "sm" or "lg". |
align |
Pagination alignement. NULL (left), "center" or "end" (right). |
Note
align will not work if you embed the argonPagination in an argonRow.
Author(s)
David Granjon, dgranjon@ymail.com
Examples
if(interactive()){
library(argonR)
argonPagination(
size = "lg",
align = "center",
argonPaginationItem(
name = 1,
src = "test.html"
),
argonPaginationItem(
name = 2,
src = "https://www.google.com"
)
)
}
Build an argon pagination item
Description
Build an argon pagination item
Usage
argonPaginationItem(name, src = NULL)
Arguments
name |
Item name. Better to use numerics such as 1, 2, 3, ... |
src |
Item target. Another html page for instance. |
Author(s)
David Granjon, dgranjon@ymail.com
Create a Boostrap 4 perspective effect
Description
Build an argon perspective effect
Usage
argonPersp(..., side)
Arguments
... |
Tag to be treated by the persp effect. |
side |
Perspective side effect. "right" or "left". |
Note
Disabled on small screens (not a bug)
Author(s)
David Granjon, dgranjon@ymail.com
Examples
if (interactive()) {
library(argonR)
argonPersp(argonCard(), side = "right")
}
Create a Boostrap 4 profile card
Description
Build an argon profile card
Usage
argonProfile(
...,
title = NULL,
subtitle = NULL,
src = NULL,
url = NULL,
url_1 = NULL,
url_2 = NULL,
stats
)
Arguments
... |
Any element. |
title |
Profile title. |
subtitle |
Profile subtitle. |
src |
Profile image path or url. |
url |
Main url. |
url_1 |
First social link. |
url_2 |
Second social link. |
stats |
Stats items. See argonProfileStats. |
Note
Do not work on argonR. Only for argon Dash
Author(s)
David Granjon, dgranjon@ymail.com
Examples
if(interactive()){
library(argonR)
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."
)
}
Create a Boostrap 4 profile card stat item
Description
Build an argon profile card stat item
Usage
argonProfileStat(value, description)
Arguments
value |
Stat value. |
description |
Stat description. |
Author(s)
David Granjon, dgranjon@ymail.com
Create a Boostrap 4 profile card stats container
Description
Build an argon profile card stats container
Usage
argonProfileStats(...)
Arguments
... |
Slot for argonProfileStat. |
Author(s)
David Granjon, dgranjon@ymail.com
Create a progress bar
Description
Build an argon progress bar
Usage
argonProgress(value, text = NULL, status = "primary")
Arguments
value |
Progress value between 0 and 100. |
text |
Label text. |
status |
Progress status color. See https://demos.creative-tim.com/argon-design-system/docs/foundation/colors.html. |
Author(s)
David Granjon, dgranjon@ymail.com
Examples
if (interactive()) {
library(argonR)
argonProgress(value = 10, status = "danger", text = "Custom Text")
}
Create a quotation tag
Description
A custom quotation tool
Usage
argonQuote(..., footer = NULL, source = NULL, align = "center")
Arguments
... |
Any text. |
footer |
Footer content, if any. |
source |
Source if any. |
align |
Text alignement. "center", "right" or "left". |
Author(s)
David Granjon, dgranjon@ymail.com
Examples
if (interactive()) {
library(argonR)
argonQuote(align = "center", "I am a text")
}
Create a Boostrap 4 row
Description
Build an argon row
Usage
argonRow(..., center = FALSE)
Arguments
... |
Any UI element. |
center |
Whether to center row elements or not. FALSE by default. |
Author(s)
David Granjon, dgranjon@ymail.com
Examples
if (interactive()) {
library(argonR)
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()
)
)
}
Create a Boostrap 4 section container
Description
Build an argon section container
Usage
argonSection(
...,
size = NULL,
status = "default",
gradient = FALSE,
separator = FALSE,
separator_color = "secondary",
shape = FALSE,
cascade = FALSE
)
Arguments
... |
Any UI element. |
size |
Section size. NULL by default. |
status |
Section status. See https://demos.creative-tim.com/argon-design-system/docs/foundation/colors.html. |
gradient |
Section gradient effect. FALSE by default. |
separator |
Section bottom separator. FALSE by default. |
separator_color |
Separator color. "secondary" by default. See https://demos.creative-tim.com/argon-design-system/docs/foundation/colors.html. |
shape |
Whether to include shape in the background. FALSE by default. |
cascade |
Whether to enable a cascade effect. FALSE by default. |
Note
Do not use with the argonDash package. Only for argonR.
Author(s)
David Granjon, dgranjon@ymail.com
Examples
if (interactive()) {
library(argonR)
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()
)
)
)
)
}
Create a Boostrap 4 argon social button
Description
Build an argon social button
Usage
argonSocialButton(src = NULL, status = "default", icon = NULL)
Arguments
src |
Button external link. |
status |
Button color. See https://demos.creative-tim.com/argon-design-system/docs/components/buttons.html. |
icon |
Button icon. Expect icon. |
Author(s)
David Granjon, dgranjon@ymail.com
Examples
if(interactive()){
library(argonR)
argonSocialButton(
src = "http://rinterface.com",
status = "danger",
icon = icon("facebook")
)
}
Create a Boostrap 4 tab item
Description
Build an argon tab item
Usage
argonTab(..., tabName, active = FALSE)
Arguments
... |
Tab content |
tabName |
Tab name: it will be also passed as the id argument. Should be unique. |
active |
Whether the tab is active or not. FALSE bu default. |
Author(s)
David Granjon, dgranjon@ymail.com
Create a Boostrap 4 tabs
Description
Build an argon tabs
Usage
argonTabSet(
...,
id,
card_wrapper = FALSE,
horizontal = TRUE,
circle = FALSE,
size = "sm",
width = 6,
iconList = NULL
)
Arguments
... |
Slot for argonTab. |
id |
argonTabs id. Should be unique. |
card_wrapper |
Whether to embed tab content in a card. FALSE by default. |
horizontal |
Whether to display tabs horizontally. TRUE by default. |
circle |
Whether to display circled design. FALSE by default. |
size |
Tabs size. "sm" by default. "md", "lg". |
width |
Tabs width. Between 1 and 12. |
iconList |
A list of argonIcon or icon. The lenght must have the same length as the number of tabs. NULL by default. |
Author(s)
David Granjon, dgranjon@ymail.com
Examples
if (interactive()) {
library(argonR)
argonTabSet(
id = "tabset1",
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"
)
)
}
Add a custom color to a text
Description
A custom color fo your text
Usage
argonTextColor(tag, color)
Arguments
tag |
Any tag containing text. |
color |
Text color. See https://demos.creative-tim.com/argon-design-system/docs/foundation/colors.html. |
Author(s)
David Granjon, dgranjon@ymail.com
Examples
if (interactive()) {
library(argonR)
library(htmltools)
argonTextColor(
tag = h1("test"),
color = "success"
)
}
Create a boostrap 4 tooltip
Description
Create a boostrap 4 tooltip
Usage
argonTooltip(tag, position, title = NULL)
Arguments
tag |
Tag to be documented. |
position |
Where to display the toolptip: "top", "right", "bottom" or "left". |
title |
Tooltip title. |
Author(s)
David Granjon, dgranjon@ymail.com
Examples
if (interactive()) {
library(argonR)
argonTooltip(
position = "left",
title = "I am a nice card",
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."
)
)
}
Create a Boostrap 4 user image
Description
Build an argon user image
Usage
argonUser(..., title = NULL, subtitle = NULL, src = NULL)
Arguments
... |
Any element such as argonIcon... |
title |
User title. |
subtitle |
User subtitle. |
src |
User image url or path. |
Author(s)
David Granjon, dgranjon@ymail.com
Examples
if (interactive()) {
library(argonR)
argonUser(
title = "Ryan Tompson",
subtitle = "Web Developer",
src = "https://demos.creative-tim.com/argon-design-system/assets/img/theme/team-1-800x800.jpg"
)
}