├── R ├── metroNav.R ├── utils.R ├── deps.R ├── metro-update-inputs.R ├── metroBadge.R ├── metro-inputs.R ├── metroPage.R ├── metro-tabs.R ├── metroCharms.R ├── metroPanel.R ├── metro-grids.R ├── metro-tiles.R └── metroWindow.R ├── .gitignore ├── docs ├── pkgdown.yml ├── link.svg ├── docsearch.js ├── pkgdown.js ├── 404.html ├── authors.html ├── pkgdown.css ├── reference │ ├── metroGrid.html │ ├── metroContainer.html │ ├── metroUiContainer.html │ ├── metroTab.html │ ├── metroUiPage.html │ ├── metroCell.html │ ├── metroRow.html │ ├── metroCol.html │ ├── charmsToggle.html │ ├── metroPage.html │ ├── metroBadge.html │ ├── updateMetroCheck.html │ ├── metroTabs.html │ ├── index.html │ ├── metroCharms.html │ └── metroCheck.html └── index.html ├── .Rbuildignore ├── .travis.yml ├── inst ├── old │ └── charms.js ├── metroUi-4.3.4 │ └── input-bindings │ │ └── metroCheckInputBinding.js ├── tests │ └── tests.R └── examples │ └── app.R ├── man ├── metroGrid.Rd ├── metroTab.Rd ├── metroContainer.Rd ├── metroCell.Rd ├── metroRow.Rd ├── charmsToggle.Rd ├── metroPage.Rd ├── metroBadge.Rd ├── updateMetroCheck.Rd ├── metroTabs.Rd ├── metroCharms.Rd ├── metroCheck.Rd ├── metroTile.Rd ├── metroSplitter.Rd ├── metroPanel.Rd ├── metroTilesGrid.Rd └── metroWindow.Rd ├── shinyMetroUi.Rproj ├── NAMESPACE ├── README.md ├── _pkgdown.yml └── DESCRIPTION /R/metroNav.R: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .Rproj.user 2 | .Rhistory 3 | .RData 4 | .Ruserdata 5 | -------------------------------------------------------------------------------- /docs/pkgdown.yml: -------------------------------------------------------------------------------- 1 | pandoc: 2.3.1 2 | pkgdown: 1.4.1 3 | pkgdown_sha: ~ 4 | articles: [] 5 | 6 | -------------------------------------------------------------------------------- /.Rbuildignore: -------------------------------------------------------------------------------- 1 | ^.*\.Rproj$ 2 | ^\.Rproj\.user$ 3 | ^\.travis\.yml$ 4 | ^_pkgdown\.yml$ 5 | ^docs$ 6 | -------------------------------------------------------------------------------- /R/utils.R: -------------------------------------------------------------------------------- 1 | # dropNulls 2 | dropNulls <- function(x) 3 | { 4 | x[!vapply(x, is.null, FUN.VALUE = logical(1))] 5 | } 6 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | # R for travis: see documentation at https://docs.travis-ci.com/user/languages/r 2 | 3 | language: R 4 | sudo: false 5 | cache: packages 6 | -------------------------------------------------------------------------------- /inst/old/charms.js: -------------------------------------------------------------------------------- 1 | $(document).click(function(event) { 2 | if(!$(event.target).closest('.charms').length) { 3 | if(isOpen('.charms')) { 4 | Metro.charms.open(".charms"); 5 | } 6 | } 7 | }); 8 | -------------------------------------------------------------------------------- /man/metroGrid.Rd: -------------------------------------------------------------------------------- 1 | % Generated by roxygen2: do not edit by hand 2 | % Please edit documentation in R/metro-grids.R 3 | \name{metroGrid} 4 | \alias{metroGrid} 5 | \title{Create a Metro 4 grid} 6 | \usage{ 7 | metroGrid(...) 8 | } 9 | \arguments{ 10 | \item{...}{Any element.} 11 | } 12 | \description{ 13 | Build a Metro grid 14 | } 15 | \author{ 16 | David Granjon, \email{dgranjon@ymail.com} 17 | } 18 | -------------------------------------------------------------------------------- /shinyMetroUi.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 | -------------------------------------------------------------------------------- /man/metroTab.Rd: -------------------------------------------------------------------------------- 1 | % Generated by roxygen2: do not edit by hand 2 | % Please edit documentation in R/metro-tabs.R 3 | \name{metroTab} 4 | \alias{metroTab} 5 | \title{Create a Metro 4 tab} 6 | \usage{ 7 | metroTab(..., tabName, disable = FALSE) 8 | } 9 | \arguments{ 10 | \item{...}{Tab content.} 11 | 12 | \item{tabName}{Unique tab name.} 13 | 14 | \item{disable}{Whether the tab is disabled. FALSE by default} 15 | } 16 | \description{ 17 | Build a Metro tab 18 | } 19 | \author{ 20 | David Granjon, \email{dgranjon@ymail.com} 21 | } 22 | -------------------------------------------------------------------------------- /R/deps.R: -------------------------------------------------------------------------------- 1 | #' @importFrom utils packageVersion 2 | #' @importFrom htmltools htmlDependency 3 | metroInputsDeps <- function() { 4 | htmltools::htmlDependency( 5 | name = "metroUi-bindings", 6 | version = as.character(packageVersion("shinyMetroUi")), 7 | src = c( 8 | file = system.file("metroUi-4.3.4/input-bindings", package = "shinyMetroUi"), 9 | href = "metroUi-4.3.4/input-bindings" 10 | ), 11 | package = "shinyMetroUi", 12 | script = c( 13 | "metroCheckInputBinding.js" 14 | ) 15 | ) 16 | } 17 | -------------------------------------------------------------------------------- /man/metroContainer.Rd: -------------------------------------------------------------------------------- 1 | % Generated by roxygen2: do not edit by hand 2 | % Please edit documentation in R/metro-grids.R 3 | \name{metroContainer} 4 | \alias{metroContainer} 5 | \title{Create a Metro 4 container} 6 | \usage{ 7 | metroContainer(..., fullWidth = FALSE) 8 | } 9 | \arguments{ 10 | \item{...}{Any element.} 11 | 12 | \item{fullWidth}{Whether the container should take the whole width. FALSE by default.} 13 | } 14 | \description{ 15 | Build a Metro container 16 | } 17 | \author{ 18 | David Granjon, \email{dgranjon@ymail.com} 19 | } 20 | -------------------------------------------------------------------------------- /NAMESPACE: -------------------------------------------------------------------------------- 1 | # Generated by roxygen2: do not edit by hand 2 | 3 | export(charmsToggle) 4 | export(metroBadge) 5 | export(metroCell) 6 | export(metroCharms) 7 | export(metroCheck) 8 | export(metroContainer) 9 | export(metroGrid) 10 | export(metroPage) 11 | export(metroPanel) 12 | export(metroRow) 13 | export(metroSplitter) 14 | export(metroTab) 15 | export(metroTabs) 16 | export(metroTile) 17 | export(metroTilesGrid) 18 | export(metroWindow) 19 | export(updateMetroCheck) 20 | importFrom(htmltools,htmlDependency) 21 | importFrom(utils,packageVersion) 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # shinyMetroUi 2 | [![Build Status](https://travis-ci.org/RinteRface/shinyMetroUi.svg?branch=master)](https://travis-ci.org/RinteRface/shinyMetroUi) 3 | [![lifecycle](https://img.shields.io/badge/lifecycle-maturing-ff69b4.svg)](https://www.tidyverse.org/lifecycle/#maturing) 4 | [![Project Status](http://www.repostatus.org/badges/latest/wip.svg)](http://www.repostatus.org/#wip) 5 | 6 | > shiny API for Metro 4 Ui 7 | 8 | 9 | ## Installation 10 | 11 | ```r 12 | # for the latest version 13 | devtools::install_github("RinteRface/shinyMetroUi") 14 | ``` 15 | 16 | ## Demo 17 | 18 | Coming soon! 19 | -------------------------------------------------------------------------------- /man/metroCell.Rd: -------------------------------------------------------------------------------- 1 | % Generated by roxygen2: do not edit by hand 2 | % Please edit documentation in R/metro-grids.R 3 | \name{metroCell} 4 | \alias{metroCell} 5 | \title{Create a Metro 4 cell} 6 | \usage{ 7 | metroCell(..., width = NULL, offset = NULL, gap = TRUE) 8 | } 9 | \arguments{ 10 | \item{...}{Any element.} 11 | 12 | \item{width}{Cell width. Between 1 and 12.} 13 | 14 | \item{offset}{Numeric: cell offset. Between 1 and 12} 15 | 16 | \item{gap}{Whether to display gaps between cells. TRUE by default.} 17 | } 18 | \description{ 19 | Build a Metro cell 20 | } 21 | \author{ 22 | David Granjon, \email{dgranjon@ymail.com} 23 | } 24 | -------------------------------------------------------------------------------- /_pkgdown.yml: -------------------------------------------------------------------------------- 1 | development: 2 | mode: unreleased 3 | 4 | 5 | template: 6 | params: 7 | bootswatch: journal 8 | 9 | 10 | navbar: 11 | structure: 12 | left: 13 | - home 14 | - intro 15 | - reference 16 | - articles 17 | - tutorials 18 | - news 19 | right: github 20 | components: 21 | home: 22 | icon: fa-home fa-lg 23 | href: index.html 24 | reference: 25 | text: Reference 26 | href: reference/index.html 27 | news: 28 | text: Changelog 29 | href: news/index.html 30 | github: 31 | icon: fa-github fa-lg 32 | href: https://github.com/RinteRface/shinyMetroUi 33 | -------------------------------------------------------------------------------- /man/metroRow.Rd: -------------------------------------------------------------------------------- 1 | % Generated by roxygen2: do not edit by hand 2 | % Please edit documentation in R/metro-grids.R 3 | \name{metroRow} 4 | \alias{metroRow} 5 | \title{Create a Metro 4 row} 6 | \usage{ 7 | metroRow( 8 | ..., 9 | xAlign = c("start", "center", "end"), 10 | yAlign = c("start", "center", "end") 11 | ) 12 | } 13 | \arguments{ 14 | \item{...}{Any element.} 15 | 16 | \item{xAlign}{How to horizontally align elements in the row: "start", "center" or "end".} 17 | 18 | \item{yAlign}{How to vertically align elements in the row: "start", "center" or "end".} 19 | } 20 | \description{ 21 | Build a Metro row 22 | } 23 | \author{ 24 | David Granjon, \email{dgranjon@ymail.com} 25 | } 26 | -------------------------------------------------------------------------------- /DESCRIPTION: -------------------------------------------------------------------------------- 1 | Package: shinyMetroUi 2 | Type: Package 3 | Title: 'shiny' API for the 'Metro 4' Library 4 | Version: 0.1.0 5 | Authors@R: c( 6 | person("David", "Granjon", email = "dgranjon@ymail.com", role = c("aut", "cre")), 7 | person(family = "RinteRface", role = "cph"), 8 | person("Sergey", "Pimenov", role = c("ctb", "cph"), comment = "Metro UI CSS")) 9 | Maintainer: David Granjon 10 | Description: Create 'Windows' like shiny apps. 11 | Customize your web applications. 12 | Imports: shiny, htmltools, utils 13 | License: GPL-2 14 | Encoding: UTF-8 15 | URL: https://github.com/RinteRface/shinyMetroUi, https://rinterface.github.io/shinyMetroUi/ 16 | BugReports: https://github.com/RinteRface/shinyMetroUi/issues 17 | LazyData: true 18 | RoxygenNote: 7.0.2 19 | -------------------------------------------------------------------------------- /inst/metroUi-4.3.4/input-bindings/metroCheckInputBinding.js: -------------------------------------------------------------------------------- 1 | // Input binding 2 | var metroCheckBinding = new Shiny.InputBinding(); 3 | 4 | $.extend(metroCheckBinding, { 5 | 6 | find: function(scope) { 7 | return $(scope).find(".checkbox"); 8 | }, 9 | 10 | // Given the DOM element for the input, return the value 11 | getValue: function(el) { 12 | console.log($(el)); 13 | }, 14 | 15 | // see updateMetroCheck 16 | receiveMessage: function(el, data) { 17 | 18 | }, 19 | 20 | subscribe: function(el, callback) { 21 | $(el).on("card:opened.metroCheckBinding", function(e) { 22 | callback(); 23 | }); 24 | }, 25 | 26 | unsubscribe: function(el) { 27 | $(el).off(".metroCheckBinding"); 28 | } 29 | }); 30 | 31 | Shiny.inputBindings.register(metroCheckBinding); 32 | -------------------------------------------------------------------------------- /man/charmsToggle.Rd: -------------------------------------------------------------------------------- 1 | % Generated by roxygen2: do not edit by hand 2 | % Please edit documentation in R/metroCharms.R 3 | \name{charmsToggle} 4 | \alias{charmsToggle} 5 | \title{Create a Metro 4 charms toggle} 6 | \usage{ 7 | charmsToggle(..., id) 8 | } 9 | \arguments{ 10 | \item{...}{Button text or icon.} 11 | 12 | \item{id}{Charms unique id. Needed by the charmsToggle.} 13 | } 14 | \description{ 15 | Build a Metro charms toggle button 16 | } 17 | \examples{ 18 | if(interactive()){ 19 | library(shiny) 20 | library(shinyMetroUi) 21 | 22 | shiny::shinyApp( 23 | ui = metroPage( 24 | fluidRow( 25 | charmsToggle(id = "mycharm", "Toggle charms") 26 | ) 27 | ), 28 | server = function(input, output) {} 29 | ) 30 | } 31 | 32 | } 33 | \author{ 34 | David Granjon, \email{dgranjon@ymail.com} 35 | } 36 | -------------------------------------------------------------------------------- /docs/link.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 8 | 12 | 13 | -------------------------------------------------------------------------------- /man/metroPage.Rd: -------------------------------------------------------------------------------- 1 | % Generated by roxygen2: do not edit by hand 2 | % Please edit documentation in R/metroPage.R 3 | \name{metroPage} 4 | \alias{metroPage} 5 | \title{Create a Metro 4 page} 6 | \usage{ 7 | metroPage(..., title = NULL, allow_loading = FALSE) 8 | } 9 | \arguments{ 10 | \item{...}{Any element. They are inserted in a grid. Use the shiny fluidRow function 11 | to create a row and insert metroUiCol inside. The maximum with is 12 12 | (3 columns or lenght 4, 4 columns of lenght 3, ...).} 13 | 14 | \item{title}{Page title.} 15 | 16 | \item{allow_loading}{Whether to allow loading before display the app content. FALSE by default.} 17 | } 18 | \description{ 19 | Build a metroUI page 20 | } 21 | \examples{ 22 | if(interactive()){ 23 | library(shiny) 24 | library(shinyMetroUi) 25 | 26 | shiny::shinyApp( 27 | ui = metroPage(), 28 | server = function(input, output) {} 29 | ) 30 | } 31 | 32 | } 33 | \author{ 34 | David Granjon, \email{dgranjon@ymail.com} 35 | } 36 | -------------------------------------------------------------------------------- /R/metro-update-inputs.R: -------------------------------------------------------------------------------- 1 | #' Change the value of a checkbox input on the client 2 | #' 3 | #' @param session The session object passed to function given to the server. 4 | #' @param inputId The id of the input object. 5 | #' @param label The label to set for the input object. 6 | #' @param value The value to set for the input object. 7 | #' 8 | #' @examples 9 | #' if (interactive()) { 10 | #' library(shiny) 11 | #' library(shinyMetroUi) 12 | #' 13 | #' shiny::shinyApp( 14 | #' ui = metroPage( 15 | #' actionButton("go", "Update checkbox"), 16 | #' metroCheck(inputId = "checkbox1", label = "Checkbox", labelSide = "right") 17 | #' ), 18 | #' server = function(input, output, session) { 19 | #' observeEvent(input$go, { 20 | #' updateMetroCheck(session, inputId = "checkbox1", value = TRUE) 21 | #' }) 22 | #' } 23 | #' ) 24 | #' } 25 | #' @export 26 | updateMetroCheck <- function(session, inputId, label = NULL, value = NULL) { 27 | message <- dropNulls(list(label = label, value = value)) 28 | session$sendInputMessage(inputId, message) 29 | } 30 | -------------------------------------------------------------------------------- /man/metroBadge.Rd: -------------------------------------------------------------------------------- 1 | % Generated by roxygen2: do not edit by hand 2 | % Please edit documentation in R/metroBadge.R 3 | \name{metroBadge} 4 | \alias{metroBadge} 5 | \title{Create a Metro 4 badge} 6 | \usage{ 7 | metroBadge(..., position = NULL, text_color = NULL, color = NULL) 8 | } 9 | \arguments{ 10 | \item{...}{Badge text.} 11 | 12 | \item{position}{Badge position: inside, inline or NULL} 13 | 14 | \item{text_color}{Badge text color. Black by default.} 15 | 16 | \item{color}{Badge background color. No background by default.} 17 | } 18 | \description{ 19 | Build a Metro badge 20 | } 21 | \examples{ 22 | if(interactive()){ 23 | library(shiny) 24 | library(shinyMetroUi) 25 | 26 | shiny::shinyApp( 27 | ui = metroPage( 28 | metroGrid( 29 | metroRow( 30 | xAlign = "center", 31 | yAlign = "center", 32 | metroCell(metroBadge(4, color = "red")), 33 | metroCell(metroBadge(4, color = "yellow")), 34 | metroCell(metroBadge(4, color = "green")) 35 | ) 36 | ) 37 | ), 38 | server = function(input, output) {} 39 | ) 40 | } 41 | 42 | } 43 | \author{ 44 | David Granjon, \email{dgranjon@ymail.com} 45 | } 46 | -------------------------------------------------------------------------------- /man/updateMetroCheck.Rd: -------------------------------------------------------------------------------- 1 | % Generated by roxygen2: do not edit by hand 2 | % Please edit documentation in R/metro-update-inputs.R 3 | \name{updateMetroCheck} 4 | \alias{updateMetroCheck} 5 | \title{Change the value of a checkbox input on the client} 6 | \usage{ 7 | updateMetroCheck(session, inputId, label = NULL, value = NULL) 8 | } 9 | \arguments{ 10 | \item{session}{The session object passed to function given to the server.} 11 | 12 | \item{inputId}{The id of the input object.} 13 | 14 | \item{label}{The label to set for the input object.} 15 | 16 | \item{value}{The value to set for the input object.} 17 | } 18 | \description{ 19 | Change the value of a checkbox input on the client 20 | } 21 | \examples{ 22 | if (interactive()) { 23 | library(shiny) 24 | library(shinyMetroUi) 25 | 26 | shiny::shinyApp( 27 | ui = metroPage( 28 | actionButton("go", "Update checkbox"), 29 | metroCheck(inputId = "checkbox1", label = "Checkbox", labelSide = "right") 30 | ), 31 | server = function(input, output, session) { 32 | observeEvent(input$go, { 33 | updateMetroCheck(session, inputId = "checkbox1", value = TRUE) 34 | }) 35 | } 36 | ) 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /man/metroTabs.Rd: -------------------------------------------------------------------------------- 1 | % Generated by roxygen2: do not edit by hand 2 | % Please edit documentation in R/metro-tabs.R 3 | \name{metroTabs} 4 | \alias{metroTabs} 5 | \title{Create a Metro 4 tab container} 6 | \usage{ 7 | metroTabs( 8 | ..., 9 | mode = NULL, 10 | position = c("horizontal", "vertical"), 11 | align = c("start", "center", "end") 12 | ) 13 | } 14 | \arguments{ 15 | \item{...}{Slot for \link{metroTab}.} 16 | 17 | \item{mode}{Tab mode: NULL or "pills", "text" and "group".} 18 | 19 | \item{position}{Tab position: "horizontal" by default or "vertical".} 20 | 21 | \item{align}{Tab align: "start", "center" or "end".} 22 | } 23 | \description{ 24 | Build a Metro tab container 25 | } 26 | \examples{ 27 | if(interactive()){ 28 | library(shiny) 29 | library(shinyMetroUi) 30 | 31 | shiny::shinyApp( 32 | ui = metroPage( 33 | metroTabs( 34 | mode = "pills", 35 | position = "horizontal", 36 | metroTab(tabName = "Tab 1", "test 1"), 37 | metroTab(tabName = "Tab 2", "test 2"), 38 | metroTab(tabName = "Tab 3", "test 3") 39 | ) 40 | ), 41 | server = function(input, output) {} 42 | ) 43 | } 44 | 45 | } 46 | \author{ 47 | David Granjon, \email{dgranjon@ymail.com} 48 | } 49 | -------------------------------------------------------------------------------- /man/metroCharms.Rd: -------------------------------------------------------------------------------- 1 | % Generated by roxygen2: do not edit by hand 2 | % Please edit documentation in R/metroCharms.R 3 | \name{metroCharms} 4 | \alias{metroCharms} 5 | \title{Create a Metro 4 charms} 6 | \usage{ 7 | metroCharms( 8 | ..., 9 | id, 10 | position = c("right", "left", "top", "bottom"), 11 | opacity = NULL, 12 | background = "back" 13 | ) 14 | } 15 | \arguments{ 16 | \item{...}{Any UI element.} 17 | 18 | \item{id}{Charms unique id. Needed by the charmsToggle.} 19 | 20 | \item{position}{Charms position: right, left, top or bottom.} 21 | 22 | \item{opacity}{Charms opacity. NULL by default. Between 0 and 1.} 23 | 24 | \item{background}{Charms background color. "black" by default.} 25 | } 26 | \description{ 27 | Build a Metro charms 28 | } 29 | \examples{ 30 | if(interactive()){ 31 | library(shiny) 32 | library(shinyMetroUi) 33 | 34 | shiny::shinyApp( 35 | ui = metroPage( 36 | br(), br(), br(), br(), 37 | charmsToggle(id = "mycharm", "Toggle charms"), 38 | metroCharms( 39 | id = "mycharm", 40 | background = "dark", 41 | position = "top", 42 | opacity = "0.5", 43 | sliderInput( 44 | "obs", 45 | "Number of observations:", 46 | min = 0, 47 | max = 1000, 48 | value = 500 49 | ) 50 | ) 51 | ), 52 | server = function(input, output) {} 53 | ) 54 | } 55 | 56 | } 57 | \author{ 58 | David Granjon, \email{dgranjon@ymail.com} 59 | } 60 | -------------------------------------------------------------------------------- /R/metroBadge.R: -------------------------------------------------------------------------------- 1 | #' Create a Metro 4 badge 2 | #' 3 | #' Build a Metro badge 4 | #' 5 | #' @param ... Badge text. 6 | #' @param position Badge position: inside, inline or NULL 7 | #' @param text_color Badge text color. Black by default. 8 | #' @param color Badge background color. No background by default. 9 | #' 10 | #' @examples 11 | #' if(interactive()){ 12 | #' library(shiny) 13 | #' library(shinyMetroUi) 14 | #' 15 | #' shiny::shinyApp( 16 | #' ui = metroPage( 17 | #' metroGrid( 18 | #' metroRow( 19 | #' xAlign = "center", 20 | #' yAlign = "center", 21 | #' metroCell(metroBadge(4, color = "red")), 22 | #' metroCell(metroBadge(4, color = "yellow")), 23 | #' metroCell(metroBadge(4, color = "green")) 24 | #' ) 25 | #' ) 26 | #' ), 27 | #' server = function(input, output) {} 28 | #' ) 29 | #' } 30 | #' 31 | #' @author David Granjon, \email{dgranjon@@ymail.com} 32 | #' 33 | #' @export 34 | metroBadge <- function(..., position = NULL, text_color = NULL, color = NULL){ 35 | 36 | # make sure that the text is always visible 37 | if (!is.null(color) && color %in% c("black", "dark")) text_color <- "white" 38 | if (!is.null(color) && color %in% c("white", "light", "grayWhite")) text_color <- "black" 39 | 40 | badgeClass <- "badge" 41 | if (!is.null(position)) badgeClass <- paste(badgeClass, position) 42 | if (!is.null(color)) badgeClass <- paste0(badgeClass, " bg-", color) 43 | if (!is.null(text_color)) badgeClass <- paste0(badgeClass, " fg-", text_color) 44 | 45 | shiny::tags$span( 46 | class = badgeClass, 47 | ... 48 | ) 49 | } 50 | -------------------------------------------------------------------------------- /man/metroCheck.Rd: -------------------------------------------------------------------------------- 1 | % Generated by roxygen2: do not edit by hand 2 | % Please edit documentation in R/metro-inputs.R 3 | \name{metroCheck} 4 | \alias{metroCheck} 5 | \title{Checkbox} 6 | \usage{ 7 | metroCheck( 8 | inputId, 9 | label, 10 | value = FALSE, 11 | disabled = FALSE, 12 | style = c("1", "2"), 13 | labelSide = c("left", "right") 14 | ) 15 | } 16 | \arguments{ 17 | \item{inputId}{Unique input id.} 18 | 19 | \item{label}{Checkbox label.} 20 | 21 | \item{value}{Whether the checkbox is checked at start. Default to FALSE.} 22 | 23 | \item{disabled}{Whether the checkbox is disabled at start. Default to FALSE.} 24 | 25 | \item{style}{Checkbox style: either "1" (fill) or "3" (outline).} 26 | 27 | \item{labelSide}{Label side: "left" or "right".} 28 | } 29 | \description{ 30 | Create a customizable checkbox with support for highly used options 31 | } 32 | \examples{ 33 | if (interactive()) { 34 | library(shiny) 35 | library(shinyMetroUi) 36 | 37 | shiny::shinyApp( 38 | ui = metroPage( 39 | metroCheck( 40 | inputId = "checkbox1", 41 | label = "Checkbox", 42 | labelSide = "right" 43 | ), 44 | metroCheck( 45 | inputId = "checkbox2", 46 | label = "Checkbox checked", 47 | value = TRUE, 48 | labelSide = "right" 49 | ), 50 | metroCheck( 51 | inputId = "checkbox3", 52 | label = "Checkbox disabled", 53 | disabled = TRUE, 54 | labelSide = "right" 55 | ), 56 | metroCheck( 57 | inputId = "checkbox4", 58 | label = "Checkbox style 2", 59 | style = "2", 60 | labelSide = "left" 61 | ), 62 | ), 63 | server = function(input, output) {} 64 | ) 65 | } 66 | } 67 | -------------------------------------------------------------------------------- /man/metroTile.Rd: -------------------------------------------------------------------------------- 1 | % Generated by roxygen2: do not edit by hand 2 | % Please edit documentation in R/metro-tiles.R 3 | \name{metroTile} 4 | \alias{metroTile} 5 | \title{Create a Metro 4 Tile} 6 | \usage{ 7 | metroTile( 8 | ..., 9 | title = NULL, 10 | icon = NULL, 11 | url = NULL, 12 | size = c("small", "medium", "wide", "large"), 13 | color = NULL, 14 | selected = FALSE, 15 | cover = NULL, 16 | col_position = NULL, 17 | row_position = NULL 18 | ) 19 | } 20 | \arguments{ 21 | \item{...}{Any UI element.} 22 | 23 | \item{title}{Tile title.} 24 | 25 | \item{icon}{Tile icon.} 26 | 27 | \item{url}{Tile external link.} 28 | 29 | \item{size}{Tile size. Choose among small, medium, wide or large.} 30 | 31 | \item{color}{Tile color.} 32 | 33 | \item{selected}{Whether the tile starts selected or not. FALSE by default.} 34 | 35 | \item{cover}{Image path or url that will cover the tile.} 36 | 37 | \item{col_position}{When tiles are in a grid and group, give the column position 38 | of the current tile.} 39 | 40 | \item{row_position}{When tiles are in a grid and group, give the row position 41 | of the current tile.} 42 | } 43 | \description{ 44 | Build a Metro tile 45 | } 46 | \examples{ 47 | if(interactive()){ 48 | library(shiny) 49 | library(shinyMetroUi) 50 | 51 | shiny::shinyApp( 52 | ui = metroPage( 53 | metroTile( 54 | size = "small", 55 | color = "red", 56 | title = "My tile", 57 | icon = "apps" 58 | ), 59 | metroTile( 60 | size = "small", 61 | color = "green", 62 | metroBadge(1, color = "yellow", position = "inline") 63 | ), 64 | metroTile(size = "small", color = "blue"), 65 | metroTile(size = "small", color = "orange") 66 | ), 67 | server = function(input, output) {} 68 | ) 69 | } 70 | 71 | } 72 | \author{ 73 | David Granjon, \email{dgranjon@ymail.com} 74 | } 75 | -------------------------------------------------------------------------------- /man/metroSplitter.Rd: -------------------------------------------------------------------------------- 1 | % Generated by roxygen2: do not edit by hand 2 | % Please edit documentation in R/metro-grids.R 3 | \name{metroSplitter} 4 | \alias{metroSplitter} 5 | \title{Splitter} 6 | \usage{ 7 | metroSplitter(panel1, panel2, vertical = FALSE, minSize = 100, gutterSize = 4) 8 | } 9 | \arguments{ 10 | \item{panel1}{Left panel. Wrap in \link[shiny]{tagList}. This can be a nested \link{metroSplitter}.} 11 | 12 | \item{panel2}{Right panel. Wrap in \link[shiny]{tagList}. This can be a nested \link{metroSplitter}.} 13 | 14 | \item{vertical}{Vertical split. FALSE by default.} 15 | 16 | \item{minSize}{Minimum panel size. 100px by default.} 17 | 18 | \item{gutterSize}{Minimum gutter size (separator). 4 px by default.} 19 | } 20 | \description{ 21 | Create a layout with panels that can be resized with splitter component 22 | } 23 | \note{ 24 | vertical does not work yet. 25 | } 26 | \examples{ 27 | if (interactive()) { 28 | library(shiny) 29 | library(shinyMetroUi) 30 | 31 | shiny::shinyApp( 32 | ui = metroPage( 33 | metroSplitter( 34 | vertical = FALSE, 35 | gutterSize = 10, 36 | panel1 = tagList( 37 | sliderInput( 38 | "obs", 39 | "Number of observations:", 40 | min = 0, 41 | max = 1000, 42 | value = 500 43 | ), 44 | plotOutput("distPlot") 45 | ), 46 | panel2 = tagList( 47 | sliderInput( 48 | "obs2", 49 | "Number of observations:", 50 | min = 0, 51 | max = 1000, 52 | value = 500 53 | ), 54 | plotOutput("distPlot2") 55 | ) 56 | ) 57 | ), 58 | server = function(input, output) { 59 | output$distPlot <- renderPlot({ 60 | hist(rnorm(input$obs)) 61 | }) 62 | output$distPlot2 <- renderPlot({ 63 | hist(rnorm(input$obs2)) 64 | }) 65 | } 66 | ) 67 | } 68 | } 69 | -------------------------------------------------------------------------------- /R/metro-inputs.R: -------------------------------------------------------------------------------- 1 | #' Checkbox 2 | #' 3 | #' Create a customizable checkbox with support for highly used options 4 | #' 5 | #' @param inputId Unique input id. 6 | #' @param label Checkbox label. 7 | #' @param value Whether the checkbox is checked at start. Default to FALSE. 8 | #' @param disabled Whether the checkbox is disabled at start. Default to FALSE. 9 | #' @param style Checkbox style: either "1" (fill) or "3" (outline). 10 | #' @param labelSide Label side: "left" or "right". 11 | #' 12 | #' @export 13 | #' 14 | #' @examples 15 | #' if (interactive()) { 16 | #' library(shiny) 17 | #' library(shinyMetroUi) 18 | #' 19 | #' shiny::shinyApp( 20 | #' ui = metroPage( 21 | #' metroCheck( 22 | #' inputId = "checkbox1", 23 | #' label = "Checkbox", 24 | #' labelSide = "right" 25 | #' ), 26 | #' metroCheck( 27 | #' inputId = "checkbox2", 28 | #' label = "Checkbox checked", 29 | #' value = TRUE, 30 | #' labelSide = "right" 31 | #' ), 32 | #' metroCheck( 33 | #' inputId = "checkbox3", 34 | #' label = "Checkbox disabled", 35 | #' disabled = TRUE, 36 | #' labelSide = "right" 37 | #' ), 38 | #' metroCheck( 39 | #' inputId = "checkbox4", 40 | #' label = "Checkbox style 2", 41 | #' style = "2", 42 | #' labelSide = "left" 43 | #' ), 44 | #' ), 45 | #' server = function(input, output) {} 46 | #' ) 47 | #' } 48 | metroCheck <- function(inputId, label, value = FALSE, disabled = FALSE, 49 | style = c("1", "2"), labelSide = c("left", "right")) { 50 | 51 | style <- match.arg(style) 52 | labelSide <- match.arg(labelSide) 53 | 54 | shiny::tags$input( 55 | metroInputsDeps(), 56 | id = inputId, 57 | class = "checkbox", 58 | type = "checkbox", 59 | `data-role` = "checkbox", 60 | `data-caption` = label, 61 | checked = if (value) NA else NULL, 62 | disabled = if (disabled) NA else NULL, 63 | `data-style` = style, 64 | `data-caption-position` = labelSide 65 | ) 66 | } 67 | -------------------------------------------------------------------------------- /man/metroPanel.Rd: -------------------------------------------------------------------------------- 1 | % Generated by roxygen2: do not edit by hand 2 | % Please edit documentation in R/metroPanel.R 3 | \name{metroPanel} 4 | \alias{metroPanel} 5 | \title{Create a Metro 4 Panel} 6 | \usage{ 7 | metroPanel( 8 | ..., 9 | title = NULL, 10 | width = NULL, 11 | height = NULL, 12 | collapsible = FALSE, 13 | collapsed = FALSE, 14 | draggable = FALSE, 15 | shadow = NULL, 16 | title_color = NULL, 17 | icon_color = NULL, 18 | collapse_color = NULL, 19 | content_color = NULL 20 | ) 21 | } 22 | \arguments{ 23 | \item{...}{Panel content.} 24 | 25 | \item{title}{Panel title.} 26 | 27 | \item{width}{Panel width.} 28 | 29 | \item{height}{Panel height.} 30 | 31 | \item{collapsible}{Whether the panel is collapsible or not. FALSE by default.} 32 | 33 | \item{collapsed}{Whether the panel is collapsed at start. FALSE by default.} 34 | 35 | \item{draggable}{Whether the panel is draggable or not. FALSE by default.} 36 | 37 | \item{shadow}{Panel z-index. Numeric value expected.} 38 | 39 | \item{title_color}{Title background color.} 40 | 41 | \item{icon_color}{Icon background color.} 42 | 43 | \item{collapse_color}{Collapse icon background color.} 44 | 45 | \item{content_color}{Content background color.} 46 | } 47 | \description{ 48 | Build a Metro panel 49 | } 50 | \examples{ 51 | if(interactive()){ 52 | library(shiny) 53 | library(shinyMetroUi) 54 | 55 | shiny::shinyApp( 56 | ui = metroPage( 57 | metroCol( 58 | metroPanel( 59 | title = "Panel title", 60 | width = "250", 61 | collapsible = TRUE, 62 | draggable = TRUE, 63 | "Raptus capios ducunt ad genetrix. 64 | Joy doesn’t beautifully respect any believer — 65 | but the power is what flies", 66 | shadow = 3, 67 | title_color = "red", 68 | icon_color = "green", 69 | collapse_color = "dark", 70 | content_color = "cyan" 71 | ) 72 | ) 73 | ), 74 | server = function(input, output) {} 75 | ) 76 | } 77 | 78 | } 79 | \author{ 80 | David Granjon, \email{dgranjon@ymail.com} 81 | } 82 | -------------------------------------------------------------------------------- /man/metroTilesGrid.Rd: -------------------------------------------------------------------------------- 1 | % Generated by roxygen2: do not edit by hand 2 | % Please edit documentation in R/metro-tiles.R 3 | \name{metroTilesGrid} 4 | \alias{metroTilesGrid} 5 | \title{Create a Metro 4 Tiles Grid} 6 | \usage{ 7 | metroTilesGrid(..., group = FALSE, title = NULL, size = 2) 8 | } 9 | \arguments{ 10 | \item{...}{Insert metroTile inside.} 11 | 12 | \item{group}{Whether tiles are displayed by group. FALSE by default.} 13 | 14 | \item{title}{If group is TRUE, the group title.} 15 | 16 | \item{size}{Tile group size: between 1 and 10.} 17 | } 18 | \description{ 19 | Build a Metro grid for tiles 20 | } 21 | \examples{ 22 | if(interactive()){ 23 | library(shiny) 24 | library(shinyMetroUi) 25 | 26 | shiny::shinyApp( 27 | ui = metroPage( 28 | metroTilesGrid( 29 | metroTile(size = "small", color = "red"), 30 | metroTile(size = "small", color = "green"), 31 | metroTile(size = "small", color = "blue", col_position = 1, row_position = 2), 32 | metroTile(size = "small", color = "orange", col_position = 2, row_position = 2), 33 | metroTile(size = "wide", color = "brown"), 34 | metroTile(size = "medium", color = "green", selected = TRUE) 35 | ), 36 | br(), br(), br(), 37 | metroTilesGrid( 38 | group = TRUE, 39 | size = 2, 40 | metroTile( 41 | size = "small", 42 | color = "indigo", 43 | icon = "github", 44 | url = "https://github.com/olton/Metro-UI-CSS"), 45 | metroTile(size = "small", color = "green", icon = "envelop"), 46 | metroTile(size = "small", color = "blue", col_position = 1, row_position = 2), 47 | metroTile(size = "small", color = "orange", col_position = 2, row_position = 2), 48 | metroTile( 49 | size = "wide", 50 | color = "pink", 51 | sliderInput("obs", "Number of observations:", 52 | min = 0, max = 1000, value = 500 53 | ) 54 | ), 55 | metroTile( 56 | size = "large", 57 | color = "green", 58 | selected = TRUE, 59 | plotOutput("distPlot") 60 | ) 61 | ) 62 | ), 63 | server = function(input, output) { 64 | output$distPlot <- renderPlot({ 65 | hist(rnorm(input$obs)) 66 | }) 67 | } 68 | ) 69 | } 70 | 71 | } 72 | \author{ 73 | David Granjon, \email{dgranjon@ymail.com} 74 | } 75 | -------------------------------------------------------------------------------- /docs/docsearch.js: -------------------------------------------------------------------------------- 1 | $(function() { 2 | 3 | // register a handler to move the focus to the search bar 4 | // upon pressing shift + "/" (i.e. "?") 5 | $(document).on('keydown', function(e) { 6 | if (e.shiftKey && e.keyCode == 191) { 7 | e.preventDefault(); 8 | $("#search-input").focus(); 9 | } 10 | }); 11 | 12 | $(document).ready(function() { 13 | // do keyword highlighting 14 | /* modified from https://jsfiddle.net/julmot/bL6bb5oo/ */ 15 | var mark = function() { 16 | 17 | var referrer = document.URL ; 18 | var paramKey = "q" ; 19 | 20 | if (referrer.indexOf("?") !== -1) { 21 | var qs = referrer.substr(referrer.indexOf('?') + 1); 22 | var qs_noanchor = qs.split('#')[0]; 23 | var qsa = qs_noanchor.split('&'); 24 | var keyword = ""; 25 | 26 | for (var i = 0; i < qsa.length; i++) { 27 | var currentParam = qsa[i].split('='); 28 | 29 | if (currentParam.length !== 2) { 30 | continue; 31 | } 32 | 33 | if (currentParam[0] == paramKey) { 34 | keyword = decodeURIComponent(currentParam[1].replace(/\+/g, "%20")); 35 | } 36 | } 37 | 38 | if (keyword !== "") { 39 | $(".contents").unmark({ 40 | done: function() { 41 | $(".contents").mark(keyword); 42 | } 43 | }); 44 | } 45 | } 46 | }; 47 | 48 | mark(); 49 | }); 50 | }); 51 | 52 | /* Search term highlighting ------------------------------*/ 53 | 54 | function matchedWords(hit) { 55 | var words = []; 56 | 57 | var hierarchy = hit._highlightResult.hierarchy; 58 | // loop to fetch from lvl0, lvl1, etc. 59 | for (var idx in hierarchy) { 60 | words = words.concat(hierarchy[idx].matchedWords); 61 | } 62 | 63 | var content = hit._highlightResult.content; 64 | if (content) { 65 | words = words.concat(content.matchedWords); 66 | } 67 | 68 | // return unique words 69 | var words_uniq = [...new Set(words)]; 70 | return words_uniq; 71 | } 72 | 73 | function updateHitURL(hit) { 74 | 75 | var words = matchedWords(hit); 76 | var url = ""; 77 | 78 | if (hit.anchor) { 79 | url = hit.url_without_anchor + '?q=' + escape(words.join(" ")) + '#' + hit.anchor; 80 | } else { 81 | url = hit.url + '?q=' + escape(words.join(" ")); 82 | } 83 | 84 | return url; 85 | } 86 | -------------------------------------------------------------------------------- /R/metroPage.R: -------------------------------------------------------------------------------- 1 | #' Create a Metro 4 page 2 | #' 3 | #' Build a metroUI page 4 | #' 5 | #' @param ... Any element. They are inserted in a grid. Use the shiny fluidRow function 6 | #' to create a row and insert metroUiCol inside. The maximum with is 12 7 | #' (3 columns or lenght 4, 4 columns of lenght 3, ...). 8 | #' @param title Page title. 9 | #' @param allow_loading Whether to allow loading before display the app content. FALSE by default. 10 | #' 11 | #' @examples 12 | #' if(interactive()){ 13 | #' library(shiny) 14 | #' library(shinyMetroUi) 15 | #' 16 | #' shiny::shinyApp( 17 | #' ui = metroPage(), 18 | #' server = function(input, output) {} 19 | #' ) 20 | #' } 21 | #' 22 | #' @author David Granjon, \email{dgranjon@@ymail.com} 23 | #' 24 | #' @export 25 | metroPage <- function(..., title = NULL, allow_loading = FALSE){ 26 | 27 | shiny::tags$html( 28 | # Head 29 | shiny::tags$head( 30 | shiny::tags$meta(charset = "utf-8"), 31 | shiny::tags$meta( 32 | name = "viewport", 33 | content = "width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" 34 | ), 35 | 36 | shiny::tags$title(title), 37 | 38 | # CSS 39 | shiny::includeCSS(system.file("css/metro-all.min.css", package = "shinyMetroUi")), 40 | shiny::tags$link(rel = "stylesheet", href = "https://cdn.metroui.org.ua/v4/css/metro-icons.min.css"), 41 | 42 | if (allow_loading) { 43 | shiny::tags$script( 44 | ' function hideLoader() { 45 | $("#loader").hide(); 46 | } 47 | setTimeout(hideLoader, 2000) 48 | ' 49 | ) 50 | } 51 | ), 52 | # Body 53 | shiny::tags$body( 54 | # loading element if allowed 55 | onLoad = if (allow_loading) { 56 | "var activity = Metro.activity.open({ 57 | type: 'square', 58 | overlayColor: '#fff', 59 | overlayAlpha: 1, 60 | text: 'Please, wait...' 61 | }); 62 | setTimeout(function(){ 63 | Metro.activity.close(activity); 64 | }, 2000) 65 | " 66 | }, 67 | if (allow_loading) { 68 | shiny::tags$div( 69 | id = "loader", 70 | `data-role` = "activity", 71 | `data-type` = "square", 72 | `data-style` = "color" 73 | ) 74 | }, 75 | metroContainer(fullWidth = TRUE, ...), 76 | shiny::includeScript(system.file("js/metro.min.js", package = "shinyMetroUi")) 77 | ) 78 | ) 79 | } 80 | -------------------------------------------------------------------------------- /inst/tests/tests.R: -------------------------------------------------------------------------------- 1 | # tabs 2 | shiny::shinyApp( 3 | ui = metroPage( 4 | metroTabs( 5 | mode = "pills", 6 | position = "horizontal", 7 | metroTab(tabName = "Tab 1", 8 | sliderInput("obs", "Number of observations:", 9 | min = 0, max = 1000, value = 500 10 | ), plotOutput("distPlot")), 11 | metroTab(tabName = "Tab 2", sliderInput("obs2", "Number of observations:", 12 | min = 0, max = 1000, value = 500 13 | ), plotOutput("distPlot2")), 14 | metroTab(tabName = "Tab 3", "test 3") 15 | ) 16 | ), 17 | server = function(input, output) { 18 | output$distPlot <- renderPlot({ 19 | hist(rnorm(input$obs)) 20 | }) 21 | output$distPlot2 <- renderPlot({ 22 | hist(rnorm(input$obs2)) 23 | }) 24 | } 25 | ) 26 | 27 | 28 | # splitter (nest and vertical do not work) 29 | shiny::shinyApp( 30 | ui = metroPage( 31 | panel1 = tagList( 32 | sliderInput( 33 | "obs", 34 | "Number of observations:", 35 | min = 0, 36 | max = 1000, 37 | value = 500 38 | ), 39 | plotOutput("distPlot") 40 | ), 41 | panel2 = metroSplitter( 42 | vertical = TRUE, 43 | gutterSize = 10, 44 | panel1 = tagList( 45 | sliderInput( 46 | "obs2", 47 | "Number of observations:", 48 | min = 0, 49 | max = 1000, 50 | value = 500 51 | ), 52 | plotOutput("distPlot2") 53 | ), 54 | panel2 = tagList( 55 | sliderInput( 56 | "obs3", 57 | "Number of observations:", 58 | min = 0, 59 | max = 1000, 60 | value = 500 61 | ), 62 | plotOutput("distPlot3") 63 | ) 64 | ) 65 | ), 66 | server = function(input, output) { 67 | output$distPlot <- renderPlot({ 68 | hist(rnorm(input$obs)) 69 | }) 70 | output$distPlot2 <- renderPlot({ 71 | hist(rnorm(input$obs2)) 72 | }) 73 | output$distPlot3 <- renderPlot({ 74 | hist(rnorm(input$obs3)) 75 | }) 76 | } 77 | ) 78 | 79 | 80 | 81 | 82 | 83 | # checkbox 84 | shiny::shinyApp( 85 | ui = metroPage( 86 | actionButton("go", "Update checkbox"), 87 | metroCheck(inputId = "checkbox1", label = "Checkbox", labelSide = "right") 88 | ), 89 | server = function(input, output, session) { 90 | observeEvent(input$go, { 91 | updateMetroCheck(session, inputId = "checkbox1", value = TRUE) 92 | }) 93 | } 94 | ) 95 | -------------------------------------------------------------------------------- /R/metro-tabs.R: -------------------------------------------------------------------------------- 1 | #' Create a Metro 4 tab container 2 | #' 3 | #' Build a Metro tab container 4 | #' 5 | #' @param ... Slot for \link{metroTab}. 6 | #' @param mode Tab mode: NULL or "pills", "text" and "group". 7 | #' @param position Tab position: "horizontal" by default or "vertical". 8 | #' @param align Tab align: "start", "center" or "end". 9 | #' 10 | #' @author David Granjon, \email{dgranjon@@ymail.com} 11 | #' 12 | #' @examples 13 | #' if(interactive()){ 14 | #' library(shiny) 15 | #' library(shinyMetroUi) 16 | #' 17 | #' shiny::shinyApp( 18 | #' ui = metroPage( 19 | #' metroTabs( 20 | #' mode = "pills", 21 | #' position = "horizontal", 22 | #' metroTab(tabName = "Tab 1", "test 1"), 23 | #' metroTab(tabName = "Tab 2", "test 2"), 24 | #' metroTab(tabName = "Tab 3", "test 3") 25 | #' ) 26 | #' ), 27 | #' server = function(input, output) {} 28 | #' ) 29 | #' } 30 | #' 31 | #' @export 32 | metroTabs <- function(..., mode = NULL, position = c("horizontal", "vertical"), 33 | align = c("start", "center", "end")) { 34 | 35 | if (!mode %in% c("text", "pills", "group")) mode <- NULL 36 | 37 | position <- match.arg(position) 38 | align <- match.arg(align) 39 | 40 | items <- list(...) 41 | len <- length(items) 42 | 43 | # menu 44 | tabsMenu <- shiny::tags$ul( 45 | `data-role` = "tabs", 46 | `data-tabs-type` = if (!is.null(mode)) mode else NULL, 47 | `data-expand` = "true", 48 | `data-cls-tabs` = paste0("flex-justify-", position), 49 | `data-tabs-position` = if (position == "vertical") "vertical" else NULL, 50 | lapply(1:len, FUN = function(i) { 51 | tab <- items[[i]][[2]] 52 | tabName <- items[[i]][[1]] 53 | tabId <- tab$attribs$id 54 | tabCl <- tab$attribs$class 55 | 56 | shiny::tags$li( 57 | shiny::tags$a( 58 | href = paste0("#", tabId), 59 | tabName 60 | ) 61 | ) 62 | }) 63 | ) 64 | 65 | # tabContent 66 | tabsContent <- shiny::tags$div( 67 | class = "border bd-default no-border-top p-2", 68 | lapply(X = 1:len, FUN = function(i) items[[i]][[2]]) 69 | ) 70 | 71 | shiny::tagList(tabsMenu, tabsContent) 72 | } 73 | 74 | 75 | 76 | #' Create a Metro 4 tab 77 | #' 78 | #' Build a Metro tab 79 | #' 80 | #' @param ... Tab content. 81 | #' @param tabName Unique tab name. 82 | #' @param disable Whether the tab is disabled. FALSE by default 83 | #' 84 | #' @author David Granjon, \email{dgranjon@@ymail.com} 85 | #' 86 | #' @export 87 | metroTab <- function(..., tabName, disable = FALSE) { 88 | id <- tabName 89 | # handle punctuation 90 | id <- gsub(x = id, pattern = "[[:punct:]]", replacement = "") 91 | # handle tab names with space 92 | id <- gsub(x = id, pattern = " ", replacement = "") 93 | 94 | tabTag <- shiny::tags$div( 95 | class = if (disable) "disabled" else NULL, 96 | id = id, 97 | ... 98 | ) 99 | 100 | return(list(tabName, tabTag)) 101 | } 102 | -------------------------------------------------------------------------------- /R/metroCharms.R: -------------------------------------------------------------------------------- 1 | #' Create a Metro 4 charms 2 | #' 3 | #' Build a Metro charms 4 | #' 5 | #' @param ... Any UI element. 6 | #' @param id Charms unique id. Needed by the charmsToggle. 7 | #' @param position Charms position: right, left, top or bottom. 8 | #' @param opacity Charms opacity. NULL by default. Between 0 and 1. 9 | #' @param background Charms background color. "black" by default. 10 | #' 11 | #' @examples 12 | #' if(interactive()){ 13 | #' library(shiny) 14 | #' library(shinyMetroUi) 15 | #' 16 | #' shiny::shinyApp( 17 | #' ui = metroPage( 18 | #' br(), br(), br(), br(), 19 | #' charmsToggle(id = "mycharm", "Toggle charms"), 20 | #' metroCharms( 21 | #' id = "mycharm", 22 | #' background = "dark", 23 | #' position = "top", 24 | #' opacity = "0.5", 25 | #' sliderInput( 26 | #' "obs", 27 | #' "Number of observations:", 28 | #' min = 0, 29 | #' max = 1000, 30 | #' value = 500 31 | #' ) 32 | #' ) 33 | #' ), 34 | #' server = function(input, output) {} 35 | #' ) 36 | #' } 37 | #' 38 | #' @author David Granjon, \email{dgranjon@@ymail.com} 39 | #' 40 | #' @export 41 | metroCharms <- function(..., id, position = c("right", "left", "top", "bottom"), 42 | opacity = NULL, background = "back"){ 43 | position <- match.arg(position) 44 | 45 | charmsTag <- shiny::tags$div( 46 | id = id, 47 | style = paste0("background-color: ", background, ";"), 48 | `data-role` = "charms", 49 | `data-position` = position, 50 | `data-opacity` = opacity, 51 | ... 52 | ) 53 | 54 | shiny::tagList( 55 | shiny::singleton( 56 | shiny::tags$head( 57 | shiny::tags$script( 58 | #system.file(file.path("js", "charms.js"), package = "shinyMetroUi") 59 | paste0( 60 | "$(document).click(function(event) { 61 | var mycharms = $('#", id, "'); 62 | if(!$(event.target).closest(mycharms).length) { 63 | if (mycharms.hasClass('open')) { 64 | //Metro.charms.close(mycharms); 65 | } 66 | } 67 | }); 68 | " 69 | ) 70 | ) 71 | ) 72 | ), 73 | charmsTag 74 | ) 75 | 76 | } 77 | 78 | 79 | 80 | #' Create a Metro 4 charms toggle 81 | #' 82 | #' Build a Metro charms toggle button 83 | #' 84 | #' @param ... Button text or icon. 85 | #' @param id Charms unique id. Needed by the charmsToggle. 86 | #' 87 | #' @examples 88 | #' if(interactive()){ 89 | #' library(shiny) 90 | #' library(shinyMetroUi) 91 | #' 92 | #' shiny::shinyApp( 93 | #' ui = metroPage( 94 | #' fluidRow( 95 | #' charmsToggle(id = "mycharm", "Toggle charms") 96 | #' ) 97 | #' ), 98 | #' server = function(input, output) {} 99 | #' ) 100 | #' } 101 | #' 102 | #' @author David Granjon, \email{dgranjon@@ymail.com} 103 | #' 104 | #' @export 105 | charmsToggle <- function(..., id) { 106 | shiny::tags$button( 107 | class = "button", 108 | onClick = paste0("$('#", id, "').data('charms').toggle()"), 109 | ... 110 | ) 111 | } 112 | -------------------------------------------------------------------------------- /R/metroPanel.R: -------------------------------------------------------------------------------- 1 | #' Create a Metro 4 Panel 2 | #' 3 | #' Build a Metro panel 4 | #' 5 | #' @param ... Panel content. 6 | #' @param title Panel title. 7 | #' @param width Panel width. 8 | #' @param height Panel height. 9 | #' @param collapsible Whether the panel is collapsible or not. FALSE by default. 10 | #' @param collapsed Whether the panel is collapsed at start. FALSE by default. 11 | #' @param draggable Whether the panel is draggable or not. FALSE by default. 12 | #' @param shadow Panel z-index. Numeric value expected. 13 | #' @param title_color Title background color. 14 | #' @param icon_color Icon background color. 15 | #' @param collapse_color Collapse icon background color. 16 | #' @param content_color Content background color. 17 | #' 18 | #' @examples 19 | #' if(interactive()){ 20 | #' library(shiny) 21 | #' library(shinyMetroUi) 22 | #' 23 | #' shiny::shinyApp( 24 | #' ui = metroPage( 25 | #' metroCol( 26 | #' metroPanel( 27 | #' title = "Panel title", 28 | #' width = "250", 29 | #' collapsible = TRUE, 30 | #' draggable = TRUE, 31 | #' "Raptus capios ducunt ad genetrix. 32 | #' Joy doesn’t beautifully respect any believer — 33 | #' but the power is what flies", 34 | #' shadow = 3, 35 | #' title_color = "red", 36 | #' icon_color = "green", 37 | #' collapse_color = "dark", 38 | #' content_color = "cyan" 39 | #' ) 40 | #' ) 41 | #' ), 42 | #' server = function(input, output) {} 43 | #' ) 44 | #' } 45 | #' 46 | #' @author David Granjon, \email{dgranjon@@ymail.com} 47 | #' 48 | #' @export 49 | metroPanel <- function(..., title = NULL, width = NULL, height = NULL, 50 | collapsible = FALSE, collapsed = FALSE, 51 | draggable = FALSE, shadow = NULL, title_color = NULL, 52 | icon_color = NULL, collapse_color = NULL, content_color = NULL){ 53 | 54 | # make sure that a non collapsible panel does 55 | # not start in a collapsed state by mistake 56 | if (collapsible == FALSE) collapsed <- FALSE 57 | 58 | # a list of all panel non standard attributes 59 | panelProps <- dropNulls( 60 | list( 61 | `data-role` = "panel", 62 | `data-width` = width, 63 | `data-height` = height, 64 | `data-title-caption` = title, 65 | `data-title-icon` = shiny::tags$span(class = "mif-apps"), 66 | `data-collapsible` = collapsible, 67 | `data-collapsed` = collapsed, 68 | `data-draggable` = draggable, 69 | `data-cls-panel` = paste0("shadow-",shadow), 70 | `data-cls-title` = paste0("bg-", title_color, " fg-white"), 71 | `data-cls-title-icon` = paste0("bg-", icon_color, " fg-white"), 72 | `data-cls-content` = paste0("bg-", content_color, " fg-white"), 73 | `data-cls-collapse-toggle` = paste0("bg-", collapse_color, " fg-white marker-light") 74 | ) 75 | ) 76 | 77 | # replace TRUE and FALSE by true and false for javascript 78 | panelProps <- lapply(panelProps, function(x) { 79 | if (identical(x, TRUE)) 80 | "true" 81 | else if (identical(x, FALSE)) 82 | "false" 83 | else x 84 | }) 85 | 86 | div <- shiny::tags$div 87 | propsTag <- do.call(div, panelProps) 88 | propsTag <- shiny::tagAppendChild(propsTag, ...) 89 | propsTag 90 | } 91 | -------------------------------------------------------------------------------- /inst/examples/app.R: -------------------------------------------------------------------------------- 1 | library(shiny) 2 | 3 | shiny::shinyApp( 4 | ui = metroPage( 5 | title = "metroUI design", 6 | 7 | metroContainer( 8 | HTML( 9 | paste0( 10 | '

