├── .Rbuildignore ├── LICENSE ├── .gitignore ├── R ├── zzz.R ├── body.R ├── exampleloader.R ├── spinner.R ├── misc.R ├── alerts.R ├── header.R ├── fluidPage.R ├── sidebar.R ├── tabs.R ├── modal.R ├── button.R ├── accordions.R ├── form.R └── cards.R ├── man ├── rand.num.Rd ├── sidebarLayout.Rd ├── template.loc.Rd ├── row.Rd ├── cssjsinclude.Rd ├── tabPanel.Rd ├── wrapper.Rd ├── flexBox.Rd ├── nav.Rd ├── setup.toolbar.menu.Rd ├── setup.toolbar.buttons.Rd ├── sortablegrid.Rd ├── titlePanel.Rd ├── mainPanel.Rd ├── altPanel.Rd ├── modal.header.Rd ├── dashboardBody.Rd ├── load.example.Rd ├── checkboxInput.Rd ├── accordionItem.Rd ├── sidebarPanel.Rd ├── alert.Rd ├── actionButton.Rd ├── masterButton.Rd ├── spinner.Rd ├── tabsetPanel.Rd ├── textAreaInput.Rd ├── submitButton.Rd ├── fluidPage.Rd ├── accordion.Rd ├── modalDialog.Rd ├── textInput.Rd └── card.Rd ├── nextGenShinyApps.Rproj ├── inst └── exp │ ├── example.Plotly.R │ ├── example.Plain.R │ ├── example.Rhansometable.R │ ├── example.Alert.R │ ├── example.Button.R │ ├── example.Spinner.R │ ├── example.Form.R │ ├── example.Tab.R │ ├── example.noSideBar.R │ ├── example.Card.R │ ├── example.Accordion.R │ └── example.Modal.R ├── NAMESPACE ├── NEWS.md ├── DESCRIPTION ├── vignettes └── introduction_to_nextgenshinyapps.Rmd └── README.md /.Rbuildignore: -------------------------------------------------------------------------------- 1 | ^.*\.Rproj$ 2 | ^\.Rproj\.user$ 3 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | YEAR: 2022 2 | COPYRIGHT HOLDER: Obinna Obianom 3 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .Rproj.user 2 | .Rhistory 3 | .RData 4 | .Ruserdata 5 | -------------------------------------------------------------------------------- /R/zzz.R: -------------------------------------------------------------------------------- 1 | #' @import shiny 2 | #' @import htmltools 3 | #' 4 | 5 | .onLoad <- function(libname, pkgname){ 6 | 7 | } 8 | 9 | 10 | .onAttach <- function(libname, pkgname){ 11 | 12 | } 13 | 14 | 15 | # drop all the NULL items, adapted from shiny pkg 16 | rmNULL <- function(x) { 17 | x[!vapply(x, is.null, FUN.VALUE=logical(1))] 18 | } 19 | -------------------------------------------------------------------------------- /man/rand.num.Rd: -------------------------------------------------------------------------------- 1 | % Generated by roxygen2: do not edit by hand 2 | % Please edit documentation in R/misc.R 3 | \name{rand.num} 4 | \alias{rand.num} 5 | \title{Random number betwen 1 and 10000} 6 | \usage{ 7 | rand.num(num) 8 | } 9 | \arguments{ 10 | \item{num}{The number of numbers to return} 11 | } 12 | \value{ 13 | One or more numbers 14 | } 15 | \description{ 16 | One or more random numbers 17 | } 18 | \examples{ 19 | rand.num(10) 20 | } 21 | -------------------------------------------------------------------------------- /man/sidebarLayout.Rd: -------------------------------------------------------------------------------- 1 | % Generated by roxygen2: do not edit by hand 2 | % Please edit documentation in R/sidebar.R 3 | \name{sidebarLayout} 4 | \alias{sidebarLayout} 5 | \title{Sidebar layout} 6 | \usage{ 7 | sidebarLayout(...) 8 | } 9 | \arguments{ 10 | \item{...}{content of the sidebar layout} 11 | } 12 | \value{ 13 | An HTML containing elements in a container 14 | } 15 | \description{ 16 | Container for sidebar, optional 17 | } 18 | \examples{ 19 | sidebarLayout("sample text") 20 | } 21 | -------------------------------------------------------------------------------- /man/template.loc.Rd: -------------------------------------------------------------------------------- 1 | % Generated by roxygen2: do not edit by hand 2 | % Please edit documentation in R/misc.R 3 | \name{template.loc} 4 | \alias{template.loc} 5 | \title{Template location full text} 6 | \usage{ 7 | template.loc(template = "core") 8 | } 9 | \arguments{ 10 | \item{template}{The type of template to fetch} 11 | } 12 | \value{ 13 | A path for the location of the package 14 | } 15 | \description{ 16 | Fetch the location of the scripts 17 | } 18 | \examples{ 19 | template.loc('core') 20 | } 21 | -------------------------------------------------------------------------------- /man/row.Rd: -------------------------------------------------------------------------------- 1 | % Generated by roxygen2: do not edit by hand 2 | % Please edit documentation in R/misc.R 3 | \name{row} 4 | \alias{row} 5 | \title{Generate a row div} 6 | \usage{ 7 | row(...) 8 | } 9 | \arguments{ 10 | \item{...}{The elements to include within the body of the row} 11 | } 12 | \value{ 13 | An HTML containing elements of a container with class row to be embedded in a page 14 | } 15 | \description{ 16 | A simple row div 17 | } 18 | \examples{ 19 | row(shiny::div(width=12,"Hello nextGenShinyApps")) 20 | } 21 | -------------------------------------------------------------------------------- /nextGenShinyApps.Rproj: -------------------------------------------------------------------------------- 1 | Version: 1.0 2 | 3 | RestoreWorkspace: Default 4 | SaveWorkspace: Default 5 | AlwaysSaveHistory: Default 6 | 7 | EnableCodeIndexing: Yes 8 | UseSpacesForTab: Yes 9 | NumSpacesForTab: 2 10 | Encoding: UTF-8 11 | 12 | RnwWeave: Sweave 13 | LaTeX: pdfLaTeX 14 | 15 | AutoAppendNewline: Yes 16 | StripTrailingWhitespace: Yes 17 | 18 | BuildType: Package 19 | PackageUseDevtools: Yes 20 | PackageInstallArgs: --no-multiarch --with-keep.source 21 | PackageCheckArgs: --as-cran 22 | PackageRoxygenize: rd,collate,namespace,vignette 23 | -------------------------------------------------------------------------------- /man/cssjsinclude.Rd: -------------------------------------------------------------------------------- 1 | % Generated by roxygen2: do not edit by hand 2 | % Please edit documentation in R/misc.R 3 | \name{cssjsinclude} 4 | \alias{cssjsinclude} 5 | \title{Include stylesheets and scripts} 6 | \usage{ 7 | cssjsinclude(template, color) 8 | } 9 | \arguments{ 10 | \item{template}{The template type} 11 | 12 | \item{color}{The numeric style of template} 13 | } 14 | \value{ 15 | A list of files to be inserted in the header of a page 16 | } 17 | \description{ 18 | Use the package scripts and stylesheets in a page 19 | } 20 | \examples{ 21 | cssjsinclude('core','3') 22 | } 23 | -------------------------------------------------------------------------------- /man/tabPanel.Rd: -------------------------------------------------------------------------------- 1 | % Generated by roxygen2: do not edit by hand 2 | % Please edit documentation in R/tabs.R 3 | \name{tabPanel} 4 | \alias{tabPanel} 5 | \title{Create a tab panel item} 6 | \usage{ 7 | tabPanel(title, ...) 8 | } 9 | \arguments{ 10 | \item{title}{title of the tab} 11 | 12 | \item{...}{content of the tab} 13 | } 14 | \value{ 15 | An list containing the title and content of a tab 16 | } 17 | \description{ 18 | Create a tab panel item that is enclosed by a tabsetPanel 19 | } 20 | \examples{ 21 | if (interactive()) { 22 | tabPanel("Summary", "Convallis aesus.") 23 | tabPanel("Summary", "nextGenShinyAppss.") 24 | } 25 | 26 | } 27 | -------------------------------------------------------------------------------- /man/wrapper.Rd: -------------------------------------------------------------------------------- 1 | % Generated by roxygen2: do not edit by hand 2 | % Please edit documentation in R/fluidPage.R 3 | \name{wrapper} 4 | \alias{wrapper} 5 | \title{A wrapper for panels} 6 | \usage{ 7 | wrapper( 8 | ..., 9 | bg = c("default", "primary", "secondary", "warning", "info", "danger", "success") 10 | ) 11 | } 12 | \arguments{ 13 | \item{...}{div contents} 14 | 15 | \item{bg}{background color of the wrapper} 16 | } 17 | \value{ 18 | a container for other containers 19 | } 20 | \description{ 21 | Create a wrapper div for pannels 22 | } 23 | \examples{ 24 | wrapper(altPanel("hello"),mainPanel("test")) 25 | wrapper(mainPanel("hello"),shiny::column(width=2,"test")) 26 | } 27 | -------------------------------------------------------------------------------- /man/flexBox.Rd: -------------------------------------------------------------------------------- 1 | % Generated by roxygen2: do not edit by hand 2 | % Please edit documentation in R/cards.R 3 | \name{flexBox} 4 | \alias{flexBox} 5 | \title{Container to fit all containers horizontally} 6 | \usage{ 7 | flexBox(..., border = FALSE, shadow = FALSE) 8 | } 9 | \arguments{ 10 | \item{...}{List of content} 11 | 12 | \item{border}{Should border be declared for the panel} 13 | 14 | \item{shadow}{Should a shadow be added to the panel} 15 | } 16 | \value{ 17 | Creates a a box to fit all boxes within 18 | } 19 | \description{ 20 | Fit containers horizontally 21 | } 22 | \examples{ 23 | \donttest{ 24 | flexBox(shiny::div("Div 1"),shiny::div("Div 2"),shiny::div("Div 1")) 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /man/nav.Rd: -------------------------------------------------------------------------------- 1 | % Generated by roxygen2: do not edit by hand 2 | % Please edit documentation in R/misc.R 3 | \name{nav} 4 | \alias{nav} 5 | \title{Nav tag} 6 | \usage{ 7 | nav(class, id = NULL, role = NULL, ...) 8 | } 9 | \arguments{ 10 | \item{class}{The class of the navigation container} 11 | 12 | \item{id}{The identification of the navigation container} 13 | 14 | \item{role}{The character role of the container on the page} 15 | 16 | \item{...}{The content of the container} 17 | } 18 | \value{ 19 | HTML content of a container with type nav 20 | } 21 | \description{ 22 | A nav tag for creating HTML navigations 23 | } 24 | \examples{ 25 | nav('sample','id1','sample','some content') 26 | } 27 | -------------------------------------------------------------------------------- /man/setup.toolbar.menu.Rd: -------------------------------------------------------------------------------- 1 | % Generated by roxygen2: do not edit by hand 2 | % Please edit documentation in R/cards.R 3 | \name{setup.toolbar.menu} 4 | \alias{setup.toolbar.menu} 5 | \title{Generate toolbar menu} 6 | \usage{ 7 | setup.toolbar.menu(...) 8 | } 9 | \arguments{ 10 | \item{...}{The list declaring whether to show menu} 11 | } 12 | \value{ 13 | HTML code of a container containing menu to be inserted in the toolbar if declared TRUE 14 | } 15 | \description{ 16 | Use within a card to display menu 17 | } 18 | \note{ 19 | For more information on the features of a toolbar within a card, visit the examples section of the help documentation 20 | } 21 | \examples{ 22 | \donttest{ 23 | setup.toolbar.menu(list(menu=TRUE)) 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /inst/exp/example.Plotly.R: -------------------------------------------------------------------------------- 1 | # Example plotly 2 | 3 | library(shiny) 4 | library(plotly) 5 | library(nextGenShinyApps) 6 | 7 | ui <- fluidPage( 8 | style = "4", 9 | header = nextGenShinyApps::titlePanel(left = "PLOTLY example", right = "@obinna.obianom"), 10 | row( 11 | altPanel( 12 | width = 12, 13 | card(title = "The choices", selectInput("choice", "Choose", choices = names(iris), selected = NULL)), 14 | card(title = "The plot output", plotlyOutput("graph")) 15 | ) 16 | ) 17 | ) 18 | 19 | server <- function(input, output, session) { 20 | output$graph <- renderPlotly({ 21 | plot_ly(iris, x = ~ get(input$choice), y = ~Sepal.Length, type = "scatter", mode = "markers") 22 | }) 23 | } 24 | 25 | shinyApp(ui, server) 26 | -------------------------------------------------------------------------------- /man/setup.toolbar.buttons.Rd: -------------------------------------------------------------------------------- 1 | % Generated by roxygen2: do not edit by hand 2 | % Please edit documentation in R/cards.R 3 | \name{setup.toolbar.buttons} 4 | \alias{setup.toolbar.buttons} 5 | \title{Generate toolbar buttons} 6 | \usage{ 7 | setup.toolbar.buttons(...) 8 | } 9 | \arguments{ 10 | \item{...}{The list of buttons to display} 11 | } 12 | \value{ 13 | HTML code of a container containing items to be inserted in the toolbar 14 | } 15 | \description{ 16 | Use within a card to display toolbar 17 | } 18 | \note{ 19 | For more information on the features of a toolbar within a card, visit the examples section of the help documentation 20 | } 21 | \examples{ 22 | \donttest{ 23 | setup.toolbar.buttons(list(maximize=TRUE,collapse=TRUE,close=TRUE)) 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /man/sortablegrid.Rd: -------------------------------------------------------------------------------- 1 | % Generated by roxygen2: do not edit by hand 2 | % Please edit documentation in R/cards.R 3 | \name{sortablegrid} 4 | \alias{sortablegrid} 5 | \title{Generate a sortable grid} 6 | \usage{ 7 | sortablegrid(..., width = 6, id = NULL) 8 | } 9 | \arguments{ 10 | \item{...}{The elements to include within the body of the grid} 11 | 12 | \item{width}{The width of the grid} 13 | 14 | \item{id}{unique id of grid} 15 | } 16 | \value{ 17 | HTML code of a container that allows items within it to be draggable 18 | } 19 | \description{ 20 | A grid that holds draggable items 21 | } 22 | \note{ 23 | For more information on the features of a sortable grid, visit the examples section of the help documentation 24 | } 25 | \examples{ 26 | sortablegrid("item1",width=12) 27 | } 28 | -------------------------------------------------------------------------------- /man/titlePanel.Rd: -------------------------------------------------------------------------------- 1 | % Generated by roxygen2: do not edit by hand 2 | % Please edit documentation in R/header.R 3 | \name{titlePanel} 4 | \alias{titlePanel} 5 | \title{Title panel for the header of the application} 6 | \usage{ 7 | titlePanel(left = "Sample Tile", right = NULL, link = "#") 8 | } 9 | \arguments{ 10 | \item{left}{The title text for the header} 11 | 12 | \item{right}{Content to include on the top right corner} 13 | 14 | \item{link}{Hyperlink to navigate when clicked} 15 | } 16 | \value{ 17 | An HTML containing elements to insert in a title 18 | } 19 | \description{ 20 | Used to embed the header within the body of the application 21 | } 22 | \examples{ 23 | if (interactive()) { 24 | titlePanel( 25 | left = "Sample App Title", 26 | right = shiny::div("Image/logo", shiny::icon("trash")) 27 | ) 28 | } 29 | 30 | } 31 | -------------------------------------------------------------------------------- /man/mainPanel.Rd: -------------------------------------------------------------------------------- 1 | % Generated by roxygen2: do not edit by hand 2 | % Please edit documentation in R/cards.R 3 | \name{mainPanel} 4 | \alias{mainPanel} 5 | \title{Main panel to display content} 6 | \usage{ 7 | mainPanel(..., width = 8, border = FALSE, shadow = FALSE) 8 | } 9 | \arguments{ 10 | \item{...}{List of content} 11 | 12 | \item{width}{Width of the main panel} 13 | 14 | \item{border}{Should border be declared for the panel} 15 | 16 | \item{shadow}{Should a shadow be added to the panel} 17 | } 18 | \value{ 19 | Creates a container for displaying contents 20 | } 21 | \description{ 22 | Customizable main panel for inclusion of various UI elements 23 | } 24 | \note{ 25 | For more information on the features of the main panel, look through the Github examples 26 | } 27 | \examples{ 28 | \donttest{ 29 | mainPanel('content 1') 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /man/altPanel.Rd: -------------------------------------------------------------------------------- 1 | % Generated by roxygen2: do not edit by hand 2 | % Please edit documentation in R/cards.R 3 | \name{altPanel} 4 | \alias{altPanel} 5 | \title{New sidebar panel to display content} 6 | \usage{ 7 | altPanel(..., width = 4, border = FALSE, shadow = FALSE) 8 | } 9 | \arguments{ 10 | \item{...}{List of content} 11 | 12 | \item{width}{Width of the sidebar panel} 13 | 14 | \item{border}{Should border be declared for the panel} 15 | 16 | \item{shadow}{Should a shadow be added to the panel} 17 | } 18 | \value{ 19 | Creates an alternate container for displaying contents 20 | } 21 | \description{ 22 | Customizable sidebar panel for inclusion of various UI elements 23 | } 24 | \note{ 25 | For more information on the features of the sidebar panel, look through the Github examples 26 | } 27 | \examples{ 28 | \donttest{ 29 | altPanel('content 2') 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /man/modal.header.Rd: -------------------------------------------------------------------------------- 1 | % Generated by roxygen2: do not edit by hand 2 | % Please edit documentation in R/modal.R 3 | \name{modal.header} 4 | \alias{modal.header} 5 | \title{Create hyperlink modal section that appears ONLY when the sidebar logo is clicked} 6 | \usage{ 7 | modal.header(...) 8 | } 9 | \arguments{ 10 | \item{...}{The list of tabs to include} 11 | } 12 | \value{ 13 | An HTML containing elements of links to be inserted in the header of a page 14 | } 15 | \description{ 16 | Additional tab section for additional links 17 | } 18 | \examples{ 19 | if (interactive()) { 20 | list1 <- list( 21 | title = "Home", icon = shiny::icon("home"), 22 | link = "https://google.com" 23 | ) 24 | list2 <- list( 25 | title = "Docs", icon = shiny::icon("folder"), 26 | link = "https://obi.obianom.com" 27 | ) 28 | 29 | modal.header(list(list1, list2)) 30 | } 31 | 32 | } 33 | -------------------------------------------------------------------------------- /NAMESPACE: -------------------------------------------------------------------------------- 1 | # Generated by roxygen2: do not edit by hand 2 | 3 | export(accordion) 4 | export(accordionItem) 5 | export(actionButton) 6 | export(alert) 7 | export(altPanel) 8 | export(card) 9 | export(checkboxInput) 10 | export(cssjsinclude) 11 | export(dashboardBody) 12 | export(fluidPage) 13 | export(load.example) 14 | export(mainPanel) 15 | export(masterButton) 16 | export(modal.header) 17 | export(modalDialog) 18 | export(nav) 19 | export(rand.num) 20 | export(row) 21 | export(setup.toolbar.buttons) 22 | export(setup.toolbar.menu) 23 | export(sidebarLayout) 24 | export(sidebarPanel) 25 | export(sortablegrid) 26 | export(spinner) 27 | export(submitButton) 28 | export(tabPanel) 29 | export(tabsetPanel) 30 | export(template.loc) 31 | export(textAreaInput) 32 | export(textInput) 33 | export(titlePanel) 34 | export(wrapper) 35 | import(htmltools) 36 | import(shiny) 37 | importFrom(shiny,restoreInput) 38 | -------------------------------------------------------------------------------- /NEWS.md: -------------------------------------------------------------------------------- 1 | # nextGenShinyApps 2.1 2 | 3 | ## Planned Features 4 | 5 | 6 | - [ ] paginatorBtn function 7 | - [ ] Better integration TBD 8 | - [ ] More inputs 9 | - [ ] knobInput 10 | - [ ] updateKnobInput 11 | - [ ] ... 12 | 13 | # nextGenShinyApps 2.0 14 | 15 | ## Features 16 | 17 | - [x] Major bugs fixes 18 | - [x] NOW compatible with all major packages including the htmlwidgets,rhandsontable and plotly packages 19 | - [x] wrapper function to hold containers 20 | 21 | 22 | 23 | # nextGenShinyApps 1.6 24 | 25 | ## Features 26 | 27 | - [x] Fix minor bugs 28 | - [x] mainPanel and altPanel 29 | 30 | # nextGenShinyApps 1.5 31 | 32 | ## Features 33 | 34 | - [x] Header section (Left, right) 35 | - [x] Sidebar section 36 | - [x] Body section 37 | - [x] Theme colors 38 | - [x] Cards 39 | - [x] Tabset 40 | - [x] Modal Dialog 41 | - [x] Form 42 | - [x] Buttons 43 | - [x] Alerts 44 | - [x] Accordion 45 | - [x] Spinners 46 | -------------------------------------------------------------------------------- /man/dashboardBody.Rd: -------------------------------------------------------------------------------- 1 | % Generated by roxygen2: do not edit by hand 2 | % Please edit documentation in R/body.R 3 | \name{dashboardBody} 4 | \alias{dashboardBody} 5 | \title{Create the body section of the application} 6 | \usage{ 7 | dashboardBody(header, ...) 8 | } 9 | \arguments{ 10 | \item{header}{OPTIONAL. Items to display in the header section (use the titlePanel() function to set this property).} 11 | 12 | \item{...}{The elements to include within the body of the modal} 13 | } 14 | \value{ 15 | An HTML of the body of the page 16 | } 17 | \description{ 18 | Create a simple body containing a header and a content for the main body 19 | } 20 | \note{ 21 | Endeavor to use as standalone and not within the fluidPage, as this function it already called within fluidPage 22 | } 23 | \examples{ 24 | 25 | if (interactive()) { 26 | dashboardBody( 27 | header = titlePanel( 28 | left = "Sample nextGenShinyApps Title", 29 | right = shiny::icon("user") 30 | ), 31 | "sample text for main body" 32 | ) 33 | } 34 | 35 | } 36 | -------------------------------------------------------------------------------- /DESCRIPTION: -------------------------------------------------------------------------------- 1 | Package: nextGenShinyApps 2 | Type: Package 3 | Title: Craft Exceptional 'R Shiny' Applications and Dashboards with Novel Responsive Tools 4 | Version: 2.0.1 5 | Authors@R: c( 6 | person("Obinna", "Obianom", email = "idonshayo@gmail.com", role = c("aut", "cre"))) 7 | Maintainer: Obinna Obianom 8 | Description: Nove responsive tools for designing and developing 'Shiny' dashboards and applications. The scripts and style sheets are based on 'jQuery' and 'Bootstrap' . 9 | License: MIT + file LICENSE 10 | URL: https://nextgenshinyapps.obi.obianom.com 11 | BugReports: https://github.com/oobianom/nextGenShinyApps 12 | Depends: 13 | R (>= 3.4) 14 | Imports: 15 | utils, 16 | shiny, 17 | htmltools, 18 | quickcode 19 | Suggests: 20 | rmarkdown, 21 | knitr, 22 | r2dictionary, 23 | r2resize, 24 | r2social 25 | Encoding: UTF-8 26 | VignetteBuilder: knitr 27 | Language: en-US 28 | LazyData: false 29 | RoxygenNote: 7.2.3 30 | -------------------------------------------------------------------------------- /man/load.example.Rd: -------------------------------------------------------------------------------- 1 | % Generated by roxygen2: do not edit by hand 2 | % Please edit documentation in R/exampleloader.R 3 | \name{load.example} 4 | \alias{load.example} 5 | \title{Load examples for the package} 6 | \usage{ 7 | load.example( 8 | example = c("Plain", "noSideBar", "Plotly", "Rhansometable", "Card", "Tab", "Modal", 9 | "Form", "Button", "Spinner", "Alert", "Accordion") 10 | ) 11 | } 12 | \arguments{ 13 | \item{example}{choose the example to show - "Plain","noSideBar","Plotly","Rhansometable", "Card","Tab","Modal","Form","Button","Spinner","Alert","Accordion"} 14 | } 15 | \value{ 16 | A rendered HTML of the user specified example file 17 | } 18 | \description{ 19 | Example shiny applications spanning aspects of the package 20 | } 21 | \section{Options for example}{ 22 | 23 | "Plain", "noSideBar","Plotly","Rhansometable", "Card", "Tab", "Modal", "Form", "Button", "Spinner", "Alert", "Accordion" 24 | } 25 | 26 | \examples{ 27 | \donttest{ 28 | if (interactive()) { 29 | load.example(example = "Card") 30 | } 31 | } 32 | 33 | } 34 | -------------------------------------------------------------------------------- /man/checkboxInput.Rd: -------------------------------------------------------------------------------- 1 | % Generated by roxygen2: do not edit by hand 2 | % Please edit documentation in R/form.R 3 | \name{checkboxInput} 4 | \alias{checkboxInput} 5 | \title{Create an advanced checkbox input} 6 | \usage{ 7 | checkboxInput(inputId, label, value = FALSE, width = NULL, inline = FALSE) 8 | } 9 | \arguments{ 10 | \item{inputId}{The identification name} 11 | 12 | \item{label}{The label for the input} 13 | 14 | \item{value}{The current value of the input} 15 | 16 | \item{width}{width of the text input} 17 | 18 | \item{inline}{make inline or block format} 19 | } 20 | \value{ 21 | HTML elements of a checkbox 22 | } 23 | \description{ 24 | Modifications to checkboxinput to allow added styles 25 | } 26 | \note{ 27 | For more information on the features of the form, visit the examples section of the help documentation 28 | } 29 | \examples{ 30 | checkboxInput("somevalue", "Some value", FALSE) 31 | checkboxInput("somevalue", "Some value", value = FALSE, inline = TRUE) 32 | checkboxInput("somevalue", "Some value", FALSE) 33 | 34 | 35 | } 36 | -------------------------------------------------------------------------------- /R/body.R: -------------------------------------------------------------------------------- 1 | #' Create the body section of the application 2 | #' 3 | #' Create a simple body containing a header and a content for the main body 4 | #' 5 | #' @param ... The elements to include within the body of the modal 6 | #' @param header OPTIONAL. Items to display in the header section (use the titlePanel() function to set this property). 7 | #' 8 | #' @note Endeavor to use as standalone and not within the fluidPage, as this function it already called within fluidPage 9 | #' 10 | #' @return An HTML of the body of the page 11 | #' 12 | #' @examples 13 | #' 14 | #' if (interactive()) { 15 | #' dashboardBody( 16 | #' header = titlePanel( 17 | #' left = "Sample nextGenShinyApps Title", 18 | #' right = shiny::icon("user") 19 | #' ), 20 | #' "sample text for main body" 21 | #' ) 22 | #' } 23 | #' 24 | #' @export 25 | 26 | 27 | dashboardBody <- function(header, ...) { 28 | shiny::div( 29 | class = "page-content-wrapper", 30 | header, 31 | tags$main( 32 | id = "js-page-content", role = "main", class = "page-content", 33 | ... 34 | ) 35 | ) 36 | } 37 | -------------------------------------------------------------------------------- /man/accordionItem.Rd: -------------------------------------------------------------------------------- 1 | % Generated by roxygen2: do not edit by hand 2 | % Please edit documentation in R/accordions.R 3 | \name{accordionItem} 4 | \alias{accordionItem} 5 | \title{Generate an accordion item} 6 | \usage{ 7 | accordionItem( 8 | ..., 9 | title = "A title", 10 | status = c("default", "primary", "secondary", "info", "success", "danger", "warning"), 11 | icon = NULL 12 | ) 13 | } 14 | \arguments{ 15 | \item{...}{The elements to include within the body of the particular accordion} 16 | 17 | \item{title}{The title of the accordion item} 18 | 19 | \item{status}{Set the header background using either of "default", "primary", "secondary", "info", "success", "danger", "warning"} 20 | 21 | \item{icon}{Include an icon to the left of the title for the accordion item} 22 | } 23 | \value{ 24 | A list of properties for an accordion item 25 | } 26 | \description{ 27 | Embed an accordion item within an accordion 28 | } 29 | \examples{ 30 | if (interactive()) { 31 | accordionItem( 32 | title = "Accordion 2", 33 | icon = shiny::icon("cog"), 34 | "Auctor neque etiam non." 35 | ) 36 | } 37 | 38 | } 39 | -------------------------------------------------------------------------------- /inst/exp/example.Plain.R: -------------------------------------------------------------------------------- 1 | 2 | library(shiny) 3 | library(nextGenShinyApps) 4 | tab2 <- tabPanel("Summary", "Convallis aenean et tortor at risus. Enim neque volutpat ac tincidunt vitae semper quis lectus nulla. Ultricies tristique nulla aliquet enim tortor at auctor urna nunc.") 5 | tab3 <- tabPanel("Tab 3", "Eu consequat ac felis donec et odio pellentesque. Egestas pretium aenean pharetra magna ac placerat. Eget velit aliquet sagittis id consectetur purus ut. Aliquet enim tortor at auctor urna nunc id cursus metus. Semper viverra nam libero justo laoreet sit amet.") 6 | tab4 <- tabPanel("Tab 4", "Vulputate mi sit amet mauris commodo quis. Dictum non consectetur a erat nam. Malesuada fames ac turpis egestas maecenas pharetra convallis posuere morbi. Aliquam faucibus purus in massa. Vel orci porta non pulvinar") 7 | 8 | 9 | shinyApp( 10 | ui = fluidPage( 11 | style = "8", 12 | custom.bg.color = "#e1e1e1", 13 | sidebar = NULL, 14 | header = NULL, 15 | tabsetPanel( 16 | tab2, 17 | tab3, 18 | type = "pills", 19 | justified = TRUE 20 | ) 21 | ), 22 | server = function(input, output) { 23 | } 24 | ) 25 | -------------------------------------------------------------------------------- /inst/exp/example.Rhansometable.R: -------------------------------------------------------------------------------- 1 | #example rhandsome 2 | quickcode::clean(clearPkgs = T) 3 | libraryAll(rhandsontable,shiny,nextGenShinyApps) 4 | 5 | 6 | ui <- fluidPage( 7 | style = "9", 8 | header = nextGenShinyApps::titlePanel(left = "RHANDSOME example", right = "@obinna.obianom"), 9 | mainPanel( 10 | card( 11 | title = "Sample editable table", 12 | rHandsontableOutput("hot") 13 | ) 14 | 15 | ) 16 | ) 17 | 18 | server = function(input, output, session){ 19 | 20 | df<- data.frame(c1=c(5,10,15), c2=c(3,6,9) , diff=c(0,0,0), select= as.logical( c(FALSE,FALSE,FALSE))) 21 | values <- reactiveValues(data = df) 22 | 23 | observe({ 24 | if(!is.null(input$hot)){ 25 | values$data <- as.data.frame(hot_to_r(input$hot)) 26 | isolate(values$data[,'diff'] <- ifelse(values$data[,'select'], values$data[,'c1']-values$data[,'c2'] ,0)) 27 | print(values$data) 28 | output$hot <- renderRHandsontable({ 29 | rhandsontable(values$data) 30 | }) 31 | } 32 | }) 33 | 34 | output$hot <- renderRHandsontable({ 35 | rhandsontable(values$data) 36 | }) 37 | 38 | } 39 | 40 | shinyApp(ui, server) 41 | -------------------------------------------------------------------------------- /man/sidebarPanel.Rd: -------------------------------------------------------------------------------- 1 | % Generated by roxygen2: do not edit by hand 2 | % Please edit documentation in R/sidebar.R 3 | \name{sidebarPanel} 4 | \alias{sidebarPanel} 5 | \title{Create the sidebar panel} 6 | \usage{ 7 | sidebarPanel(..., title = "TitleApp", footer = FALSE) 8 | } 9 | \arguments{ 10 | \item{...}{The elements to include within the body of the sidebar} 11 | 12 | \item{title}{Title of the sidebar content} 13 | 14 | \item{footer}{Whether or not to enable the footer content} 15 | } 16 | \value{ 17 | An HTML containing elements of a sidebar to be embedded in a page 18 | } 19 | \description{ 20 | Creates an advanced sidebar panel with colors corresponding to a chosen theme style 21 | } 22 | \note{ 23 | This global layout can be applied to a variety of shiny app and dashboard, with or without a sidebar. See the example below. 24 | } 25 | \examples{ 26 | \donttest{ 27 | if (interactive()) { 28 | library(shiny) 29 | library(nextGenShinyApps) 30 | 31 | shiny::shinyApp( 32 | ui = fluidPage( 33 | style = "7", 34 | header = NULL, 35 | sidebar = sidebarPanel( 36 | title = "myApp", 37 | "Sample sidebar contents", 38 | footer = FALSE 39 | ), 40 | "Plain content" 41 | ), 42 | server = function(input, output) {} 43 | ) 44 | } 45 | } 46 | } 47 | -------------------------------------------------------------------------------- /R/exampleloader.R: -------------------------------------------------------------------------------- 1 | #' Load examples for the package 2 | #' 3 | #' Example shiny applications spanning aspects of the package 4 | #' 5 | #' @param example choose the example to show - "Plain","noSideBar","Plotly","Rhansometable", "Card","Tab","Modal","Form","Button","Spinner","Alert","Accordion" 6 | #' 7 | #' @section Options for example: 8 | #' "Plain", "noSideBar","Plotly","Rhansometable", "Card", "Tab", "Modal", "Form", "Button", "Spinner", "Alert", "Accordion" 9 | #' 10 | #' 11 | #' @return A rendered HTML of the user specified example file 12 | #' @examples 13 | #' \donttest{ 14 | #' if (interactive()) { 15 | #' load.example(example = "Card") 16 | #' } 17 | #' } 18 | #' 19 | #' @export 20 | 21 | load.example <- function(example = c("Plain", "noSideBar","Plotly","Rhansometable", "Card", "Tab", "Modal", "Form", "Button", "Spinner", "Alert", "Accordion")) { 22 | example <- match.arg(example) 23 | loc.path <- template.loc("exp") 24 | loc.path.file <- paste0(loc.path, "/example.", example, ".R") 25 | message(paste0("The example code is located at ", loc.path.file)) 26 | 27 | if (interactive()) { 28 | if (any(grepl("package:shiny", search()))) detach("package:shiny") # detach if it is already attached 29 | if (any(grepl("package:nextGenShinyApps", search()))) detach("package:nextGenShinyApps") # detach if it is already attached 30 | shiny::runApp(loc.path.file) # run app 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /man/alert.Rd: -------------------------------------------------------------------------------- 1 | % Generated by roxygen2: do not edit by hand 2 | % Please edit documentation in R/alerts.R 3 | \name{alert} 4 | \alias{alert} 5 | \title{Create an alert} 6 | \usage{ 7 | alert( 8 | ..., 9 | type = c("default", "standard"), 10 | close = FALSE, 11 | color = c("none", "primary", "secondary", "info", "success", "danger", "warning"), 12 | outline = FALSE, 13 | icon = NULL 14 | ) 15 | } 16 | \arguments{ 17 | \item{...}{Content of the alert} 18 | 19 | \item{type}{Choose a style for the alert, choices include "default", "standard"} 20 | 21 | \item{close}{Allow alert to be closable, TRUE or FALSE} 22 | 23 | \item{color}{Color of the alert, choose between "none", "primary", "secondary", "info", "success", "danger", "warning"} 24 | 25 | \item{outline}{Include an outline and exclude background, TRUE or FALSE} 26 | 27 | \item{icon}{Include an icon to the left of the content} 28 | } 29 | \value{ 30 | HTML of an alert box to be inserted within a page 31 | } 32 | \description{ 33 | Create an alert with various styles 34 | } 35 | \examples{ 36 | if (interactive()) { 37 | card( 38 | header = FALSE, 39 | shiny::h2("Standard alert (closeable)"), 40 | alert("EX1", type = "standard", 41 | color = "primary"), 42 | alert("EX2", type = "standard", 43 | color = "secondary"), 44 | alert("EX3", type = "standard", 45 | color = "secondary", outline = TRUE), 46 | alert("EX4", type = "standard", 47 | color = "danger", outline = TRUE, close = TRUE), 48 | alert("EX5", type = "standard", 49 | close = TRUE), 50 | alert("EX6", type = "standard", 51 | color = "primary", icon = shiny::icon("info")) 52 | ) 53 | } 54 | 55 | } 56 | -------------------------------------------------------------------------------- /man/actionButton.Rd: -------------------------------------------------------------------------------- 1 | % Generated by roxygen2: do not edit by hand 2 | % Please edit documentation in R/button.R 3 | \name{actionButton} 4 | \alias{actionButton} 5 | \title{Create a button} 6 | \usage{ 7 | actionButton( 8 | inputId, 9 | label, 10 | icon = NULL, 11 | width = NULL, 12 | ..., 13 | size = c("m", "xs", "s", "l", "xl"), 14 | style = c("default", "pill", "round", "clean"), 15 | bg.type = c("default", "primary", "secondary", "info", "success", "danger", "warning"), 16 | outline = FALSE 17 | ) 18 | } 19 | \arguments{ 20 | \item{inputId}{Input identification} 21 | 22 | \item{label}{Input label} 23 | 24 | \item{icon}{Choice of button icon} 25 | 26 | \item{width}{Width of the bottom} 27 | 28 | \item{...}{other elements or attributes for the button} 29 | 30 | \item{size}{Size of the button, choices include "m","xs", "s", "l", "xl"} 31 | 32 | \item{style}{Style of the button, choices include "default", "pill", "round", "clean"} 33 | 34 | \item{bg.type}{Color of the button, choices include "default", "primary", "secondary", "info", "success", "danger", "warning"} 35 | 36 | \item{outline}{Use an outline styling, TRUE or FALSE} 37 | } 38 | \value{ 39 | HTML of the buttons to insert into a page 40 | } 41 | \description{ 42 | Upgrade to the actionButton in 'Shiny' package 43 | } 44 | \examples{ 45 | if (interactive()) { 46 | shiny::div(actionButton("button", 47 | "Action button with primary color", 48 | icon = shiny::icon("folder"), bg.type = "primary" 49 | )) 50 | shiny::div(actionButton("button", 51 | "Action button with primary color", 52 | icon = shiny::icon("file"), 53 | bg.type = "danger", outline = TRUE 54 | )) 55 | } 56 | 57 | } 58 | -------------------------------------------------------------------------------- /man/masterButton.Rd: -------------------------------------------------------------------------------- 1 | % Generated by roxygen2: do not edit by hand 2 | % Please edit documentation in R/button.R 3 | \name{masterButton} 4 | \alias{masterButton} 5 | \title{Create a master button} 6 | \usage{ 7 | masterButton( 8 | inputId, 9 | text = "Text", 10 | icon = NULL, 11 | width = NULL, 12 | size = c("m", "xs", "s", "l", "xl"), 13 | style = c("default", "pill", "round", "clean"), 14 | bg.type = c("default", "primary", "secondary", "info", "success", "danger", "warning"), 15 | outline = FALSE, 16 | extraClass = NULL, 17 | ... 18 | ) 19 | } 20 | \arguments{ 21 | \item{inputId}{input id} 22 | 23 | \item{text}{Button text} 24 | 25 | \item{icon}{Choice of button icon} 26 | 27 | \item{width}{Width of the bottom} 28 | 29 | \item{size}{Size of the button, choices include "m","xs", "s", "l", "xl"} 30 | 31 | \item{style}{Style of the button, choices include "default", "pill", "round", "clean"} 32 | 33 | \item{bg.type}{Color of the button, choices include "default", "primary", "secondary", "info", "success", "danger", "warning"} 34 | 35 | \item{outline}{Use an outline styling, TRUE or FALSE} 36 | 37 | \item{extraClass}{other class names to add to the button attribute} 38 | 39 | \item{...}{Other elements to add to the button} 40 | } 41 | \value{ 42 | HTML of the buttons to insert into a page 43 | } 44 | \description{ 45 | A master button creator 46 | } 47 | \examples{ 48 | if (interactive()) { 49 | card( 50 | shiny::h2("Master buttons with various styles"), 51 | header = FALSE, 52 | shiny::div(masterButton("Submit button with primary color", 53 | icon = shiny::icon("file"), size = "s", bg.type = "primary" 54 | )) 55 | ) 56 | } 57 | } 58 | -------------------------------------------------------------------------------- /man/spinner.Rd: -------------------------------------------------------------------------------- 1 | % Generated by roxygen2: do not edit by hand 2 | % Please edit documentation in R/spinner.R 3 | \name{spinner} 4 | \alias{spinner} 5 | \title{Create a spinner} 6 | \usage{ 7 | spinner( 8 | type = c("ring", "grow", "square", "rect"), 9 | size = c("l", "s"), 10 | color = c("default", "primary", "secondary", "info", "success", "danger", "warning") 11 | ) 12 | } 13 | \arguments{ 14 | \item{type}{Choose a style for the spinner using "ring","grow","square","rect"} 15 | 16 | \item{size}{Size of the spinner, "l" for large and "s" for small} 17 | 18 | \item{color}{Color of the spinner, choose between "default", "primary", "secondary", "info", "success", "danger", "warning"} 19 | } 20 | \value{ 21 | An HTML containing elements of a spinner to be embedded in a page during loading 22 | } 23 | \description{ 24 | Create a loading spinner for customization of outputs 25 | } 26 | \examples{ 27 | \donttest{ 28 | if (interactive()) { 29 | library(shiny) 30 | library(nextGenShinyApps) 31 | 32 | shiny::shinyApp( 33 | ui = fluidPage( 34 | style = "3", 35 | custom.bg.color = "cyan", 36 | sidebar = NULL, 37 | header = NULL, 38 | card( 39 | header = FALSE, 40 | shiny::h2("loading spinner"), 41 | spinner(type = "rect", size = "s"), 42 | spinner(type = "rect", color = "primary"), 43 | spinner(type = "grow", color = "secondary"), 44 | spinner(type = "ring", color = "success"), 45 | spinner(type = "rect", color = "warning"), 46 | spinner(type = "square", color = "danger"), 47 | spinner(type = "rect", color = "info") 48 | ) 49 | ), 50 | server = function(input, output) { 51 | } 52 | ) 53 | } 54 | } 55 | 56 | } 57 | -------------------------------------------------------------------------------- /man/tabsetPanel.Rd: -------------------------------------------------------------------------------- 1 | % Generated by roxygen2: do not edit by hand 2 | % Please edit documentation in R/tabs.R 3 | \name{tabsetPanel} 4 | \alias{tabsetPanel} 5 | \title{Create an advanced tabset} 6 | \usage{ 7 | tabsetPanel( 8 | ..., 9 | type = c("default", "pills", "clean", "jPills", "justified"), 10 | border = TRUE, 11 | justified = FALSE, 12 | position = c("left", "end", "center") 13 | ) 14 | } 15 | \arguments{ 16 | \item{...}{Content of the tabset, created using the tabPanel for each individual item} 17 | 18 | \item{type}{Type of tabset to create, choices include "default","pills","clean","jPills","justified"} 19 | 20 | \item{border}{Include a board for the tabset, TRUE or FALSE} 21 | 22 | \item{justified}{Justify tab headers, TRUE or FALSE} 23 | 24 | \item{position}{position of the tabs, choices include "left","end","center"} 25 | } 26 | \value{ 27 | An HTML containing elements of a tabset to be embedded in a page 28 | } 29 | \description{ 30 | Advanced tabset panel with styles and features 31 | } 32 | \note{ 33 | Many examples exist for the tabset, fid them using the package load.example function 34 | } 35 | \examples{ 36 | \donttest{ 37 | if (interactive()) { 38 | library(shiny) 39 | library(nextGenShinyApps) 40 | tab2 <- tabPanel("Summary", "SAMPLE nunc.") 41 | tab3 <- tabPanel("Tab 3", "aoreet sit amet.") 42 | tab4 <- tabPanel("Tab 4", "Vulputate pulvinar") 43 | 44 | 45 | shiny::shinyApp( 46 | ui = fluidPage( 47 | style = "8", 48 | custom.bg.color = "rgb(110,134,032)", 49 | sidebar = NULL, 50 | header = NULL, 51 | tabsetPanel( 52 | tab2, 53 | tab3, 54 | type = "pills", 55 | justified = TRUE 56 | ) 57 | ), 58 | server = function(input, output) { 59 | } 60 | ) 61 | } 62 | } 63 | 64 | } 65 | -------------------------------------------------------------------------------- /man/textAreaInput.Rd: -------------------------------------------------------------------------------- 1 | % Generated by roxygen2: do not edit by hand 2 | % Please edit documentation in R/form.R 3 | \name{textAreaInput} 4 | \alias{textAreaInput} 5 | \title{Create an advanced text area input} 6 | \usage{ 7 | textAreaInput( 8 | inputId, 9 | label, 10 | value = "", 11 | width = NULL, 12 | height = NULL, 13 | cols = NULL, 14 | rows = NULL, 15 | placeholder = NULL, 16 | resize = c("both", "none", "vertical", "horizontal"), 17 | style = c("default", "pill", "round", "clean"), 18 | border.type = c("none", "primary", "secondary", "info", "success", "danger", "warning") 19 | ) 20 | } 21 | \arguments{ 22 | \item{inputId}{The identification name} 23 | 24 | \item{label}{The label for the input} 25 | 26 | \item{value}{The current value of the input} 27 | 28 | \item{width}{width of the text input} 29 | 30 | \item{height}{height of the text input} 31 | 32 | \item{cols}{col of text to display} 33 | 34 | \item{rows}{row of text to display} 35 | 36 | \item{placeholder}{A placeholder text} 37 | 38 | \item{resize}{Make inout resizable, with choices "both", "none", "vertical", "horizontal"} 39 | 40 | \item{style}{Style to adapt, options include "default", "pill", "round", "clean"} 41 | 42 | \item{border.type}{Add a border coloring using either of "none", "primary", "secondary", "info", "success", "danger", "warning"} 43 | } 44 | \value{ 45 | HTML element of a textAreaInput 46 | } 47 | \description{ 48 | Modifications to 'textAreaInput' to allow added styles 49 | } 50 | \note{ 51 | For more information on the features of the form, visit the examples section of the help documentation 52 | } 53 | \examples{ 54 | textAreaInput("caption", 55 | "Sample Text area input", 56 | "Data Summary", 57 | width = "1000px", border.type = "success" 58 | ) 59 | 60 | 61 | } 62 | -------------------------------------------------------------------------------- /man/submitButton.Rd: -------------------------------------------------------------------------------- 1 | % Generated by roxygen2: do not edit by hand 2 | % Please edit documentation in R/button.R 3 | \name{submitButton} 4 | \alias{submitButton} 5 | \title{Create a submit button} 6 | \usage{ 7 | submitButton( 8 | inputId, 9 | text = "Apply Changes", 10 | icon = NULL, 11 | width = NULL, 12 | size = c("m", "xs", "s", "l", "xl"), 13 | style = c("default", "pill", "round", "clean"), 14 | bg.type = c("default", "primary", "secondary", "info", "success", "danger", "warning"), 15 | outline = FALSE 16 | ) 17 | } 18 | \arguments{ 19 | \item{inputId}{input id} 20 | 21 | \item{text}{Button text} 22 | 23 | \item{icon}{Choice of button icon} 24 | 25 | \item{width}{Width of the bottom} 26 | 27 | \item{size}{Size of the button, choices include "m","xs", "s", "l", "xl"} 28 | 29 | \item{style}{Style of the button, choices include "default", "pill", "round", "clean"} 30 | 31 | \item{bg.type}{Color of the button, choices include "default", "primary", "secondary", "info", "success", "danger", "warning"} 32 | 33 | \item{outline}{Use an outline styling, TRUE or FALSE} 34 | } 35 | \value{ 36 | HTML of the submit buttons to insert into a page 37 | } 38 | \description{ 39 | Upgrade to the submitButton in 'Shiny' package 40 | } 41 | \examples{ 42 | if (interactive()) { 43 | card( 44 | shiny::h2("Submit buttons with various styles"), 45 | header = FALSE, 46 | shiny::div(submitButton("Submit button with primary color", 47 | icon = shiny::icon("file"), size = "s", bg.type = "primary" 48 | )), 49 | shiny::div(submitButton("Secondary color", 50 | icon = shiny::icon("folder"), bg.type = "secondary" 51 | )), 52 | shiny::div(submitButton("Success color", 53 | icon = shiny::icon("filter"), bg.type = "success" 54 | )), 55 | shiny::div(submitButton("Warning color", 56 | icon = shiny::icon("grid"), bg.type = "warning" 57 | )), 58 | shiny::div(submitButton("Danger color", 59 | icon = shiny::icon("check"), bg.type = "danger" 60 | )), 61 | shiny::div(submitButton("Info color", 62 | icon = shiny::icon("trash"), bg.type = "info" 63 | )) 64 | ) 65 | } 66 | } 67 | -------------------------------------------------------------------------------- /man/fluidPage.Rd: -------------------------------------------------------------------------------- 1 | % Generated by roxygen2: do not edit by hand 2 | % Please edit documentation in R/fluidPage.R 3 | \name{fluidPage} 4 | \alias{fluidPage} 5 | \title{Generate a container for the application} 6 | \usage{ 7 | fluidPage( 8 | ..., 9 | id = NULL, 10 | header = NULL, 11 | sidebar = NULL, 12 | class = NULL, 13 | style = rand.sc13, 14 | custom.bg.color = NULL, 15 | modal.header.links = NULL 16 | ) 17 | } 18 | \arguments{ 19 | \item{...}{The elements to include within the body of the page} 20 | 21 | \item{id}{OPTIONAL. Identification tag of the container} 22 | 23 | \item{header}{OPTIONAL. Items to display in the header section (use the titlePanel() function to set this property).} 24 | 25 | \item{sidebar}{OPTIONAL. Items to display in the sidebay section (use the sidebarPanel() function to set this property).} 26 | 27 | \item{class}{OPTIONAL. Class name for the container} 28 | 29 | \item{style}{OPTIONAL. Various unique styles choices from 1 - 12} 30 | 31 | \item{custom.bg.color}{OPTIONAL. Choice to change the background color of the container. Use HEX values such as #FFFFFF or RGB code such as rgb(255,255,255) or simple color name such as 'lightblue'} 32 | 33 | \item{modal.header.links}{OPTIONAL. One or more list containing links that appear when the app title is clicked. To remove, set to NULL} 34 | } 35 | \value{ 36 | A rendered HTML of the container holder of the application items 37 | } 38 | \description{ 39 | An upgrade to the fluidPage function available in the 'Shiny' package 40 | } 41 | \note{ 42 | This global layout can be applied to a variety of shiny app and dashboard, with or without a sidebar. See the example below. 43 | } 44 | \examples{ 45 | \donttest{ 46 | if (interactive()) { 47 | library(shiny) 48 | library(nextGenShinyApps) 49 | 50 | shiny::shinyApp( 51 | ui = fluidPage( 52 | style = "6", 53 | header = titlePanel(left = "Sample App Title", 54 | right = "Image/logo"), 55 | sidebar = sidebarPanel( 56 | title = "myApp", 57 | "Sample sidebar content" 58 | ), 59 | "Sample body content" 60 | ), 61 | server = function(input, output) {} 62 | ) 63 | } 64 | } 65 | } 66 | -------------------------------------------------------------------------------- /R/spinner.R: -------------------------------------------------------------------------------- 1 | #' Create a spinner 2 | #' 3 | #' Create a loading spinner for customization of outputs 4 | #' 5 | #' @param type Choose a style for the spinner using "ring","grow","square","rect" 6 | #' @param size Size of the spinner, "l" for large and "s" for small 7 | #' @param color Color of the spinner, choose between "default", "primary", "secondary", "info", "success", "danger", "warning" 8 | #' 9 | #' @return An HTML containing elements of a spinner to be embedded in a page during loading 10 | #' 11 | #' @examples 12 | #' \donttest{ 13 | #' if (interactive()) { 14 | #' library(shiny) 15 | #' library(nextGenShinyApps) 16 | #' 17 | #' shiny::shinyApp( 18 | #' ui = fluidPage( 19 | #' style = "3", 20 | #' custom.bg.color = "cyan", 21 | #' sidebar = NULL, 22 | #' header = NULL, 23 | #' card( 24 | #' header = FALSE, 25 | #' shiny::h2("loading spinner"), 26 | #' spinner(type = "rect", size = "s"), 27 | #' spinner(type = "rect", color = "primary"), 28 | #' spinner(type = "grow", color = "secondary"), 29 | #' spinner(type = "ring", color = "success"), 30 | #' spinner(type = "rect", color = "warning"), 31 | #' spinner(type = "square", color = "danger"), 32 | #' spinner(type = "rect", color = "info") 33 | #' ) 34 | #' ), 35 | #' server = function(input, output) { 36 | #' } 37 | #' ) 38 | #' } 39 | #' } 40 | #' 41 | #' @export 42 | #' 43 | 44 | spinner <- function(type = c("ring", "grow", "square", "rect"), size = c("l", "s"), color = c("default", "primary", "secondary", "info", "success", "danger", "warning")) { 45 | color <- match.arg(color) 46 | size <- match.arg(size) 47 | size <- switch(size, 48 | s = "sm", 49 | l = "lg" 50 | ) 51 | 52 | type <- match.arg(type) 53 | type <- switch(type, 54 | ring = "border", 55 | grow = "grow", 56 | square = "grow rounded-0", 57 | rect = "border rounded-0" 58 | ) 59 | div( 60 | class = paste0("spinner-border-", size), 61 | class = paste0("text-", color), 62 | class = paste0("spinner-", type), 63 | role = "status", tags$span( 64 | class = "sr-only", "Loading..." 65 | ) 66 | ) 67 | } 68 | -------------------------------------------------------------------------------- /man/accordion.Rd: -------------------------------------------------------------------------------- 1 | % Generated by roxygen2: do not edit by hand 2 | % Please edit documentation in R/accordions.R 3 | \name{accordion} 4 | \alias{accordion} 5 | \title{Generate an accordion} 6 | \usage{ 7 | accordion(..., id, style = c("default", "1", "2", "3", "4"), uncollapsed = 1) 8 | } 9 | \arguments{ 10 | \item{...}{The accordionItem elements to include within the body of the particular accordion} 11 | 12 | \item{id}{The identification of the accordion} 13 | 14 | \item{style}{Style of the accordion, use "default", "1", "2", "3", "4"} 15 | 16 | \item{uncollapsed}{Indicate by number which accordionItem should not be collapsed} 17 | } 18 | \value{ 19 | HTML of a container with a class called accordion 20 | } 21 | \description{ 22 | Wrap one or more accordion items into a container 23 | } 24 | \examples{ 25 | \donttest{ 26 | if(interactive()){ 27 | 28 | # Example 1 29 | 30 | library(shiny) 31 | library(nextGenShinyApps) 32 | 33 | shiny::shinyApp( 34 | ui = fluidPage( 35 | style = "8", 36 | custom.bg.color = "#d9d9d9", 37 | sidebar = NULL, 38 | header = titlePanel(left="Sample Ex1"), 39 | accordion( 40 | id = "accordion5", 41 | style = "4", 42 | accordionItem( 43 | title = "Accordion 1", 44 | "Massa sed elementum sus" 45 | ), 46 | accordionItem( 47 | title = "Accordion 2", 48 | "Auctor neque etiam non." 49 | ) 50 | ) 51 | ), 52 | server = function(input, output) { 53 | } 54 | ) 55 | 56 | 57 | # Example 2 58 | 59 | library(shiny) 60 | library(nextGenShinyApps) 61 | 62 | shiny::shinyApp( 63 | ui = fluidPage( 64 | style = "8", 65 | custom.bg.color = "#f7c4bb", 66 | sidebar = NULL, 67 | header = titlePanel(left="Sample Ex2"), 68 | accordion( 69 | id = "accordion5", 70 | style = "1", 71 | accordionItem( 72 | title = "Accordion A", 73 | icon = shiny::icon("trash"), 74 | "Massa sed elementum sus" 75 | ), 76 | accordionItem( 77 | title = "Accordion B", 78 | icon = shiny::icon("edit"), 79 | "Auctor neque etiam non." 80 | ) 81 | ) 82 | ), 83 | server = function(input, output) { 84 | } 85 | ) 86 | 87 | 88 | } 89 | 90 | } 91 | 92 | } 93 | -------------------------------------------------------------------------------- /R/misc.R: -------------------------------------------------------------------------------- 1 | #' Generate a row div 2 | #' 3 | #' A simple row div 4 | #' 5 | #' @param ... The elements to include within the body of the row 6 | #' 7 | #' @return An HTML containing elements of a container with class row to be embedded in a page 8 | #' @examples 9 | #' row(shiny::div(width=12,"Hello nextGenShinyApps")) 10 | #' @export 11 | #' 12 | row <- function(...) { 13 | div(class = "row", ...) 14 | } 15 | 16 | 17 | #' Include stylesheets and scripts 18 | #' 19 | #' Use the package scripts and stylesheets in a page 20 | #' 21 | #' @param template The template type 22 | #' @param color The numeric style of template 23 | #' 24 | #' @return A list of files to be inserted in the header of a page 25 | #' @examples 26 | #' cssjsinclude('core','3') 27 | #' @export 28 | #' 29 | cssjsinclude <- function(template,color){ 30 | assign('.nGSAscripts',TRUE) 31 | htmltools::htmlDependency( 32 | "nextGenShinyApps", "2.0", 33 | src = template.loc(template), 34 | script = c("nextgenshinyapps.js"), 35 | stylesheet = c("nextgenshinyapps.css", paste0("cust-theme-",color,".css")), 36 | all_files = FALSE 37 | ) 38 | } 39 | 40 | #' Nav tag 41 | #' 42 | #' A nav tag for creating HTML navigations 43 | #' 44 | #' @param class The class of the navigation container 45 | #' @param id The identification of the navigation container 46 | #' @param role The character role of the container on the page 47 | #' @param ... The content of the container 48 | #' 49 | #' @return HTML content of a container with type nav 50 | #' @examples 51 | #' nav('sample','id1','sample','some content') 52 | #' @export 53 | #' 54 | nav <- function(class, id = NULL, role = NULL, ...) { 55 | HTML(paste0("")) 56 | } 57 | 58 | 59 | #' Template location full text 60 | #' 61 | #' Fetch the location of the scripts 62 | #' 63 | #' @param template The type of template to fetch 64 | #' 65 | #' @return A path for the location of the package 66 | #' @examples 67 | #' template.loc('core') 68 | #' @export 69 | #' 70 | template.loc <- function(template = "core"){ 71 | file.path(find.package(package = "nextGenShinyApps"),template) 72 | } 73 | 74 | #' Random number betwen 1 and 10000 75 | #' 76 | #' One or more random numbers 77 | #' 78 | #' @param num The number of numbers to return 79 | #' 80 | #' @return One or more numbers 81 | #' @examples 82 | #' rand.num(10) 83 | #' @export 84 | #' 85 | rand.num <- function(num){ 86 | sample(1:10000, num) 87 | } 88 | 89 | rand.sc13 <- 90 | as.character(sample(1:13,13)) 91 | 92 | -------------------------------------------------------------------------------- /man/modalDialog.Rd: -------------------------------------------------------------------------------- 1 | % Generated by roxygen2: do not edit by hand 2 | % Please edit documentation in R/modal.R 3 | \name{modalDialog} 4 | \alias{modalDialog} 5 | \title{Generate a modal box} 6 | \usage{ 7 | modalDialog( 8 | ..., 9 | title = NULL, 10 | footer = modalButton("Dismiss"), 11 | size = c("m", "s", "l", "xl"), 12 | easyClose = FALSE, 13 | fade = TRUE, 14 | position = c("centered", "left", "right", "top", "bottom"), 15 | transparent = FALSE 16 | ) 17 | } 18 | \arguments{ 19 | \item{...}{The elements to include within the body of the modal} 20 | 21 | \item{title}{The text to display in the header title} 22 | 23 | \item{footer}{Footer list of buttons or text} 24 | 25 | \item{size}{The size of the modal, "m", "s", "l", "xl"} 26 | 27 | \item{easyClose}{Allow simple closing, \code{FALSE} or \code{TRUE}} 28 | 29 | \item{fade}{Allow fading away or fadin in, \code{FALSE} or \code{TRUE}} 30 | 31 | \item{position}{Set the position of the modal. Choices include "centered","left","right","top","bottom"} 32 | 33 | \item{transparent}{Allow background transparency, \code{FALSE} or \code{TRUE}} 34 | } 35 | \value{ 36 | An HTML containing elements of a modal box that remains hidden until a button is clicked 37 | } 38 | \description{ 39 | Advanced modal dialog that allows various positioning and transparency 40 | } 41 | \note{ 42 | For more information on the features of the card, visit the examples section of the help documentation 43 | } 44 | \examples{ 45 | \donttest{ 46 | if (interactive()) { 47 | library(shiny) 48 | library(nextGenShinyApps) 49 | shiny::shinyApp( 50 | ui = fluidPage( 51 | style = "8", 52 | custom.bg.color = "white", 53 | sidebar = NULL, 54 | header = NULL, 55 | shiny::h3("Modal EXAMPLES"), 56 | shiny::div(actionButton("obianom1", "Show BIG shiny modal on the RIGHT")), 57 | shiny::br(), 58 | shiny::div(actionButton("obianom2", "Show SMALL shiny modal on the RIGHT")) 59 | ), 60 | server = function(input, output) { 61 | shiny::observeEvent(input$obianom1, { 62 | shiny::showModal(modalDialog( 63 | textInput("dataset", "Enter a data set"), 64 | shiny::div("Id leo in vitae"), 65 | size = "l", 66 | position = "bottom", 67 | )) 68 | }) 69 | shiny::observeEvent(input$obianom2, { 70 | shiny::showModal(modalDialog( 71 | textInput("dataset", "Enter a data set"), 72 | shiny::div("Lorem donec massa"), 73 | size = "l", 74 | position = "right", 75 | )) 76 | }) 77 | } 78 | ) 79 | } 80 | } 81 | } 82 | -------------------------------------------------------------------------------- /R/alerts.R: -------------------------------------------------------------------------------- 1 | #' Create an alert 2 | #' 3 | #' Create an alert with various styles 4 | #' 5 | #' @param ... Content of the alert 6 | #' @param type Choose a style for the alert, choices include "default", "standard" 7 | #' @param close Allow alert to be closable, TRUE or FALSE 8 | #' @param outline Include an outline and exclude background, TRUE or FALSE 9 | #' @param icon Include an icon to the left of the content 10 | #' @param color Color of the alert, choose between "none", "primary", "secondary", "info", "success", "danger", "warning" 11 | #' @return HTML of an alert box to be inserted within a page 12 | #' @examples 13 | #' if (interactive()) { 14 | #' card( 15 | #' header = FALSE, 16 | #' shiny::h2("Standard alert (closeable)"), 17 | #' alert("EX1", type = "standard", 18 | #' color = "primary"), 19 | #' alert("EX2", type = "standard", 20 | #' color = "secondary"), 21 | #' alert("EX3", type = "standard", 22 | #' color = "secondary", outline = TRUE), 23 | #' alert("EX4", type = "standard", 24 | #' color = "danger", outline = TRUE, close = TRUE), 25 | #' alert("EX5", type = "standard", 26 | #' close = TRUE), 27 | #' alert("EX6", type = "standard", 28 | #' color = "primary", icon = shiny::icon("info")) 29 | #' ) 30 | #' } 31 | #' 32 | #' @export 33 | #' 34 | 35 | alert <- function(..., type = c("default", "standard"), close = FALSE, color = c("none", "primary", "secondary", "info", "success", "danger", "warning"), outline = FALSE, icon = NULL) { 36 | type <- match.arg(type) 37 | color <- match.arg(color) 38 | default <- "default" 39 | type <- ifelse(type == default, "panel-tag", "alert") # set class based on type 40 | close <- ifelse(type == default, FALSE, close) # if type is tag, don't include a closer 41 | color <- ifelse(type == default, "", color) # if type is tag, don't include a color 42 | outline <- ifelse(type == default, FALSE, outline) # if type is tag, don't include a outline 43 | 44 | bgborder <- ifelse(outline, 45 | paste0("border border-", color, " bg-transparent text-", color), 46 | paste0("alert-", color) 47 | ) 48 | div( 49 | class = "alert-dismissible fade show", 50 | class = type, 51 | class = bgborder, 52 | if (close) { 53 | div(type = "button", class = "close", `data-dismiss` = "alert", `aria-label` = "Close", tags$span(`aria-hidden` = "true", tags$i(class = "fa fa-times-circle"))) 54 | }, 55 | div( 56 | class = "d-flex align-items-center", 57 | if (!is.null(icon)) { 58 | div(class = "alert-icon", icon) 59 | }, 60 | div( 61 | HTML(...) 62 | ) 63 | ) 64 | ) 65 | } 66 | -------------------------------------------------------------------------------- /man/textInput.Rd: -------------------------------------------------------------------------------- 1 | % Generated by roxygen2: do not edit by hand 2 | % Please edit documentation in R/form.R 3 | \name{textInput} 4 | \alias{textInput} 5 | \title{Create an advanced text input} 6 | \usage{ 7 | textInput( 8 | inputId, 9 | label, 10 | value = "", 11 | width = NULL, 12 | placeholder = NULL, 13 | size = c("m", "s", "l", "xl"), 14 | style = c("default", "pill", "round", "clean"), 15 | border.type = c("none", "primary", "secondary", "info", "success", "danger", "warning"), 16 | prepend = NULL, 17 | append = NULL, 18 | disabled = FALSE 19 | ) 20 | } 21 | \arguments{ 22 | \item{inputId}{The identification name} 23 | 24 | \item{label}{The label for the input} 25 | 26 | \item{value}{The current value of the input} 27 | 28 | \item{width}{width of the text input} 29 | 30 | \item{placeholder}{A placeholder text} 31 | 32 | \item{size}{The size of the input, "m", "s", "l", "xl"} 33 | 34 | \item{style}{Style to adapt, options include "default", "pill", "round", "clean"} 35 | 36 | \item{border.type}{Add a border coloring using either of "none", "primary","secondary", "info", "success", "danger", "warning"} 37 | 38 | \item{prepend}{Add a prepended text or icon} 39 | 40 | \item{append}{Add an appended text or icon} 41 | 42 | \item{disabled}{Boolean. If textInput should be disabled} 43 | } 44 | \value{ 45 | A HTML with modifications to th style information 46 | } 47 | \description{ 48 | Modifications to textInput to allow added functionality and styles 49 | } 50 | \note{ 51 | For more information on the features of the form, visit the examples section of the help documentation 52 | } 53 | \examples{ 54 | \donttest{ 55 | if (interactive()) { 56 | library(shiny) 57 | library(nextGenShinyApps) 58 | 59 | shiny::shinyApp( 60 | ui = fluidPage( 61 | style = "8", 62 | custom.bg.color = "white", 63 | sidebar = NULL, 64 | header = NULL, 65 | card( 66 | header = FALSE, 67 | tags$h3("Text input"), 68 | textInput("caption", "Basic"), 69 | textInput("caption", "Basic", style = "clean"), 70 | textInput("caption", "Border - primary", 71 | "Enter sample text", 72 | prepend = "@", border.type = "info" 73 | ), 74 | textInput("caption", "Border - primary", 75 | "Enter sample text", 76 | prepend = shiny::icon("lock") 77 | ), 78 | textInput("caption", "Border - primary", 79 | "Enter sample text", 80 | append = "\%" 81 | ), 82 | textInput("caption", "Border - primary", 83 | "Enter sample text", 84 | prepend = shiny::icon("chart"), 85 | append = ".00" 86 | ) 87 | ) 88 | ), 89 | server = function(input, output) { 90 | } 91 | ) 92 | } 93 | } 94 | 95 | } 96 | -------------------------------------------------------------------------------- /R/header.R: -------------------------------------------------------------------------------- 1 | #' Title panel for the header of the application 2 | #' 3 | #' Used to embed the header within the body of the application 4 | #' 5 | #' @param left The title text for the header 6 | #' @param right Content to include on the top right corner 7 | #' @param link Hyperlink to navigate when clicked 8 | #' 9 | #' @return An HTML containing elements to insert in a title 10 | #' 11 | #' @examples 12 | #' if (interactive()) { 13 | #' titlePanel( 14 | #' left = "Sample App Title", 15 | #' right = shiny::div("Image/logo", shiny::icon("trash")) 16 | #' ) 17 | #' } 18 | #' 19 | #' @export 20 | titlePanel <- function(left = "Sample Tile", right = NULL, link = "#") { 21 | tags$header( 22 | class = "page-header", role = "banner", 23 | 24 | # logo section 25 | div( 26 | class = "page-logo", 27 | tags$a( 28 | href = link, class = "page-logo-link press-scale-down d-flex align-items-center position-relative", `data-toggle` = "modal", `data-target` = "#modal-shortcut", 29 | span(class = "page-logo-text mr-1", "Sidebar"), 30 | span(class = "position-absolute text-white opacity-50 small pos-top pos-right mr-2 mt-n2"), 31 | tags$i(class = "fa fa-signature d-inline-block ml-1 fs-lg color-primary-300") 32 | ) 33 | ), 34 | 35 | 36 | # nav menu section 37 | div( 38 | class = "hidden-md-down dropdown-icon-menu position-relative d-none will be added in next version", 39 | tags$a( 40 | href = "#", class = "header-btn btn js-waves-off", `data-action` = "toggle", `data-class` = "nav-function-hidden", title = "Hide Navigation", 41 | tags$i(class = "fa fa-bars") 42 | ), 43 | tags$ul( 44 | tags$li( 45 | tags$a( 46 | href = "#", class = "btn js-waves-off", `data-action` = "toggle", `data-class` = "nav-function-minify", title = "Minify Navigation", 47 | tags$i(class = "fa fa-grid") 48 | ) 49 | ), 50 | tags$li( 51 | tags$a( 52 | href = "#", class = "btn js-waves-off", `data-action` = "toggle", `data-class` = "nav-function-minify", title = "Lock Navigation", 53 | tags$i(class = "fa fa-lock") 54 | ) 55 | ) 56 | ) 57 | ), 58 | # left side 59 | tags$h2( 60 | class = "mr-auto d-flex", 61 | left 62 | ), 63 | 64 | 65 | # mobile button, will be further developed in next versio 66 | div( 67 | class = "hidden-lg-up d-none", 68 | tags$a( 69 | href = "#", class = "header-btn btn press-scale-down", `data-action` = "toggle", `data-class` = "mobile-nav-on", 70 | tags$i(class = "ni ni-menu") 71 | ) 72 | ), 73 | 74 | # right bar 75 | div( 76 | class = "ml-auto d-none d-md-flex", 77 | right 78 | ) 79 | ) 80 | } 81 | -------------------------------------------------------------------------------- /R/fluidPage.R: -------------------------------------------------------------------------------- 1 | #' Generate a container for the application 2 | #' 3 | #' An upgrade to the fluidPage function available in the 'Shiny' package 4 | #' 5 | #' @importFrom shiny restoreInput 6 | #' @param ... The elements to include within the body of the page 7 | #' @param header OPTIONAL. Items to display in the header section (use the titlePanel() function to set this property). 8 | #' @param sidebar OPTIONAL. Items to display in the sidebay section (use the sidebarPanel() function to set this property). 9 | #' @param id OPTIONAL. Identification tag of the container 10 | #' @param style OPTIONAL. Various unique styles choices from 1 - 12 11 | #' @param custom.bg.color OPTIONAL. Choice to change the background color of the container. Use HEX values such as #FFFFFF or RGB code such as rgb(255,255,255) or simple color name such as 'lightblue' 12 | #' @param class OPTIONAL. Class name for the container 13 | #' @param modal.header.links OPTIONAL. One or more list containing links that appear when the app title is clicked. To remove, set to NULL 14 | #' 15 | #' @note This global layout can be applied to a variety of shiny app and dashboard, with or without a sidebar. See the example below. 16 | #' 17 | #' @return A rendered HTML of the container holder of the application items 18 | #' @examples 19 | #' \donttest{ 20 | #' if (interactive()) { 21 | #' library(shiny) 22 | #' library(nextGenShinyApps) 23 | #' 24 | #' shiny::shinyApp( 25 | #' ui = fluidPage( 26 | #' style = "6", 27 | #' header = titlePanel(left = "Sample App Title", 28 | #' right = "Image/logo"), 29 | #' sidebar = sidebarPanel( 30 | #' title = "myApp", 31 | #' "Sample sidebar content" 32 | #' ), 33 | #' "Sample body content" 34 | #' ), 35 | #' server = function(input, output) {} 36 | #' ) 37 | #' } 38 | #' } 39 | #' @export 40 | 41 | 42 | fluidPage <- function(..., id = NULL, header = NULL, sidebar = NULL, class = NULL, style = rand.sc13, custom.bg.color = NULL, modal.header.links = NULL){ 43 | color <- match.arg(style) 44 | template <- "core" 45 | tags$body( 46 | class = "mod-bg-1 mod-nav-link nav-function-fixed", 47 | class = ifelse(is.null(sidebar), "nav-function-hidden", ""), 48 | if (!is.null(custom.bg.color)) tags$style(paste0(" 49 | .page-content-wrapper{background-color:", custom.bg.color, "!important;} 50 | ")), 51 | div( 52 | id = id, class = paste0("app-container app-theme-gray ", class, " ", color), 53 | verify_fa = FALSE, 54 | rmarkdown::html_dependency_font_awesome(), 55 | # modal 56 | if(!is.null(modal.header.links)) 57 | modal.header(modal.header.links), 58 | # page content 59 | div( 60 | class = "page-wrapper", 61 | style = ifelse(is.null(sidebar), "padding-left: 0px!important;", ""), 62 | div( 63 | class = "page-inner", 64 | sidebar, 65 | dashboardBody(header, ...) 66 | ), 67 | cssjsinclude(template, color) 68 | ) 69 | ) 70 | ) 71 | } 72 | 73 | 74 | #' A wrapper for panels 75 | #' 76 | #' Create a wrapper div for pannels 77 | #' 78 | #' @param ... div contents 79 | #' @param bg background color of the wrapper 80 | #' 81 | #' @return a container for other containers 82 | #' 83 | #' @examples 84 | #' wrapper(altPanel("hello"),mainPanel("test")) 85 | #' wrapper(mainPanel("hello"),shiny::column(width=2,"test")) 86 | #' @export 87 | #' 88 | 89 | wrapper <- function(..., bg = c("default", "primary", "secondary", "warning", "info", "danger", "success")) { 90 | bg <- match.arg(bg) 91 | htmltools::div(class = "row dwrapper", class = paste0("bg-", bg), ...) 92 | } 93 | 94 | -------------------------------------------------------------------------------- /inst/exp/example.Alert.R: -------------------------------------------------------------------------------- 1 | # library 2 | library(shiny) 3 | library(nextGenShinyApps) 4 | 5 | 6 | # Define UI 7 | ui <- fluidPage( 8 | # Theme: Select color style from 1-13 9 | style = "4", 10 | 11 | # Header: Insert header content using titlePanel ------------ 12 | header = titlePanel(left = "A Demo to Showcase the Features of the nextGenShinyApp R package", right = "Image logo"), 13 | 14 | # Sidebar: Insert content for sidebar ---------------------- 15 | sidebar = sidebarPanel( 16 | title = "NextGenShinyApp", 17 | 18 | # sample inputs 19 | textInput( 20 | inputId = "caption", 21 | label = "Caption:", 22 | value = "Data Summary" 23 | ), 24 | 25 | # Input: Decimal interval with step value 26 | sliderInput("decimal", "Decimal:", 27 | min = 0, max = 1, 28 | value = 0.5, step = 0.1 29 | ), 30 | 31 | # Input: Specification of range within an interval 32 | sliderInput( 33 | inputId = "bins1", 34 | label = "Number of bins:", 35 | min = 1, 36 | max = 50, 37 | value = 30 38 | ) 39 | ), 40 | 41 | # Body: Insert anything into the body-------------------- 42 | tags$h2("Alerts"), 43 | tags$h4("Flavors of alerts to use in any div with the alert() function"), 44 | tags$br(), tags$br(), 45 | row( 46 | column( 47 | width = 12, 48 | card( 49 | header = FALSE, 50 | tags$h2("Default alert (not closeable)"), 51 | alert("Customize the alert display to look like this by using type = 'default' and color = 'none'"), 52 | alert("Customize the alert display to look like this by using type = 'default' and color = 'primary'", color = "primary"), 53 | alert("Customize the alert display to look like this by using type = 'default' and color = 'secondary'", color = "secondary"), 54 | alert("Customize the alert display to look like this by using type = 'default' and color = 'danger'", color = "danger"), 55 | alert("Customize the alert display to look like this by using type = 'default' and color = 'success'", color = "success"), 56 | alert("Customize the alert display to look like this by using type = 'default' and color = 'info'", color = "info") 57 | ) 58 | ), 59 | column( 60 | width = 12, 61 | card( 62 | header = FALSE, 63 | tags$h2("Standard alert (closeable)"), 64 | alert("Customize the alert display to look like this by using type = 'standard' and color = 'primary'", type = "standard", color = "primary"), 65 | alert("Customize the alert display to look like this by using type = 'standard' and color = 'secondary'", type = "standard", color = "secondary"), 66 | alert("Customize the alert display to look like this by using type = 'standard', color = 'secondary' and outline = TRUE", type = "standard", color = "secondary", outline = TRUE), 67 | alert("Customize the alert display to look like this by using type = 'standard', color = 'danger' , outline = TRUE and close = TRUE", type = "standard", color = "danger", outline = TRUE, close = TRUE), 68 | alert("Customize the alert display with a closer to look like this by using type = 'standard', with color color = 'none' and close = TRUE", type = "standard", close = TRUE), 69 | alert("Customize the alert display with and ICON to look like this by using type = 'standard', with color color = 'primary' and icon = icon(ICONTYPE)", type = "standard", color = "primary", icon = icon("info")) 70 | ) 71 | ) 72 | ) 73 | ) 74 | 75 | # Define server content 76 | server <- function(input, output) { 77 | 78 | # Sample user-defined sever logic 79 | } 80 | 81 | # Create and initialize the Shiny application 82 | shinyApp(ui, server) 83 | -------------------------------------------------------------------------------- /R/sidebar.R: -------------------------------------------------------------------------------- 1 | #' Create the sidebar panel 2 | #' 3 | #' Creates an advanced sidebar panel with colors corresponding to a chosen theme style 4 | #' 5 | #' @param ... The elements to include within the body of the sidebar 6 | #' @param title Title of the sidebar content 7 | #' @param footer Whether or not to enable the footer content 8 | #' @note This global layout can be applied to a variety of shiny app and dashboard, with or without a sidebar. See the example below. 9 | #' 10 | #' @return An HTML containing elements of a sidebar to be embedded in a page 11 | #' 12 | #' @examples 13 | #' \donttest{ 14 | #' if (interactive()) { 15 | #' library(shiny) 16 | #' library(nextGenShinyApps) 17 | #' 18 | #' shiny::shinyApp( 19 | #' ui = fluidPage( 20 | #' style = "7", 21 | #' header = NULL, 22 | #' sidebar = sidebarPanel( 23 | #' title = "myApp", 24 | #' "Sample sidebar contents", 25 | #' footer = FALSE 26 | #' ), 27 | #' "Plain content" 28 | #' ), 29 | #' server = function(input, output) {} 30 | #' ) 31 | #' } 32 | #' } 33 | #' @export 34 | sidebarPanel <- function(..., title = "TitleApp", footer = FALSE) { 35 | tags$aside( 36 | class = "page-sidebar", 37 | div( 38 | class = "page-logo", 39 | tags$a( 40 | href = "#", 41 | class = "page-logo-link press-scale-down d-flex align-items-center position-relative", 42 | `data-toggle` = "modal", `data-target` = "#modal-shortcut", 43 | tags$span( 44 | class = "page-logo-text mr-1", 45 | style = "font-weight: bold;", 46 | title 47 | ), 48 | tags$span(class = "position-absolute text-white opacity-50 small pos-top pos-right mr-2 mt-n2"), 49 | tags$span(class = "fa fa-signature d-inline-block ml-1 fs-lg color-primary-300") 50 | ) 51 | ), 52 | tags$nav( 53 | id = "js-primary-nav", class = "primary-nav", role = "navigation", 54 | div( 55 | class = "nav-filter", 56 | div( 57 | class = "position-relative", 58 | '', 59 | tags$a( 60 | href = "#", onclick = "return false;", class = "btn-primary btn-search-close js-waves-off", `data-action` = "toggle", `data-class` = "list-filter-active", `data-target` = ".page-sidebar", 61 | tags$i(class = "fa fa-chevron-up"), 62 | ) 63 | ) 64 | ), 65 | tags$ul( 66 | id = "js-nav-menu", class = "nav-menu", 67 | tags$li( 68 | class = "nav-title", 69 | style = "color:#f5f5f5!important", 70 | div(...) 71 | ) 72 | ) 73 | ), 74 | if (footer) { 75 | div( 76 | class = "nav-footer shadow-top", 77 | tags$a( 78 | href = "#", onclick = "return false;", `data-action` = "toggle", `data-class` = "nav-function-minify", class = "hidden-md-down", 79 | tags$i(class = "fa fa-chevron-right"), 80 | tags$i(class = "fa fa-chevron-right") 81 | ), 82 | tags$ul( 83 | class = "list-table m-auto nav-footer-buttons", 84 | tags$li( 85 | tags$a( 86 | href = "javascript:void(0);", `data-toggle` = "tooltip", `data-placement` = "top", title = "Chat logs", 87 | tags$i(class = "fa fa-comments") 88 | ) 89 | ), 90 | tags$li( 91 | tags$a( 92 | href = "javascript:void(0);", `data-toggle` = "tooltip", `data-placement` = "top", title = "Chart", 93 | tags$i(class = "fa fa-chart") 94 | ) 95 | ), tags$li( 96 | tags$a( 97 | href = "javascript:void(0);", `data-toggle` = "tooltip", `data-placement` = "top", title = "Phone", 98 | tags$i(class = "fa fa-phone") 99 | ) 100 | ) 101 | ) 102 | ) 103 | } 104 | ) 105 | } 106 | 107 | 108 | #' Sidebar layout 109 | #' 110 | #' Container for sidebar, optional 111 | #' 112 | #' @param ... content of the sidebar layout 113 | #' 114 | #' @return An HTML containing elements in a container 115 | #' @examples 116 | #' sidebarLayout("sample text") 117 | #' @export 118 | #' 119 | 120 | sidebarLayout <- function(...) { 121 | div(...) 122 | } 123 | -------------------------------------------------------------------------------- /vignettes/introduction_to_nextgenshinyapps.Rmd: -------------------------------------------------------------------------------- 1 | --- 2 | title: "The nextGenShinyApps: Advanced R Tools for Modern Shiny Applications and Dashboards" 3 | author: "Obinna N. Obianom" 4 | date: "`r Sys.Date()`" 5 | output: rmarkdown::html_vignette 6 | vignette: > 7 | %\VignetteIndexEntry{The nextGenShinyApps: Advanced R Tools for Modern Shiny Applications and Dashboards} 8 | %\VignetteEngine{knitr::rmarkdown} 9 | %\VignetteEncoding{UTF-8} 10 | --- 11 | ```{r setup, include = FALSE} 12 | knitr::opts_chunk$set( 13 | collapse = TRUE, 14 | comment = "#>" 15 | ) 16 | ``` 17 | 18 | Advanced tools and styling to allow the creation of the next generation of dashboards and shiny applications. 19 | 20 | ![](https://nextgenshinyapps.obi.obianom.com/adslogo2.png) 21 | 22 | ## Installation and Library Attachment 23 | 24 | The nextGenShinyApps package is available on CRAN and can be installed as shown below 25 | 26 | `install.packages(nextGenShinyApps)` 27 | 28 | Attach library 29 | 30 | `library(nextGenShinyApps)` 31 | 32 | ## Use 33 | 34 | The nextGenShinyApps examples can be accessed as shown below 35 | 36 | 37 | ```{r eval=FALSE,echo=TRUE} 38 | 39 | # library 40 | library(nextGenShinyApps) 41 | 42 | # load.example(EXAMPLEx) 43 | # Where EXAMPLEx can be either “Plain”, “noSideBar”, “Card”, “Tab”, 44 | # “Modal”, “Form”, “Button”, “Spinner”, “Alert”, “Accordion” 45 | 46 | ``` 47 | 48 | 49 | 50 | 51 | ## Example code to get started 52 | 53 | ### Output 54 | 55 | ![](https://nextgenshinyapps.obi.obianom.com/nextgenshinyapps.png){style="width:100%"} 56 | 57 | ### Input 58 | 59 | ```{r eval=FALSE,echo=TRUE} 60 | 61 | # library 62 | library(shiny) 63 | library(nextGenShinyApps) 64 | library(r2social) 65 | library(r2resize) 66 | library(r2dictionary) 67 | if(interactive()) { 68 | # Define UI 69 | ui <- fluidPage( 70 | # Theme: Select color style from 1-13 71 | style = "6", 72 | 73 | # Header: Insert header content using titlePanel ------------ 74 | header = titlePanel(left = "A Demo to Showcase the Features of the nextGenShinyApp R package", right = "Image logo"), 75 | 76 | # Sidebar: Insert content for sidebar ---------------------- 77 | sidebar = sidebarPanel( 78 | title = "NextGenShinyApp", 79 | "Sidebar content" 80 | ), 81 | empahsisCard(tags$h2("Welcome"),"Redefined cards with nextGenShinyApps. This box was created using r2resize R package", bg.color = "#ffffff"), 82 | 83 | # Body: Insert anything into the body-------------------- 84 | tags$h2("Basic Moveable Advanced Card"), 85 | wrapper( 86 | altPanel( 87 | card( 88 | title = "Standard card with text and a slider", 89 | # card body content 90 | tags$h4("Sample text"), 91 | "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Mi bibendum neque egestas congue quisque egestas", 92 | tags$br(), tags$br(), 93 | tags$h4("Input slider for the image"), 94 | HTML(r2dictionary::define("box")), 95 | sliderInput( 96 | inputId = "bins", 97 | label = "Number of bins:", 98 | min = 1, 99 | max = 50, 100 | value = 30 101 | ) 102 | ) 103 | ), 104 | mainPanel( 105 | width = 4, 106 | card( 107 | title = "Standard card with a Figure", 108 | plotOutput(outputId = "distPlot"), 109 | HTML(r2dictionary::define("photo")) 110 | ) 111 | ) 112 | ), 113 | r2social.scripts(), 114 | shareButton(link = "https://rpkg.net", position = "inline") 115 | ) 116 | 117 | # Define server content 118 | server <- function(input, output) { 119 | 120 | # Sample user-defined sever logic 121 | output$distPlot <- renderPlot({ 122 | x <- faithful$waiting 123 | bins <- seq(min(x), max(x), length.out = input$bins + 1) 124 | 125 | hist(x, 126 | breaks = bins, col = "#75AADB", border = "white", 127 | xlab = "Waiting time to next eruption (in mins)", 128 | main = "Histogram of waiting times" 129 | ) 130 | }) 131 | } 132 | 133 | # Create and initialize the Shiny application 134 | shiny::shinyApp(ui, server) 135 | } 136 | 137 | ``` 138 | 139 | 140 | 141 | ## Examples and Demo Pages 142 | 143 | View examples and demo pages at https://nextgenshinyapps.obi.obianom.com/ 144 | View other packages created by me at https://coursewhiz.org 145 | -------------------------------------------------------------------------------- /man/card.Rd: -------------------------------------------------------------------------------- 1 | % Generated by roxygen2: do not edit by hand 2 | % Please edit documentation in R/cards.R 3 | \name{card} 4 | \alias{card} 5 | \title{Generate a flexible and extensible content container} 6 | \usage{ 7 | card( 8 | ..., 9 | title = "Standard Card", 10 | collapsed = FALSE, 11 | bg.fade = TRUE, 12 | width = 12, 13 | header.bg = letters[1:13], 14 | alert.text = NULL, 15 | alert.bg = c("primary", "warning", "secondary", "info", "success", "danger"), 16 | toolbar = NULL, 17 | header = TRUE, 18 | draggable = TRUE, 19 | id = NULL 20 | ) 21 | } 22 | \arguments{ 23 | \item{...}{The elements to include within the body of the card} 24 | 25 | \item{title}{The text to display in the header title} 26 | 27 | \item{collapsed}{If \code{TRUE}, the card is collapsed. The default is \code{FALSE}} 28 | 29 | \item{bg.fade}{If \code{TRUE}, the background will be faded if a background exists} 30 | 31 | \item{width}{Select a width from 1 to 12 to indicate the size of the card} 32 | 33 | \item{header.bg}{Header background color style, choices 1 to 11} 34 | 35 | \item{alert.text}{Enter text for the alert portion. Leave as NULL to exclude the alert} 36 | 37 | \item{alert.bg}{Indicate the type of alert to include, choices are "primary", "warning", "secondary", "info", "success", "danger"} 38 | 39 | \item{toolbar}{The default is NULL, which means all toolbar will be displayed use this to set what toolbar to show.} 40 | 41 | \item{header}{If \code{FALSE}, the header will be excluded} 42 | 43 | \item{draggable}{If \code{FALSE}, the card will not be draggable} 44 | 45 | \item{id}{unique card id} 46 | } 47 | \value{ 48 | HTML code of the container with a class called card that holds the items 49 | } 50 | \description{ 51 | Widely used Bootstrap feature with improvements to allow collapse, minimize and closing 52 | } 53 | \note{ 54 | For more information on the features of the card, visit the examples section of the help documentation 55 | } 56 | \examples{ 57 | 58 | # Example 1 59 | if (interactive()) { 60 | library(shiny) 61 | library(nextGenShinyApps) 62 | 63 | shiny::shinyApp( 64 | ui = fluidPage( 65 | style = "4", 66 | custom.bg.color = "lightblue", 67 | sidebar = NULL, 68 | header = titlePanel(left="Card Ex2"), 69 | wrapper( 70 | altPanel( 71 | card( 72 | title = "Standard card", 73 | collapsed = TRUE, 74 | alert.text = "An alert2 for the content", 75 | alert.bg = "warning", 76 | toolbar = list(collapse = TRUE, 77 | maximize = TRUE, 78 | close = FALSE, 79 | menu = TRUE), 80 | shiny::h3("Sample text"), 81 | "Lorem ipsum dolor sit a" 82 | )), 83 | mainPanel( 84 | card( 85 | title = "Standard card 2", 86 | shiny::h1("Sample text"), 87 | "Lorem ipsum dolor sit a" 88 | )) 89 | ) 90 | ), 91 | server = function(input, output) { 92 | } 93 | ) 94 | } 95 | 96 | # Example 2 97 | if (interactive()) { 98 | library(shiny) 99 | library(nextGenShinyApps) 100 | 101 | shiny::shinyApp( 102 | ui = fluidPage( 103 | style = "8", 104 | custom.bg.color = "#d9d9d9", 105 | sidebar = NULL, 106 | header = titlePanel(left="Card Ex1"), 107 | wrapper( 108 | altPanel(width = 12, 109 | card( 110 | title = "Standard card", 111 | alert.text = "An alert1 for the content", 112 | shiny::h3("Sample text"), 113 | "Lorem ipsum dolor sit a" 114 | ), 115 | card( 116 | title = "Standard card", 117 | collapsed = TRUE, 118 | alert.text = "An alert2 for the content", 119 | alert.bg = "warning", 120 | toolbar = list(collapse = TRUE, 121 | maximize = TRUE, 122 | close = FALSE, 123 | menu = TRUE), 124 | shiny::h3("Sample text"), 125 | "Lorem ipsum dolor sit a" 126 | )) 127 | ) 128 | ), 129 | server = function(input, output) { 130 | } 131 | ) 132 | } 133 | 134 | 135 | } 136 | -------------------------------------------------------------------------------- /inst/exp/example.Button.R: -------------------------------------------------------------------------------- 1 | # library 2 | library(shiny) 3 | library(nextGenShinyApps) 4 | 5 | 6 | # Define UI 7 | ui <- fluidPage( 8 | # Theme: Select color style from 1-13 9 | style = "8", 10 | 11 | # Header: Insert header content using titlePanel ------------ 12 | header = titlePanel(left = "A Demo to Showcase the Features of the nextGenShinyApp R package", right = "Image logo"), 13 | 14 | # Sidebar: Insert content for sidebar ---------------------- 15 | sidebar = sidebarPanel( 16 | title = "NextGenShinyApp", 17 | 18 | # sample inputs 19 | textInput( 20 | inputId = "caption", 21 | label = "Caption:", 22 | value = "Data Summary" 23 | ), 24 | 25 | # Input: Decimal interval with step value 26 | sliderInput("decimal", "Decimal:", 27 | min = 0, max = 1, 28 | value = 0.5, step = 0.1 29 | ), 30 | 31 | # Input: Specification of range within an interval 32 | sliderInput( 33 | inputId = "bins1", 34 | label = "Number of bins:", 35 | min = 1, 36 | max = 50, 37 | value = 30 38 | ) 39 | ), 40 | 41 | # Body: Insert anything into the body-------------------- 42 | tags$h2("Buttons"), 43 | tags$h4("Revisions to various buttons that adds more functionality with the submitButton() or actionButton() functions"), 44 | tags$br(), tags$br(), 45 | row( 46 | column( 47 | width = 6, 48 | card( 49 | tags$h2("Buttons with various styles"), 50 | header = FALSE, 51 | div(submitButton("Submit button with primary color", icon = icon("file"), size = "s", bg.type = "primary")), br(), 52 | div(actionButton("buttoxxn", "Action button with primary color", icon = icon("code"), bg.type = "primary")), br(), 53 | div(submitButton("Secondary color", icon = icon("folder"), bg.type = "secondary")), br(), 54 | div(submitButton("Success color", icon = icon("filter"), bg.type = "success")), br(), 55 | div(submitButton("Warning color", icon = icon("grid"), bg.type = "warning")), br(), 56 | div(submitButton("Danger color", icon = icon("check"), bg.type = "danger")), br(), 57 | div(submitButton("Info color", icon = icon("trash"), bg.type = "info")), br() 58 | ) 59 | ), 60 | column( 61 | width = 6, 62 | card( 63 | tags$h2("Buttons with various sizes"), 64 | header = FALSE, 65 | div(submitButton("Smaller", icon = icon("alert"), size = "xs")), br(), 66 | div(submitButton("Small size", icon = icon("bar"), size = "s")), br(), 67 | div(submitButton("Medium size", icon = icon("folder"), size = "m")), br(), 68 | div(submitButton("Large size", icon = icon("filter"), size = "l")), br(), br(), 69 | tags$h2("Buttons with or without outline"), 70 | div(submitButton("No outline", icon = icon("pen"), bg.type = "success", outline = FALSE)), br(), 71 | div(submitButton("Outline", icon = icon("user"), bg.type = "success", outline = TRUE)), br(), 72 | HTML('you probably') 73 | ) 74 | ), 75 | column( 76 | width = 12, 77 | card( 78 | tags$h2("Buttons with styling of edges"), 79 | header = FALSE, 80 | (submitButton("Default", icon = icon("lock"), size = "l")), br(), 81 | (submitButton("Default with outline", icon = icon("lock"), outline = TRUE, bg.type = "danger")), br(), br(), 82 | (submitButton("Pill", icon = icon("check"), size = "l", style = "pill")), br(), 83 | (submitButton("Pill with outline", icon = icon("check"), size = "l", style = "pill", outline = TRUE, bg.type = "secondary")), br(), br(), 84 | (submitButton("Clean", icon = icon("refresh"), style = "clean")), br(), 85 | submitButton("Clean", icon = icon("refresh"), style = "clean", outline = TRUE, bg.type = "secondary"), br(), br(), 86 | "Round with just an icon, with and without outline", br(), 87 | actionButton("button", "", icon = icon("home"), style = "round"), br(), br(), 88 | actionButton("button", "", icon = icon("home"), style = "round", outline = TRUE, bg.type = "primary"), br(), br() 89 | ) 90 | ) 91 | ) 92 | ) 93 | 94 | # Define server content 95 | server <- function(input, output,session) { 96 | 97 | # Sample user-defined sever logic 98 | } 99 | 100 | # Create and initialize the Shiny application 101 | shinyApp(ui, server) 102 | -------------------------------------------------------------------------------- /R/tabs.R: -------------------------------------------------------------------------------- 1 | #' Create an advanced tabset 2 | #' 3 | #' Advanced tabset panel with styles and features 4 | #' 5 | #' @param ... Content of the tabset, created using the tabPanel for each individual item 6 | #' @param type Type of tabset to create, choices include "default","pills","clean","jPills","justified" 7 | #' @param border Include a board for the tabset, TRUE or FALSE 8 | #' @param justified Justify tab headers, TRUE or FALSE 9 | #' @param position position of the tabs, choices include "left","end","center" 10 | #' 11 | #' @note Many examples exist for the tabset, fid them using the package load.example function 12 | #' 13 | #' @return An HTML containing elements of a tabset to be embedded in a page 14 | #' 15 | #' @examples 16 | #' \donttest{ 17 | #' if (interactive()) { 18 | #' library(shiny) 19 | #' library(nextGenShinyApps) 20 | #' tab2 <- tabPanel("Summary", "SAMPLE nunc.") 21 | #' tab3 <- tabPanel("Tab 3", "aoreet sit amet.") 22 | #' tab4 <- tabPanel("Tab 4", "Vulputate pulvinar") 23 | #' 24 | #' 25 | #' shiny::shinyApp( 26 | #' ui = fluidPage( 27 | #' style = "8", 28 | #' custom.bg.color = "rgb(110,134,032)", 29 | #' sidebar = NULL, 30 | #' header = NULL, 31 | #' tabsetPanel( 32 | #' tab2, 33 | #' tab3, 34 | #' type = "pills", 35 | #' justified = TRUE 36 | #' ) 37 | #' ), 38 | #' server = function(input, output) { 39 | #' } 40 | #' ) 41 | #' } 42 | #' } 43 | #' 44 | #' @export 45 | #' 46 | #' 47 | tabsetPanel <- function(..., type = c("default", "pills", "clean", "jPills", "justified"), border = TRUE, justified = FALSE, position = c("left", "end", "center")) { 48 | 49 | # get the type of tabset 50 | type <- match.arg(type) 51 | 52 | # insert class based on the tabset 53 | type.class <- switch(type, 54 | "default" = { 55 | " nav-tabs" 56 | }, 57 | "pills" = { 58 | " nav-pills" 59 | }, 60 | "clean" = { 61 | " nav-tabs nav-tabs-clean" 62 | }, 63 | "jPills" = { 64 | " nav-pills nav-justified" 65 | }, 66 | "justified" = { 67 | " nav-tabs nav-fill" 68 | } 69 | ) 70 | 71 | justified.class <- switch(justified, 72 | " nav-justified", 73 | "" 74 | ) 75 | if (justified) position <- "none" 76 | 77 | 78 | tabItems <- list(...) 79 | count.pre <- as.integer(Sys.time()) - rand.num(1) 80 | count.title <- 0 81 | part.title <- "" 82 | part.content <- "" 83 | for (tab in tabItems) { 84 | count.title <- count.title + 1 85 | activeOrNot <- ifelse(count.title == 1, " active", "") 86 | # for title 87 | part.title <- paste0(part.title, tags$li( 88 | class = "nav-item", 89 | tags$a( 90 | class = paste0("nav-link", activeOrNot), `data-toggle` = "tab", href = paste0("#tab_justified-", count.pre, count.title), role = "tab", 91 | tab$title 92 | ) 93 | )) 94 | 95 | # for content 96 | part.content <- paste0(part.content, div( 97 | class = paste0("tab-pane fade show", activeOrNot), id = paste0("tab_justified-", count.pre, count.title), role = "tabpanel", 98 | tab$content 99 | )) 100 | } 101 | 102 | 103 | if (border) { 104 | div( 105 | class = "panel", 106 | div( 107 | class = "panel-container show", 108 | div( 109 | class = "panel-content", 110 | tags$ul( 111 | class = paste0("nav", type.class, " justify-content-", position, justified.class), role = "tablist", 112 | HTML(part.title) 113 | ), 114 | div( 115 | class = "tab-content p-3", 116 | HTML(part.content) 117 | ) 118 | ) 119 | ) 120 | ) 121 | } else { 122 | div( 123 | tags$ul( 124 | class = paste0("nav", type.class, " justify-content-", position, justified.class), role = "tablist", 125 | HTML(part.title) 126 | ), 127 | div( 128 | class = "tab-content p-3", 129 | HTML(part.content) 130 | ) 131 | ) 132 | } 133 | } 134 | 135 | 136 | #' Create a tab panel item 137 | #' 138 | #' Create a tab panel item that is enclosed by a tabsetPanel 139 | #' 140 | #' @param title title of the tab 141 | #' @param ... content of the tab 142 | #' 143 | #' @return An list containing the title and content of a tab 144 | #' 145 | #' @examples 146 | #' if (interactive()) { 147 | #' tabPanel("Summary", "Convallis aesus.") 148 | #' tabPanel("Summary", "nextGenShinyAppss.") 149 | #' } 150 | #' 151 | #' @export 152 | #' 153 | #' 154 | tabPanel <- function(title, ...) { 155 | list(title = title, content = htmltools::div(...)) 156 | } 157 | -------------------------------------------------------------------------------- /inst/exp/example.Spinner.R: -------------------------------------------------------------------------------- 1 | # library 2 | library(shiny) 3 | library(nextGenShinyApps) 4 | 5 | 6 | # Define UI 7 | ui <- fluidPage( 8 | # Theme: Select color style from 1-13 9 | style = "8", 10 | 11 | # Header: Insert header content using titlePanel ------------ 12 | header = titlePanel(left = "A Demo to Showcase the Features of the nextGenShinyApp R package", right = "Image logo"), 13 | 14 | # Sidebar: Insert content for sidebar ---------------------- 15 | sidebar = sidebarPanel( 16 | title = "NextGenShinyApp", 17 | 18 | # sample inputs 19 | textInput( 20 | inputId = "caption", 21 | label = "Caption:", 22 | value = "Data Summary" 23 | ), 24 | 25 | # Input: Decimal interval with step value 26 | sliderInput("decimal", "Decimal:", 27 | min = 0, max = 1, 28 | value = 0.5, step = 0.1 29 | ), 30 | 31 | # Input: Specification of range within an interval 32 | sliderInput( 33 | inputId = "bins1", 34 | label = "Number of bins:", 35 | min = 1, 36 | max = 50, 37 | value = 30 38 | ) 39 | ), 40 | 41 | # Body: Insert anything into the body-------------------- 42 | tags$h2("Spinners"), 43 | tags$h4("Standalone spinner functionality for use in customization of an output with the spinner() function"), 44 | tags$br(), tags$br(), 45 | row( 46 | column( 47 | width = 6, 48 | card( 49 | header = FALSE, 50 | tags$h2("Ring styled loading spinner"), 51 | alert("Customize to use the ring-like spinners for a lightweight loading indicator by using type = 'ring', declaring color like color = 'primary', and declaring size like size = 's'"), 52 | spinner(type = "ring", size = "s"), 53 | spinner(type = "ring", color = "primary"), 54 | spinner(type = "ring", color = "secondary"), 55 | spinner(type = "ring", color = "success"), 56 | spinner(type = "ring", color = "warning"), 57 | spinner(type = "ring", color = "danger"), 58 | spinner(type = "ring", color = "info") 59 | ) 60 | ), 61 | column( 62 | width = 6, 63 | card( 64 | header = FALSE, 65 | tags$h2("Growing styled loading spinner"), 66 | alert("Customize to use the grow spinners for a lightweight loading indicator by using type = 'grow', declaring color like color = 'primary', and declaring size like size = 's'"), 67 | spinner(type = "grow", size = "s"), 68 | spinner(type = "grow", color = "primary"), 69 | spinner(type = "grow", color = "secondary"), 70 | spinner(type = "grow", color = "success"), 71 | spinner(type = "grow", color = "warning"), 72 | spinner(type = "grow", color = "danger"), 73 | spinner(type = "grow", color = "info") 74 | ) 75 | ), 76 | column( 77 | width = 6, 78 | card( 79 | header = FALSE, 80 | tags$h2("Square styled loading spinner"), 81 | alert("Customize to use the square spinners for a lightweight loading indicator by using type = 'square', declaring color like color = 'primary', and declaring size like size = 's'"), 82 | spinner(type = "square", size = "s"), 83 | spinner(type = "square", color = "primary"), 84 | spinner(type = "square", color = "secondary"), 85 | spinner(type = "square", color = "success"), 86 | spinner(type = "square", color = "warning"), 87 | spinner(type = "square", color = "danger"), 88 | spinner(type = "square", color = "info") 89 | ) 90 | ), 91 | column( 92 | width = 6, 93 | card( 94 | header = FALSE, 95 | tags$h2("Bordered-rectangle styled loading spinner"), 96 | alert("Customize to use the rect spinners for a lightweight loading indicator by using type = 'rect', declaring color like color = 'primary', and declaring size like size = 's'"), 97 | spinner(type = "rect", size = "s"), 98 | spinner(type = "rect", color = "primary"), 99 | spinner(type = "rect", color = "secondary"), 100 | spinner(type = "rect", color = "success"), 101 | spinner(type = "rect", color = "warning"), 102 | spinner(type = "rect", color = "danger"), 103 | spinner(type = "rect", color = "info") 104 | ) 105 | ) 106 | ) 107 | ) 108 | 109 | # Define server content 110 | server <- function(input, output) { 111 | 112 | # Sample user-defined sever logic 113 | } 114 | 115 | # Create and initialize the Shiny application 116 | shinyApp(ui, server) 117 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | # nextGenShinyApps: Craft Exceptional R Shiny Dashboards with Novel Responsive Tools 4 | ## Official website: https://nextgenshinyapps.obi.obianom.com 5 | 6 | ### A sample finished Modal shiny app: https://jimrb.shinyapps.io/modal-nGSA/ 7 | 8 | ### A sample finished Cards shiny app: https://r2apps.shinyapps.io/nextgenshinyapps-card/ 9 | 10 | ### Other packages required for nextGenShinyApps: https://depends.rpkg.net/package/nextGenShinyApps 11 | 12 | ### Get started with sample R codes:
https://github.com/oobianom/nextGenShinyApps-Boilerplate-BlankApp 13 | 14 | __Please note that the nextGenShinyApps 1.7 is NOW compatible with the htmlwidgets,rhandsontable and plotly packages. This is being worked on, but there is not currently a completion date.__ 15 | 16 | 17 | 18 | ![](https://nextgenshinyapps.obi.obianom.com/nextgenshinyapp-3.png) 19 | ![](https://nextgenshinyapps.obi.obianom.com/designs/card-design.png) 20 | 21 | 22 | 23 | ## R package installation and usage 24 | The nextGenShinyApps package is available on CRAN and can be installed as shown below 25 | 26 | ### Install package from CRAN 27 | 28 | `install.packages(nextGenShinyApps)` 29 | 30 | ### Attach library 31 | 32 | `library(nextGenShinyApps)` 33 | 34 | ### Simple code to start 35 | 36 | ```diff 37 | # library 38 | library(shiny) 39 | library(nextGenShinyApps) 40 | 41 | # Define UI 42 | ui <- fluidPage( 43 | # Theme: Select color style from 1-13 44 | style = "6", 45 | 46 | # Background: You may specify a background(optional) 47 | custom.bg.color = "lightblue", 48 | 49 | # Header: Insert header content using titlePanel --- 50 | header = titlePanel(left = "Showcase the Features of the nextGenShinyApp R package", right = "Image logo"), 51 | 52 | # Sidebar: Insert content for sidebar -- 53 | sidebar = sidebarPanel( 54 | title = "NextGenShinyApp", 55 | 56 | # sample inputs 57 | textInput( 58 | inputId = "caption", 59 | label = "Caption:", 60 | value = "Data Summary" 61 | ) 62 | ), 63 | 64 | # Body: Insert anything into the body------- 65 | tags$h2("Basic Moveable Advanced Card"), 66 | wrapper( 67 | altPanel( 68 | card( 69 | title = "Standard card with text and a slider", 70 | # card body content 71 | sliderInput("bins", "Decimal:", 72 | min = 0, max = 100, 73 | value = 23, step = 0.1 74 | ) 75 | ) 76 | ), 77 | mainPanel( 78 | card( 79 | title = "Standard card with Images", 80 | plotOutput(outputId = "distPlot") 81 | ) 82 | ) 83 | ) 84 | ) 85 | 86 | # Define server content 87 | server <- function(input, output) { 88 | # Sample user-defined sever logic 89 | output$distPlot <- renderPlot({ 90 | x <- faithful$waiting 91 | bins <- seq(min(x), max(x), length.out = input$bins + 1) 92 | 93 | hist(x, 94 | breaks = bins, col = "#75AADB", border = "white", 95 | xlab = "Waiting time to next eruption (in mins)", 96 | main = "Histogram of waiting times" 97 | ) 98 | }) 99 | } 100 | 101 | # Create and initialize the Shiny application 102 | shinyApp(ui, server) 103 | ``` 104 | 105 | ### Get started by viewing some of the examples 106 | 107 | ```diff 108 | - load.example("Card") 109 | 110 | - load.example("Plain") 111 | 112 | - load.example("noSideBar") 113 | 114 | - load.example("Tab") 115 | 116 | - load.example("Modal") 117 | 118 | - load.example("Alert") 119 | 120 | - load.example("Accordion") 121 | 122 | - load.example("Plotly") 123 | 124 | - load.example("Rhansometable") 125 | 126 | ``` 127 | 128 | 129 | ## Sample Demo Output 1 130 | 131 | ### View the Shiny app demo for Cards 132 | 133 | [Link to demo](https://r2apps.shinyapps.io/nextgenshinyapps-card/) 134 | 135 | ### Image of what it looks like 136 | 137 | ![](https://nextgenshinyapps.obi.obianom.com/nextgenshinyapps.png) 138 | 139 | ## Sample Demo Output 2 140 | 141 | ### View the Shiny app demo for Tabs 142 | 143 | [Link to demo](https://r2apps.shinyapps.io/nextgenshinyapps-tab/) 144 | 145 | ### Image of what it looks like 146 | 147 | ![](https://nextgenshinyapps.obi.obianom.com/nextgenshinyapps3.png) 148 | 149 | ## Sample Demo Output 3 150 | 151 | ![](https://nextgenshinyapps.obi.obianom.com/nextgenshinyapps1.png) 152 | 153 | 154 | ## Tutorial 155 | 156 | Check R CRAN link for vignettes 157 | 158 | ## More information 159 | 160 | - https://coursewhiz.org/mainsite/nextgenshinyapps 161 | 162 | ## Statistic 163 | 164 | [![](https://cranlogs.r-pkg.org/badges/nextGenShinyApps)](https://cran.r-project.org/package=nextGenShinyApps) 165 | 166 | [![CRAN\_Status\_Badge](https://www.r-pkg.org/badges/version/nextGenShinyApps)](https://cran.r-project.org/package=nextGenShinyApps) 167 | 168 | -------------------------------------------------------------------------------- /R/modal.R: -------------------------------------------------------------------------------- 1 | #' Generate a modal box 2 | #' 3 | #' Advanced modal dialog that allows various positioning and transparency 4 | #' 5 | #' @importFrom shiny restoreInput 6 | #' @param ... The elements to include within the body of the modal 7 | #' @param title The text to display in the header title 8 | #' @param footer Footer list of buttons or text 9 | #' @param size The size of the modal, "m", "s", "l", "xl" 10 | #' @param easyClose Allow simple closing, \code{FALSE} or \code{TRUE} 11 | #' @param fade Allow fading away or fadin in, \code{FALSE} or \code{TRUE} 12 | #' @param position Set the position of the modal. Choices include "centered","left","right","top","bottom" 13 | #' @param transparent Allow background transparency, \code{FALSE} or \code{TRUE} 14 | #' 15 | #' @note For more information on the features of the card, visit the examples section of the help documentation 16 | #' 17 | #' @return An HTML containing elements of a modal box that remains hidden until a button is clicked 18 | #' @examples 19 | #' \donttest{ 20 | #' if (interactive()) { 21 | #' library(shiny) 22 | #' library(nextGenShinyApps) 23 | #' shiny::shinyApp( 24 | #' ui = fluidPage( 25 | #' style = "8", 26 | #' custom.bg.color = "white", 27 | #' sidebar = NULL, 28 | #' header = NULL, 29 | #' shiny::h3("Modal EXAMPLES"), 30 | #' shiny::div(actionButton("obianom1", "Show BIG shiny modal on the RIGHT")), 31 | #' shiny::br(), 32 | #' shiny::div(actionButton("obianom2", "Show SMALL shiny modal on the RIGHT")) 33 | #' ), 34 | #' server = function(input, output) { 35 | #' shiny::observeEvent(input$obianom1, { 36 | #' shiny::showModal(modalDialog( 37 | #' textInput("dataset", "Enter a data set"), 38 | #' shiny::div("Id leo in vitae"), 39 | #' size = "l", 40 | #' position = "bottom", 41 | #' )) 42 | #' }) 43 | #' shiny::observeEvent(input$obianom2, { 44 | #' shiny::showModal(modalDialog( 45 | #' textInput("dataset", "Enter a data set"), 46 | #' shiny::div("Lorem donec massa"), 47 | #' size = "l", 48 | #' position = "right", 49 | #' )) 50 | #' }) 51 | #' } 52 | #' ) 53 | #' } 54 | #' } 55 | #' @export 56 | 57 | modalDialog <- function(..., title = NULL, footer = modalButton("Dismiss"), 58 | size = c("m", "s", "l", "xl"), easyClose = FALSE, fade = TRUE, position = c("centered", "left", "right", "top", "bottom"), transparent = FALSE) { 59 | position <- match.arg(position) 60 | size <- match.arg(size) 61 | backdrop <- if (!easyClose) { 62 | "static" 63 | } 64 | keyboard <- if (!easyClose) { 65 | "false" 66 | } 67 | div( 68 | id = "shiny-modal", class = "modal", class = if (fade) { 69 | "fade" 70 | }, tabindex = "-1", `data-backdrop` = backdrop, 71 | `data-bs-backdrop` = backdrop, `data-keyboard` = keyboard, 72 | `data-bs-keyboard` = keyboard, div( 73 | class = "modal-dialog", 74 | class = paste0("modal-dialog-", position), # add position 75 | class = ifelse(transparent, "modal-transparent text-white", ""), # add transparency 76 | class = switch(size, 77 | s = "modal-sm", 78 | m = NULL, 79 | l = "modal-lg", 80 | xl = "modal-xl" 81 | ), div( 82 | class = "modal-content", 83 | if (!is.null(title)) { 84 | div(class = "modal-header", tags$h4( 85 | class = "modal-title", 86 | title 87 | )) 88 | }, div(class = "modal-body", ...), 89 | if (!is.null(footer)) { 90 | div(class = "modal-footer", footer) 91 | } 92 | ) 93 | ), tags$script(HTML("if (window.bootstrap && !window.bootstrap.Modal.VERSION.match(/^4\\./)) {\n var modal = new bootstrap.Modal(document.getElementById('shiny-modal'));\n modal.show();\n } else {\n $('#shiny-modal').modal().focus();\n }")) 94 | ) 95 | } 96 | 97 | 98 | 99 | 100 | 101 | 102 | #' Create hyperlink modal section that appears ONLY when the sidebar logo is clicked 103 | #' 104 | #' Additional tab section for additional links 105 | #' 106 | #' @param ... The list of tabs to include 107 | #' 108 | #' @return An HTML containing elements of links to be inserted in the header of a page 109 | #' @examples 110 | #' if (interactive()) { 111 | #' list1 <- list( 112 | #' title = "Home", icon = shiny::icon("home"), 113 | #' link = "https://google.com" 114 | #' ) 115 | #' list2 <- list( 116 | #' title = "Docs", icon = shiny::icon("folder"), 117 | #' link = "https://obi.obianom.com" 118 | #' ) 119 | #' 120 | #' modal.header(list(list1, list2)) 121 | #' } 122 | #' 123 | #' @export 124 | #' 125 | modal.header <- function(...) { 126 | Items <- list(...) 127 | content <- "" 128 | for (item in Items) { 129 | content <- paste0(content, tags$li( 130 | tags$a( 131 | href = item$link, class = "app-list-item text-white border-0 m-0", 132 | div( 133 | class = "icon-stack", 134 | tags$i(class = "base base-7 icon-stack-3x opacity-100 color-primary-500 "), 135 | tags$i(class = "base base-7 icon-stack-2x opacity-100 color-primary-300 "), 136 | tags$span(class = "icon-stack-1x opacity-100 color-white", list(item$icon)) 137 | ), 138 | tags$span(class = "app-list-name", item$title) 139 | ) 140 | )) 141 | } 142 | 143 | div( 144 | class = "modal fade modal-backdrop-transparent", id = "modal-shortcut", tabindex = "-1", role = "dialog", `aria-labelledby` = "modal-shortcut", `aria-hidden` = "true", 145 | div( 146 | class = "modal-dialog modal-dialog-top modal-transparent", role = "document", 147 | div( 148 | class = "modal-content", 149 | div( 150 | class = "modal-body", 151 | tags$ul( 152 | class = "app-list w-auto h-auto p-0 text-left", 153 | content 154 | ) 155 | ) 156 | ) 157 | ) 158 | ) 159 | } 160 | -------------------------------------------------------------------------------- /inst/exp/example.Form.R: -------------------------------------------------------------------------------- 1 | 2 | # library 3 | library(shiny) 4 | library(nextGenShinyApps) 5 | 6 | 7 | # Define UI 8 | ui <- fluidPage( 9 | # Theme: Select color style from 1-13 10 | style = "6", 11 | 12 | # Header: Insert header content using titlePanel ------------ 13 | header = titlePanel(left = "A Demo to Showcase the Features of the nextGenShinyApp R package", right = "Image logo"), 14 | 15 | # Sidebar: Insert content for sidebar ---------------------- 16 | sidebar = sidebarPanel( 17 | title = "NextGenShinyApp", 18 | 19 | # sample inputs 20 | textInput( 21 | inputId = "caption", 22 | label = "Caption:", 23 | value = "Data Summary" 24 | ), 25 | 26 | # Input: Decimal interval with step value 27 | sliderInput("decimal", "Decimal:", 28 | min = 0, max = 1, 29 | value = 0.5, step = 0.1 30 | ), 31 | 32 | # Input: Specification of range within an interval 33 | sliderInput( 34 | inputId = "bins1", 35 | label = "Number of bins:", 36 | min = 1, 37 | max = 50, 38 | value = 30 39 | ) 40 | ), 41 | 42 | # Body: Insert anything into the body-------------------- 43 | tags$h2("Basic Form Items"), 44 | tags$h4("Revisions to various inputs that adds more functionality"), 45 | tags$br(), tags$br(), 46 | row( 47 | column( 48 | width = 6, 49 | card( 50 | header = FALSE, 51 | tags$h3("Input styles - style = “default”, “pill”, “round”, “clean”"), 52 | textInput("caption", "Default style", "Enter text", style = "default"), 53 | textInput("caption", "Pill style", "Circular edges", style = "pill"), 54 | textInput("caption", "Round style", "Rounded edges", style = "round"), 55 | textInput("caption", "Clean style", "Material style", style = "clean") 56 | ) 57 | ), 58 | column( 59 | width = 6, 60 | card( 61 | header = FALSE, 62 | tags$h3("Prepend text to the input"), 63 | textInput("caption", "Border - primary", "Enter sample text", prepend = "@"), 64 | textInput("caption", "Border - primary", "Enter sample text", prepend = icon("lock")), 65 | textInput("caption", "Border - primary", "Enter sample text", append = "%"), 66 | textInput("caption", "Border - primary", "Enter sample text", prepend = icon("dollar"), append = ".00") 67 | ) 68 | ), 69 | column( 70 | width = 6, 71 | card( 72 | header = FALSE, 73 | tags$h3("Border color styles - border.type = 'primary', 'warning', 'info', 'success','danger'"), 74 | textInput("caption", "Border - primary", "Enter sample text", style = "pill", border.type = "primary"), 75 | textInput("caption", "Border - warning", "Enter sample text", style = "pill", border.type = "warning"), 76 | textInput("caption", "Border - info", "Enter sample text", style = "pill", border.type = "info"), 77 | textInput("caption", "Border - success", "Enter sample text", style = "pill", border.type = "success"), 78 | textInput("caption", "Border - danger", "Enter sample text", style = "pill", border.type = "danger") 79 | ) 80 | ), 81 | column( 82 | width = 6, 83 | card( 84 | tags$h2("Input sizes - s (small),m (medium),l(large)"), 85 | header = FALSE, 86 | textInput("caption", "Basic", "Sample text..."), 87 | textInput("caption", "Small text input", "Enter text", size = "s"), 88 | textInput("caption", "Medium text input", "Enter text", size = "m"), 89 | textInput("caption", "Large text input", "Enter text", size = "l") 90 | ) 91 | ), 92 | column( 93 | width = 6, 94 | card( 95 | tags$h2("Input sizes - s (small),m (medium),l(large)"), 96 | header = FALSE, 97 | textInput("caption", "Sample text input:", "Sample text..."), 98 | textInput("caption", "Sample text input:", "Enter text", size = "l"), 99 | textInput("caption", "Sample text input:", "Data Summary", size = "l", style = "pill"), 100 | textInput("caption", "Sample text input:", "Data Summary", size = "l", style = "clean"), 101 | textInput("caption", "Sample text input:", "Data Summary", size = "l", style = "pill", border.type = "danger"), 102 | textInput("caption", "Sample text input:", "Data Summary", size = "l", style = "pill", border.type = "info"), 103 | textAreaInput("caption", "Sample Text area input", "Data Summary", width = "1000px", border.type = "success") 104 | ) 105 | ), 106 | column( 107 | width = 6, 108 | card( 109 | tags$h2("Select Inputs"), 110 | header = FALSE, 111 | selectInput( 112 | "variable", "Variable:", 113 | c( 114 | "Cylinders" = "cyl", 115 | "Transmission" = "am", 116 | "Gears" = "gear" 117 | ) 118 | ), 119 | radioButtons( 120 | "dist", "Distribution type:", 121 | c( 122 | "Normal" = "norm", 123 | "Uniform" = "unif", 124 | "Log-normal" = "lnorm", 125 | "Exponential" = "exp" 126 | ) 127 | ), 128 | radioButtons( 129 | "dist", "Distribution type:", 130 | c( 131 | "Normal" = "norm", 132 | "Uniform" = "unif", 133 | "Log-normal" = "lnorm", 134 | "Exponential" = "exp" 135 | ) 136 | ), 137 | radioButtons( 138 | "dist", "Distribution type:", 139 | c( 140 | "Normal" = "norm", 141 | "Uniform" = "unif", 142 | "Log-normal" = "lnorm", 143 | "Exponential" = "exp" 144 | ) 145 | ), 146 | checkboxInput("somevalu7e", "Some value", FALSE), 147 | checkboxInput("somevalue", "Some value", FALSE), 148 | checkboxInput("somevalue", "Some value", FALSE), 149 | numericInput("num", label = "Make changes", value = 1) 150 | ) 151 | ) 152 | ) 153 | ) 154 | 155 | # Define server content 156 | server <- function(input, output) { 157 | 158 | # Sample user-defined sever logic 159 | } 160 | 161 | # Create and initialize the Shiny application 162 | shinyApp(ui, server) 163 | -------------------------------------------------------------------------------- /inst/exp/example.Tab.R: -------------------------------------------------------------------------------- 1 | # library 2 | library(shiny) 3 | library(nextGenShinyApps) 4 | 5 | # tabs to be used 6 | tab1 <- tabPanel( 7 | "Slider", 8 | h2("A radio range example"), 9 | radioButtons( 10 | "dist", "Distribution type:", 11 | c( 12 | "Normal" = "norm", 13 | "Uniform" = "unif", 14 | "Log-normal" = "lnorm", 15 | "Exponential" = "exp" 16 | ) 17 | ), 18 | sliderInput( 19 | inputId = "bins", 20 | label = "Sample slider to include:", 21 | min = 1, 22 | max = 50, 23 | value = 30 24 | ) 25 | ) 26 | tab2 <- tabPanel("Summary", "Convallis aenean et tortor at risus. Enim neque volutpat ac tincidunt vitae semper quis lectus nulla. Ultricies tristique nulla aliquet enim tortor at auctor urna nunc.") 27 | tab3 <- tabPanel("Tab 3", "Eu consequat ac felis donec et odio pellentesque. Egestas pretium aenean pharetra magna ac placerat. Eget velit aliquet sagittis id consectetur purus ut. Aliquet enim tortor at auctor urna nunc id cursus metus. Semper viverra nam libero justo laoreet sit amet.") 28 | tab4 <- tabPanel("Tab 4", "Vulputate mi sit amet mauris commodo quis. Dictum non consectetur a erat nam. Malesuada fames ac turpis egestas maecenas pharetra convallis posuere morbi. Aliquam faucibus purus in massa. Vel orci porta non pulvinar") 29 | 30 | 31 | # Define UI 32 | ui <- fluidPage( 33 | # Theme: Select color style from 1-13 34 | style = "6", 35 | 36 | # Header: Insert header content using titlePanel ------------ 37 | header = titlePanel(left = "A Demo to Showcase the Features of the nextGenShinyApp R package", right = "Image logo"), 38 | 39 | # Sidebar: Insert content for sidebar ---------------------- 40 | sidebar = sidebarPanel( 41 | title = "NextGenShinyApp", 42 | 43 | # sample inputs 44 | textInput( 45 | inputId = "caption", 46 | label = "Caption:", 47 | value = "Data Summary" 48 | ), 49 | 50 | # Input: Decimal interval with step value 51 | sliderInput("decimal", "Decimal:", 52 | min = 0, max = 1, 53 | value = 0.5, step = 0.1 54 | ), 55 | 56 | # Input: Specification of range within an interval 57 | sliderInput( 58 | inputId = "bins1", 59 | label = "Number of bins:", 60 | min = 1, 61 | max = 50, 62 | value = 30 63 | ) 64 | ), 65 | 66 | # Body: Insert anything into the body-------------------- 67 | tags$h2("Basic Tabset"), 68 | tags$h4("A tabset that includes features for customizations such as justification, border and choosing between pills and tabs."), 69 | tags$li("Choose between various styles for your tab"), 70 | tags$li("Include any content within the tabs simply using the tabsetPanel()"), 71 | tags$br(), tags$br(), 72 | row( 73 | column( 74 | width = 5, 75 | tags$h3("Simple tab"), 76 | HTML("No further argument necessary"), 77 | tabsetPanel( 78 | tab1, 79 | tab2, 80 | tab3, 81 | tab4 82 | ) 83 | ), 84 | column( 85 | width = 7, 86 | tags$h3("Simple tab without a holder"), 87 | HTML("Use argument border = FALSE "), 88 | tabsetPanel( 89 | tab1, 90 | tab2, 91 | tab3, 92 | tab4, 93 | border = FALSE 94 | ) 95 | ) 96 | ), 97 | tags$h2("Tabset Type"), 98 | tags$h4("Choose between a tab, a pills or a clean tabset"), 99 | tags$br(), tags$br(), 100 | row( 101 | column( 102 | width = 4, 103 | tags$h3("Tab setting"), 104 | HTML("This is the default setup"), 105 | tabsetPanel( 106 | tab1, 107 | tab2, 108 | tab3 109 | ) 110 | ), 111 | column( 112 | width = 4, 113 | tags$h3("Pills setting"), 114 | HTML("Use argument type = 'pills' "), 115 | tabsetPanel( 116 | tab1, 117 | tab2, 118 | tab3, 119 | type = "pills" 120 | ) 121 | ), 122 | column( 123 | width = 4, 124 | tags$h3("Clean setting"), 125 | HTML("Use argument type = 'clean' "), 126 | tabsetPanel( 127 | tab1, 128 | tab2, 129 | tab3, 130 | type = "clean" 131 | ) 132 | ) 133 | ), 134 | tags$h2("Tabset Position"), 135 | tags$h4("A tabset position can be choosen to justify to the left, center, or right (end)"), 136 | tags$br(), tags$br(), 137 | row( 138 | column( 139 | width = 4, 140 | tags$h3("Tab Left Position"), 141 | HTML("Use argument position = 'left' "), 142 | tabsetPanel( 143 | tab1, 144 | tab2, 145 | tab3, 146 | position = "left" 147 | ) 148 | ), 149 | column( 150 | width = 4, 151 | tags$h3("Tab Center Position"), 152 | HTML("Use argument position = 'center' "), 153 | tabsetPanel( 154 | tab1, 155 | tab2, 156 | tab3, 157 | position = "center" 158 | ) 159 | ), 160 | column( 161 | width = 4, 162 | tags$h3("Tab Right Position"), 163 | HTML("Use argument position = 'end' "), 164 | tabsetPanel( 165 | tab1, 166 | tab2, 167 | tab3, 168 | position = "end" 169 | ) 170 | ) 171 | ), 172 | tags$h2("Tabset Justified or Filled"), 173 | tags$h4("Justify the tab to either fill the space or use the default setting"), 174 | tags$br(), tags$br(), 175 | row( 176 | column( 177 | width = 6, 178 | tags$h3("Pill Not Justified"), 179 | HTML("This is a default pill setup"), 180 | tabsetPanel( 181 | tab1, 182 | tab2, 183 | tab3, 184 | type = "pills" 185 | ) 186 | ), 187 | column( 188 | width = 6, 189 | tags$h3("Pills Justified"), 190 | HTML("Use argument justified = TRUE "), 191 | tabsetPanel( 192 | tab1, 193 | tab2, 194 | tab3, 195 | type = "pills", 196 | justified = TRUE 197 | ) 198 | ), 199 | column( 200 | width = 6, 201 | tags$h3("Clean Justified"), 202 | HTML("Use argument justified = TRUE "), 203 | tabsetPanel( 204 | tab1, 205 | tab2, 206 | tab3, 207 | type = "clean", 208 | justified = TRUE 209 | ) 210 | ), 211 | column( 212 | width = 6, 213 | tags$h3("Tab Justified"), 214 | HTML("Use argument justified = TRUE "), 215 | tabsetPanel( 216 | tab1, 217 | tab2, 218 | tab3, 219 | type = "default", 220 | justified = TRUE 221 | ) 222 | ) 223 | ) 224 | ) 225 | 226 | # Define server content 227 | server <- function(input, output) { 228 | 229 | # Sample user-defined sever logic 230 | } 231 | 232 | # Create and initialize the Shiny application 233 | shiny::shinyApp(ui, server) 234 | -------------------------------------------------------------------------------- /R/button.R: -------------------------------------------------------------------------------- 1 | #' Create a button 2 | #' 3 | #' Upgrade to the actionButton in 'Shiny' package 4 | #' 5 | #' @importFrom shiny restoreInput 6 | #' @param ... other elements or attributes for the button 7 | #' @param inputId Input identification 8 | #' @param label Input label 9 | #' @param icon Choice of button icon 10 | #' @param width Width of the bottom 11 | #' @param size Size of the button, choices include "m","xs", "s", "l", "xl" 12 | #' @param style Style of the button, choices include "default", "pill", "round", "clean" 13 | #' @param bg.type Color of the button, choices include "default", "primary", "secondary", "info", "success", "danger", "warning" 14 | #' @param outline Use an outline styling, TRUE or FALSE 15 | #' 16 | #' @return HTML of the buttons to insert into a page 17 | #' 18 | #' @examples 19 | #' if (interactive()) { 20 | #' shiny::div(actionButton("button", 21 | #' "Action button with primary color", 22 | #' icon = shiny::icon("folder"), bg.type = "primary" 23 | #' )) 24 | #' shiny::div(actionButton("button", 25 | #' "Action button with primary color", 26 | #' icon = shiny::icon("file"), 27 | #' bg.type = "danger", outline = TRUE 28 | #' )) 29 | #' } 30 | #' 31 | #' @export 32 | #' 33 | 34 | actionButton <- function(inputId, label, icon = NULL, width = NULL, ..., size = c("m", "xs", "s", "l", "xl"), style = c("default", "pill", "round", "clean"), bg.type = c("default", "primary", "secondary", "info", "success", "danger", "warning"), outline = FALSE) { 35 | bg.type <- match.arg(bg.type) 36 | size <- match.arg(size) 37 | style <- match.arg(style) 38 | style <- switch(style, 39 | default = "rounded-0", 40 | round = "rounded-circle", 41 | pill = "rounded-pill", 42 | clean = "rounded border-button" 43 | ) 44 | outline <- ifelse(outline, "btn-outline-", "border-0 btn-") 45 | value <- restoreInput(id = inputId, default = NULL) 46 | tags$button( 47 | id = inputId, style = paste0("width:", validateCssUnit(width)), 48 | type = "button", class = paste0("btn action-button ", outline, bg.type), 49 | class = style, 50 | class = ifelse(label == "" & style == "rounded-circle", "btn-icon", ""), 51 | class = paste0("btn-", switch(size, 52 | s = "sm", 53 | xs = "xs", 54 | m = "md", 55 | l = "lg", 56 | xl = "xl" 57 | )), 58 | `data-val` = value, list((icon), label), 59 | ... 60 | ) 61 | } 62 | 63 | 64 | 65 | 66 | 67 | #' Create a submit button 68 | #' 69 | #' Upgrade to the submitButton in 'Shiny' package 70 | #' 71 | #' @param inputId input id 72 | #' @param text Button text 73 | #' @param icon Choice of button icon 74 | #' @param width Width of the bottom 75 | #' @param size Size of the button, choices include "m","xs", "s", "l", "xl" 76 | #' @param style Style of the button, choices include "default", "pill", "round", "clean" 77 | #' @param bg.type Color of the button, choices include "default", "primary", "secondary", "info", "success", "danger", "warning" 78 | #' @param outline Use an outline styling, TRUE or FALSE 79 | #' 80 | #' @return HTML of the submit buttons to insert into a page 81 | #' 82 | #' @examples 83 | #' if (interactive()) { 84 | #' card( 85 | #' shiny::h2("Submit buttons with various styles"), 86 | #' header = FALSE, 87 | #' shiny::div(submitButton("Submit button with primary color", 88 | #' icon = shiny::icon("file"), size = "s", bg.type = "primary" 89 | #' )), 90 | #' shiny::div(submitButton("Secondary color", 91 | #' icon = shiny::icon("folder"), bg.type = "secondary" 92 | #' )), 93 | #' shiny::div(submitButton("Success color", 94 | #' icon = shiny::icon("filter"), bg.type = "success" 95 | #' )), 96 | #' shiny::div(submitButton("Warning color", 97 | #' icon = shiny::icon("grid"), bg.type = "warning" 98 | #' )), 99 | #' shiny::div(submitButton("Danger color", 100 | #' icon = shiny::icon("check"), bg.type = "danger" 101 | #' )), 102 | #' shiny::div(submitButton("Info color", 103 | #' icon = shiny::icon("trash"), bg.type = "info" 104 | #' )) 105 | #' ) 106 | #' } 107 | #' @export 108 | #' 109 | 110 | submitButton <- function(inputId, text = "Apply Changes", icon = NULL, width = NULL, size = c("m", "xs", "s", "l", "xl"), style = c("default", "pill", "round", "clean"), bg.type = c("default", "primary", "secondary", "info", "success", "danger", "warning"), outline = FALSE) { 111 | masterButton( 112 | inputId, 113 | text = text, icon = icon, width = width, size = match.arg(size), 114 | style = match.arg(style), 115 | bg.type = match.arg(bg.type), outline = outline 116 | ) 117 | } 118 | 119 | 120 | 121 | 122 | 123 | #' Create a master button 124 | #' 125 | #' A master button creator 126 | #' 127 | #' @param inputId input id 128 | #' @param text Button text 129 | #' @param icon Choice of button icon 130 | #' @param width Width of the bottom 131 | #' @param size Size of the button, choices include "m","xs", "s", "l", "xl" 132 | #' @param style Style of the button, choices include "default", "pill", "round", "clean" 133 | #' @param bg.type Color of the button, choices include "default", "primary", "secondary", "info", "success", "danger", "warning" 134 | #' @param outline Use an outline styling, TRUE or FALSE 135 | #' @param extraClass other class names to add to the button attribute 136 | #' @param ... Other elements to add to the button 137 | #' 138 | #' @return HTML of the buttons to insert into a page 139 | #' 140 | #' @examples 141 | #' if (interactive()) { 142 | #' card( 143 | #' shiny::h2("Master buttons with various styles"), 144 | #' header = FALSE, 145 | #' shiny::div(masterButton("Submit button with primary color", 146 | #' icon = shiny::icon("file"), size = "s", bg.type = "primary" 147 | #' )) 148 | #' ) 149 | #' } 150 | #' @export 151 | #' 152 | 153 | masterButton <- function(inputId, text = "Text", icon = NULL, width = NULL, size = c("m", "xs", "s", "l", "xl"), style = c("default", "pill", "round", "clean"), bg.type = c("default", "primary", "secondary", "info", "success", "danger", "warning"), outline = FALSE, extraClass = NULL, ...) { 154 | bg.type <- match.arg(bg.type) 155 | size <- match.arg(size) 156 | style <- match.arg(style) 157 | style <- switch(style, 158 | default = "rounded-0", 159 | round = "rounded-circle", 160 | pill = "rounded-pill", 161 | clean = "rounded border-button" 162 | ) 163 | outline <- ifelse(outline, "btn-outline-", "border-0 btn-") 164 | shiny::div(tags$button( 165 | id = inputId, 166 | type = "submit", class = paste0("btn ", outline, bg.type), 167 | class = style, 168 | class = ifelse(text == "" & style == "rounded-circle", "btn-icon", ""), 169 | class = paste0("btn-", switch(size, 170 | s = "sm", 171 | m = "md", 172 | xs = "xs", 173 | l = "lg", 174 | xl = "xl" 175 | )), 176 | style = paste0("width:", validateCssUnit(width)), list( 177 | icon, 178 | text 179 | ), 180 | ... 181 | )) 182 | } 183 | -------------------------------------------------------------------------------- /inst/exp/example.noSideBar.R: -------------------------------------------------------------------------------- 1 | # library 2 | library(shiny) 3 | library(nextGenShinyApps) 4 | 5 | # Define UI 6 | ui <- fluidPage( 7 | # Theme: Select color style from 1-13 8 | style = "3", 9 | #custom.bg.color = "lightgray", 10 | 11 | # Header: Insert header content using titlePanel ------------ 12 | header = titlePanel(left = "A Demo to Showcase the Features of the nextGenShinyApp R package", right = icon("user")), 13 | 14 | # No Sidebar present------------- 15 | 16 | # Body: Insert anything into the body-------------------- 17 | tags$h2("Basic Moveable Advanced Card"), 18 | tags$h4("Each card includes a header title and toolbar to minimize, expand, close, lock, refresh, color and reset it"), 19 | tags$li("Notice that by default, each card is moveable from one location to another"), 20 | tags$li("Try this: move the two cards to different locations and refresh the page. The cards will remain in the new location."), 21 | tags$li("Create a Shiny app that allows the user to easily move the panels around and easily collapse them when needed. Plus, the user's actions are saved!"), 22 | tags$br(), tags$br(), 23 | row( 24 | column( 25 | width = 8, 26 | card( 27 | title = "Standard card with text and a slider", 28 | # card body content 29 | tags$h4("Sample text"), 30 | "Laoreet non curabitur gravida arcu. Placerat orci nulla pellentesque dignissim enim. Viverra accumsan in nisl nisi scelerisque. Convallis a cras semper auctor neque vitae tempus quam. Vestibulum sed arcu non odio euismod. Maecenas accumsan lacus vel facilisis volutpat est velit. Elit pellentesque habitant morbi tristique senectus et netus et malesuada. Erat imperdiet sed euismod nisi porta lorem mollis aliquam ut. Velit scelerisque in dictum non consectetur a. Dui sapien eget mi proin sed libero enim sed faucibus. Ac odio tempor orci dapibus ultrices. Tortor posuere ac ut consequat semper viverra nam libero justo. Tincidunt vitae semper quis lectus nulla. Nisi vitae suscipit tellus mauris. Feugiat in ante metus dictum.", 31 | tags$br(), tags$br(), 32 | tags$h4("Input slider for the image"), 33 | sliderInput( 34 | inputId = "bins", 35 | label = "Number of bins:", 36 | min = 1, 37 | max = 50, 38 | value = 30 39 | ) 40 | ) 41 | ), 42 | column( 43 | width = 4, 44 | card( 45 | title = "Standard card with Images", 46 | plotOutput(outputId = "distPlot") 47 | ) 48 | ) 49 | ), 50 | tags$h2("Moveable Advanced Card With One Toolbar Button"), 51 | row( 52 | column( 53 | width = 4, 54 | card( 55 | title = "Card with only a collapse", 56 | # card body content 57 | tags$h4("Sample text"), 58 | "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Mi bibendum neque egestas congue quisque egestas", 59 | toolbar = list(collapse = TRUE), 60 | alert.text = "Realize that this card contains only the collapse button on the top right just by using a declaration of toolbar = list(collapse = TRUE) or toolbar = list(collapse = 1)" 61 | ) 62 | ), 63 | column( 64 | width = 4, 65 | card( 66 | title = "Card with only a closer", 67 | # card body content 68 | tags$h4("Sample text"), 69 | "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Mi bibendum neque egestas congue quisque egestas", 70 | toolbar = list(close = TRUE), 71 | alert.text = "Realize that this card contains only the close button on the top right just by using a declaration of toolbar = list(close = TRUE) or toolbar = list(close = 1)" 72 | ) 73 | ), 74 | column( 75 | width = 4, 76 | card( 77 | title = "Card with only an extend and menu", 78 | # card body content 79 | tags$h4("Sample text"), 80 | "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Mi bibendum neque egestas congue quisque egestas", 81 | toolbar = list(maximize = TRUE, menu = TRUE), 82 | alert.text = "Realize that this card contains an extend and menu buttons on the top right just by using a declaration of toolbar = list(maximize = TRUE, menu = TRUE)", 83 | alert.bg = "success" 84 | ) 85 | ), 86 | column( 87 | width = 6, 88 | card( 89 | title = "Card with no toolbar, with alert", 90 | # card body content 91 | tags$h4("Sample text"), 92 | "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Mi bibendum neque egestas congue quisque egestas", 93 | toolbar = FALSE, 94 | alert.text = "Realize that this card contains no toolbar buttons on the top right just by using a declaration of toolbar = FALSE", 95 | alert.bg = "danger" 96 | ) 97 | ), 98 | column( 99 | width = 6, 100 | card( 101 | # card body content 102 | tags$h3("Sample Blank Card"), 103 | "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Mi bibendum neque egestas congue quisque egestas", 104 | header = FALSE 105 | ) 106 | ) 107 | ), 108 | tags$h2("NON-Moveable Advanced Card With One Toolbar Button"), 109 | row( 110 | column( 111 | width = 6, 112 | card( 113 | title = "Not moveable card 1", 114 | # card body content 115 | tags$h4("Sample text"), 116 | "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Mi bibendum neque egestas congue quisque egestas", 117 | toolbar = TRUE, 118 | draggable = FALSE, 119 | alert.text = "Realize that this card is not moveable by dragging by using a declaration of draggable = FALSE", 120 | alert.bg = "info" 121 | ) 122 | ), 123 | column( 124 | width = 6, 125 | card( 126 | title = "Not moveable card 2", 127 | # card body content 128 | tags$h4("Sample text"), 129 | draggable = FALSE, 130 | "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Mi bibendum neque egestas congue quisque egestas", 131 | toolbar = FALSE 132 | ) 133 | ) 134 | ) 135 | ) 136 | 137 | # Define server content 138 | server <- function(input, output) { 139 | 140 | # Sample user-defined sever logic 141 | output$distPlot <- renderPlot({ 142 | x <- faithful$waiting 143 | bins <- seq(min(x), max(x), length.out = input$bins + 1) 144 | 145 | hist(x, 146 | breaks = bins, col = "#75AADB", border = "white", 147 | xlab = "Waiting time to next eruption (in mins)", 148 | main = "Histogram of waiting times" 149 | ) 150 | }) 151 | } 152 | 153 | # Create and initialize the Shiny application 154 | shinyApp(ui, server) 155 | -------------------------------------------------------------------------------- /inst/exp/example.Card.R: -------------------------------------------------------------------------------- 1 | # library 2 | library(shiny) 3 | library(nextGenShinyApps) 4 | 5 | # Define UI 6 | ui <- fluidPage( 7 | # Theme: Select color style from 1-13 8 | style = "4", 9 | 10 | # Header: Insert header content using titlePanel ------------ 11 | header = titlePanel(left = "A Demo to Showcase the Features of the nextGenShinyApp R package", right = "Image logo"), 12 | 13 | # Sidebar: Insert content for sidebar ---------------------- 14 | sidebar = sidebarPanel( 15 | title = "NextGenShinyApp", 16 | 17 | # sample inputs 18 | textInput( 19 | inputId = "caption", 20 | label = "Caption:", 21 | value = "Data Summary" 22 | ), 23 | 24 | # Input: Decimal interval with step value 25 | sliderInput("decimal", "Decimal:", 26 | min = 0, max = 1, 27 | value = 0.5, step = 0.1 28 | ), 29 | 30 | # Input: Specification of range within an interval 31 | sliderInput( 32 | inputId = "range", label = "Range:", 33 | min = 1, max = 1000, 34 | value = c(200, 500) 35 | ) 36 | ), 37 | 38 | # Body: Insert anything into the body-------------------- 39 | tags$h2("Basic Moveable Advanced Card"), 40 | tags$h4("Each card includes a header title and toolbar to minimize, expand, close, lock, refresh, color and reset it"), 41 | tags$li("Notice that by default, each card is moveable from one location to another"), 42 | tags$li("Try this: move the two cards to different locations and refresh the page. The cards will remain in the new location."), 43 | tags$li("Create a Shiny app that allows the user to easily move the panels around and easily collapse them when needed. Plus, the user's actions are saved!"), 44 | tags$br(), tags$br(), 45 | row( 46 | column( 47 | width = 8, 48 | card( 49 | title = "Standard card with text and a slider", 50 | # card body content 51 | tags$h4("Sample text"), 52 | "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Mi bibendum neque egestas congue quisque egestas", 53 | tags$br(), tags$br(), 54 | tags$h4("Input slider for the image"), 55 | sliderInput( 56 | inputId = "bins", 57 | label = "Number of bins:", 58 | min = 1, 59 | max = 50, 60 | value = 30 61 | ) 62 | ) 63 | ), 64 | column( 65 | width = 4, 66 | card( 67 | title = "Standard card with Images", 68 | plotOutput(outputId = "distPlot") 69 | ) 70 | ) 71 | ), 72 | tags$h2("Moveable Advanced Card With One Toolbar Button"), 73 | row( 74 | column( 75 | width = 4, 76 | card( 77 | title = "Card with only a collapse", 78 | # card body content 79 | tags$h4("Sample text"), 80 | "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Mi bibendum neque egestas congue quisque egestas", 81 | toolbar = list(collapse = TRUE), 82 | alert.text = "Realize that this card contains only the collapse button on the top right just by using a declaration of toolbar = list(collapse = TRUE) or toolbar = list(collapse = 1)" 83 | ) 84 | ), 85 | column( 86 | width = 4, 87 | card( 88 | title = "Card with only a closer", 89 | # card body content 90 | tags$h4("Sample text"), 91 | "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Mi bibendum neque egestas congue quisque egestas", 92 | toolbar = list(close = TRUE), 93 | alert.text = "Realize that this card contains only the close button on the top right just by using a declaration of toolbar = list(close = TRUE) or toolbar = list(close = 1)" 94 | ) 95 | ), 96 | column( 97 | width = 4, 98 | card( 99 | title = "Card with only an extend and menu", 100 | # card body content 101 | tags$h4("Sample text"), 102 | "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Mi bibendum neque egestas congue quisque egestas", 103 | toolbar = list(maximize = TRUE, menu = TRUE), 104 | alert.text = "Realize that this card contains an extend and menu buttons on the top right just by using a declaration of toolbar = list(maximize = TRUE, menu = TRUE)", 105 | alert.bg = "success" 106 | ) 107 | ), 108 | column( 109 | width = 6, 110 | card( 111 | title = "Card with no toolbar, with alert", 112 | # card body content 113 | tags$h4("Sample text"), 114 | "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Mi bibendum neque egestas congue quisque egestas", 115 | toolbar = FALSE, 116 | alert.text = "Realize that this card contains no toolbar buttons on the top right just by using a declaration of toolbar = FALSE", 117 | alert.bg = "danger" 118 | ) 119 | ), 120 | column( 121 | width = 6, 122 | card( 123 | # card body content 124 | tags$h3("Sample Blank Card"), 125 | "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Mi bibendum neque egestas congue quisque egestas", 126 | header = FALSE 127 | ) 128 | ) 129 | ), 130 | tags$h2("NON-Moveable Advanced Card With One Toolbar Button"), 131 | row( 132 | column( 133 | width = 6, 134 | card( 135 | title = "Not moveable card 1", 136 | # card body content 137 | tags$h4("Sample text"), 138 | "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Mi bibendum neque egestas congue quisque egestas", 139 | toolbar = TRUE, 140 | draggable = FALSE, 141 | alert.text = "Realize that this card is not moveable by dragging by using a declaration of draggable = FALSE", 142 | alert.bg = "info" 143 | ) 144 | ), 145 | column( 146 | width = 6, 147 | card( 148 | title = "Not moveable card 2", 149 | # card body content 150 | tags$h4("Sample text"), 151 | draggable = FALSE, 152 | "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Mi bibendum neque egestas congue quisque egestas", 153 | toolbar = FALSE 154 | ) 155 | ) 156 | ) 157 | ) 158 | 159 | # Define server content 160 | server <- function(input, output) { 161 | 162 | # Sample user-defined sever logic 163 | output$distPlot <- renderPlot({ 164 | x <- faithful$waiting 165 | bins <- seq(min(x), max(x), length.out = input$bins + 1) 166 | 167 | hist(x, 168 | breaks = bins, col = "#75AADB", border = "white", 169 | xlab = "Waiting time to next eruption (in mins)", 170 | main = "Histogram of waiting times" 171 | ) 172 | }) 173 | } 174 | 175 | # Create and initialize the Shiny application 176 | shinyApp(ui, server) 177 | -------------------------------------------------------------------------------- /R/accordions.R: -------------------------------------------------------------------------------- 1 | #' Generate an accordion 2 | #' 3 | #' Wrap one or more accordion items into a container 4 | #' 5 | #' @param ... The accordionItem elements to include within the body of the particular accordion 6 | #' @param id The identification of the accordion 7 | #' @param style Style of the accordion, use "default", "1", "2", "3", "4" 8 | #' @param uncollapsed Indicate by number which accordionItem should not be collapsed 9 | #' @return HTML of a container with a class called accordion 10 | #' @examples 11 | #' \donttest{ 12 | #' if(interactive()){ 13 | #' 14 | #' # Example 1 15 | #' 16 | #' library(shiny) 17 | #' library(nextGenShinyApps) 18 | #' 19 | #' shiny::shinyApp( 20 | #' ui = fluidPage( 21 | #' style = "8", 22 | #' custom.bg.color = "#d9d9d9", 23 | #' sidebar = NULL, 24 | #' header = titlePanel(left="Sample Ex1"), 25 | #' accordion( 26 | #' id = "accordion5", 27 | #' style = "4", 28 | #' accordionItem( 29 | #' title = "Accordion 1", 30 | #' "Massa sed elementum sus" 31 | #' ), 32 | #' accordionItem( 33 | #' title = "Accordion 2", 34 | #' "Auctor neque etiam non." 35 | #' ) 36 | #' ) 37 | #' ), 38 | #' server = function(input, output) { 39 | #' } 40 | #' ) 41 | #' 42 | #' 43 | #' # Example 2 44 | #' 45 | #' library(shiny) 46 | #' library(nextGenShinyApps) 47 | #' 48 | #' shiny::shinyApp( 49 | #' ui = fluidPage( 50 | #' style = "8", 51 | #' custom.bg.color = "#f7c4bb", 52 | #' sidebar = NULL, 53 | #' header = titlePanel(left="Sample Ex2"), 54 | #' accordion( 55 | #' id = "accordion5", 56 | #' style = "1", 57 | #' accordionItem( 58 | #' title = "Accordion A", 59 | #' icon = shiny::icon("trash"), 60 | #' "Massa sed elementum sus" 61 | #' ), 62 | #' accordionItem( 63 | #' title = "Accordion B", 64 | #' icon = shiny::icon("edit"), 65 | #' "Auctor neque etiam non." 66 | #' ) 67 | #' ) 68 | #' ), 69 | #' server = function(input, output) { 70 | #' } 71 | #' ) 72 | #' 73 | #' 74 | #' } 75 | #' 76 | #' } 77 | #' 78 | #' @export 79 | #' 80 | 81 | accordion <- function(..., id, style = c("default", "1", "2", "3", "4"), uncollapsed = 1) { 82 | accordian.parent <- paste0("id", id, rand.num(1)) 83 | accordian.parent <- gsub("[^[:alnum:] ]", "", accordian.parent) 84 | # get the type of tabset 85 | style <- match.arg(style) 86 | 87 | # insert class based on the tabset 88 | top.side <- "" 89 | right.side <- "" 90 | hover <- FALSE 91 | switch(style, 92 | "default" = { 93 | left.side <- "" 94 | }, 95 | "1" = { 96 | left.side <- tags$span( 97 | class = "ml-auto", 98 | tags$span( 99 | class = "collapsed-reveal", 100 | tags$i(class = "fa fa-minus-circle text-danger fs-xl") 101 | ), 102 | tags$span( 103 | class = "collapsed-hidden", 104 | tags$i(class = "fa fa-plus-circle text-success fs-xl") 105 | ) 106 | ) 107 | }, 108 | "2" = { 109 | left.side <- tags$span( 110 | class = "ml-auto", 111 | tags$span( 112 | class = "collapsed-reveal", 113 | tags$i(class = "fa fa-minus fs-xl") 114 | ), 115 | tags$span( 116 | class = "collapsed-hidden", 117 | tags$i(class = "fa fa-plus fs-xl") 118 | ) 119 | ) 120 | top.side <- "accordion-outline" 121 | }, 122 | "3" = { 123 | left.side <- "" 124 | right.side <- tags$span( 125 | class = "mr-2", 126 | tags$span( 127 | class = "collapsed-reveal", 128 | tags$i(class = "fa fa-minus fs-xl") 129 | ), 130 | tags$span( 131 | class = "collapsed-hidden", 132 | tags$i(class = "fa fa-plus fs-xl") 133 | ) 134 | ) 135 | top.side <- "accordion-clean" 136 | }, 137 | "4" = { 138 | left.side <- tags$span( 139 | class = "ml-auto", 140 | tags$span( 141 | class = "collapsed-reveal", 142 | tags$i(class = "fa fa-chevron-up fs-xl") 143 | ), 144 | tags$span( 145 | class = "collapsed-hidden", 146 | tags$i(class = "fa fa-chevron-down fs-xl") 147 | ) 148 | ) 149 | hover <- TRUE 150 | } 151 | ) 152 | 153 | 154 | tabItems <- list(...) 155 | count.pre <- as.integer(Sys.time()) - rand.num(1) 156 | count.title <- 0 157 | part.content <- "" 158 | collapsed.num <- 1 159 | # loop through the items of the accordian 160 | for (tab in tabItems) { 161 | count.title <- count.title + 1 162 | activeOrNot <- ifelse(count.title == 1, " active", "") 163 | collapsed.1 <- ifelse(as.integer(uncollapsed) == collapsed.num, TRUE, FALSE) 164 | # for content 165 | part.content <- paste0( 166 | part.content, 167 | div( 168 | class = "card", div( 169 | class = "card-header", 170 | class = paste0("bg-", tab$status), 171 | tags$a( 172 | href = "javascript:void(0);", class = "card-title", class = ifelse(!collapsed.1, "collapsed", ""), `data-toggle` = "collapse", `data-target` = paste0("#", tab$id), `aria-expanded` = tolower(as.character(collapsed.1)), 173 | if (style == "3") { 174 | right.side 175 | } else { 176 | if (typeof(tab$icon) == "list") { 177 | tags$span(class = "width-2 fs-xl", list(tab$icon)) 178 | } else { 179 | "" 180 | } 181 | }, 182 | tab$title, 183 | left.side 184 | ) 185 | ), 186 | div( 187 | id = tab$id, class = "collapse", class = ifelse(collapsed.1, "show", ""), `data-parent` = paste0("#", accordian.parent), 188 | div( 189 | class = "card-body", 190 | tab$content 191 | ) 192 | ) 193 | ) 194 | ) 195 | collapsed.num <- 1 + collapsed.num 196 | } 197 | 198 | div( 199 | class = "accordion", 200 | class = top.side, 201 | class = ifelse(hover, "accordion-hover", ""), 202 | id = accordian.parent, 203 | HTML(part.content) 204 | ) 205 | } 206 | 207 | #' Generate an accordion item 208 | #' 209 | #' Embed an accordion item within an accordion 210 | #' 211 | #' @param ... The elements to include within the body of the particular accordion 212 | #' @param title The title of the accordion item 213 | #' @param status Set the header background using either of "default", "primary", "secondary", "info", "success", "danger", "warning" 214 | #' @param icon Include an icon to the left of the title for the accordion item 215 | #' @return A list of properties for an accordion item 216 | #' @examples 217 | #' if (interactive()) { 218 | #' accordionItem( 219 | #' title = "Accordion 2", 220 | #' icon = shiny::icon("cog"), 221 | #' "Auctor neque etiam non." 222 | #' ) 223 | #' } 224 | #' 225 | #' @export 226 | #' 227 | #' 228 | accordionItem <- function(..., title = "A title", status = c("default", "primary", "secondary", "info", "success", "danger", "warning"), icon = NULL) { 229 | status <- match.arg(status) 230 | accordianid <- paste0("accordion1a", rand.num(1)) 231 | list(title = title, id = accordianid, status = status, content = div(...), icon = icon) 232 | } 233 | -------------------------------------------------------------------------------- /R/form.R: -------------------------------------------------------------------------------- 1 | #' Create an advanced text input 2 | #' 3 | #' Modifications to textInput to allow added functionality and styles 4 | #' 5 | #' @param inputId The identification name 6 | #' @param label The label for the input 7 | #' @param value The current value of the input 8 | #' @param size The size of the input, "m", "s", "l", "xl" 9 | #' @param placeholder A placeholder text 10 | #' @param width width of the text input 11 | #' @param style Style to adapt, options include "default", "pill", "round", "clean" 12 | #' @param border.type Add a border coloring using either of "none", "primary","secondary", "info", "success", "danger", "warning" 13 | #' @param prepend Add a prepended text or icon 14 | #' @param append Add an appended text or icon 15 | #' @param disabled Boolean. If textInput should be disabled 16 | #' 17 | #' @note For more information on the features of the form, visit the examples section of the help documentation 18 | #' @return A HTML with modifications to th style information 19 | #' 20 | #' @examples 21 | #' \donttest{ 22 | #' if (interactive()) { 23 | #' library(shiny) 24 | #' library(nextGenShinyApps) 25 | #' 26 | #' shiny::shinyApp( 27 | #' ui = fluidPage( 28 | #' style = "8", 29 | #' custom.bg.color = "white", 30 | #' sidebar = NULL, 31 | #' header = NULL, 32 | #' card( 33 | #' header = FALSE, 34 | #' tags$h3("Text input"), 35 | #' textInput("caption", "Basic"), 36 | #' textInput("caption", "Basic", style = "clean"), 37 | #' textInput("caption", "Border - primary", 38 | #' "Enter sample text", 39 | #' prepend = "@", border.type = "info" 40 | #' ), 41 | #' textInput("caption", "Border - primary", 42 | #' "Enter sample text", 43 | #' prepend = shiny::icon("lock") 44 | #' ), 45 | #' textInput("caption", "Border - primary", 46 | #' "Enter sample text", 47 | #' append = "%" 48 | #' ), 49 | #' textInput("caption", "Border - primary", 50 | #' "Enter sample text", 51 | #' prepend = shiny::icon("chart"), 52 | #' append = ".00" 53 | #' ) 54 | #' ) 55 | #' ), 56 | #' server = function(input, output) { 57 | #' } 58 | #' ) 59 | #' } 60 | #' } 61 | #' 62 | #' @export 63 | 64 | textInput <- function(inputId, label, value = "", width = NULL, placeholder = NULL, size = c("m", "s", "l", "xl"), style = c("default", "pill", "round", "clean"), border.type = c("none", "primary", "secondary", "info", "success", "danger", "warning"), prepend = NULL, append = NULL, disabled = FALSE) { 65 | border.type <- match.arg(border.type) 66 | size <- match.arg(size) 67 | style <- match.arg(style) 68 | style <- switch(style, 69 | default = "rounded-0", 70 | round = "rounded", 71 | pill = "rounded-pill", 72 | clean = "rounded-0 border-top-0 border-left-0 border-right-0 px-0 bg-transparent" 73 | ) 74 | value <- restoreInput(id = inputId, default = value) 75 | div( 76 | class = "form-group shiny-input-container", style = paste0("width:", shiny::validateCssUnit(width)), 77 | tags$label(id = inputId, class = "form-label", label), 78 | div( 79 | class = "input-group", 80 | if (!is.null(prepend)) { 81 | div( 82 | class = "input-group-prepend", 83 | tags$span(class = "input-group-text", prepend) 84 | ) 85 | }, 86 | tags$input( 87 | id = inputId, 88 | type = "text", 89 | class = "form-control", 90 | class = paste0("border-", border.type), 91 | class = style, 92 | class = paste0("form-control-", switch(size, 93 | s = "sm", 94 | m = "md", 95 | l = "lg", 96 | xl = "xl" 97 | )), 98 | if(disabled) disabled = "true", 99 | value = value, placeholder = placeholder 100 | ), 101 | if (!is.null(append)) { 102 | div( 103 | class = "input-group-append", 104 | tags$span(class = "input-group-text", append) 105 | ) 106 | } 107 | ) 108 | ) 109 | } 110 | 111 | #' Create an advanced checkbox input 112 | #' 113 | #' Modifications to checkboxinput to allow added styles 114 | #' 115 | #' @param inputId The identification name 116 | #' @param label The label for the input 117 | #' @param value The current value of the input 118 | #' @param width width of the text input 119 | #' @param inline make inline or block format 120 | #' 121 | #' @note For more information on the features of the form, visit the examples section of the help documentation 122 | #' @return HTML elements of a checkbox 123 | #' 124 | #' @examples 125 | #' checkboxInput("somevalue", "Some value", FALSE) 126 | #' checkboxInput("somevalue", "Some value", value = FALSE, inline = TRUE) 127 | #' checkboxInput("somevalue", "Some value", FALSE) 128 | #' 129 | #' 130 | #' @export 131 | 132 | checkboxInput <- function(inputId, label, value = FALSE, width = NULL, inline = FALSE) { 133 | #inputId <-paste0("id", inputId, rand.num(1)) 134 | value <- restoreInput(id = inputId, default = value) 135 | inputTag <- tags$input(id = inputId, class = "custom-control-input", type = "checkbox") 136 | if (!is.null(value) && value) { 137 | inputTag$attribs$checked <- "checked" 138 | } 139 | div( 140 | class = "form-group shiny-input-container", class = ifelse(inline, "custom-control-inline", ""), style = paste0("width:", validateCssUnit(width)), 141 | div(class = "checkbox custom-control custom-checkbox", inputTag, tags$label(class = "custom-control-label", `for` = inputId, tags$span(label))) 142 | ) 143 | } 144 | 145 | 146 | #' Create an advanced text area input 147 | #' 148 | #' Modifications to 'textAreaInput' to allow added styles 149 | #' 150 | #' @param inputId The identification name 151 | #' @param label The label for the input 152 | #' @param value The current value of the input 153 | #' @param width width of the text input 154 | #' @param height height of the text input 155 | #' @param cols col of text to display 156 | #' @param rows row of text to display 157 | #' @param placeholder A placeholder text 158 | #' @param resize Make inout resizable, with choices "both", "none", "vertical", "horizontal" 159 | #' @param style Style to adapt, options include "default", "pill", "round", "clean" 160 | #' @param border.type Add a border coloring using either of "none", "primary", "secondary", "info", "success", "danger", "warning" 161 | #' 162 | #' @note For more information on the features of the form, visit the examples section of the help documentation 163 | #' 164 | #' @return HTML element of a textAreaInput 165 | #' @examples 166 | #' textAreaInput("caption", 167 | #' "Sample Text area input", 168 | #' "Data Summary", 169 | #' width = "1000px", border.type = "success" 170 | #' ) 171 | #' 172 | #' 173 | #' @export 174 | 175 | textAreaInput <- function(inputId, label, value = "", width = NULL, height = NULL, 176 | cols = NULL, rows = NULL, placeholder = NULL, resize = c("both", "none", "vertical", "horizontal"), 177 | style = c("default", "pill", "round", "clean"), border.type = c("none", "primary", "secondary", "info", "success", "danger", "warning")) { 178 | border.type <- match.arg(border.type) 179 | style <- match.arg(style) 180 | style <- switch(style, 181 | default = "rounded-0", 182 | round = "rounded", 183 | pill = "rounded-pill p-4", 184 | clean = "rounded-0 border-left-0 border-right-0 px-0 bg-transparent" 185 | ) 186 | value <- restoreInput(id = inputId, default = value) 187 | if (!is.null(resize)) { 188 | resize <- match.arg(resize) 189 | } 190 | style2 <- paste0("width:", validateCssUnit(width), "; height:", validateCssUnit(height), ";resize:", resize) 191 | div(class = "form-group shiny-input-container", tags$label( 192 | id = inputId, class = "form-label", 193 | label 194 | ), tags$textarea( 195 | id = inputId, 196 | class = "form-control", 197 | class = paste0("border-", border.type), 198 | class = style, 199 | style = style2, 200 | placeholder = placeholder, style = style, 201 | rows = rows, cols = cols, value 202 | )) 203 | } 204 | -------------------------------------------------------------------------------- /inst/exp/example.Accordion.R: -------------------------------------------------------------------------------- 1 | # library 2 | library(shiny) 3 | library(nextGenShinyApps) 4 | 5 | 6 | # Define UI 7 | ui <- fluidPage( 8 | # Theme: Select color style from 1-13 9 | style = "3", 10 | 11 | # Header: Insert header content using titlePanel ------------ 12 | header = titlePanel(left = "A Demo to Showcase the Features of the nextGenShinyApp R package", right = "Image logo"), 13 | 14 | # Sidebar: Insert content for sidebar ---------------------- 15 | sidebar = sidebarPanel( 16 | title = "NextGenShinyApp", 17 | 18 | # sample inputs 19 | textInput( 20 | inputId = "caption", 21 | label = "Caption:", 22 | value = "Data Summary" 23 | ), 24 | 25 | # Input: Decimal interval with step value 26 | sliderInput("decimal", "Decimal:", 27 | min = 0, max = 1, 28 | value = 0.5, step = 0.1 29 | ), 30 | 31 | # Input: Specification of range within an interval 32 | sliderInput( 33 | inputId = "bins1", 34 | label = "Number of bins:", 35 | min = 1, 36 | max = 50, 37 | value = 30 38 | ) 39 | ), 40 | 41 | # Body: Insert anything into the body-------------------- 42 | tags$h2("Accordion"), 43 | tags$h4("Flavors of accordion to use in any div with the accordionItem() and accordion() functions"), 44 | tags$br(), tags$br(), 45 | row( 46 | column( 47 | width = 6, 48 | card( 49 | title = "Default style", 50 | alert.text = "Default accordion with style = 'default' as argument to accordion()", 51 | accordion( 52 | id = "accordion1", 53 | accordionItem( 54 | title = "Accordion 1", 55 | "Massa sed elementum tempus egestas. Sed ullamcorper morbi tincidunt ornare massa eget. Quam elementum pulvinar etiam non quam lacus. Risus in hendrerit gravida rutrum quisque non tellus orci. Semper risus in hendrerit gravida rutrum. Tristique et egestas quis ipsum suspendisse. Mauris ultrices eros in cursus", 56 | sliderInput( 57 | inputId = "bins1", 58 | label = "Number of bins:", 59 | min = 1, 60 | max = 50, 61 | value = 30 62 | ) 63 | ), 64 | accordionItem( 65 | title = "Accordion 2", 66 | "Auctor neque vitae tempus quam pellentesque nec nam. Hac habitasse platea dictumst vestibulum. Sit amet justo donec enim. Bibendum est ultricies integer quis auctor elit sed vulputate. Fringilla est ullamcorper eget nulla facilisi etiam dignissim diam. Quisque id diam vel quam elementum pulvinar etiam non." 67 | ) 68 | ) 69 | ) 70 | ), 71 | column( 72 | width = 6, 73 | card( 74 | title = "Style 1", 75 | alert.text = "Default accordion with style = '1' as argument to accordion()", 76 | accordion( 77 | id = "accordion2", 78 | style = "1", 79 | accordionItem( 80 | title = "Accordion 1", 81 | "Massa sed elementum tempus egestas. Sed ullamcorper morbi tincidunt ornare massa eget. Quam elementum pulvinar etiam non quam lacus. Risus in hendrerit gravida rutrum quisque non tellus orci. Semper risus in hendrerit gravida rutrum. Tristique et egestas quis ipsum suspendisse. Mauris ultrices eros in cursus" 82 | ), 83 | accordionItem( 84 | title = "Accordion 2", 85 | "Auctor neque vitae tempus quam pellentesque nec nam. Hac habitasse platea dictumst vestibulum. Sit amet justo donec enim. Bibendum est ultricies integer quis auctor elit sed vulputate. Fringilla est ullamcorper eget nulla facilisi etiam dignissim diam. Quisque id diam vel quam elementum pulvinar etiam non." 86 | ) 87 | ) 88 | ) 89 | ), 90 | column( 91 | width = 6, 92 | card( 93 | title = "Style 2", 94 | alert.text = "Default accordion with style = '2' as argument to accordion()", 95 | accordion( 96 | id = "accordion3", 97 | style = "2", 98 | accordionItem( 99 | title = "Accordion 1", 100 | "Massa sed elementum tempus egestas. Sed ullamcorper morbi tincidunt ornare massa eget. Quam elementum pulvinar etiam non quam lacus. Risus in hendrerit gravida rutrum quisque non tellus orci. Semper risus in hendrerit gravida rutrum. Tristique et egestas quis ipsum suspendisse. Mauris ultrices eros in cursus" 101 | ), 102 | accordionItem( 103 | title = "Accordion 2", 104 | "Auctor neque vitae tempus quam pellentesque nec nam. Hac habitasse platea dictumst vestibulum. Sit amet justo donec enim. Bibendum est ultricies integer quis auctor elit sed vulputate. Fringilla est ullamcorper eget nulla facilisi etiam dignissim diam. Quisque id diam vel quam elementum pulvinar etiam non." 105 | ) 106 | ) 107 | ) 108 | ), 109 | column( 110 | width = 6, 111 | card( 112 | title = "Style 3", 113 | alert.text = "Default accordion with style = '3' as argument to accordion()", 114 | accordion( 115 | id = "accordion4", 116 | style = "3", 117 | accordionItem( 118 | title = "Accordion 1", 119 | "Massa sed elementum tempus egestas. Sed ullamcorper morbi tincidunt ornare massa eget. Quam elementum pulvinar etiam non quam lacus. Risus in hendrerit gravida rutrum quisque non tellus orci. Semper risus in hendrerit gravida rutrum. Tristique et egestas quis ipsum suspendisse. Mauris ultrices eros in cursus" 120 | ), 121 | accordionItem( 122 | title = "Accordion 2", 123 | "Auctor neque vitae tempus quam pellentesque nec nam. Hac habitasse platea dictumst vestibulum. Sit amet justo donec enim. Bibendum est ultricies integer quis auctor elit sed vulputate. Fringilla est ullamcorper eget nulla facilisi etiam dignissim diam. Quisque id diam vel quam elementum pulvinar etiam non." 124 | ) 125 | ) 126 | ) 127 | ), 128 | column( 129 | width = 6, 130 | card( 131 | title = "Style 4", 132 | alert.text = "Styled accordion with style = '4' as argument to accordion()", 133 | accordion( 134 | id = "accordion5", 135 | style = "4", 136 | accordionItem( 137 | title = "Accordion 1", 138 | "Massa sed elementum tempus egestas. Sed ullamcorper morbi tincidunt ornare massa eget. Quam elementum pulvinar etiam non quam lacus. Risus in hendrerit gravida rutrum quisque non tellus orci. Semper risus in hendrerit gravida rutrum. Tristique et egestas quis ipsum suspendisse. Mauris ultrices eros in cursus" 139 | ), 140 | accordionItem( 141 | title = "Accordion 2", 142 | "Auctor neque vitae tempus quam pellentesque nec nam. Hac habitasse platea dictumst vestibulum. Sit amet justo donec enim. Bibendum est ultricies integer quis auctor elit sed vulputate. Fringilla est ullamcorper eget nulla facilisi etiam dignissim diam. Quisque id diam vel quam elementum pulvinar etiam non." 143 | ) 144 | ) 145 | ) 146 | ), 147 | column( 148 | width = 6, 149 | card( 150 | title = "Style 2 with icons", 151 | alert.text = "Styled accordion with style = '2' as argument to accordion() and icon = icon('cog') for the accordionItem()", 152 | accordion( 153 | id = "accordion5", 154 | style = "2", 155 | accordionItem( 156 | title = "Accordion 1", 157 | icon = icon("edit"), 158 | "Massa sed elementum tempus egestas. Sed ullamcorper morbi tincidunt ornare massa eget. Quam elementum pulvinar etiam non quam lacus. Risus in hendrerit gravida rutrum quisque non tellus orci. Semper risus in hendrerit gravida rutrum. Tristique et egestas quis ipsum suspendisse. Mauris ultrices eros in cursus" 159 | ), 160 | accordionItem( 161 | title = "Accordion 2", 162 | icon = icon("cog"), 163 | "Auctor neque vitae tempus quam pellentesque nec nam. Hac habitasse platea dictumst vestibulum. Sit amet justo donec enim. Bibendum est ultricies integer quis auctor elit sed vulputate. Fringilla est ullamcorper eget nulla facilisi etiam dignissim diam. Quisque id diam vel quam elementum pulvinar etiam non." 164 | ) 165 | ) 166 | ) 167 | ) 168 | ) 169 | ) 170 | 171 | # Define server content 172 | server <- function(input, output) { 173 | 174 | # Sample user-defined sever logic 175 | } 176 | 177 | # Create and initialize the Shiny application 178 | shinyApp(ui, server) 179 | -------------------------------------------------------------------------------- /inst/exp/example.Modal.R: -------------------------------------------------------------------------------- 1 | # library 2 | library(shiny) 3 | library(nextGenShinyApps) 4 | 5 | 6 | # Define UI 7 | ui <- fluidPage( 8 | # Theme: Select color style from 1-13 9 | style = "2", 10 | 11 | # Header: Insert header content using titlePanel ------------ 12 | header = titlePanel(left = "A Demo to Showcase the Features of the nextGenShinyApp R package", right = "Image logo"), 13 | 14 | # Sidebar: Insert content for sidebar ---------------------- 15 | sidebar = sidebarPanel( 16 | title = "NextGenShinyApp", 17 | 18 | # sample inputs 19 | textInput( 20 | inputId = "caption", 21 | label = "Caption:", 22 | value = "Data Summary" 23 | ), 24 | 25 | # Input: Decimal interval with step value 26 | sliderInput("decimal", "Decimal:", 27 | min = 0, max = 1, 28 | value = 0.5, step = 0.1 29 | ), 30 | 31 | # Input: Specification of range within an interval 32 | sliderInput( 33 | inputId = "bins1", 34 | label = "Number of bins:", 35 | min = 1, 36 | max = 50, 37 | value = 30 38 | ) 39 | ), 40 | 41 | # Body: Insert anything into the body-------------------- 42 | tags$h2("Basic Modal"), 43 | tags$h4("Revisions to the modal are primarily location and transparency based"), 44 | tags$li("Use the modalDialog() in the server to choose options for location and transparency"), 45 | tags$li("Location may be 'top' or 'bottom' or 'left' or 'right' or 'centered'"), 46 | tags$li("Transparency may be TRUE or FALSE"), 47 | tags$br(), tags$br(), 48 | row( 49 | column( 50 | width = 4, 51 | class = "border bg-white p-4", 52 | tags$h3("Simple shiny modal"), 53 | div(actionButton("modal1", "Show simple shiny modal dialog")), 54 | tags$br(), 55 | div(actionButton("modal1b", "Show modal with transparency")) 56 | ), 57 | column( 58 | width = 4, 59 | class = "border bg-white p-4", 60 | tags$h3("Modal on the right"), 61 | div(actionButton("modal2", "Show BIG shiny modal on the RIGHT")), 62 | tags$br(), 63 | div(actionButton("modal2b", "Show SMALL shiny modal on the RIGHT")) 64 | ), 65 | column( 66 | width = 4, 67 | class = "border bg-white p-4", 68 | tags$h3("Modal on the left"), 69 | div(actionButton("modal3", "Show BIG shiny modal on the LEFT")), 70 | tags$br(), 71 | div(actionButton("modal3b", "Show SMALL shiny modal on the LEFT")) 72 | ), 73 | column( 74 | width = 4, 75 | class = "border bg-white p-4", 76 | tags$h3("Modal on the top"), 77 | div(actionButton("modal4", "Show BIG shiny modal on the TOP")), 78 | tags$br(), 79 | div(actionButton("modal4b", "Show SMALL shiny modal on the TOP")) 80 | ), 81 | column( 82 | width = 4, 83 | class = "border bg-white p-4", 84 | tags$h3("Modal at the bottom"), 85 | div(actionButton("modal5", "Show BIG shiny modal on the BOTTOM")), 86 | tags$br(), 87 | div(actionButton("modal5b", "Show SMALL shiny modal on the BOTTOM")) 88 | ) 89 | ) 90 | ) 91 | 92 | # Define server content 93 | server <- function(input, output) { 94 | 95 | # Sample user-defined sever logic 96 | 97 | 98 | # Show modal when MODAL1 button is clicked. 99 | observeEvent(input$modal1, { 100 | showModal(modalDialog( 101 | textInput("dataset", "Enter a data set", 102 | placeholder = 'Try "mtcars" or "abc"' 103 | ), 104 | div("Id leo in vitae turpis massa. Et netus et malesuada fames ac turpis egestas maecenas pharetra. Pellentesque habitant morbi tristique senectus et netus et malesuada fames. Nisl tincidunt eget nullam non nisi est sit amet. Lorem donec massa sapien faucibus et molestie. Diam donec adipiscing tristique risus."), 105 | footer = tagList( 106 | modalButton("Cancel"), 107 | actionButton("ok", "OK") 108 | ) 109 | )) 110 | }) 111 | 112 | # Show modal when MODAL1b button is clicked. 113 | observeEvent(input$modal1b, { 114 | showModal(modalDialog( 115 | textInput("dataset", "Enter a data set", 116 | placeholder = 'Try "mtcars" or "abc"' 117 | ), 118 | div("Id leo in vitae turpis massa. Et netus et malesuada fames ac turpis egestas maecenas pharetra. Pellentesque habitant morbi tristique senectus et netus et malesuada fames. Nisl tincidunt eget nullam non nisi est sit amet. Lorem donec massa sapien faucibus et molestie. Diam donec adipiscing tristique risus."), 119 | footer = tagList( 120 | modalButton("Cancel"), 121 | actionButton("ok", "OK") 122 | ), 123 | 124 | # add extra arguments 125 | transparent = TRUE 126 | )) 127 | }) 128 | 129 | 130 | # Show modal when MODAL2 button is clicked. 131 | observeEvent(input$modal2, { 132 | showModal(modalDialog( 133 | textInput("dataset", "Enter a data set", 134 | placeholder = 'Try "mtcars" or "abc"' 135 | ), 136 | div("Id leo in vitae turpis massa. Et netus et malesuada fames ac turpis egestas maecenas pharetra. Pellentesque habitant morbi tristique senectus et netus et malesuada fames. Nisl tincidunt eget nullam non nisi est sit amet. Lorem donec massa sapien faucibus et molestie. Diam donec adipiscing tristique risus."), 137 | footer = tagList( 138 | modalButton("Cancel"), 139 | actionButton("ok", "OK") 140 | ), 141 | 142 | # add extra arguments 143 | size = "s", # small 144 | position = "right", # position to the right 145 | )) 146 | }) 147 | 148 | 149 | # Show modal when MODAL2b button is clicked. 150 | observeEvent(input$modal2b, { 151 | showModal(modalDialog( 152 | textInput("dataset", "Enter a data set", 153 | placeholder = 'Try "mtcars" or "abc"' 154 | ), 155 | div("Id leo in vitae turpis massa. Et netus et malesuada fames ac turpis egestas maecenas pharetra. Pellentesque habitant morbi tristique senectus et netus et malesuada fames. Nisl tincidunt eget nullam non nisi est sit amet. Lorem donec massa sapien faucibus et molestie. Diam donec adipiscing tristique risus."), 156 | footer = tagList( 157 | modalButton("Cancel"), 158 | actionButton("ok", "OK") 159 | ), 160 | 161 | # add extra arguments 162 | size = "l", # large 163 | position = "right", # position to the right 164 | )) 165 | }) 166 | 167 | 168 | # Show modal when MODAL3 button is clicked. 169 | observeEvent(input$modal3, { 170 | showModal(modalDialog( 171 | textInput("dataset", "Enter a data set", 172 | placeholder = 'Try "mtcars" or "abc"' 173 | ), 174 | div("Id leo in vitae turpis massa. Et netus et malesuada fames ac turpis egestas maecenas pharetra. Pellentesque habitant morbi tristique senectus et netus et malesuada fames. Nisl tincidunt eget nullam non nisi est sit amet. Lorem donec massa sapien faucibus et molestie. Diam donec adipiscing tristique risus."), 175 | footer = tagList( 176 | modalButton("Cancel"), 177 | actionButton("ok", "OK") 178 | ), 179 | 180 | # add extra arguments 181 | size = "s", # small 182 | position = "left", # position to the left 183 | )) 184 | }) 185 | 186 | 187 | # Show modal when MODAL3b button is clicked. 188 | observeEvent(input$modal3b, { 189 | showModal(modalDialog( 190 | textInput("dataset", "Enter a data set", 191 | placeholder = 'Try "mtcars" or "abc"' 192 | ), 193 | div("Id leo in vitae turpis massa. Et netus et malesuada fames ac turpis egestas maecenas pharetra. Pellentesque habitant morbi tristique senectus et netus et malesuada fames. Nisl tincidunt eget nullam non nisi est sit amet. Lorem donec massa sapien faucibus et molestie. Diam donec adipiscing tristique risus."), 194 | footer = tagList( 195 | modalButton("Cancel"), 196 | actionButton("ok", "OK") 197 | ), 198 | 199 | # add extra arguments 200 | size = "l", # large 201 | position = "left", # position to the left 202 | )) 203 | }) 204 | 205 | # Show modal when MODAL4 button is clicked. 206 | observeEvent(input$modal4, { 207 | showModal(modalDialog( 208 | textInput("dataset", "Enter a data set", 209 | placeholder = 'Try "mtcars" or "abc"' 210 | ), 211 | div("Id leo in vitae turpis massa. Et netus et malesuada fames ac turpis egestas maecenas pharetra. Pellentesque habitant morbi tristique senectus et netus et malesuada fames. Nisl tincidunt eget nullam non nisi est sit amet. Lorem donec massa sapien faucibus et molestie. Diam donec adipiscing tristique risus."), 212 | footer = tagList( 213 | modalButton("Cancel"), 214 | actionButton("ok", "OK") 215 | ), 216 | 217 | # add extra arguments 218 | size = "s", # small 219 | position = "top", # position to the top 220 | )) 221 | }) 222 | 223 | 224 | # Show modal when MODAL4b button is clicked. 225 | observeEvent(input$modal4b, { 226 | showModal(modalDialog( 227 | textInput("dataset", "Enter a data set", 228 | placeholder = 'Try "mtcars" or "abc"' 229 | ), 230 | div("Id leo in vitae turpis massa. Et netus et malesuada fames ac turpis egestas maecenas pharetra. Pellentesque habitant morbi tristique senectus et netus et malesuada fames. Nisl tincidunt eget nullam non nisi est sit amet. Lorem donec massa sapien faucibus et molestie. Diam donec adipiscing tristique risus."), 231 | footer = tagList( 232 | modalButton("Cancel"), 233 | actionButton("ok", "OK") 234 | ), 235 | 236 | # add extra arguments 237 | size = "l", # large 238 | position = "top", # position to the top 239 | )) 240 | }) 241 | 242 | # Show modal when MODAL5 button is clicked. 243 | observeEvent(input$modal5, { 244 | showModal(modalDialog( 245 | textInput("dataset", "Enter a data set", 246 | placeholder = 'Try "mtcars" or "abc"' 247 | ), 248 | div("Id leo in vitae turpis massa. Et netus et malesuada fames ac turpis egestas maecenas pharetra. Pellentesque habitant morbi tristique senectus et netus et malesuada fames. Nisl tincidunt eget nullam non nisi est sit amet. Lorem donec massa sapien faucibus et molestie. Diam donec adipiscing tristique risus."), 249 | footer = tagList( 250 | modalButton("Cancel"), 251 | actionButton("ok", "OK") 252 | ), 253 | 254 | # add extra arguments 255 | size = "s", # small 256 | position = "bottom", # position at the bottom 257 | )) 258 | }) 259 | 260 | 261 | # Show modal when MODAL5b button is clicked. 262 | observeEvent(input$modal5b, { 263 | showModal(modalDialog( 264 | textInput("dataset", "Enter a data set", 265 | placeholder = 'Try "mtcars" or "abc"' 266 | ), 267 | div("Id leo in vitae turpis massa. Et netus et malesuada fames ac turpis egestas maecenas pharetra. Pellentesque habitant morbi tristique senectus et netus et malesuada fames. Nisl tincidunt eget nullam non nisi est sit amet. Lorem donec massa sapien faucibus et molestie. Diam donec adipiscing tristique risus."), 268 | footer = tagList( 269 | modalButton("Cancel"), 270 | actionButton("ok", "OK") 271 | ), 272 | 273 | # add extra arguments 274 | size = "l", # large 275 | position = "bottom", # position at the bottom 276 | )) 277 | }) 278 | } 279 | 280 | # Create and initialize the Shiny application 281 | shinyApp(ui, server) 282 | -------------------------------------------------------------------------------- /R/cards.R: -------------------------------------------------------------------------------- 1 | #' Generate a flexible and extensible content container 2 | #' 3 | #' Widely used Bootstrap feature with improvements to allow collapse, minimize and closing 4 | #' 5 | #' @param ... The elements to include within the body of the card 6 | #' @param title The text to display in the header title 7 | #' @param collapsed If \code{TRUE}, the card is collapsed. The default is \code{FALSE} 8 | #' @param bg.fade If \code{TRUE}, the background will be faded if a background exists 9 | #' @param width Select a width from 1 to 12 to indicate the size of the card 10 | #' @param header.bg Header background color style, choices 1 to 11 11 | #' @param alert.text Enter text for the alert portion. Leave as NULL to exclude the alert 12 | #' @param alert.bg Indicate the type of alert to include, choices are "primary", "warning", "secondary", "info", "success", "danger" 13 | #' @param toolbar The default is NULL, which means all toolbar will be displayed use this to set what toolbar to show. 14 | #' @param header If \code{FALSE}, the header will be excluded 15 | #' @param draggable If \code{FALSE}, the card will not be draggable 16 | #' @param id unique card id 17 | #' 18 | #' @note For more information on the features of the card, visit the examples section of the help documentation 19 | #' @return HTML code of the container with a class called card that holds the items 20 | #' 21 | #' @examples 22 | #' 23 | #' # Example 1 24 | #' if (interactive()) { 25 | #' library(shiny) 26 | #' library(nextGenShinyApps) 27 | #' 28 | #' shiny::shinyApp( 29 | #' ui = fluidPage( 30 | #' style = "4", 31 | #' custom.bg.color = "lightblue", 32 | #' sidebar = NULL, 33 | #' header = titlePanel(left="Card Ex2"), 34 | #' wrapper( 35 | #' altPanel( 36 | #' card( 37 | #' title = "Standard card", 38 | #' collapsed = TRUE, 39 | #' alert.text = "An alert2 for the content", 40 | #' alert.bg = "warning", 41 | #' toolbar = list(collapse = TRUE, 42 | #' maximize = TRUE, 43 | #' close = FALSE, 44 | #' menu = TRUE), 45 | #' shiny::h3("Sample text"), 46 | #' "Lorem ipsum dolor sit a" 47 | #' )), 48 | #' mainPanel( 49 | #' card( 50 | #' title = "Standard card 2", 51 | #' shiny::h1("Sample text"), 52 | #' "Lorem ipsum dolor sit a" 53 | #' )) 54 | #' ) 55 | #' ), 56 | #' server = function(input, output) { 57 | #' } 58 | #' ) 59 | #' } 60 | #' 61 | #' # Example 2 62 | #' if (interactive()) { 63 | #' library(shiny) 64 | #' library(nextGenShinyApps) 65 | #' 66 | #' shiny::shinyApp( 67 | #' ui = fluidPage( 68 | #' style = "8", 69 | #' custom.bg.color = "#d9d9d9", 70 | #' sidebar = NULL, 71 | #' header = titlePanel(left="Card Ex1"), 72 | #' wrapper( 73 | #' altPanel(width = 12, 74 | #' card( 75 | #' title = "Standard card", 76 | #' alert.text = "An alert1 for the content", 77 | #' shiny::h3("Sample text"), 78 | #' "Lorem ipsum dolor sit a" 79 | #' ), 80 | #' card( 81 | #' title = "Standard card", 82 | #' collapsed = TRUE, 83 | #' alert.text = "An alert2 for the content", 84 | #' alert.bg = "warning", 85 | #' toolbar = list(collapse = TRUE, 86 | #' maximize = TRUE, 87 | #' close = FALSE, 88 | #' menu = TRUE), 89 | #' shiny::h3("Sample text"), 90 | #' "Lorem ipsum dolor sit a" 91 | #' )) 92 | #' ) 93 | #' ), 94 | #' server = function(input, output) { 95 | #' } 96 | #' ) 97 | #' } 98 | #' 99 | #' 100 | #' @export 101 | 102 | card <- function(...,title = "Standard Card", collapsed = FALSE, bg.fade = TRUE, width = 12, header.bg = letters[1:13], alert.text = NULL, alert.bg = c("primary", "warning", "secondary", "info", "success", "danger"), toolbar = NULL, header = TRUE, draggable = TRUE, id = NULL) { 103 | add.collapsed.01 <- ifelse(collapsed, " panel-collapsed ", "") 104 | alert.bg <- match.arg(alert.bg) 105 | header.bg <- match.arg(header.bg)[1] 106 | header.bg.add <- switch (header.bg, 107 | "a" = "", 108 | "b" = "bg-primary-700 bg-success-gradient", 109 | "c" = "bg-primary-500 bg-info-gradient", 110 | "d" = "bg-primary-600 bg-primary-gradient", 111 | "e" = "bg-info-600 bg-primray-gradient", 112 | "f" = "bg-info-600 bg-info-gradient", 113 | "g" = "bg-info-700 bg-success-gradient", 114 | "h" = "bg-success-900 bg-info-gradient", 115 | "i" = "bg-success-700 bg-primary-gradient", 116 | "j" = "bg-success-600 bg-success-gradient", 117 | "k" = "bg-danger-900 bg-info-gradient", 118 | "l" = "bg-fusion-400 bg-fusion-gradient", 119 | "m" = "bg-faded" 120 | ) 121 | if (collapsed) { 122 | add.collapsed.01 <- " panel-collapsed" 123 | add.collapsed.02 <- " collapse" 124 | } else { 125 | add.collapsed.01 <- "" 126 | add.collapsed.02 <- " collapse show" 127 | } 128 | bg.fader <- ifelse(bg.fade, " bg-subtlelight-fade ", "") 129 | num <- as.integer(Sys.time()) + rand.num(1) 130 | 131 | draggable.class <- ifelse(draggable," panel-sortable","") 132 | content.main <- div( 133 | id = paste0("box", num), 134 | class = paste0("panel",draggable.class, add.collapsed.01), 135 | `data-panel-attstyle`= header.bg.add, 136 | role = "widget", 137 | #ifelse(!exists('.nGSAscripts'),cssjsinclude('core','3'),''), 138 | # header 139 | if (header) { 140 | div( 141 | class = paste0("panel-hdr ",header.bg.add), 142 | role = "heading", 143 | h2(class = "js-get-date ui-sortable-handle", tags$b(title)), 144 | div( 145 | class = "panel-saving mr-2", style = "display:none", 146 | tags$i(class = "fa fa-spinner fa-spin-4x fs-xl") 147 | ), 148 | setup.toolbar.buttons(toolbar), 149 | setup.toolbar.menu(toolbar) 150 | ) 151 | }, 152 | 153 | 154 | # alert 155 | div( 156 | class = paste0("panel-container", add.collapsed.02), role = "content", 157 | div( 158 | class = "loader", 159 | tags$i(class = "fa fa-spinner-third fa-spin-4x fs-xxl") 160 | ), 161 | if (!is.null(alert.text)) { 162 | div( 163 | class = "panel-content p-0 mb-g", 164 | div( 165 | class = paste0("alert alert-", alert.bg, " alert-dismissible fade show border-faded border-left-0 border-right-0 border-top-0 rounded-0 m-0"), 166 | role = "alert", 167 | tags$button( 168 | type = "button", class = "close", `data-dismiss` = "alert", `aria-label` = "Close", 169 | tags$span( 170 | `aria-hidden` = "true", 171 | tags$i(class = "fa fa-times") 172 | ) 173 | ), tags$strong( 174 | HTML(alert.text) 175 | ) 176 | ) 177 | ) 178 | }, 179 | # body 180 | div( 181 | class = "panel-content", 182 | ... 183 | ) 184 | ) 185 | ) 186 | if (draggable) { 187 | sortablegrid(width = width, content.main, id = id) 188 | } else { 189 | column(width = width, content.main) 190 | } 191 | } 192 | 193 | 194 | 195 | #' Generate a sortable grid 196 | #' 197 | #' A grid that holds draggable items 198 | #' 199 | #' @param ... The elements to include within the body of the grid 200 | #' @param width The width of the grid 201 | #' @param id unique id of grid 202 | #' 203 | #' @note For more information on the features of a sortable grid, visit the examples section of the help documentation 204 | #' @return HTML code of a container that allows items within it to be draggable 205 | #' 206 | #' @examples 207 | #' sortablegrid("item1",width=12) 208 | #' @export 209 | 210 | sortablegrid <- function(..., width = 6, id = NULL) { 211 | width <- as.integer(width) 212 | if (width < 1) width <- 1 213 | shiny::div(id = ifelse(is.null(id),"",id),class = paste0("col-12 col-md-", width, " p-0 sortable-grid ui-sortable"), ...) 214 | } 215 | 216 | #' Generate toolbar buttons 217 | #' 218 | #' Use within a card to display toolbar 219 | #' 220 | #' @param ... The list of buttons to display 221 | #' 222 | #' @note For more information on the features of a toolbar within a card, visit the examples section of the help documentation 223 | #' @return HTML code of a container containing items to be inserted in the toolbar 224 | #' 225 | #' @examples 226 | #' \donttest{ 227 | #' setup.toolbar.buttons(list(maximize=TRUE,collapse=TRUE,close=TRUE)) 228 | #' } 229 | #' @export 230 | setup.toolbar.buttons <- function(...) { 231 | show.collapse <- 1 232 | show.maximize <- 1 233 | show.close <- 1 234 | 235 | if (!is.null(...)) { 236 | 237 | # check if its logical, if so - TRUE or FALSE 238 | if (is.logical(...)) { 239 | if (!as.logical(...)) { 240 | show.collapse <- 0 241 | show.maximize <- 0 242 | show.close <- 0 243 | } 244 | } else { 245 | if (is.list(...)) { 246 | need.0 <- list(collapse = 0, maximize = 0, close = 0) 247 | need.1 <- c(...) 248 | need <- append(need.1, need.0) 249 | if (!as.logical(need$collapse)) show.collapse <- 0 250 | if (!as.logical(need$maximize)) show.maximize <- 0 251 | if (!as.logical(need$close)) show.close <- 0 252 | } else { 253 | warning("Must use a list to declare the toolbars needed.") 254 | } 255 | } 256 | } 257 | shiny::div( 258 | class = "panel-toolbar", role = "menu", 259 | if (show.collapse) { 260 | tags$a( 261 | href = "#", class = "btn btn-panel collapsetool hover-effect-dot js-panel-collapse waves-effect waves-themed", 262 | `data-toggle` = "tooltip", `data-offset` = "0,10", `data-original-title` = "Collapse" 263 | ) 264 | }, 265 | if (show.maximize) { 266 | tags$a( 267 | href = "#", class = "btn btn-panel maximizetool hover-effect-dot js-panel-fullscreen waves-effect waves-themed", 268 | `data-toggle` = "tooltip", `data-offset` = "0,10", `data-original-title` = "Fullscreen" 269 | ) 270 | }, 271 | if (show.close) { 272 | tags$a( 273 | href = "#", class = "btn btn-panel closetool hover-effect-dot js-panel-close waves-effect waves-themed", 274 | `data-toggle` = "tooltip", `data-offset` = "0,10", `data-original-title` = "Close" 275 | ) 276 | } 277 | ) 278 | } 279 | 280 | #' Generate toolbar menu 281 | #' 282 | #' Use within a card to display menu 283 | #' 284 | #' @param ... The list declaring whether to show menu 285 | #' 286 | #' @note For more information on the features of a toolbar within a card, visit the examples section of the help documentation 287 | #' @return HTML code of a container containing menu to be inserted in the toolbar if declared TRUE 288 | #' 289 | #' @examples 290 | #' \donttest{ 291 | #' setup.toolbar.menu(list(menu=TRUE)) 292 | #' } 293 | #' @export 294 | setup.toolbar.menu <- function(...) { 295 | show.menu <- 1 296 | 297 | if (!is.null(...)) { 298 | 299 | # check if its logical, if so - TRUE or FALSE 300 | if (is.logical(...)) { 301 | if (!as.logical(...)) { 302 | show.menu <- 0 303 | } 304 | } else { 305 | if (is.list(...)) { 306 | need.0 <- list(menu = 0) 307 | need.1 <- c(...) 308 | need <- append(need.1, need.0) 309 | if (!as.logical(need$menu)) show.menu <- 0 310 | } else { 311 | warning("Must use a list to declare if the menu is needed.") 312 | } 313 | } 314 | } 315 | if (show.menu) { 316 | div( 317 | class = "panel-toolbar", role = "menu", 318 | tags$a( 319 | href = "#", class = "btn btn-toolbar-master waves-effect waves-themed", 320 | `data-toggle` = "dropdown", 321 | tags$i(class = "fa fa-ellipsis-v") 322 | ), 323 | div( 324 | class = "dropdown-menu dropdown-menu-animated dropdown-menu-right p-0", 325 | tags$a( 326 | href = "#", class = "dropdown-item js-panel-refresh", 327 | tags$span(`data-i18n` = "drpdwn.refreshpanel", "Refresh Content") 328 | ), 329 | tags$a( 330 | href = "#", class = "dropdown-item js-panel-locked", 331 | tags$span(`data-i18n` = "drpdwn.lockpanel", "Lock Position") 332 | ), 333 | div( 334 | class = "dropdown-multilevel dropdown-multilevel-left", 335 | div(class = "dropdown-item", tags$span(`data-i18n` = "drpdwn.panelcolor", "Panel Style")), 336 | div( 337 | class = "dropdown-menu d-flex flex-wrap", style = "min-width: 9.5rem; width: 9.5rem; padding: 0.5rem", 338 | tags$a( 339 | href = "#", 340 | class = "btn d-inline-block bg-primary-700 bg-success-gradient width-2 height-2 p-0 rounded-0 js-panel-color hover-effect-dot waves-effect waves-themed", 341 | `data-panel-setstyle` = "bg-primary-700 bg-success-gradient", style = "margin:1px;" 342 | ), 343 | tags$a( 344 | href = "#", 345 | class = "btn d-inline-block bg-primary-500 bg-info-gradient width-2 height-2 p-0 rounded-0 js-panel-color hover-effect-dot waves-effect waves-themed", 346 | `data-panel-setstyle` = "bg-primary-500 bg-info-gradient", style = "margin:1px;" 347 | ), 348 | tags$a( 349 | href = "#", 350 | class = "btn d-inline-block bg-primary-600 bg-primary-gradient width-2 height-2 p-0 rounded-0 js-panel-color hover-effect-dot waves-effect waves-themed", 351 | `data-panel-setstyle` = "bg-primary-600 bg-primary-gradient", style = "margin:1px;" 352 | ), 353 | tags$a( 354 | href = "#", 355 | class = "btn d-inline-block bg-info-600 bg-primray-gradient width-2 height-2 p-0 rounded-0 js-panel-color hover-effect-dot waves-effect waves-themed", 356 | `data-panel-setstyle` = "bg-info-600 bg-primray-gradient", style = "margin:1px;" 357 | ), 358 | tags$a( 359 | href = "#", 360 | class = "btn d-inline-block bg-info-600 bg-info-gradient width-2 height-2 p-0 rounded-0 js-panel-color hover-effect-dot waves-effect waves-themed", 361 | `data-panel-setstyle` = "bg-info-600 bg-info-gradient", style = "margin:1px;" 362 | ), 363 | tags$a( 364 | href = "#", 365 | class = "btn d-inline-block bg-info-700 bg-success-gradient width-2 height-2 p-0 rounded-0 js-panel-color hover-effect-dot waves-effect waves-themed", 366 | `data-panel-setstyle` = "bg-info-700 bg-success-gradient", style = "margin:1px;" 367 | ), 368 | tags$a( 369 | href = "#", 370 | class = "btn d-inline-block bg-success-900 bg-info-gradient width-2 height-2 p-0 rounded-0 js-panel-color hover-effect-dot waves-effect waves-themed", 371 | `data-panel-setstyle` = "bg-success-900 bg-info-gradient", style = "margin:1px;" 372 | ), 373 | tags$a( 374 | href = "#", 375 | class = "btn d-inline-block bg-success-700 bg-primary-gradient width-2 height-2 p-0 rounded-0 js-panel-color hover-effect-dot waves-effect waves-themed", 376 | `data-panel-setstyle` = "bg-success-700 bg-primary-gradient", style = "margin:1px;" 377 | ), 378 | tags$a( 379 | href = "#", 380 | class = "btn d-inline-block bg-success-600 bg-success-gradient width-2 height-2 p-0 rounded-0 js-panel-color hover-effect-dot waves-effect waves-themed", 381 | `data-panel-setstyle` = "bg-success-600 bg-success-gradient", style = "margin:1px;" 382 | ), 383 | tags$a( 384 | href = "#", 385 | class = "btn d-inline-block bg-danger-900 bg-info-gradient width-2 height-2 p-0 rounded-0 js-panel-color hover-effect-dot waves-effect waves-themed", 386 | `data-panel-setstyle` = "bg-danger-900 bg-info-gradient", style = "margin:1px;" 387 | ), 388 | tags$a( 389 | href = "#", 390 | class = "btn d-inline-block bg-fusion-400 bg-fusion-gradient width-2 height-2 p-0 rounded-0 js-panel-color hover-effect-dot waves-effect waves-themed", 391 | `data-panel-setstyle` = "bg-fusion-400 bg-fusion-gradient", style = "margin:1px;" 392 | ), 393 | tags$a( 394 | href = "#", 395 | class = "btn d-inline-block bg-faded width-2 height-2 p-0 rounded-0 js-panel-color hover-effect-dot waves-effect waves-themed", 396 | `data-panel-setstyle` = "bg-faded", style = "margin:1px;" 397 | ) 398 | ) 399 | ), 400 | div(class = "dropdown-divider m-0"), 401 | tags$a( 402 | href = "#", class = "dropdown-item js-panel-reset", 403 | tags$span(`data-i18n` = "drpdwn.resetpanel", "Reset Panel") 404 | ) 405 | ) 406 | ) 407 | } else { 408 | return(NULL) 409 | } 410 | } 411 | 412 | 413 | 414 | #' Main panel to display content 415 | #' 416 | #' Customizable main panel for inclusion of various UI elements 417 | #' 418 | #' @param ... List of content 419 | #' @param width Width of the main panel 420 | #' @param border Should border be declared for the panel 421 | #' @param shadow Should a shadow be added to the panel 422 | #' 423 | #' @note For more information on the features of the main panel, look through the Github examples 424 | #' @return Creates a container for displaying contents 425 | #' 426 | #' @examples 427 | #' \donttest{ 428 | #' mainPanel('content 1') 429 | #' } 430 | #' @export 431 | 432 | mainPanel <- function(..., width = 8, border=FALSE, shadow=FALSE){ 433 | shiny::div(class = paste0("col-12 col-md-", width), 434 | class = ifelse(border,"border",""), 435 | class = ifelse(shadow,"shadow",""), 436 | role = "main", 437 | ...) 438 | } 439 | 440 | 441 | 442 | #' New sidebar panel to display content 443 | #' 444 | #' Customizable sidebar panel for inclusion of various UI elements 445 | #' 446 | #' @param ... List of content 447 | #' @param width Width of the sidebar panel 448 | #' @param border Should border be declared for the panel 449 | #' @param shadow Should a shadow be added to the panel 450 | #' 451 | #' @note For more information on the features of the sidebar panel, look through the Github examples 452 | #' @return Creates an alternate container for displaying contents 453 | #' 454 | #' @examples 455 | #' \donttest{ 456 | #' altPanel('content 2') 457 | #' } 458 | #' @export 459 | 460 | altPanel <- function(..., width = 4, border=FALSE, shadow=FALSE){ 461 | htmltools::div(class = paste0("col-12 col-md-", width), 462 | class = ifelse(border,"border",""), 463 | class = ifelse(shadow,"shadow",""), 464 | htmltools::tags$form(class = "well", 465 | role = "complementary", ...)) 466 | } 467 | 468 | 469 | #' Container to fit all containers horizontally 470 | #' 471 | #' Fit containers horizontally 472 | #' 473 | #' @param ... List of content 474 | #' @param border Should border be declared for the panel 475 | #' @param shadow Should a shadow be added to the panel 476 | #' 477 | #' @return Creates a a box to fit all boxes within 478 | #' 479 | #' @examples 480 | #' \donttest{ 481 | #' flexBox(shiny::div("Div 1"),shiny::div("Div 2"),shiny::div("Div 1")) 482 | #' } 483 | #' @export 484 | flexBox <- function(..., border = FALSE, shadow = FALSE) { 485 | htmltools::div( 486 | class = "ngsflexBox d-block d-md-flex", 487 | if (border) class <- "border border-secondary", 488 | if (shadow) class <- "shadow-md", 489 | ... 490 | ) 491 | } 492 | --------------------------------------------------------------------------------