Metro 4

11 |

The Components Library

12 |
13 | ' 14 | ) 15 | ), 16 | sliderInput("obs", "Number of observations:", 17 | min = 0, max = 1000, value = 500 18 | ), 19 | plotOutput("distPlot"), 20 | HTML( 21 | paste0( 22 | ' 44 | ' 45 | ), 46 | paste0( 47 | '
48 | 50 | 51 | Github 52 | 30 53 | 54 |
55 | 56 | Email 57 | 10 58 |
59 |
60 | 61 | Chrome 62 |
63 |
64 | 65 |
66 |
67 | 68 |
69 |
70 | 71 |
72 |
73 | 74 |
75 |
76 | 77 | Tables 78 |
79 |
80 | ' 81 | ) 82 | ) 83 | ) 84 | ), 85 | server = function(input, output) { 86 | output$distPlot <- renderPlot({ 87 | hist(rnorm(input$obs)) 88 | }) 89 | } 90 | ) 91 | -------------------------------------------------------------------------------- /docs/pkgdown.js: -------------------------------------------------------------------------------- 1 | /* http://gregfranko.com/blog/jquery-best-practices/ */ 2 | (function($) { 3 | $(function() { 4 | 5 | $('.navbar-fixed-top').headroom(); 6 | 7 | $('body').css('padding-top', $('.navbar').height() + 10); 8 | $(window).resize(function(){ 9 | $('body').css('padding-top', $('.navbar').height() + 10); 10 | }); 11 | 12 | $('body').scrollspy({ 13 | target: '#sidebar', 14 | offset: 60 15 | }); 16 | 17 | $('[data-toggle="tooltip"]').tooltip(); 18 | 19 | var cur_path = paths(location.pathname); 20 | var links = $("#navbar ul li a"); 21 | var max_length = -1; 22 | var pos = -1; 23 | for (var i = 0; i < links.length; i++) { 24 | if (links[i].getAttribute("href") === "#") 25 | continue; 26 | // Ignore external links 27 | if (links[i].host !== location.host) 28 | continue; 29 | 30 | var nav_path = paths(links[i].pathname); 31 | 32 | var length = prefix_length(nav_path, cur_path); 33 | if (length > max_length) { 34 | max_length = length; 35 | pos = i; 36 | } 37 | } 38 | 39 | // Add class to parent
  • , and enclosing
  • if in dropdown 40 | if (pos >= 0) { 41 | var menu_anchor = $(links[pos]); 42 | menu_anchor.parent().addClass("active"); 43 | menu_anchor.closest("li.dropdown").addClass("active"); 44 | } 45 | }); 46 | 47 | function paths(pathname) { 48 | var pieces = pathname.split("/"); 49 | pieces.shift(); // always starts with / 50 | 51 | var end = pieces[pieces.length - 1]; 52 | if (end === "index.html" || end === "") 53 | pieces.pop(); 54 | return(pieces); 55 | } 56 | 57 | // Returns -1 if not found 58 | function prefix_length(needle, haystack) { 59 | if (needle.length > haystack.length) 60 | return(-1); 61 | 62 | // Special case for length-0 haystack, since for loop won't run 63 | if (haystack.length === 0) { 64 | return(needle.length === 0 ? 0 : -1); 65 | } 66 | 67 | for (var i = 0; i < haystack.length; i++) { 68 | if (needle[i] != haystack[i]) 69 | return(i); 70 | } 71 | 72 | return(haystack.length); 73 | } 74 | 75 | /* Clipboard --------------------------*/ 76 | 77 | function changeTooltipMessage(element, msg) { 78 | var tooltipOriginalTitle=element.getAttribute('data-original-title'); 79 | element.setAttribute('data-original-title', msg); 80 | $(element).tooltip('show'); 81 | element.setAttribute('data-original-title', tooltipOriginalTitle); 82 | } 83 | 84 | if(ClipboardJS.isSupported()) { 85 | $(document).ready(function() { 86 | var copyButton = ""; 87 | 88 | $(".examples, div.sourceCode").addClass("hasCopyButton"); 89 | 90 | // Insert copy buttons: 91 | $(copyButton).prependTo(".hasCopyButton"); 92 | 93 | // Initialize tooltips: 94 | $('.btn-copy-ex').tooltip({container: 'body'}); 95 | 96 | // Initialize clipboard: 97 | var clipboardBtnCopies = new ClipboardJS('[data-clipboard-copy]', { 98 | text: function(trigger) { 99 | return trigger.parentNode.textContent; 100 | } 101 | }); 102 | 103 | clipboardBtnCopies.on('success', function(e) { 104 | changeTooltipMessage(e.trigger, 'Copied!'); 105 | e.clearSelection(); 106 | }); 107 | 108 | clipboardBtnCopies.on('error', function() { 109 | changeTooltipMessage(e.trigger,'Press Ctrl+C or Command+C to copy'); 110 | }); 111 | }); 112 | } 113 | })(window.jQuery || window.$) 114 | -------------------------------------------------------------------------------- /man/metroWindow.Rd: -------------------------------------------------------------------------------- 1 | % Generated by roxygen2: do not edit by hand 2 | % Please edit documentation in R/metroWindow.R 3 | \name{metroWindow} 4 | \alias{metroWindow} 5 | \title{Create a Metro 4 window} 6 | \usage{ 7 | metroWindow( 8 | ..., 9 | title = NULL, 10 | icon = NULL, 11 | shadow = TRUE, 12 | header_color = NULL, 13 | content_color = NULL, 14 | content_text_color = NULL, 15 | minimize = TRUE, 16 | closable = TRUE, 17 | draggable = FALSE, 18 | resizable = FALSE, 19 | width = NULL, 20 | height = NULL 21 | ) 22 | } 23 | \arguments{ 24 | \item{...}{Any UI element.} 25 | 26 | \item{title}{Window title.} 27 | 28 | \item{icon}{Window icon.} 29 | 30 | \item{shadow}{Whether to display a shadow around the window. TRUE by default.} 31 | 32 | \item{header_color}{Header background color.} 33 | 34 | \item{content_color}{Content background color.} 35 | 36 | \item{content_text_color}{Content text color.} 37 | 38 | \item{minimize}{Whether the window can be minimized. TRUE by default.} 39 | 40 | \item{closable}{Whether the window can be closed. TRUE by default.} 41 | 42 | \item{draggable}{Whether the window can be dragged. FALSE by default.} 43 | 44 | \item{resizable}{Whether the window can be resized. FALSE by default.} 45 | 46 | \item{width}{Window width.} 47 | 48 | \item{height}{Window height.} 49 | } 50 | \description{ 51 | Build a Metro window 52 | } 53 | \note{ 54 | It is better to use only 2 windows per page and embed them as in the 55 | example below. 56 | } 57 | \examples{ 58 | if(interactive()){ 59 | library(shiny) 60 | library(shinyMetroUi) 61 | 62 | shiny::shinyApp( 63 | ui = metroPage( 64 | allow_loading = TRUE, 65 | fluidRow( 66 | metroCell( 67 | metroWindow( 68 | title = "Window", 69 | resizable = TRUE, 70 | width = "100\%", 71 | header_color = "red", 72 | content_color = "black", 73 | content_text_color = "yellow", 74 | # content 75 | metroTilesGrid( 76 | metroTile( 77 | size = "small", 78 | color = "indigo", 79 | icon = "github", 80 | url = "https://github.com/olton/Metro-UI-CSS"), 81 | metroTile(size = "small", color = "green", icon = "envelop"), 82 | metroTile(size = "small", color = "blue", col_position = 1, row_position = 2), 83 | metroTile(size = "small", color = "orange", col_position = 2, row_position = 2), 84 | metroTile( 85 | size = "wide", 86 | color = "pink", 87 | sliderInput("obs", "Number of observations:", 88 | min = 0, max = 1000, value = 500 89 | ) 90 | ), 91 | metroTile( 92 | size = "large", 93 | color = "green", 94 | selected = TRUE, 95 | plotOutput("distPlot") 96 | ) 97 | ) 98 | ) 99 | ), 100 | metroCell( 101 | metroWindow( 102 | title = "Window", 103 | resizable = TRUE, 104 | width = "100\%", 105 | header_color = "red", 106 | content_color = "black", 107 | content_text_color = "yellow", 108 | # content 109 | metroTilesGrid( 110 | metroTile(size = "large",color = "brown", icon = "windows"), 111 | metroTile(size = "wide", color = "crimson", icon = "envelop"), 112 | metroTile(size = "small", color = "cobalt", col_position = 1, row_position = 2), 113 | metroTile(size = "small", color = "olive", col_position = 2, row_position = 2) 114 | ) 115 | ) 116 | ) 117 | ) 118 | ), 119 | server = function(input, output) { 120 | output$distPlot <- renderPlot({ 121 | hist(rnorm(input$obs)) 122 | }) 123 | } 124 | ) 125 | } 126 | 127 | } 128 | \author{ 129 | David Granjon, \email{dgranjon@ymail.com} 130 | } 131 | -------------------------------------------------------------------------------- /R/metro-grids.R: -------------------------------------------------------------------------------- 1 | #' Create a Metro 4 container 2 | #' 3 | #' Build a Metro container 4 | #' 5 | #' @param ... Any element. 6 | #' @param fullWidth Whether the container should take the whole width. FALSE by default. 7 | #' 8 | #' @author David Granjon, \email{dgranjon@@ymail.com} 9 | #' 10 | #' @export 11 | metroContainer <- function(..., fullWidth = FALSE){ 12 | shiny::tags$div(class = if (fullWidth) "container-fluid" else "container", ...) 13 | } 14 | 15 | 16 | 17 | #' Create a Metro 4 grid 18 | #' 19 | #' Build a Metro grid 20 | #' 21 | #' @param ... Any element. 22 | #' 23 | #' @author David Granjon, \email{dgranjon@@ymail.com} 24 | #' 25 | #' @export 26 | metroGrid <- function(...) { 27 | shiny::tags$div(class = "grid", ...) 28 | } 29 | 30 | 31 | 32 | #' Create a Metro 4 cell 33 | #' 34 | #' Build a Metro cell 35 | #' 36 | #' @param ... Any element. 37 | #' @param width Cell width. Between 1 and 12. 38 | #' @param offset Numeric: cell offset. Between 1 and 12 39 | #' @param gap Whether to display gaps between cells. TRUE by default. 40 | #' 41 | #' @author David Granjon, \email{dgranjon@@ymail.com} 42 | #' 43 | #' @export 44 | metroCell <- function(..., width = NULL, offset = NULL, gap = TRUE) { 45 | 46 | cellCl <- if (!is.null(width)) paste0("cell-", width) else "cell" 47 | if (!is.null(offset)) cellCl <- paste0(cellCl, " offset-", offset) 48 | if (gap) cellCl <- paste0(cellCl, " no-gap") 49 | 50 | shiny::tags$div( 51 | class = cellCl, 52 | ... 53 | ) 54 | } 55 | 56 | 57 | 58 | 59 | #' Create a Metro 4 row 60 | #' 61 | #' Build a Metro row 62 | #' 63 | #' @param ... Any element. 64 | #' @param xAlign How to horizontally align elements in the row: "start", "center" or "end". 65 | #' @param yAlign How to vertically align elements in the row: "start", "center" or "end". 66 | #' 67 | #' @author David Granjon, \email{dgranjon@@ymail.com} 68 | #' 69 | #' @export 70 | metroRow <- function(..., xAlign = c("start", "center", "end"), 71 | yAlign = c("start", "center", "end")) { 72 | 73 | yAlign <- match.arg(yAlign) 74 | xAlign <- match.arg(xAlign) 75 | 76 | rowCl <- paste0("row", " flex-align-", yAlign, " flex-justify-", xAlign) 77 | 78 | shiny::tags$div( 79 | class = rowCl, 80 | ... 81 | ) 82 | } 83 | 84 | 85 | 86 | 87 | #' Splitter 88 | #' 89 | #' Create a layout with panels that can be resized with splitter component 90 | #' 91 | #' @param panel1 Left panel. Wrap in \link[shiny]{tagList}. This can be a nested \link{metroSplitter}. 92 | #' @param panel2 Right panel. Wrap in \link[shiny]{tagList}. This can be a nested \link{metroSplitter}. 93 | #' @param vertical Vertical split. FALSE by default. 94 | #' @param minSize Minimum panel size. 100px by default. 95 | #' @param gutterSize Minimum gutter size (separator). 4 px by default. 96 | #' 97 | #' @note vertical does not work yet. 98 | #' 99 | #' @export 100 | #' 101 | #' @examples 102 | #' if (interactive()) { 103 | #' library(shiny) 104 | #' library(shinyMetroUi) 105 | #' 106 | #' shiny::shinyApp( 107 | #' ui = metroPage( 108 | #' metroSplitter( 109 | #' vertical = FALSE, 110 | #' gutterSize = 10, 111 | #' panel1 = tagList( 112 | #' sliderInput( 113 | #' "obs", 114 | #' "Number of observations:", 115 | #' min = 0, 116 | #' max = 1000, 117 | #' value = 500 118 | #' ), 119 | #' plotOutput("distPlot") 120 | #' ), 121 | #' panel2 = tagList( 122 | #' sliderInput( 123 | #' "obs2", 124 | #' "Number of observations:", 125 | #' min = 0, 126 | #' max = 1000, 127 | #' value = 500 128 | #' ), 129 | #' plotOutput("distPlot2") 130 | #' ) 131 | #' ) 132 | #' ), 133 | #' server = function(input, output) { 134 | #' output$distPlot <- renderPlot({ 135 | #' hist(rnorm(input$obs)) 136 | #' }) 137 | #' output$distPlot2 <- renderPlot({ 138 | #' hist(rnorm(input$obs2)) 139 | #' }) 140 | #' } 141 | #' ) 142 | #' } 143 | metroSplitter <- function(panel1, panel2, vertical = FALSE, minSize = 100, gutterSize = 4) { 144 | 145 | if (is.null(gutterSize)) gutterSize <- 4 146 | 147 | shiny::tags$div( 148 | `data-role` = "splitter", 149 | `data-split-mode` = if (vertical) "vertical" else NULL, 150 | `data-min-sizes` = if (!is.null(minSize)) minSize else NULL, 151 | `data-gutter-size`= gutterSize, 152 | class = "h-100", 153 | shiny::tags$div( 154 | class = "d-flex flex-justify-center flex-align-center", 155 | panel1 156 | ), 157 | shiny::tags$div( 158 | class = "d-flex flex-justify-center flex-align-center", 159 | panel2) 160 | ) 161 | } 162 | -------------------------------------------------------------------------------- /docs/404.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Page not found (404) • shinyMetroUi 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 51 | 52 | 53 | 54 | 55 | 56 | 57 |
    58 |
    59 | 101 | 102 | 103 | 104 |
    105 | 106 |
    107 |
    108 |
    109 |

    Page not found (404)

    110 |
    111 | 112 | Content not found. Please use links in the navbar. 113 | 114 |
    115 | 116 |
    117 | 118 | 119 | 120 |
    121 |
    122 |

    Developed by David Granjon.

    123 |
    124 | 125 |
    126 |

    Site built with pkgdown 1.4.1.

    127 |
    128 | 129 |
    130 |
    131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | -------------------------------------------------------------------------------- /R/metro-tiles.R: -------------------------------------------------------------------------------- 1 | #' Create a Metro 4 Tile 2 | #' 3 | #' Build a Metro tile 4 | #' 5 | #' @param ... Any UI element. 6 | #' @param title Tile title. 7 | #' @param icon Tile icon. 8 | #' @param url Tile external link. 9 | #' @param size Tile size. Choose among small, medium, wide or large. 10 | #' @param color Tile color. 11 | #' @param selected Whether the tile starts selected or not. FALSE by default. 12 | #' @param cover Image path or url that will cover the tile. 13 | #' @param col_position When tiles are in a grid and group, give the column position 14 | #' of the current tile. 15 | #' @param row_position When tiles are in a grid and group, give the row position 16 | #' of the current tile. 17 | #' 18 | #' @examples 19 | #' if(interactive()){ 20 | #' library(shiny) 21 | #' library(shinyMetroUi) 22 | #' 23 | #' shiny::shinyApp( 24 | #' ui = metroPage( 25 | #' metroTile( 26 | #' size = "small", 27 | #' color = "red", 28 | #' title = "My tile", 29 | #' icon = "apps" 30 | #' ), 31 | #' metroTile( 32 | #' size = "small", 33 | #' color = "green", 34 | #' metroBadge(1, color = "yellow", position = "inline") 35 | #' ), 36 | #' metroTile(size = "small", color = "blue"), 37 | #' metroTile(size = "small", color = "orange") 38 | #' ), 39 | #' server = function(input, output) {} 40 | #' ) 41 | #' } 42 | #' 43 | #' @author David Granjon, \email{dgranjon@@ymail.com} 44 | #' 45 | #' @export 46 | metroTile <- function(..., title = NULL, icon = NULL, url = NULL, 47 | size = c("small", "medium", "wide", "large"), 48 | color = NULL, selected = FALSE, cover = NULL, 49 | col_position = NULL, row_position = NULL){ 50 | 51 | size <- match.arg(size) 52 | tileClass <- "tile" 53 | if (selected) tileClass <- paste0(tileClass, " selected") 54 | if (!is.null(col_position)) tileClass <- paste0(tileClass, " col-", col_position) 55 | if (!is.null(row_position)) tileClass <- paste0(tileClass, " row-", row_position) 56 | if (!is.null(color)) tileClass <- paste0(tileClass, " bg-", color) 57 | 58 | tileProps <- list( 59 | class = tileClass, 60 | `data-role` = "tile", 61 | `data-size` = size, 62 | if (!is.null(cover)) `data-cover` = cover, 63 | ..., 64 | if (!is.null(icon)) shiny::tags$span(class = paste0("icon mif-", icon)), 65 | if (!is.null(title)) shiny::tags$span(class = "branding-bar", title) 66 | ) 67 | 68 | outerTag <- if (!is.null(url)) { 69 | shiny::tags$a 70 | } else { 71 | shiny::tags$div 72 | } 73 | 74 | tileTag <- do.call(outerTag, tileProps) 75 | if (!is.null(url)) tileTag <- shiny::tagAppendAttributes( 76 | tileTag, 77 | href = url, 78 | target = "_blank" 79 | ) 80 | tileTag 81 | 82 | } 83 | 84 | 85 | 86 | #' Create a Metro 4 Tiles Grid 87 | #' 88 | #' Build a Metro grid for tiles 89 | #' 90 | #' @param ... Insert metroTile inside. 91 | #' @param group Whether tiles are displayed by group. FALSE by default. 92 | #' @param title If group is TRUE, the group title. 93 | #' @param size Tile group size: between 1 and 10. 94 | #' 95 | #' @examples 96 | #' if(interactive()){ 97 | #' library(shiny) 98 | #' library(shinyMetroUi) 99 | #' 100 | #' shiny::shinyApp( 101 | #' ui = metroPage( 102 | #' metroTilesGrid( 103 | #' metroTile(size = "small", color = "red"), 104 | #' metroTile(size = "small", color = "green"), 105 | #' metroTile(size = "small", color = "blue", col_position = 1, row_position = 2), 106 | #' metroTile(size = "small", color = "orange", col_position = 2, row_position = 2), 107 | #' metroTile(size = "wide", color = "brown"), 108 | #' metroTile(size = "medium", color = "green", selected = TRUE) 109 | #' ), 110 | #' br(), br(), br(), 111 | #' metroTilesGrid( 112 | #' group = TRUE, 113 | #' size = 2, 114 | #' metroTile( 115 | #' size = "small", 116 | #' color = "indigo", 117 | #' icon = "github", 118 | #' url = "https://github.com/olton/Metro-UI-CSS"), 119 | #' metroTile(size = "small", color = "green", icon = "envelop"), 120 | #' metroTile(size = "small", color = "blue", col_position = 1, row_position = 2), 121 | #' metroTile(size = "small", color = "orange", col_position = 2, row_position = 2), 122 | #' metroTile( 123 | #' size = "wide", 124 | #' color = "pink", 125 | #' sliderInput("obs", "Number of observations:", 126 | #' min = 0, max = 1000, value = 500 127 | #' ) 128 | #' ), 129 | #' metroTile( 130 | #' size = "large", 131 | #' color = "green", 132 | #' selected = TRUE, 133 | #' plotOutput("distPlot") 134 | #' ) 135 | #' ) 136 | #' ), 137 | #' server = function(input, output) { 138 | #' output$distPlot <- renderPlot({ 139 | #' hist(rnorm(input$obs)) 140 | #' }) 141 | #' } 142 | #' ) 143 | #' } 144 | #' 145 | #' @author David Granjon, \email{dgranjon@@ymail.com} 146 | #' 147 | #' @export 148 | metroTilesGrid <- function(..., group = FALSE, title = NULL, size = 2) { 149 | 150 | tilesGridClass <- "tiles-grid" 151 | if (group) { 152 | if (!is.null(size)) tilesGridClass <- paste0(tilesGridClass, " size-", size) 153 | } 154 | 155 | shiny::tags$div( 156 | class = if (group) paste0(tilesGridClass, " tiles-group") else tilesGridClass, 157 | if (group) `data-group-title` = title, 158 | ... 159 | ) 160 | } 161 | -------------------------------------------------------------------------------- /docs/authors.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Authors • shinyMetroUi 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 51 | 52 | 53 | 54 | 55 | 56 | 57 |
    58 |
    59 | 101 | 102 | 103 | 104 |
    105 | 106 |
    107 |
    108 |
    109 |

    Authors

    110 |
    111 | 112 |
      113 |
    • 114 |

      David Granjon. Author, maintainer. 115 |

      116 |
      • 117 |
    • 118 |

      RinteRface. Copyright holder. 119 |

      120 |
      • 121 |
    • 122 |

      Sergey Pimenov. Contributor, copyright holder. 123 |
      Metro UI CSS

      124 |
      • 125 |
    126 | 127 |
    128 | 129 |
    130 | 131 | 132 | 133 |
    134 |
    135 |

    Developed by David Granjon.

    136 |
    137 | 138 |
    139 |

    Site built with pkgdown 1.4.1.

    140 |
    141 | 142 |
    143 |
    144 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | -------------------------------------------------------------------------------- /R/metroWindow.R: -------------------------------------------------------------------------------- 1 | #' Create a Metro 4 window 2 | #' 3 | #' Build a Metro window 4 | #' 5 | #' @param ... Any UI element. 6 | #' @param title Window title. 7 | #' @param icon Window icon. 8 | #' @param shadow Whether to display a shadow around the window. TRUE by default. 9 | #' @param header_color Header background color. 10 | #' @param content_color Content background color. 11 | #' @param content_text_color Content text color. 12 | #' @param minimize Whether the window can be minimized. TRUE by default. 13 | #' @param closable Whether the window can be closed. TRUE by default. 14 | #' @param draggable Whether the window can be dragged. FALSE by default. 15 | #' @param resizable Whether the window can be resized. FALSE by default. 16 | #' @param width Window width. 17 | #' @param height Window height. 18 | #' 19 | #' @note It is better to use only 2 windows per page and embed them as in the 20 | #' example below. 21 | #' 22 | #' @examples 23 | #' if(interactive()){ 24 | #' library(shiny) 25 | #' library(shinyMetroUi) 26 | #' 27 | #' shiny::shinyApp( 28 | #' ui = metroPage( 29 | #' allow_loading = TRUE, 30 | #' fluidRow( 31 | #' metroCell( 32 | #' metroWindow( 33 | #' title = "Window", 34 | #' resizable = TRUE, 35 | #' width = "100%", 36 | #' header_color = "red", 37 | #' content_color = "black", 38 | #' content_text_color = "yellow", 39 | #' # content 40 | #' metroTilesGrid( 41 | #' metroTile( 42 | #' size = "small", 43 | #' color = "indigo", 44 | #' icon = "github", 45 | #' url = "https://github.com/olton/Metro-UI-CSS"), 46 | #' metroTile(size = "small", color = "green", icon = "envelop"), 47 | #' metroTile(size = "small", color = "blue", col_position = 1, row_position = 2), 48 | #' metroTile(size = "small", color = "orange", col_position = 2, row_position = 2), 49 | #' metroTile( 50 | #' size = "wide", 51 | #' color = "pink", 52 | #' sliderInput("obs", "Number of observations:", 53 | #' min = 0, max = 1000, value = 500 54 | #' ) 55 | #' ), 56 | #' metroTile( 57 | #' size = "large", 58 | #' color = "green", 59 | #' selected = TRUE, 60 | #' plotOutput("distPlot") 61 | #' ) 62 | #' ) 63 | #' ) 64 | #' ), 65 | #' metroCell( 66 | #' metroWindow( 67 | #' title = "Window", 68 | #' resizable = TRUE, 69 | #' width = "100%", 70 | #' header_color = "red", 71 | #' content_color = "black", 72 | #' content_text_color = "yellow", 73 | #' # content 74 | #' metroTilesGrid( 75 | #' metroTile(size = "large",color = "brown", icon = "windows"), 76 | #' metroTile(size = "wide", color = "crimson", icon = "envelop"), 77 | #' metroTile(size = "small", color = "cobalt", col_position = 1, row_position = 2), 78 | #' metroTile(size = "small", color = "olive", col_position = 2, row_position = 2) 79 | #' ) 80 | #' ) 81 | #' ) 82 | #' ) 83 | #' ), 84 | #' server = function(input, output) { 85 | #' output$distPlot <- renderPlot({ 86 | #' hist(rnorm(input$obs)) 87 | #' }) 88 | #' } 89 | #' ) 90 | #' } 91 | #' 92 | #' @author David Granjon, \email{dgranjon@@ymail.com} 93 | #' 94 | #' @export 95 | metroWindow <- function(..., title = NULL, icon = NULL, shadow = TRUE, 96 | header_color = NULL, content_color = NULL, content_text_color = NULL, 97 | minimize = TRUE, closable = TRUE, 98 | draggable = FALSE, resizable = FALSE, width = NULL, 99 | height = NULL){ 100 | 101 | windowClass <- "p-2" 102 | 103 | whites <- c("light", "white", "grayWhite") 104 | blacks <- c("black", "dark") 105 | 106 | if (!is.null(content_color) && content_color %in% whites && content_text_color %in% whites) content_text_color <- "black" 107 | if (!is.null(content_color) && content_color %in% blacks && content_text_color %in% blacks) content_text_color <- "white" 108 | 109 | windowProps <- dropNulls( 110 | list( 111 | `data-role` = "window", 112 | `data-title` = title, 113 | `data-icon` = paste0(""), 114 | `data-btn-close` = closable, 115 | `data-btn-min` = minimize, 116 | `data-btn-max` = FALSE, 117 | `data-draggable` = draggable, 118 | `data-resizable` = resizable, 119 | `data-shadow` = shadow, 120 | `data-cls-caption` = if (!is.null(header_color)) paste0("bg-", header_color) else NULL, 121 | `data-cls-content` = if (!is.null(content_color) && !is.null(content_text_color)) { 122 | paste0("bg-", content_color, " fg-", content_text_color) 123 | } else { 124 | NULL 125 | }, 126 | `data-width` = width, 127 | `data-height` = height 128 | ) 129 | ) 130 | 131 | windowProps <- lapply(windowProps, function(x) { 132 | if (identical(x, TRUE)) 133 | "true" 134 | else if (identical(x, FALSE)) 135 | "false" 136 | else x 137 | }) 138 | 139 | div <- shiny::tags$div 140 | windowTag <- do.call(div, windowProps) 141 | windowTag <- shiny::tagAppendChild(windowTag, ...) 142 | windowTag <- shiny::tagAppendAttributes(windowTag, class = windowClass) 143 | windowTag 144 | } 145 | -------------------------------------------------------------------------------- /docs/pkgdown.css: -------------------------------------------------------------------------------- 1 | /* Sticky footer */ 2 | 3 | /** 4 | * Basic idea: https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/ 5 | * Details: https://github.com/philipwalton/solved-by-flexbox/blob/master/assets/css/components/site.css 6 | * 7 | * .Site -> body > .container 8 | * .Site-content -> body > .container .row 9 | * .footer -> footer 10 | * 11 | * Key idea seems to be to ensure that .container and __all its parents__ 12 | * have height set to 100% 13 | * 14 | */ 15 | 16 | html, body { 17 | height: 100%; 18 | } 19 | 20 | body > .container { 21 | display: flex; 22 | height: 100%; 23 | flex-direction: column; 24 | } 25 | 26 | body > .container .row { 27 | flex: 1 0 auto; 28 | } 29 | 30 | footer { 31 | margin-top: 45px; 32 | padding: 35px 0 36px; 33 | border-top: 1px solid #e5e5e5; 34 | color: #666; 35 | display: flex; 36 | flex-shrink: 0; 37 | } 38 | footer p { 39 | margin-bottom: 0; 40 | } 41 | footer div { 42 | flex: 1; 43 | } 44 | footer .pkgdown { 45 | text-align: right; 46 | } 47 | footer p { 48 | margin-bottom: 0; 49 | } 50 | 51 | img.icon { 52 | float: right; 53 | } 54 | 55 | img { 56 | max-width: 100%; 57 | } 58 | 59 | /* Fix bug in bootstrap (only seen in firefox) */ 60 | summary { 61 | display: list-item; 62 | } 63 | 64 | /* Typographic tweaking ---------------------------------*/ 65 | 66 | .contents .page-header { 67 | margin-top: calc(-60px + 1em); 68 | } 69 | 70 | /* Section anchors ---------------------------------*/ 71 | 72 | a.anchor { 73 | margin-left: -30px; 74 | display:inline-block; 75 | width: 30px; 76 | height: 30px; 77 | visibility: hidden; 78 | 79 | background-image: url(./link.svg); 80 | background-repeat: no-repeat; 81 | background-size: 20px 20px; 82 | background-position: center center; 83 | } 84 | 85 | .hasAnchor:hover a.anchor { 86 | visibility: visible; 87 | } 88 | 89 | @media (max-width: 767px) { 90 | .hasAnchor:hover a.anchor { 91 | visibility: hidden; 92 | } 93 | } 94 | 95 | 96 | /* Fixes for fixed navbar --------------------------*/ 97 | 98 | .contents h1, .contents h2, .contents h3, .contents h4 { 99 | padding-top: 60px; 100 | margin-top: -40px; 101 | } 102 | 103 | /* Sidebar --------------------------*/ 104 | 105 | #sidebar { 106 | margin-top: 30px; 107 | position: -webkit-sticky; 108 | position: sticky; 109 | top: 70px; 110 | } 111 | #sidebar h2 { 112 | font-size: 1.5em; 113 | margin-top: 1em; 114 | } 115 | 116 | #sidebar h2:first-child { 117 | margin-top: 0; 118 | } 119 | 120 | #sidebar .list-unstyled li { 121 | margin-bottom: 0.5em; 122 | } 123 | 124 | .orcid { 125 | height: 16px; 126 | /* margins are required by official ORCID trademark and display guidelines */ 127 | margin-left:4px; 128 | margin-right:4px; 129 | vertical-align: middle; 130 | } 131 | 132 | /* Reference index & topics ----------------------------------------------- */ 133 | 134 | .ref-index th {font-weight: normal;} 135 | 136 | .ref-index td {vertical-align: top;} 137 | .ref-index .icon {width: 40px;} 138 | .ref-index .alias {width: 40%;} 139 | .ref-index-icons .alias {width: calc(40% - 40px);} 140 | .ref-index .title {width: 60%;} 141 | 142 | .ref-arguments th {text-align: right; padding-right: 10px;} 143 | .ref-arguments th, .ref-arguments td {vertical-align: top;} 144 | .ref-arguments .name {width: 20%;} 145 | .ref-arguments .desc {width: 80%;} 146 | 147 | /* Nice scrolling for wide elements --------------------------------------- */ 148 | 149 | table { 150 | display: block; 151 | overflow: auto; 152 | } 153 | 154 | /* Syntax highlighting ---------------------------------------------------- */ 155 | 156 | pre { 157 | word-wrap: normal; 158 | word-break: normal; 159 | border: 1px solid #eee; 160 | } 161 | 162 | pre, code { 163 | background-color: #f8f8f8; 164 | color: #333; 165 | } 166 | 167 | pre code { 168 | overflow: auto; 169 | word-wrap: normal; 170 | white-space: pre; 171 | } 172 | 173 | pre .img { 174 | margin: 5px 0; 175 | } 176 | 177 | pre .img img { 178 | background-color: #fff; 179 | display: block; 180 | height: auto; 181 | } 182 | 183 | code a, pre a { 184 | color: #375f84; 185 | } 186 | 187 | a.sourceLine:hover { 188 | text-decoration: none; 189 | } 190 | 191 | .fl {color: #1514b5;} 192 | .fu {color: #000000;} /* function */ 193 | .ch,.st {color: #036a07;} /* string */ 194 | .kw {color: #264D66;} /* keyword */ 195 | .co {color: #888888;} /* comment */ 196 | 197 | .message { color: black; font-weight: bolder;} 198 | .error { color: orange; font-weight: bolder;} 199 | .warning { color: #6A0366; font-weight: bolder;} 200 | 201 | /* Clipboard --------------------------*/ 202 | 203 | .hasCopyButton { 204 | position: relative; 205 | } 206 | 207 | .btn-copy-ex { 208 | position: absolute; 209 | right: 0; 210 | top: 0; 211 | visibility: hidden; 212 | } 213 | 214 | .hasCopyButton:hover button.btn-copy-ex { 215 | visibility: visible; 216 | } 217 | 218 | /* headroom.js ------------------------ */ 219 | 220 | .headroom { 221 | will-change: transform; 222 | transition: transform 200ms linear; 223 | } 224 | .headroom--pinned { 225 | transform: translateY(0%); 226 | } 227 | .headroom--unpinned { 228 | transform: translateY(-100%); 229 | } 230 | 231 | /* mark.js ----------------------------*/ 232 | 233 | mark { 234 | background-color: rgba(255, 255, 51, 0.5); 235 | border-bottom: 2px solid rgba(255, 153, 51, 0.3); 236 | padding: 1px; 237 | } 238 | 239 | /* vertical spacing after htmlwidgets */ 240 | .html-widget { 241 | margin-bottom: 10px; 242 | } 243 | 244 | /* fontawesome ------------------------ */ 245 | 246 | .fab { 247 | font-family: "Font Awesome 5 Brands" !important; 248 | } 249 | 250 | /* don't display links in code chunks when printing */ 251 | /* source: https://stackoverflow.com/a/10781533 */ 252 | @media print { 253 | code a:link:after, code a:visited:after { 254 | content: ""; 255 | } 256 | } 257 | -------------------------------------------------------------------------------- /docs/reference/metroGrid.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Create a Metro 4 grid — metroGrid • shinyMetroUi 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 53 | 54 | 55 | 56 | 57 | 58 | 59 |
    60 |
    61 | 103 | 104 | 105 | 106 |
    107 | 108 |
    109 |
    110 |
    111 |

    Create a Metro 4 grid

    112 | Source: R/metro-grids.R 113 | 114 |
    115 | 116 |
    117 |

    Build a Metro grid

    118 |
    119 | 120 | 
    metroGrid(...)
    121 | 122 |

    Arguments

    123 | 124 | 125 | 126 | 127 | 128 | 129 |
    ...

    Any element.

    130 | 131 | 132 |
    133 | 142 |
    143 | 144 | 145 |
    146 |
    147 |

    Developed by David Granjon.

    148 |
    149 | 150 |
    151 |

    Site built with pkgdown 1.4.1.

    152 |
    153 | 154 |
    155 |
    156 | 157 | 158 | 159 | 160 | 161 | 162 | 163 | 164 | -------------------------------------------------------------------------------- /docs/reference/metroContainer.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Create a Metro 4 container — metroContainer • shinyMetroUi 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 53 | 54 | 55 | 56 | 57 | 58 | 59 |
    60 |
    61 | 103 | 104 | 105 | 106 |
    107 | 108 |
    109 |
    110 |
    111 |

    Create a Metro 4 container

    112 | Source: R/metro-grids.R 113 | 114 |
    115 | 116 |
    117 |

    Build a Metro container

    118 |
    119 | 120 | 
    metroContainer(..., fullWidth = FALSE)
    121 | 122 |

    Arguments

    123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 |
    ...

    Any element.

    fullWidth

    Whether the container should take the whole width. FALSE by default.

    134 | 135 | 136 |
    137 | 146 |
    147 | 148 | 149 |
    150 |
    151 |

    Developed by David Granjon.

    152 |
    153 | 154 |
    155 |

    Site built with pkgdown 1.4.1.

    156 |
    157 | 158 |
    159 |
    160 | 161 | 162 | 163 | 164 | 165 | 166 | 167 | 168 | -------------------------------------------------------------------------------- /docs/reference/metroUiContainer.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Create a Metro 4 container — metroUiContainer • shinyMetroUi 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 47 | 48 | 49 | 50 | 51 | 52 |
    53 |
    54 | 96 | 97 | 98 |
    99 | 100 |
    101 |
    102 |
    103 |

    Create a Metro 4 container

    104 | Source: R/metroUiContainer.R 105 | 106 |
    107 | 108 |
    109 | 110 |

    Build a metroUI container

    111 | 112 |
    113 | 114 | 
    metroUiContainer(...)
    115 | 116 |

    Arguments

    117 | 118 | 119 | 120 | 121 | 122 | 123 |
    ...

    Any element.

    124 | 125 | 126 |

    Examples

    127 | 
    if(interactive()){
128 |  library(shiny)
129 |  library(shinyMetroUi)
130 | 
131 |  shiny::shinyApp(
132 |    ui = metroUiPage(
133 |     metroUiContainer()
134 |    ),
135 |    server = function(input, output) {}
136 |  )
137 | }
    138 |
    139 | 152 |
    153 | 154 |
    155 |
    156 |

    Developed by David Granjon.

    157 |
    158 | 159 |
    160 |

    Site built with pkgdown.

    161 |
    162 | 163 |
    164 |
    165 | 166 | 167 | 168 | 169 | 170 | 171 | -------------------------------------------------------------------------------- /docs/reference/metroTab.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Create a Metro 4 tab — metroTab • shinyMetroUi 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 53 | 54 | 55 | 56 | 57 | 58 | 59 |
    60 |
    61 | 103 | 104 | 105 | 106 |
    107 | 108 |
    109 |
    110 |
    111 |

    Create a Metro 4 tab

    112 | Source: R/metro-tabs.R 113 | 114 |
    115 | 116 |
    117 |

    Build a Metro tab

    118 |
    119 | 120 | 
    metroTab(..., tabName, disable = FALSE)
    121 | 122 |

    Arguments

    123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 |
    ...

    Tab content.

    tabName

    Unique tab name.

    disable

    Whether the tab is disabled. FALSE by default

    138 | 139 | 140 |
    141 | 150 |
    151 | 152 | 153 |
    154 |
    155 |

    Developed by David Granjon.

    156 |
    157 | 158 |
    159 |

    Site built with pkgdown 1.4.1.

    160 |
    161 | 162 |
    163 |
    164 | 165 | 166 | 167 | 168 | 169 | 170 | 171 | 172 | -------------------------------------------------------------------------------- /docs/reference/metroUiPage.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Create a Metro 4 page — metroUiPage • shinyMetroUi 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 47 | 48 | 49 | 50 | 51 | 52 |
    53 |
    54 | 96 | 97 | 98 |
    99 | 100 |
    101 |
    102 |
    103 |

    Create a Metro 4 page

    104 | Source: R/metroUiPage.R 105 | 106 |
    107 | 108 |
    109 | 110 |

    Build a metroUI page

    111 | 112 |
    113 | 114 | 
    metroUiPage(..., title = NULL)
    115 | 116 |

    Arguments

    117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 |
    ...

    Any element.

    title

    Page title.

    128 | 129 | 130 |

    Examples

    131 | 
    if(interactive()){
132 |  library(shiny)
133 |  library(shinyMetroUi)
134 | 
135 |  shiny::shinyApp(
136 |    ui = metroUiPage(),
137 |    server = function(input, output) {}
138 |  )
139 | }
    140 |
    141 | 154 |
    155 | 156 |
    157 |
    158 |

    Developed by David Granjon.

    159 |
    160 | 161 |
    162 |

    Site built with pkgdown.

    163 |
    164 | 165 |
    166 |
    167 | 168 | 169 | 170 | 171 | 172 | 173 | -------------------------------------------------------------------------------- /docs/reference/metroCell.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Create a Metro 4 cell — metroCell • shinyMetroUi 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 53 | 54 | 55 | 56 | 57 | 58 | 59 |
    60 |
    61 | 103 | 104 | 105 | 106 |
    107 | 108 |
    109 |
    110 |
    111 |

    Create a Metro 4 cell

    112 | Source: R/metro-grids.R 113 | 114 |
    115 | 116 |
    117 |

    Build a Metro cell

    118 |
    119 | 120 | 
    metroCell(..., width = NULL, offset = NULL, gap = TRUE)
    121 | 122 |

    Arguments

    123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 |
    ...

    Any element.

    width

    Cell width. Between 1 and 12.

    offset

    Numeric: cell offset. Between 1 and 12

    gap

    Whether to display gaps between cells. TRUE by default.

    142 | 143 | 144 |
    145 | 154 |
    155 | 156 | 157 |
    158 |
    159 |

    Developed by David Granjon.

    160 |
    161 | 162 |
    163 |

    Site built with pkgdown 1.4.1.

    164 |
    165 | 166 |
    167 |
    168 | 169 | 170 | 171 | 172 | 173 | 174 | 175 | 176 | -------------------------------------------------------------------------------- /docs/reference/metroRow.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Create a Metro 4 row — metroRow • shinyMetroUi 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 53 | 54 | 55 | 56 | 57 | 58 | 59 |
    60 |
    61 | 103 | 104 | 105 | 106 |
    107 | 108 |
    109 |
    110 |
    111 |

    Create a Metro 4 row

    112 | Source: R/metro-grids.R 113 | 114 |
    115 | 116 |
    117 |

    Build a Metro row

    118 |
    119 | 120 | 
    metroRow(
121 |   ...,
122 |   xAlign = c("start", "center", "end"),
123 |   yAlign = c("start", "center", "end")
124 | )
    125 | 126 |

    Arguments

    127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 |
    ...

    Any element.

    xAlign

    How to horizontally align elements in the row: "start", "center" or "end".

    yAlign

    How to vertically align elements in the row: "start", "center" or "end".

    142 | 143 | 144 |
    145 | 154 |
    155 | 156 | 157 |
    158 |
    159 |

    Developed by David Granjon.

    160 |
    161 | 162 |
    163 |

    Site built with pkgdown 1.4.1.

    164 |
    165 | 166 |
    167 |
    168 | 169 | 170 | 171 | 172 | 173 | 174 | 175 | 176 | -------------------------------------------------------------------------------- /docs/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | shiny API for the Metro 4 Library • shinyMetroUi 9 | 10 | 11 | 12 | 13 | 14 | 16 | 17 | 21 | 22 | 23 |
    24 |
    67 | 68 | 69 | 70 | 71 |
    72 |
    73 |
    74 |

    75 | shinyMetroUi

    76 | 77 |
    78 |

    shiny API for Metro 4 Ui

    79 |
    80 |
    81 |

    82 | Installation

    83 | 
    # for the latest version
 84 | devtools::install_github("RinteRface/shinyMetroUi")
    85 |
    86 |
    87 |

    88 | Demo

    89 |

    Coming soon!

    90 |
    91 |
    92 |
    93 | 94 | 127 |
    128 | 129 | 130 |
    131 |

    Developed by David Granjon.

    132 |
    133 | 134 |
    135 |

    Site built with pkgdown 1.4.1.

    136 |
    137 | 138 |
    139 |
    140 | 141 | 142 | 143 | 144 | 145 | 146 | -------------------------------------------------------------------------------- /docs/reference/metroCol.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Create a Metro 4 column cell — metroCol • shinyMetroUi 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 47 | 48 | 49 | 50 | 51 | 52 |
    53 |
    54 | 96 | 97 | 98 |
    99 | 100 |
    101 |
    102 |
    103 |

    Create a Metro 4 column cell

    104 | Source: R/metroCol.R 105 | 106 |
    107 | 108 |
    109 | 110 |

    Build a Metro column

    111 | 112 |
    113 | 114 | 
    metroCol(..., width = NULL, offset = NULL)
    115 | 116 |

    Arguments

    117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 |
    ...

    Any UI element.

    width

    Column width. Between 1 and 12.

    offset

    Column offset (shift). NULL by default.

    132 | 133 | 134 |

    Examples

    135 | 
    if(interactive()){
136 |  library(shiny)
137 |  library(shinyMetroUi)
138 | 
139 |  shiny::shinyApp(
140 |    ui = metroPage(
141 |     fluidRow(
142 |      metroCol(width = 4, 1),
143 |      metroCol(width = 4, 2),
144 |      metroCol(width = 4, 3)
145 |     )
146 |    ),
147 |    server = function(input, output) {}
148 |  )
149 | }
    150 |
    151 | 164 |
    165 | 166 |
    167 |
    168 |

    Developed by David Granjon.

    169 |
    170 | 171 |
    172 |

    Site built with pkgdown.

    173 |
    174 | 175 |
    176 |
    177 | 178 | 179 | 180 | 181 | 182 | 183 | -------------------------------------------------------------------------------- /docs/reference/charmsToggle.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Create a Metro 4 charms toggle — charmsToggle • shinyMetroUi 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 53 | 54 | 55 | 56 | 57 | 58 | 59 |
    60 |
    61 | 103 | 104 | 105 | 106 |
    107 | 108 |
    109 |
    110 |
    111 |

    Create a Metro 4 charms toggle

    112 | Source: R/metroCharms.R 113 | 114 |
    115 | 116 |
    117 |

    Build a Metro charms toggle button

    118 |
    119 | 120 | 
    charmsToggle(..., id)
    121 | 122 |

    Arguments

    123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 |
    ...

    Button text or icon.

    id

    Charms unique id. Needed by the charmsToggle.

    134 | 135 | 136 |

    Examples

    137 | 
    if(interactive()){
138 |  library(shiny)
139 |  library(shinyMetroUi)
140 | 
141 |  shiny::shinyApp(
142 |    ui = metroPage(
143 |     fluidRow(
144 |      charmsToggle(id = "mycharm", "Toggle charms")
145 |     )
146 |    ),
147 |    server = function(input, output) {}
148 |  )
149 | }
    150 |
    151 | 161 |
    162 | 163 | 164 |
    165 |
    166 |

    Developed by David Granjon.

    167 |
    168 | 169 |
    170 |

    Site built with pkgdown 1.4.1.

    171 |
    172 | 173 |
    174 |
    175 | 176 | 177 | 178 | 179 | 180 | 181 | 182 | 183 | -------------------------------------------------------------------------------- /docs/reference/metroPage.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Create a Metro 4 page — metroPage • shinyMetroUi 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 53 | 54 | 55 | 56 | 57 | 58 | 59 |
    60 |
    61 | 103 | 104 | 105 | 106 |
    107 | 108 |
    109 |
    110 |
    111 |

    Create a Metro 4 page

    112 | Source: R/metroPage.R 113 | 114 |
    115 | 116 |
    117 |

    Build a metroUI page

    118 |
    119 | 120 | 
    metroPage(..., title = NULL, allow_loading = FALSE)
    121 | 122 |

    Arguments

    123 | 124 | 125 | 126 | 127 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 |
    ...

    Any element. They are inserted in a grid. Use the shiny fluidRow function 128 | to create a row and insert metroUiCol inside. The maximum with is 12 129 | (3 columns or lenght 4, 4 columns of lenght 3, ...).

    title

    Page title.

    allow_loading

    Whether to allow loading before display the app content. FALSE by default.

    140 | 141 | 142 |

    Examples

    143 | 
    if(interactive()){
144 |  library(shiny)
145 |  library(shinyMetroUi)
146 | 
147 |  shiny::shinyApp(
148 |    ui = metroPage(),
149 |    server = function(input, output) {}
150 |  )
151 | }
    152 |
    153 | 163 |
    164 | 165 | 166 |
    167 |
    168 |

    Developed by David Granjon.

    169 |
    170 | 171 |
    172 |

    Site built with pkgdown 1.4.1.

    173 |
    174 | 175 |
    176 |
    177 | 178 | 179 | 180 | 181 | 182 | 183 | 184 | 185 | -------------------------------------------------------------------------------- /docs/reference/metroBadge.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Create a Metro 4 badge — metroBadge • shinyMetroUi 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 53 | 54 | 55 | 56 | 57 | 58 | 59 |
    60 |
    61 | 103 | 104 | 105 | 106 |
    107 | 108 |
    109 |
    110 |
    111 |

    Create a Metro 4 badge

    112 | Source: R/metroBadge.R 113 | 114 |
    115 | 116 |
    117 |

    Build a Metro badge

    118 |
    119 | 120 | 
    metroBadge(..., position = NULL, text_color = NULL, color = NULL)
    121 | 122 |

    Arguments

    123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 |
    ...

    Badge text.

    position

    Badge position: inside, inline or NULL

    text_color

    Badge text color. Black by default.

    color

    Badge background color. No background by default.

    142 | 143 | 144 |

    Examples

    145 | 
    if(interactive()){
146 |  library(shiny)
147 |  library(shinyMetroUi)
148 | 
149 |  shiny::shinyApp(
150 |    ui = metroPage(
151 |      metroGrid(
152 |       metroRow(
153 |        xAlign = "center",
154 |        yAlign = "center",
155 |        metroCell(metroBadge(4, color = "red")),
156 |        metroCell(metroBadge(4, color = "yellow")),
157 |        metroCell(metroBadge(4, color = "green"))
158 |      )
159 |     )
160 |    ),
161 |    server = function(input, output) {}
162 |  )
163 | }
    164 |
    165 | 175 |
    176 | 177 | 178 |
    179 |
    180 |

    Developed by David Granjon.

    181 |
    182 | 183 |
    184 |

    Site built with pkgdown 1.4.1.

    185 |
    186 | 187 |
    188 |
    189 | 190 | 191 | 192 | 193 | 194 | 195 | 196 | 197 | -------------------------------------------------------------------------------- /docs/reference/updateMetroCheck.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Change the value of a checkbox input on the client — updateMetroCheck • shinyMetroUi 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 53 | 54 | 55 | 56 | 57 | 58 | 59 |
    60 |
    61 | 103 | 104 | 105 | 106 |
    107 | 108 |
    109 |
    110 |
    111 |

    Change the value of a checkbox input on the client

    112 | Source: R/metro-update-inputs.R 113 | 114 |
    115 | 116 |
    117 |

    Change the value of a checkbox input on the client

    118 |
    119 | 120 | 
    updateMetroCheck(session, inputId, label = NULL, value = NULL)
    121 | 122 |

    Arguments

    123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 |
    session

    The session object passed to function given to the server.

    inputId

    The id of the input object.

    label

    The label to set for the input object.

    value

    The value to set for the input object.

    142 | 143 | 144 |

    Examples

    145 | 
    if (interactive()) {
146 |  library(shiny)
147 |  library(shinyMetroUi)
148 | 
149 |  shiny::shinyApp(
150 |   ui = metroPage(
151 |     actionButton("go", "Update checkbox"),
152 |     metroCheck(inputId = "checkbox1", label = "Checkbox", labelSide = "right")
153 |   ),
154 |   server = function(input, output, session) {
155 |     observeEvent(input$go, {
156 |       updateMetroCheck(session, inputId = "checkbox1", value = TRUE)
157 |     })
158 |   }
159 |  )
160 | }
    161 |
    162 | 170 |
    171 | 172 | 173 |
    174 |
    175 |

    Developed by David Granjon.

    176 |
    177 | 178 |
    179 |

    Site built with pkgdown 1.4.1.

    180 |
    181 | 182 |
    183 |
    184 | 185 | 186 | 187 | 188 | 189 | 190 | 191 | 192 | -------------------------------------------------------------------------------- /docs/reference/metroTabs.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Create a Metro 4 tab container — metroTabs • shinyMetroUi 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 53 | 54 | 55 | 56 | 57 | 58 | 59 |
    60 |
    61 | 103 | 104 | 105 | 106 |
    107 | 108 |
    109 |
    110 |
    111 |

    Create a Metro 4 tab container

    112 | Source: R/metro-tabs.R 113 | 114 |
    115 | 116 |
    117 |

    Build a Metro tab container

    118 |
    119 | 120 | 
    metroTabs(
121 |   ...,
122 |   mode = NULL,
123 |   position = c("horizontal", "vertical"),
124 |   align = c("start", "center", "end")
125 | )
    126 | 127 |

    Arguments

    128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 | 142 | 143 | 144 | 145 | 146 |
    ...

    Slot for metroTab.

    mode

    Tab mode: NULL or "pills", "text" and "group".

    position

    Tab position: "horizontal" by default or "vertical".

    align

    Tab align: "start", "center" or "end".

    147 | 148 | 149 |

    Examples

    150 | 
    if(interactive()){
151 |  library(shiny)
152 |  library(shinyMetroUi)
153 | 
154 |  shiny::shinyApp(
155 |    ui = metroPage(
156 |      metroTabs(
157 |       mode = "pills",
158 |       position = "horizontal",
159 |       metroTab(tabName = "Tab 1", "test 1"),
160 |       metroTab(tabName = "Tab 2", "test 2"),
161 |       metroTab(tabName = "Tab 3", "test 3")
162 |      )
163 |    ),
164 |    server = function(input, output) {}
165 |  )
166 | }
    167 |
    168 | 178 |
    179 | 180 | 181 |
    182 |
    183 |

    Developed by David Granjon.

    184 |
    185 | 186 |
    187 |

    Site built with pkgdown 1.4.1.

    188 |
    189 | 190 |
    191 |
    192 | 193 | 194 | 195 | 196 | 197 | 198 | 199 | 200 | -------------------------------------------------------------------------------- /docs/reference/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Function reference • shinyMetroUi 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 51 | 52 | 53 | 54 | 55 | 56 | 57 |
    58 |
    59 | 101 | 102 | 103 | 104 |
    105 | 106 |
    107 |
    108 |
    109 |

    Reference

    110 |
    111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 126 | 127 | 128 | 129 | 132 | 133 | 134 | 135 | 138 | 139 | 140 | 141 | 144 | 145 | 146 | 147 | 150 | 151 | 152 | 153 | 156 | 157 | 158 | 159 | 162 | 163 | 164 | 165 | 168 | 169 | 170 | 171 | 174 | 175 | 176 | 177 | 180 | 181 | 182 | 183 | 186 | 187 | 188 | 189 | 192 | 193 | 194 | 195 | 198 | 199 | 200 | 201 | 204 | 205 | 206 | 207 | 210 | 211 | 212 | 213 | 216 | 217 | 218 | 219 | 222 | 223 | 224 | 225 | 228 | 229 | 230 | 231 |
    123 |

    All functions

    124 |

    125 |
    130 |

    charmsToggle()

    131 |

    Create a Metro 4 charms toggle

    136 |

    metroBadge()

    137 |

    Create a Metro 4 badge

    142 |

    metroCell()

    143 |

    Create a Metro 4 cell

    148 |

    metroCharms()

    149 |

    Create a Metro 4 charms

    154 |

    metroCheck()

    155 |

    Checkbox

    160 |

    metroContainer()

    161 |

    Create a Metro 4 container

    166 |

    metroGrid()

    167 |

    Create a Metro 4 grid

    172 |

    metroPage()

    173 |

    Create a Metro 4 page

    178 |

    metroPanel()

    179 |

    Create a Metro 4 Panel

    184 |

    metroRow()

    185 |

    Create a Metro 4 row

    190 |

    metroSplitter()

    191 |

    Splitter

    196 |

    metroTab()

    197 |

    Create a Metro 4 tab

    202 |

    metroTabs()

    203 |

    Create a Metro 4 tab container

    208 |

    metroTile()

    209 |

    Create a Metro 4 Tile

    214 |

    metroTilesGrid()

    215 |

    Create a Metro 4 Tiles Grid

    220 |

    metroWindow()

    221 |

    Create a Metro 4 window

    226 |

    updateMetroCheck()

    227 |

    Change the value of a checkbox input on the client

    232 |
    233 | 234 | 240 |
    241 | 242 | 243 |
    244 |
    245 |

    Developed by David Granjon.

    246 |
    247 | 248 |
    249 |

    Site built with pkgdown 1.4.1.

    250 |
    251 | 252 |
    253 |
    254 | 255 | 256 | 257 | 258 | 259 | 260 | 261 | 262 | -------------------------------------------------------------------------------- /docs/reference/metroCharms.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Create a Metro 4 charms — metroCharms • shinyMetroUi 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 53 | 54 | 55 | 56 | 57 | 58 | 59 |
    60 |
    61 | 103 | 104 | 105 | 106 |
    107 | 108 |
    109 |
    110 |
    111 |

    Create a Metro 4 charms

    112 | Source: R/metroCharms.R 113 | 114 |
    115 | 116 |
    117 |

    Build a Metro charms

    118 |
    119 | 120 | 
    metroCharms(
121 |   ...,
122 |   id,
123 |   position = c("right", "left", "top", "bottom"),
124 |   opacity = NULL,
125 |   background = "back"
126 | )
    127 | 128 |

    Arguments

    129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 150 | 151 |
    ...

    Any UI element.

    id

    Charms unique id. Needed by the charmsToggle.

    position

    Charms position: right, left, top or bottom.

    opacity

    Charms opacity. NULL by default. Between 0 and 1.

    background

    Charms background color. "black" by default.

    152 | 153 | 154 |

    Examples

    155 | 
    if(interactive()){
156 |  library(shiny)
157 |  library(shinyMetroUi)
158 | 
159 |  shiny::shinyApp(
160 |    ui = metroPage(
161 |     br(), br(), br(), br(),
162 |     charmsToggle(id = "mycharm", "Toggle charms"),
163 |     metroCharms(
164 |      id = "mycharm",
165 |      background = "dark",
166 |      position = "top",
167 |      opacity = "0.5",
168 |      sliderInput(
169 |       "obs",
170 |       "Number of observations:",
171 |       min = 0,
172 |       max = 1000,
173 |       value = 500
174 |      )
175 |     )
176 |    ),
177 |    server = function(input, output) {}
178 |  )
179 | }
    180 |
    181 | 191 |
    192 | 193 | 194 |
    195 |
    196 |

    Developed by David Granjon.

    197 |
    198 | 199 |
    200 |

    Site built with pkgdown 1.4.1.

    201 |
    202 | 203 |
    204 |
    205 | 206 | 207 | 208 | 209 | 210 | 211 | 212 | 213 | -------------------------------------------------------------------------------- /docs/reference/metroCheck.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Checkbox — metroCheck • shinyMetroUi 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 53 | 54 | 55 | 56 | 57 | 58 | 59 |
    60 |
    61 | 103 | 104 | 105 | 106 |
    107 | 108 |
    109 |
    110 |
    111 |

    Checkbox

    112 | Source: R/metro-inputs.R 113 | 114 |
    115 | 116 |
    117 |

    Create a customizable checkbox with support for highly used options

    118 |
    119 | 120 | 
    metroCheck(
121 |   inputId,
122 |   label,
123 |   value = FALSE,
124 |   disabled = FALSE,
125 |   style = c("1", "2"),
126 |   labelSide = c("left", "right")
127 | )
    128 | 129 |

    Arguments

    130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | 153 | 154 | 155 | 156 |
    inputId

    Unique input id.

    label

    Checkbox label.

    value

    Whether the checkbox is checked at start. Default to FALSE.

    disabled

    Whether the checkbox is disabled at start. Default to FALSE.

    style

    Checkbox style: either "1" (fill) or "3" (outline).

    labelSide

    Label side: "left" or "right".

    157 | 158 | 159 |

    Examples

    160 | 
    if (interactive()) {
161 |  library(shiny)
162 |  library(shinyMetroUi)
163 | 
164 |  shiny::shinyApp(
165 |   ui = metroPage(
166 |     metroCheck(
167 |      inputId = "checkbox1",
168 |      label = "Checkbox",
169 |      labelSide = "right"
170 |    ),
171 |     metroCheck(
172 |      inputId = "checkbox2",
173 |      label = "Checkbox checked",
174 |      value = TRUE,
175 |      labelSide = "right"
176 |     ),
177 |     metroCheck(
178 |      inputId = "checkbox3",
179 |      label = "Checkbox disabled",
180 |      disabled = TRUE,
181 |      labelSide = "right"
182 |     ),
183 |     metroCheck(
184 |      inputId = "checkbox4",
185 |      label = "Checkbox style 2",
186 |      style = "2",
187 |      labelSide = "left"
188 |     ),
189 |   ),
190 |   server = function(input, output) {}
191 |  )
192 | }
    193 |
    194 | 202 |
    203 | 204 | 205 | 215 |
    216 | 217 | 218 | 219 | 220 | 221 | 222 | 223 | 224 | --------------------------------------------------------------------------------