diff --git a/.github/workflows/R-CMD-check.yaml b/.github/workflows/R-CMD-check.yaml index fef8e7b2..153a2dcb 100644 --- a/.github/workflows/R-CMD-check.yaml +++ b/.github/workflows/R-CMD-check.yaml @@ -1,9 +1,5 @@ # Workflow derived from https://github.com/r-lib/actions/tree/master/examples # Need help debugging build failures? Start at https://github.com/r-lib/actions#where-to-find-help -# -# NOTE: This workflow is overkill for most R packages and -# check-standard.yaml is likely a better choice. -# usethis::use_github_action("check-standard") will install it. on: push: branches: [main, master] @@ -23,18 +19,10 @@ jobs: matrix: config: - {os: macOS-latest, r: 'release'} - - {os: windows-latest, r: 'release'} - # Use 3.6 to trigger usage of RTools35 - - {os: windows-latest, r: '3.6'} - - # Use older ubuntu to maximise backward compatibility - - {os: ubuntu-18.04, r: 'devel', http-user-agent: 'release'} - - {os: ubuntu-18.04, r: 'release'} - - {os: ubuntu-18.04, r: 'oldrel-1'} - - {os: ubuntu-18.04, r: 'oldrel-2'} - - {os: ubuntu-18.04, r: 'oldrel-3'} - - {os: ubuntu-18.04, r: 'oldrel-4'} + - {os: ubuntu-latest, r: 'devel', http-user-agent: 'release'} + - {os: ubuntu-latest, r: 'release'} + - {os: ubuntu-latest, r: 'oldrel-1'} env: GITHUB_PAT: ${{ secrets.GITHUB_TOKEN }} @@ -42,16 +30,20 @@ jobs: steps: - uses: actions/checkout@v3 + - uses: r-lib/actions/setup-pandoc@v2 - with: - pandoc-version: '2.17.1' # The pandoc version to download (if necessary) and use. + - uses: r-lib/actions/setup-r@v2 + with: + r-version: ${{ matrix.config.r }} + http-user-agent: ${{ matrix.config.http-user-agent }} + use-public-rspm: true + - uses: r-lib/actions/setup-r-dependencies@v2 with: - extra-packages: - any::rcmdcheck + extra-packages: | + rcmdcheck - needs: check - uses: r-lib/actions/check-r-package@v2 - name: Show testthat output diff --git a/DESCRIPTION b/DESCRIPTION index 41640738..8202ea07 100644 --- a/DESCRIPTION +++ b/DESCRIPTION @@ -1,7 +1,7 @@ Package: shinyMobile Type: Package Title: Mobile Ready 'shiny' Apps with Standalone Capabilities -Version: 1.0.0 +Version: 1.0.1 Authors@R: c( person("David", "Granjon", email = "dgranjon@ymail.com", role = c("aut", "cre")), person("Victor", "Perrier", email = "info@dreamrs.fr", role = "aut"), @@ -23,7 +23,7 @@ License: GPL-2 Encoding: UTF-8 URL: https://github.com/RinteRface/shinyMobile, https://rinterface.github.io/shinyMobile/ BugReports: https://github.com/RinteRface/shinyMobile/issues -RoxygenNote: 7.2.1 +RoxygenNote: 7.2.3 Suggests: knitr, rmarkdown, @@ -34,5 +34,6 @@ Suggests: shinyWidgets, apexcharter, ggplot2, - dplyr + dplyr, + bslib VignetteBuilder: knitr diff --git a/NEWS.md b/NEWS.md index 9254e5f2..ccce8905 100644 --- a/NEWS.md +++ b/NEWS.md @@ -1,3 +1,16 @@ +# shinyMobile 1.0.1.9000 + +## New +- Added webR to pkgdown infrastructure which allows to run shinylive +apps in the documentation. + +## Minor change +- Add `limit` to `f7AutoComplete()`. Thanks @bthieurmel. + +## Bug fixes +- Fix ignored __height__ in `f7Card()` (Typo). +- Fix CRAN note. + # shinyMobile 1.0.0 ## New @@ -52,7 +65,7 @@ This release only fixes an issue with Shiny 1.7.0 with a failing unit [test](htt # shinyMobile 0.9.0 -This release also fixes an issue with R CMD check and [htmltools](https://github.com/RinteRface/shinyMobile/runs/3133178817?check_suite_focus=true#step:10:119) +This release also fixes an issue with R CMD check and htmltools. ## Breaking change - `f7Link()` __icon__ now expects `f7Icon()`. __label__ is not mandatory anymore. diff --git a/R/f7-inputs.R b/R/f7-inputs.R index 99927bc5..434cef71 100644 --- a/R/f7-inputs.R +++ b/R/f7-inputs.R @@ -21,6 +21,7 @@ #' Only if openIn is "dropdown". #' @param multiple Whether to allow multiple value selection. Only works #' when openIn is 'popup' or 'page'. +#' @param limit Limit number of maximum displayed items in autocomplete per query #' #' @rdname autocomplete #' @@ -75,7 +76,7 @@ f7AutoComplete <- function(inputId, label, placeholder = NULL, value = choices[1], choices, openIn = c("popup", "page", "dropdown"), typeahead = TRUE, expandInput = TRUE, closeOnSelect = FALSE, - dropdownPlaceholderText = NULL, multiple = FALSE) { + dropdownPlaceholderText = NULL, multiple = FALSE, limit = NULL) { type <- match.arg(openIn) @@ -90,7 +91,8 @@ f7AutoComplete <- function(inputId, label, placeholder = NULL, class = "autocomplete-input", `data-choices` = choices, `data-value` = value, - `data-open-in` = type + `data-open-in` = type, + `data-limit` = limit ) # specific props diff --git a/R/f7Card.R b/R/f7Card.R index 9ad2da9a..6e66943c 100644 --- a/R/f7Card.R +++ b/R/f7Card.R @@ -64,7 +64,7 @@ f7Card <- function(..., image = NULL, title = NULL, footer = NULL, outline = FAL cardStyle <- NULL if (!is.null(height)) { - style <- paste0("height: ", shiny::validateCssUnit(height), " overflow-y: auto;") + cardStyle <- paste0("height: ", shiny::validateCssUnit(height), "; overflow-y: auto;") } # content diff --git a/R/f7Messages.R b/R/f7Messages.R index 678fa469..9a1f621f 100644 --- a/R/f7Messages.R +++ b/R/f7Messages.R @@ -279,7 +279,7 @@ f7Message <- function(text, name, type = c("sent", "received"), #' #' \code{updateF7Messages} add messages to an \link{f7Messages} container. #' -#' @param id Reference to link{f7Messages} container. +#' @param id Reference to \link{f7Messages} container. #' @param showTyping Show typing when a new message comes. Default to FALSE. #' Does not work yet... #' @param messages List of \link{f7Messages}. diff --git a/R/pwa-dependencies.R b/R/pwa-dependencies.R index 93337373..08892853 100644 --- a/R/pwa-dependencies.R +++ b/R/pwa-dependencies.R @@ -11,7 +11,7 @@ add_pwa_deps <- function(tag) { pwa_deps <- htmlDependency( name = "pwa-utils", version = packageVersion("shinyMobile"), - src = c(file = "shinyMobile-1.0.0"), + src = c(file = "shinyMobile-1.0.1"), head = " diff --git a/R/shinyMobile-dependencies.R b/R/shinyMobile-dependencies.R index d8ace46c..c232b31f 100644 --- a/R/shinyMobile-dependencies.R +++ b/R/shinyMobile-dependencies.R @@ -11,7 +11,7 @@ add_shinyMobile_deps <- function(tag) { shinyMobile_deps <- htmlDependency( name = "shinyMobile", version = packageVersion("shinyMobile"), - src = c(file = "shinyMobile-1.0.0"), + src = c(file = "shinyMobile-1.0.1"), script = "js/shinyMobile.min.js", stylesheet = "css/shinyMobile.css", package = "shinyMobile", diff --git a/R/utils.R b/R/utils.R index 66ec3605..c6c9e94e 100644 --- a/R/utils.R +++ b/R/utils.R @@ -201,3 +201,36 @@ get_args <- function(level) { cl <- match.call(definition=f, call=cl) as.list(cl)[-1] } + +#' Create shinylive iframe +#' +#' @param app_code base64 app code. You can create it from https://shinylive.io/r +#' by writing code and click on share and copy the link. The code is located at +#' the end of the url. +#' @param mode How to display the shinylive app. Default to app mode. +#' @param header Whether to display the shinylive header. Default to TRUE. +#' +#' @keywords internal +create_app_link <- function(app_code, mode = c("app", "editor"), header = TRUE) { + mode <- match.arg(mode) + + app_url <- sprintf( + "https://shinylive.io/r/%s/#code=%s", mode, app_code + ) + + if (!header) { + app_url <- paste0(app_url, "&h=0") + } + + shiny::tags$iframe( + # To allow the content to fill the full screen card + class = "html-fill-item", + src = app_url, + height = "700", + width = "100%", + style = "border: 1px solid rgba(0,0,0,0.175); border-radius: .375rem;", + allowfullscreen = "", + allow = "autoplay", + `data-external` = "1" + ) +} diff --git a/README.md b/README.md index 7f53b6a9..5ccd96d7 100644 --- a/README.md +++ b/README.md @@ -18,21 +18,9 @@ install.packages("shinyMobile") devtools::install_github("RinteRface/shinyMobile") ``` - -## Cheatsheet - - - - ## Demo -A running demo is available here : https://dgranjon.shinyapps.io/miniUI2Demo/. -Left side: android demo, right side: iOS demo. - - -![](man/figures/demo.png) - - +A running demo is available [here](https://shinylive.io/r/app/#h=0&code=NobwRAdghgtgpmAXGKAHVA6ASmANGAYwHsIAXOMpMAGwEsAjAJykYE8AKAZwAtaJWAlAB0IdJiw48+rALJF6tanGEQRAYgAEnIgFdGBOBphEAJjqWcRhgDwBaDRQButRiXhl2K1FFLcNdrVZOchgMADNFOHYhMDgAD1hUCwB6AHMoaiU2ZNIoek5kmNwNbwIAayhUwwBeDRipfjkFJRiVTjQkjhENDTpg8MjOaIgenu9fXG7RvgJqHRM4DBMXTg1agDEAQQAZAGUAUUmR0fHyRhHamOwiqZ7aVIgiRkWCKE4ajQAVLABVfamBEcemEdBACKRaCR2GEBBoQFpdPoohElBhxtx2OjijDitQiK9qGsHLCAL4iFTqLS8fgaDoiBqsTboYY9HS0IlhADsAAVKlFbrTMkQAO7cgDqmyJ3z+xSIqAhJFWtT6pHYJhYZSJWz2hw0KKUJi1OwOxVQzzxUAWjClv32gIFXM+eW2UFYulVAp6HXoLA5nKZqB9jBZo1DXPWSji0M5ACEoOV2LlGFVSABJQ2XMC5fJwUitbGcgBy8VVSZT6aJMWz7zzYAE9uOoeBnN2cBYBG4QfYtAzdTA73b3AAjEUNHw6BAPtLdUl43BuERqFbK2BPmwjIYSBpfIYACy+bd5ACErU9GgbTY3nHaVSDfpkcGvfLjwb4qB0ad7MRgrHgT9vLCjrOBgLkucDWpmD7-nA+Znt4k7UEqh6pNstDBCGl5cryCEYZeY5fmA8FwNQ2xwGEtZAnhPQQqQSgrqR5EaNhxE3I2eGcD2HwxEo5GsVR1HcHA8ArnQqTcBRZ6hjEMbUHksl8fxZFhHA4Irs8jhttQMSSeelGYTyUA4Tp1G0LRXFgFg9ziUxhksXgxlaJxalWRJbGXjuwmZuqjBlApVHSbJ9DyfZblNkpKmkCuxAaYw2mhT0KiXheTbQI4d61FyhZQGlLC4aGNF0ZmDJNJEflNpwOj0AV5lhE8Gi7NSrBlaG3BQC4E5Traenla1JgijaMo6TxpDMYStTTt1oaMC5o0DYcOkKKkVQQV8XU6aQzAQJw3jPGQRo6meyVhpy2xEKkfB5dMBF4udEC8lUzWjNVK4AJq6BozwZNQrDbtSmpujoGivCMqREBognPAA-I9wJEEQZwrp8vCrO84KQiMHEwOYPiPrSIxQB+glkLQrwKiMZr4o+nAYF8EMwfFY6rPGpA6F9P2PBoOjvNahmGt417Ck8hrqtmbyLExH4aMKrXkDFGgA1LhmRfQH46X1EAAOSRUo2WGEFhllCeIVUcELCkAA8qgFD7Sah2TRomjPNF4G-YYxB4taqAk2ULtvpLvOc6gIuGDu24lhoPrlKkrigiYZ6aO7dXxsQjDLBAqTfRgZ65KknAACScAQ03ypdPQxHn0KgmjUKwiADkNdIGCWiYADCXOkEQMBQTecAABK81k7BayWtiJ4wGvYlXZPsH+Pe1w5PQVxrahj9y3vgQAahkGsCBgBDXkPkdlNHugQCYo+Lk8E9XnPADcDkkgI9+qAzPQ1qmZDgY4GSV2C0-z6-UYS9aAwFSDvJupANpDyLkQa8Tx7h8GvhrQyJBfy6E4DvZ+-ENAkmKAAVgAAwEIpIA5IyRtxnQzoYWefII6+h9O8Q0W5Q4ED0LtWiP13hKHBHAQ02Z66NSbiYVu7dO7dz5P3M+g8taUKUOIgC49J5-3RjPKmfIAHYLuGEDQqjoJrGqLUDWHYfA7zhAvIBQ81A-hoQo8BPARSeCwZoxeQ8MAd0XEGNxzo+BlAwbvXgCxHHmJJA4RChg66ANDEvKxv41G2P8ZxIJkSLEazcXDagnjsyoQgL4uxC5hRJOcWSQBj8nGXlKTpOKSV7aOjyEMHSPYVzVlzDDPGICca9m1LbBmnBhS0CtnJTqg0GbZg-u+UgnB7bUTyDGUgW0pmHnoC3FgJhJnrW8cENZIy8ifBLAs0ZEBar7LyObHcjBLChUSqMI625TKFT7MVeQpUwAAkotzOWGUp4qL9qQWUH5xnFHeNedGACBSaB+Rob+dARbowFPId5UQImXihT2HG6xORjI-N2CA4yKyZnIHECiY5Dlg0zGKGWcAYqnlCii4O6LMUegZj8vFfZ+a9KFq0044ELh9mAAQ2wABOAAugAKlaeBVwK0Yjm1EOzHQMB6DgVWEkNs7wjaHQFI-EQYKKFLTojYvWLBEBUl0EuDQJBvoR0MMsTgslWC8KlkTc1IxQ4GtWPwti8Kv5wH2BpDwPy87NN+WY0KQKOIkALhQERwQxFxKiKQVgVsmmyLgPIuAQZRwBqDVcnoWqX6hk0FzF27wz4aEnMKG+fI4U5kYBpX1FBVQ-OAMAb8sToJBlsCWuOYAhVCuKEipsOgg5os5Gm+pTKCLWLjZYY2eEVSl1GFyNNC78rh1qAGqd7aWALNDNATyfYAAi2UeytPyom8yJbXLOMEpaF2kE40aF7m2K0p7F1wwRvevR6x33gVfdREsT7b1StXOHQDL7Z3YIJaQb98M719igxoGDZw-20m-kmFc4lSCoE4IgMhBATAQHCMweAgsfKcgwJCZIwF5yLitFRuAcolC2CHEQuILH+XkYAFaoFSFU-iOamwCYSpqkhBa9RQB9hQj6Kk4C0A0h9XmndK1VAuaGL1tbEVnj4LSnGLozjsEIUQoTZbYC4wCAQaIYAN4kw7rFPAfYABSRBuCqDrGePdNh7DtBgCq9gHnJkaCHKJwdw7yDorHQuxpmZN09xnQs+dDkl1xpXU9NdfY00oY80SDzO6nrnrUjJuTvCUPZR8L6TMmHsO4eSPhwjYRiNwFI2UcjlHqOgTo1bRjcBmOsfY4KjA3HeMvMAcZ4TlyRParYpoDa9xlp6jqjdPgAoZtLRdgET6aMNLsAHVNOAABHbF4zA11NzPovsxjawCbzWJxbGNvXWmMGYFobECTUDkE9-koUuSnVuq2DTjB7ZRb7Ld+6MEIPTAeE8OAH9TJzXtitubtQEe-rYsFno7ojscRGOtqN4FuR4lVEkeGXA+DFFsF7YoAAmEVXt6xwv+R+POxBVg47PnjgnmIOfM7JxTjQ1Pado-NQz0ggbw6s6tNyaa-qcWM6gwJjHjO2WkcNOLvHUvG0y5F0roW8vhei8JSwNs-h7C7Ql+rw7suSyG6gLrrDjPbWcWtKrxgku+Aa8x9C8CtuPeO6wIZKoxvpNs5d+bgNDurR+-TsoenduRfBDgOgNbJvcch7dxbuP5BE+MG94zjsKlNTO9d9Lo7efyg55F6X4+MdUCB9N2rtPAbK8nyHeXvOzBlhg0L6HzXbfLSQlbx3PVnmg9m4bz3wfVDW9cIirXlPRf3f2+IhFVvULZ-B-n+nvOKtIEkEp1PmAZsRZQDX1aJ0QVNOhRvSYGepBXjnOAMUCz34eOZp75wA-jAJnEUBBoEwrga8bDGj7BCpXbFCuDCj+ZzRT5L7ghHrkAn717F6M7Byt4EwdzEA+ZKCywZAIGp5IEi4-hoH4idwqrkCC6yToDfTsBDiIBDiU5KLVwQDdgaJNgK6kDNr8zkAEKWbPBxZjgCC9q4G7KEqYhvBcGWYxgfgdyubFDsiTBgCMx9iyGa4cFiFwDcExBVQyH8G9p05sTXajBsF5xezlBfw4HO7CEL4EGJrrzZ4x4l6Xwu62FbyEgWElib4-hjwmE+x2H5qjCaBdquxAyOElC2HErjJSYOa7DVoIr1r4F5yeGOHeHgT9pnhhroyRpnxtwxpdzJYJpJr4ojxjyjgGpEgbqsBeG2FXYkI6qoByhDr2GK71GoAtwkDkB7Rd5j5HZ1HvioCWGC7qZ1p+pWGBoprcjNGpFfY8jNGRYEQ9FDojjg75R3LmQyA-QRDnKRTzGoCtKOjuExDbGWGjgxDjG9HBGfxkDHGrjIyKE-h6grBbHNEOAxTFCphaDChtiMBGw3KhgxQ+gQgwCWHmzC6WbbGtEXGXYar6EDE1pDENqb7bFDiTGXi0DaKb5BpnYnHNEzosGXjbG7C5Asws72Cok6IBqImwgxBygUDFYKHETvDnZ4iMJ8b6SfBEBiEpZ1EcRkzJo7FLFNgIa1CcH8hgCnFDqMxATNEEk+BcyjbnhnjFKhh5o6o8BwCnZE55iep66qm5j47wy4F6mqg7ajDIyqjnBPAwCb46kWz5B6FKkwmxHDHokpoNRqnBrGmsihZwDoqum5jdgETWmLHVGTZiaPAQgRCkzoyqajAUGdDUGIAADMDB08tAuJhhsJPqTpTawAwpGhYAoMhY8MqJmaAhfaESDSxA2OJJaJ7IAApLWXzmdsQnqBipWZZvQIuKQAAPr6itChIMmFg-DbDbAhl4SZRFlhApaCnwaPhXr8QkxbjrqVm5bPRClqGWaFnhkkw+Cwr2apm5YVRVQrEriSiHnVSvrVSWRiSkCWFlE6TGYGG5qC6aAHq0AZBnTRk9CaBhmonblkyfm9AdBUE0FJl6hfJQipkhqXiDGZnwnZm5mWagyvnvlDayGlmTENI1lnZBZQX8RcjIU3QpYmRmQrgEVnS3JmQobTkxBIxoSKGGSCjgSRTLAoUsl4RykhL0mGCkndhnZ764VUT4VvmEXmJA4xCVkbEwBkWoXmKrmHrCXkXnn8nuT5aZgSUuAwBUVpY0U3F0UMXqWMAwC-4KVDYOQcX9ncVYUGIaAJlpn6TSVEX4QrgUw+akDSVUXHmZjSUUUtDKUCmqWsquCuVaWEqIy6VMwlBBXyjGWsXDbYIcUKnBl+Ho4ZlxEjEGVSUmXIlNiOjsnoTTnCmWabBZCRQQpoSICv4OGHIaXSV2mjDKlamx7GFRUbRmbJ7B4-CpjbZaY1nUwQDmDUAIktW1V2WLqxh4jlCfArGJieV9gtx0DlDOoxU3QRxSFbgJnUrlJnhcgyT4hlBTVmQzUkXro94uXyi1UTbJUOwlByhEAxQAUwVpUIm3UxSSE74QDZWhjNzoqnF3XgSzHOUvXgRvXSGtJyj-lEjzqVntGRSZi0WrB6Utkg0kCbWCaXU6odxiEPWpVZnj55XunbWchskck6RcmmTowrgdk76aV+XUVgBvGwC0gUJiE0z7A+AbjqrjbQmjlfm0iMFUhukxHepPUBqgybCMG+kE1THi1kyS0LrRxA4TQNIETMzoyLELLb7SFIQJaAI63OJ02bm-mRko1+WhgLk8pciphtkxB8C1SwTJJjxEiDnDlmW5Z62aJ03uWm3TCVl+hW1QjcQuQqwZI9mKBaR1i5Y9CO21DO0jkjb3lQn2k83mo41wU96q0kBDhdma0kCfXTA1np2MFZ050XC1A4UeljWG2TkOR01vSAyzDrxMIuqCT3GbGrXvWvrm1+3W1gAdnUDdm9kR012zUxBV1-m7krkrFXniS3mZiPDChsWhgPkWVjgF1HYZ0QDF1rWl186jXNgOUORiUoAS2CS5he2T3HVzULWajCQdyAVVx+DH7E3BBGwrkBXiUkCSUXnaVgB11AzX0OrMIt2owkCGgl2L3XIKno2eqp3xG9L9JwAy3ozZ3b151aJklv59JWxIMkAoPvXYV70tlV1Tk-1-0N2mFN1BEbHBDt2g3e1d0ZStkB292dmh2ZD22QYj1gBj3G0yHD1mTT03k-3z0QNjblIr08Vh5YOIOMF4PSF8WENCUoUpZH0b2S3n38P3IxDzXewbhSayQP1M3P2kCv013v2ECf0aXf2hWZhkMAOUOhwgOlrgNxXsVQPc1XWPW43r0n1unSVoMtnGOJhpaFUxDFVMXhGSzlWVWM5qOn1uUmV1VPnJ2FpemRVnS8GrAZowOOlp1HZDrBw8ZIkCWjAFMjqS4ZNUz+nOWpDq2QoZA6AfABplOZ61NJU6otOGDpA6APQ5PC3eOM6dPdNVDFMV2dPooADiBMVQ1T0WrAwzcAdTUKjTZRPeQz0ziz7TU2DgcQ8Ehod+hoG1fTGmItPeoMyyqcAT4znIFz1+R9BzG1bmHjGNKafNKcHenjsDIxYtBA7z6MVzXp6K4tfzAdE6K4ycQsatrS0+PCvYI4XNSdV1qTwcJQtkWkxzcJ8RoMo0ALdKBkOER9REJEZEkJzz2z8DnWqsGLsFcD0jVdAT454ZC6dN5AwQrSDDLZ-tTBmhrDg9PxT0XDPDO5JtCyZ5XDp5lUSl+yU9Lks9fYIjrjS90DamXzVp0j4Tn+DLnIB9IyXD3lUr60P98N9F+MJVy1Z0EDWzKruTtLCDODEAktWr9rctOkCtvYStYLRU6rjBrSJd2taEjK2C7tkGP9QrZMKGHLltPdttRAHDmi0dGgsdrtDkwb-EntJlEbvtjDXLlmok4kwd9AbD4d-Ll4CbSb8dDMxmVr-hkVxE7JVo2NNrIx9iwop0QGATLbP15o9b-1ZYp2mYagZodbQGhpo4CbmhcwYOxmuwQQGAtqapqA7Ae+Z4AS3pPI3bQGiYLAKYK4g7G7EuBOqNyTjV3R+77O+pheHOFdpp7A5phl1BRm1bvNqAC4d9TAIo3MQtJzAzIuE+Sg3Ir7RAWrAH8MRAMY4B3MzLgk+6MQ3kvktN5jpsZ875k4nKgHSET+gCMQlWOGeGBGRGpmTWLWRAVGskIEtG4EyQ20TwEyPWlOu4bGBC9HzGA2L+3t2HkCVWeHdWDWRHFGJHbWFHjAVHdRn+nAdHDHLGzHlOrHMlWHYAOH1WtWBHJGTwzW-HpHc47WlH1HYnEnjHzHCZsnoj8pCL9Vz5GgD4-Vjb-TeTsuKaVnOguLI6jnB6-+fUEBlm7gOgQZyr6ZTbHhFAOgqYIQozhNxDdNYoxEhI6scA3xfnvNnAPsWBKN1L3VoU2mGQqK5Aem-1u4RCxChNuwyXuYzDc7JX0htgKoVxYQt6o4y7ZLYmqENDfACwcQYKXj8JE0JTmgLZzXaYbOUYOqV0IkAbtgrX8QzGZUvX0yyY-bfYagKo43g3tgfbc5vNMZeQxEc0w3AmaguCzqBgUBKTJQA1Umzw9Wj43AOqnX8R8oAOPXw3JQG00pRJgekjp1G0lJYAJtYKT3SjIl2zq6NjqL8eQ893jM1893r3sp3UM31E5jGQTFbFM3e3OCwWxSKgYAJIQqQAA). ## Progressive Web App (PWA) @@ -74,7 +62,7 @@ you may do something similar. Importantly, Chrome for iOS does not support this
- +
@@ -82,13 +70,11 @@ you may do something similar. Importantly, Chrome for iOS does not support this It is actually quite complex to guarantee that all mobile platforms are supported. The PWA compatibility script will work in most of the case. If not, please open an issue [here](https://github.com/GoogleChromeLabs/pwacompat/issues), to help improving it! - ## Acknowledgement A special thanks to [Vladimir Kharlampidi](https://github.com/nolimits4web) for creating this amazing framework7 HTML template. - ## Code of Conduct Please note that the shinyMobile project is released with a [Contributor Code of Conduct](https://contributor-covenant.org/version/2/0/CODE_OF_CONDUCT.html). By contributing to this project, you agree to abide by its terms. diff --git a/_pkgdown.yml b/_pkgdown.yml index 33dcc480..5d3d2a59 100644 --- a/_pkgdown.yml +++ b/_pkgdown.yml @@ -284,13 +284,21 @@ reference: template: - params: - bootswatch: readable - - + bootstrap: 5 + bslib: + info: "#E6F2FD" + pkgdown-nav-height: 100px + includes: + in_header: > + + +navbar: + bg: info + type: light news: releases: + - text: "shinyMobile 1.0.1" - text: "shinyMobile 1.0.0" - text: "shinyMobile 0.9.1" - text: "shinyMobile 0.9.0" diff --git a/cran-comments.md b/cran-comments.md index 3c3f3e0b..eca8b349 100644 --- a/cran-comments.md +++ b/cran-comments.md @@ -1,5 +1,5 @@ ## Test environments -* RStudio Workbench, R-4.2.1. +* RStudio Workbench, R-4.2.2. * `rhub::check_for_cran()`. * win-builder (devel and release). @@ -7,7 +7,4 @@ There were no ERRORs or WARNINGs or NOTEs. ## Note -This is a re-submission: -Reverse dependency LFApp appears to be broken, which was not initially -captured by revdepcheck package during the first submission. A pull request was proposed: https://github.com/fpaskali/LFApp/pull/4 to fix the issue. However the package does -not seem active anymore since about 2 years and the authors did not answer my mail. +This release also fixes a note in https://cran.r-project.org/web/checks/check_results_shinyMobile.html. diff --git a/docs/404.html b/docs/404.html index be0d7377..784f65ee 100644 --- a/docs/404.html +++ b/docs/404.html @@ -1,201 +1,120 @@ - - - - + + + + - - + Page not found (404) • shinyMobile - - - + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + - - - - - - -
-
-
+
+ + +
-
-
-

Page not found (404)

+
+

Page not found (404)

+
Content not found. Please use links in the navbar. -
- - - +
- -
-
-

Developed by David Granjon, Victor Perrier, Isabelle Rudolf.

+
+

+

Developed by David Granjon, Victor Perrier, Isabelle Rudolf.

-
-

Site built with pkgdown 1.6.1.

+
+

+

Site built with pkgdown 2.0.7.

-
-
+
+
+ - - diff --git a/docs/CODE_OF_CONDUCT.html b/docs/CODE_OF_CONDUCT.html index 88b32639..dbfbd130 100644 --- a/docs/CODE_OF_CONDUCT.html +++ b/docs/CODE_OF_CONDUCT.html @@ -1,282 +1,156 @@ - - - - - - - -Contributor Covenant Code of Conduct • shinyMobile - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -Contributor Covenant Code of Conduct • shinyMobile + + Skip to contents + +
-
-
-

Contributor Covenant Code of Conduct

+
+

Contributor Covenant Code of Conduct

+ Source: CODE_OF_CONDUCT.md
-
-

-Our Pledge

+
+

Our Pledge

We as members, contributors, and leaders pledge to make participation in our community a harassment-free experience for everyone, regardless of age, body size, visible or invisible disability, ethnicity, sex characteristics, gender identity and expression, level of experience, education, socio-economic status, nationality, personal appearance, race, religion, or sexual identity and orientation.

We pledge to act and interact in ways that contribute to an open, welcoming, diverse, inclusive, and healthy community.

-
-

-Our Standards

+
+

Our Standards

Examples of behavior that contributes to a positive environment for our community include:

-
    -
  • Demonstrating empathy and kindness toward other people
    • +
    • Demonstrating empathy and kindness toward other people
    • Being respectful of differing opinions, viewpoints, and experiences
    • Giving and gracefully accepting constructive feedback
    • Accepting responsibility and apologizing to those affected by our mistakes, and learning from the experience
    • Focusing on what is best not just for us as individuals, but for the overall community
      • -
    -

    Examples of unacceptable behavior include:

    -
      -
    • The use of sexualized language or imagery, and sexual attention or advances of any kind
      • +

    Examples of unacceptable behavior include:

    +
    • The use of sexualized language or imagery, and sexual attention or advances of any kind
    • Trolling, insulting or derogatory comments, and personal or political attacks
    • Public or private harassment
    • Publishing others’ private information, such as a physical or email address, without their explicit permission
    • Other conduct which could reasonably be considered inappropriate in a professional setting
      • -
    -
-
-

-Enforcement Responsibilities

+
+
+

Enforcement Responsibilities

Community leaders are responsible for clarifying and enforcing our standards of acceptable behavior and will take appropriate and fair corrective action in response to any behavior that they deem inappropriate, threatening, offensive, or harmful.

Community leaders have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, and will communicate reasons for moderation decisions when appropriate.

-
-

-Scope

+
+

Scope

This Code of Conduct applies within all community spaces, and also applies when an individual is officially representing the community in public spaces. Examples of representing our community include using an official e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event.

-
-

-Enforcement

+
+

Enforcement

Instances of abusive, harassing, or otherwise unacceptable behavior may be reported to the community leaders responsible for enforcement at [INSERT CONTACT METHOD]. All complaints will be reviewed and investigated promptly and fairly.

All community leaders are obligated to respect the privacy and security of the reporter of any incident.

-
-

-Enforcement Guidelines

+
+

Enforcement Guidelines

Community leaders will follow these Community Impact Guidelines in determining the consequences for any action they deem in violation of this Code of Conduct:

-
-

-1. Correction

+
+

1. Correction

Community Impact: Use of inappropriate language or other behavior deemed unprofessional or unwelcome in the community.

Consequence: A private, written warning from community leaders, providing clarity around the nature of the violation and an explanation of why the behavior was inappropriate. A public apology may be requested.

-
-

-2. Warning

+
+

2. Warning

Community Impact: A violation through a single incident or series of actions.

Consequence: A warning with consequences for continued behavior. No interaction with the people involved, including unsolicited interaction with those enforcing the Code of Conduct, for a specified period of time. This includes avoiding interactions in community spaces as well as external channels like social media. Violating these terms may lead to a temporary or permanent ban.

-
-

-3. Temporary Ban

+
+

3. Temporary Ban

Community Impact: A serious violation of community standards, including sustained inappropriate behavior.

Consequence: A temporary ban from any sort of interaction or public communication with the community for a specified period of time. No public or private interaction with the people involved, including unsolicited interaction with those enforcing the Code of Conduct, is allowed during this period. Violating these terms may lead to a permanent ban.

-
-

-4. Permanent Ban

+
+

4. Permanent Ban

Community Impact: Demonstrating a pattern of violation of community standards, including sustained inappropriate behavior, harassment of an individual, or aggression toward or disparagement of classes of individuals.

Consequence: A permanent ban from any sort of public interaction within the community.

-
-

-Attribution

-

This Code of Conduct is adapted from the Contributor Covenant, version 2.0, available at https://www.contributor-covenant.org/version/2/0/ code_of_conduct.html.

-

Community Impact Guidelines were inspired by Mozilla’s code of conduct enforcement ladder.

-

For answers to common questions about this code of conduct, see the FAQ at https://www.contributor-covenant.org/faq. Translations are available at https:// www.contributor-covenant.org/translations.

+
+

Attribution

+

This Code of Conduct is adapted from the Contributor Covenant, version 2.0, available at https://www.contributor-covenant.org/version/2/0/ code_of_conduct.html.

+

Community Impact Guidelines were inspired by Mozilla’s code of conduct enforcement ladder.

+

For answers to common questions about this code of conduct, see the FAQ at https://www.contributor-covenant.org/faq. Translations are available at https:// www.contributor-covenant.org/translations.

-
+
- +
+

Developed by David Granjon, Victor Perrier, Isabelle Rudolf.

- - -
-
-

Developed by David Granjon, Victor Perrier, Isabelle Rudolf.

-
- -
-

Site built with pkgdown 1.6.1.

+
+

Site built with pkgdown 2.0.7.

-
-
+
+ - - - + diff --git a/docs/articles/Gadgets.html b/docs/articles/Gadgets.html index dcbdbe17..452bc1ab 100644 --- a/docs/articles/Gadgets.html +++ b/docs/articles/Gadgets.html @@ -4,7 +4,8 @@ - + + Gadgets • shinyMobile @@ -12,155 +13,133 @@ - - - + + + - - - + + + - -
-
-
-
-

Gadgets

-

David Granjon

+
+
+

Gadgets

+

David +Granjon

-

2021-09-15

+

2024-01-21

- Source: vignettes/Gadgets.Rmd - - + Source: vignettes/Gadgets.Rmd +
Gadgets.Rmd
-

shinyMobile is particularly well suited to build shiny gagdet. To convert an existing app to a gadget, wrap it in the shiny::runGadget() function.

+

shinyMobile is particularly well suited to build shiny +gagdets. To convert an existing app to a gadget, wrap +it in the shiny::runGadget() function.

-library(shiny)
-library(shinyMobile)
-runGadget(shinyAppDir(system.file("examples/tab_layout", package = "shinyMobile")))
-
- - - +library(shiny) +library(shinyMobile) +runGadget(shinyAppDir(system.file("examples/tab_layout", package = "shinyMobile")))
+
-
-

Developed by David Granjon, Victor Perrier, Isabelle Rudolf.

+
+

+

Developed by David Granjon, Victor Perrier, Isabelle Rudolf.

-
-

Site built with pkgdown 1.6.1.

+
+

+

Site built with pkgdown 2.0.7.

-
+
+ diff --git a/docs/articles/Single-Layout.html b/docs/articles/Single-Layout.html index c1fb682d..2dbc490b 100644 --- a/docs/articles/Single-Layout.html +++ b/docs/articles/Single-Layout.html @@ -4,7 +4,8 @@ - + + Single-Layout • shinyMobile @@ -12,220 +13,199 @@ - - - + + + - - - + + + - -
-
-
-
-

Single-Layout

-

David Granjon

+ + +
+
+

Single-Layout

+

David +Granjon

-

2021-09-15

+

2024-01-21

- Source: vignettes/Single-Layout.Rmd - - + Source: vignettes/Single-Layout.Rmd +
Single-Layout.Rmd
-

shinyMobile comes with 3 predefined layouts. f7SingleLayout() is dedicated to build simple, one-page apps or gadgets.

- -
-
-
-
-
-
-
-
- +

shinyMobile comes with 3 predefined layouts. +f7SingleLayout() is dedicated to build simple, one-page +apps or gadgets.

+

The app below runs with specific options:

+
+f7Page(
+  options = list(dark = FALSE, filled = FALSE, theme = "md"),
+  ...
+)
+
+
+
-
-
+ +
-
-library(shiny)
-library(shinyMobile)
-library(apexcharter)
-library(dplyr)
-library(ggplot2)
-
-data("economics_long")
-economics_long <- economics_long %>%
-  group_by(variable) %>%
-  slice((n()-100):n())
-
-
-shinyApp(
-  ui = f7Page(
-    title = "My app",
-    f7SingleLayout(
-      navbar = f7Navbar(
-        title = "Single Layout",
-        hairline = TRUE,
-        shadow = TRUE
-      ),
-      toolbar = f7Toolbar(
-        position = "bottom",
-        f7Link(label = "Link 1", href = "https://www.google.com"),
-        f7Link(label = "Link 2", href = "https://www.google.com")
-      ),
-      # main content
-      f7Shadow(
-        intensity = 16,
-        hover = TRUE,
-        f7Card(
-          title = "Card header",
-          apexchartOutput("areaChart")
-        )
-      )
-    )
-  ),
-  server = function(input, output) {
-    output$areaChart <- renderApexchart({
-      apex(
-        data = economics_long,
-        type = "area",
-        mapping = aes(
-          x = date,
-          y = value01,
-          fill = variable
-        )
-      ) %>%
-        ax_yaxis(decimalsInFloat = 2) %>% # number of decimals to keep
-        ax_chart(stacked = TRUE) %>%
-        ax_yaxis(max = 4, tickAmount = 4)
-    })
-  }
-)
-
- - - +
+library(shiny)
+library(shinyMobile)
+library(apexcharter)
+library(dplyr)
+library(ggplot2)
+
+data("economics_long")
+economics_long <- economics_long %>%
+  group_by(variable) %>%
+  slice((n()-100):n())
+
+
+shinyApp(
+  ui = f7Page(
+    title = "My app",
+    options = list(dark = FALSE, filled = FALSE, theme = "md"),
+    f7SingleLayout(
+      navbar = f7Navbar(
+        title = "Single Layout",
+        hairline = TRUE,
+        shadow = TRUE
+      ),
+      toolbar = f7Toolbar(
+        position = "bottom",
+        f7Link(label = "Link 1", href = "https://www.google.com"),
+        f7Link(label = "Link 2", href = "https://www.google.com")
+      ),
+      # main content
+      f7Shadow(
+        intensity = 16,
+        hover = TRUE,
+        f7Card(
+          title = "Card header",
+          apexchartOutput("areaChart")
+        )
+      )
+    )
+  ),
+  server = function(input, output) {
+    output$areaChart <- renderApexchart({
+      apex(
+        data = economics_long,
+        type = "area",
+        mapping = aes(
+          x = date,
+          y = value01,
+          fill = variable
+        )
+      ) %>%
+        ax_yaxis(decimalsInFloat = 2) %>% # number of decimals to keep
+        ax_chart(stacked = TRUE) %>%
+        ax_yaxis(max = 4, tickAmount = 4)
+    })
+  }
+)
+
-
-

Developed by David Granjon, Victor Perrier, Isabelle Rudolf.

+
+

+

Developed by David Granjon, Victor Perrier, Isabelle Rudolf.

-
-

Site built with pkgdown 1.6.1.

+
+

+

Site built with pkgdown 2.0.7.

-
+
+ diff --git a/docs/articles/Split-Layout.html b/docs/articles/Split-Layout.html index b8f7c0a3..82c101fb 100644 --- a/docs/articles/Split-Layout.html +++ b/docs/articles/Split-Layout.html @@ -4,7 +4,8 @@ - + + Split-Layout • shinyMobile @@ -12,336 +13,331 @@ - - - + + + - - - + + + - -
-
-
-
-

Split-Layout

-

David Granjon

+ + +
+
+

Split-Layout

+

David +Granjon

-

2021-09-15

+

2024-01-21

- Source: vignettes/Split-Layout.Rmd - - + Source: vignettes/Split-Layout.Rmd +
Split-Layout.Rmd
-

f7SplitLayout() is the third layout introduced with shinyMobile. This template is focused for tablet/desktop use. It is composed of a sidebar, and a main panel. The sidebar goes in its dedicated slot, corresponding to f7Panel(). While f7Panel() may also be embedded in both f7SingleLayout() and f7TabsLayout, it accepts extra arguments like f7PanelMenu() and f7PanelItem(), which are very similar to sidebar items of shinydashboard:

+

f7SplitLayout() is the third layout introduced with +shinyMobile. This template is focused for tablet/desktop +use. It is composed of a sidebar, and a main panel. The sidebar goes in +its dedicated slot, corresponding to f7Panel(). While +f7Panel() may also be embedded in both +f7SingleLayout() and f7TabsLayout, it accepts +extra arguments like f7PanelMenu() and +f7PanelItem(), which are very similar to sidebar items of +shinydashboard:

-f7Panel(
-  title = "Sidebar",
-  side = "left",
-  theme = "light",
-  f7PanelMenu(
-    id = "menu",
-    f7PanelItem(tabName = "tab1", title = "Tab 1", icon = f7Icon("email"), active = TRUE),
-    f7PanelItem(tabName = "tab2", title = "Tab 2", icon = f7Icon("home"))
-  ),
-  style = "reveal"
-)
-

The content must be passed in ... If you have a menu in the sidebar, you must use the corresponding body function, namely f7Items() and f7Item(). Particularly, the tabName argument provided in f7PanelItem() and f7Item() must exactly match (like in shinydashboard, again). If you don’t have any f7PanelMenu(), you can pass tags in the ... directly. However, this prevents you from having a tabbed navigation.

- -
-
-
- +f7Panel( + title = "Sidebar", + side = "left", + theme = "light", + f7PanelMenu( + id = "menu", + f7PanelItem(tabName = "tab1", title = "Tab 1", icon = f7Icon("email"), active = TRUE), + f7PanelItem(tabName = "tab2", title = "Tab 2", icon = f7Icon("home")) + ), + style = "reveal" +)
+

The content must be passed in ... If you have a menu in +the sidebar, you must use the corresponding body function, namely +f7Items() and f7Item(). Particularly, the +tabName argument provided in f7PanelItem() and +f7Item() must exactly match (like in +shinydashboard, again). If you don’t have any +f7PanelMenu(), you can pass tags in the ... +directly. However, this prevents you from having a tabbed +navigation.

+
+
+
-
+ + 
-library(shiny)
-library(ggplot2)
-library(shinyMobile)
-library(apexcharter)
-
-fruits <- data.frame(
-  name = c('Apples', 'Oranges', 'Bananas', 'Berries'),
-  value = c(44, 55, 67, 83)
-)
-
-new_mtcars <- reshape(
-  data = head(mtcars),
-  idvar = "model",
-  varying = list(c("drat", "wt")),
-  times = c("drat", "wt"),
-  direction = "long",
-  v.names = "value",
-  drop = c("mpg", "cyl", "hp", "dist", "qsec", "vs", "am", "gear", "carb")
-)
-
-shinyApp(
-  ui = f7Page(
-    title = "My app",
-    options = list(
-      theme = "aurora",
-      dark = TRUE,
-      filled = FALSE,
-      color = "#007aff",
-      touch = list(
-        tapHold = TRUE,
-        tapHoldDelay = 750,
-        iosTouchRipple = FALSE
-      ),
-      iosTranslucentBars = FALSE,
-      navbar = list(
-        iosCenterTitle = TRUE,
-        hideNavOnPageScroll = TRUE
-      ),
-      toolbar = list(
-        hideNavOnPageScroll = FALSE
-      ),
-      pullToRefresh = FALSE
-    ),
-    f7SplitLayout(
-      sidebar = f7Panel(
-        title = "Sidebar",
-        side = "left",
-        theme = "light",
-        f7PanelMenu(
-          id = "menu",
-          f7PanelItem(
-            tabName = "tab1",
-            title = "Tab 1",
-            icon = f7Icon("equal_circle"),
-            active = TRUE
-          ),
-          f7PanelItem(
-            tabName = "tab2",
-            title = "Tab 2",
-            icon = f7Icon("equal_circle")
-          ),
-          f7PanelItem(
-            tabName = "tab3",
-            title = "Tab 3",
-            icon = f7Icon("equal_circle")
-          )
-        ),
-        uiOutput("selected_tab"),
-        effect = "reveal"
-      ),
-      navbar = f7Navbar(
-        title = "Split Layout",
-        hairline = FALSE,
-        shadow = TRUE
-      ),
-      toolbar = f7Toolbar(
-        position = "bottom",
-        f7Link(label = "Link 1", href = "https://www.google.com"),
-        f7Link(label = "Link 2", href = "https://www.google.com")
-      ),
-      # main content
-      f7Items(
-        f7Item(
-          tabName = "tab1",
-          f7Button("toggleSheet", "Plot parameters"),
-          f7Sheet(
-            id = "sheet1",
-            label = "Plot Parameters",
-            orientation = "bottom",
-            swipeToClose = TRUE,
-            backdrop = TRUE,
-            f7Slider(
-              "obs",
-              "Number of observations:",
-              min = 0, max = 1000,
-              value = 500
-            )
-          ),
-          br(),
-          plotOutput("distPlot")
-        ),
-        f7Item(
-          tabName = "tab2",
-          apexchartOutput("radar")
-        ),
-        f7Item(
-          tabName = "tab3",
-          f7Toggle(
-            inputId = "plot_show",
-            label = "Show Plot?",
-            checked = TRUE
-          ),
-          apexchartOutput("multi_radial")
-        )
-      )
-    )
-  ),
-  server = function(input, output, session) {
-
-    observeEvent(input$toggleSheet, {
-      updateF7Sheet(id = "sheet1")
-    })
-
-    observeEvent(input$obs, {
-      if (input$obs < 500) {
-        f7Notif(
-          text = paste0("The slider value is only ", input$obs, ". Please
-                        increase it"),
-          icon = f7Icon("bolt_fill"),
-          title = "Alert",
-          titleRightText = Sys.Date()
-        )
-      }
-    })
-
-    output$radar <- renderApexchart({
-      apex(
-        data = new_mtcars,
-        type = "radar",
-        mapping = aes(
-          x = model,
-          y = value,
-          group = time)
-      )
-    })
-
-    output$selected_tab <- renderUI({
-      HTML(paste0("Access the currently selected tab: ", strong(input$menu)))
-    })
-
-    output$distPlot <- renderPlot({
-      dist <- rnorm(input$obs)
-      hist(dist)
-    })
-
-    output$multi_radial <- renderApexchart({
-      if (input$plot_show) {
-        apex(data = fruits, type = "radialBar", mapping = aes(x = name, y = value))
-      }
-    })
-
-  }
-)
-
- - - +library(shiny) +library(ggplot2) +library(shinyMobile) +library(apexcharter) +library(thematic) + +fruits <- data.frame( + name = c('Apples', 'Oranges', 'Bananas', 'Berries'), + value = c(44, 55, 67, 83) +) + +thematic_shiny(font = "auto") + +new_mtcars <- reshape( + data = head(mtcars), + idvar = "model", + varying = list(c("drat", "wt")), + times = c("drat", "wt"), + direction = "long", + v.names = "value", + drop = c("mpg", "cyl", "hp", "dist", "qsec", "vs", "am", "gear", "carb") +) + +shinyApp( + ui = f7Page( + title = "My app", + options = list( + theme = "aurora", + dark = TRUE, + filled = FALSE, + color = "#007aff", + touch = list( + tapHold = TRUE, + tapHoldDelay = 750, + iosTouchRipple = FALSE + ), + iosTranslucentBars = FALSE, + navbar = list( + iosCenterTitle = TRUE, + hideNavOnPageScroll = TRUE + ), + toolbar = list( + hideNavOnPageScroll = FALSE + ), + pullToRefresh = FALSE + ), + f7SplitLayout( + sidebar = f7Panel( + title = "Sidebar", + side = "left", + theme = "light", + f7PanelMenu( + id = "menu", + f7PanelItem( + tabName = "tab1", + title = "Tab 1", + icon = f7Icon("equal_circle"), + active = TRUE + ), + f7PanelItem( + tabName = "tab2", + title = "Tab 2", + icon = f7Icon("equal_circle") + ), + f7PanelItem( + tabName = "tab3", + title = "Tab 3", + icon = f7Icon("equal_circle") + ) + ), + uiOutput("selected_tab"), + effect = "reveal" + ), + navbar = f7Navbar( + title = "Split Layout", + hairline = FALSE, + shadow = TRUE + ), + toolbar = f7Toolbar( + position = "bottom", + f7Link(label = "Link 1", href = "https://www.google.com"), + f7Link(label = "Link 2", href = "https://www.google.com") + ), + # main content + f7Items( + f7Item( + tabName = "tab1", + f7Button("toggleSheet", "Plot parameters"), + f7Sheet( + id = "sheet1", + label = "Plot Parameters", + orientation = "bottom", + swipeToClose = TRUE, + backdrop = TRUE, + f7Slider( + "obs", + "Number of observations:", + min = 0, max = 1000, + value = 500 + ) + ), + br(), + plotOutput("distPlot") + ), + f7Item( + tabName = "tab2", + apexchartOutput("radar") + ), + f7Item( + tabName = "tab3", + f7Toggle( + inputId = "plot_show", + label = "Show Plot?", + checked = TRUE + ), + apexchartOutput("multi_radial") + ) + ) + ) + ), + server = function(input, output, session) { + + observeEvent(input$toggleSheet, { + updateF7Sheet(id = "sheet1") + }) + + observeEvent(input$obs, { + if (input$obs < 500) { + f7Notif( + text = paste0("The slider value is only ", input$obs, ". Please + increase it"), + icon = f7Icon("bolt_fill"), + title = "Alert", + titleRightText = Sys.Date() + ) + } + }) + + output$radar <- renderApexchart({ + apex( + data = new_mtcars, + type = "radar", + mapping = aes( + x = model, + y = value, + group = time) + ) + }) + + output$selected_tab <- renderUI({ + HTML(paste0("Access the currently selected tab: ", strong(input$menu))) + }) + + output$distPlot <- renderPlot({ + dist <- rnorm(input$obs) + hist(dist) + }) + + output$multi_radial <- renderApexchart({ + if (input$plot_show) { + apex(data = fruits, type = "radialBar", mapping = aes(x = name, y = value)) + } + }) + + } +)
+
-
-

Developed by David Granjon, Victor Perrier, Isabelle Rudolf.

+
+

+

Developed by David Granjon, Victor Perrier, Isabelle Rudolf.

-
-

Site built with pkgdown 1.6.1.

+
+

+

Site built with pkgdown 2.0.7.

-
+
+ diff --git a/docs/articles/Tabs-Layout.html b/docs/articles/Tabs-Layout.html index 61d691a0..d529abe5 100644 --- a/docs/articles/Tabs-Layout.html +++ b/docs/articles/Tabs-Layout.html @@ -4,7 +4,8 @@ - + + Tabs-Layout • shinyMobile @@ -12,335 +13,257 @@ - - - + + + - - - + + + - -
-
-
-
-

Tabs-Layout

-

David Granjon

+ + +
+
+

Tabs-Layout

+

David +Granjon

-

2021-09-15

+

2024-01-21

- Source: vignettes/Tabs-Layout.Rmd - - + Source: vignettes/Tabs-Layout.Rmd +
Tabs-Layout.Rmd
-

The second layout is the f7TabLayout(), very similar to that of miniUI.

- -
-
-
-
-
-
-
-
- +

The second layout is the f7TabLayout(), very similar to +that of miniUI.

+

The app below runs with specific options:

+
+f7Page(
+  options = list(dark = FALSE, filled = FALSE, theme = "md"),
+  ...
+)
+
+
+
-
-
+ +
-
-library(shiny)
-library(shinyMobile)
-library(apexcharter)
-
-poll <- data.frame(
-  answer = c("Yes", "No"),
-  n = c(254, 238)
-)
-
-shinyApp(
-  ui = f7Page(
-    title = "My app",
-    f7TabLayout(
-      panels = tagList(
-        f7Panel(title = "Left Panel", side = "left", theme = "light", "Blabla", effect = "cover"),
-        f7Panel(title = "Right Panel", side = "right", theme = "dark", "Blabla", effect = "cover")
-      ),
-      navbar = f7Navbar(
-        title = "Tabs",
-        hairline = TRUE,
-        shadow = TRUE,
-        leftPanel = TRUE,
-        rightPanel = TRUE
-      ),
-      f7Tabs(
-        animated = TRUE,
-        #swipeable = TRUE,
-        f7Tab(
-          tabName = "Tab 1",
-          icon = f7Icon("folder"),
-          active = TRUE,
-
-          f7Flex(
-            prettyRadioButtons(
-              inputId = "theme",
-              label = "Select a theme:",
-              thick = TRUE,
-              inline = TRUE,
-              selected = "md",
-              choices = c("ios", "md"),
-              animation = "pulse",
-              status = "info"
-            ),
-
-            prettyRadioButtons(
-              inputId = "color",
-              label = "Select a color:",
-              thick = TRUE,
-              inline = TRUE,
-              selected = "dark",
-              choices = c("light", "dark"),
-              animation = "pulse",
-              status = "info"
-            )
-          ),
-
-          tags$head(
-            tags$script(
-              'Shiny.addCustomMessageHandler("ui-tweak", function(message) {
-                var os = message.os;
-                var skin = message.skin;
-                if (os === "md") {
-                  $("html").addClass("md");
-                  $("html").removeClass("ios");
-                  $(".tab-link-highlight").show();
-                } else if (os === "ios") {
-                  $("html").addClass("ios");
-                  $("html").removeClass("md");
-                  $(".tab-link-highlight").hide();
-                }
-
-                if (skin === "dark") {
-                 $("html").addClass("theme-dark");
-                } else {
-                  $("html").removeClass("theme-dark");
-                }
-
-               });
-              '
-            )
-          ),
-
-          f7Shadow(
-            intensity = 10,
-            hover = TRUE,
-            f7Card(
-              title = "Card header",
-              apexchartOutput("pie")
-            )
-          )
-        ),
-        f7Tab(
-          tabName = "Tab 2",
-          icon = f7Icon("keyboard"),
-          active = FALSE,
-          f7Shadow(
-            intensity = 10,
-            hover = TRUE,
-            f7Card(
-              title = "Card header",
-              apexchartOutput("scatter")
-            )
-          )
-        ),
-        f7Tab(
-          tabName = "Tab 3",
-          icon = f7Icon("layers_alt"),
-          active = FALSE,
-          f7Shadow(
-            intensity = 10,
-            hover = TRUE,
-            f7Card(
-              title = "Card header",
-              f7SmartSelect(
-                "variable",
-                "Variables to show:",
-                c("Cylinders" = "cyl",
-                  "Transmission" = "am",
-                  "Gears" = "gear"),
-                openIn = "sheet",
-                multiple = TRUE
-              ),
-              tableOutput("data")
-            )
-          )
-        )
-      )
-    )
-  ),
-  server = function(input, output, session) {
-
-    # river plot
-    dates <- reactive(seq.Date(Sys.Date() - 30, Sys.Date(), by = input$by))
-
-    output$pie <- renderApexchart({
-      apex(
-        data = poll,
-        type = "pie",
-        mapping = aes(x = answer, y = n)
-      )
-    })
-
-    output$scatter <- renderApexchart({
-      apex(
-        data = mtcars,
-        type = "scatter",
-        mapping = aes(
-          x = wt,
-          y = mpg,
-          fill = cyl
-        )
-      )
-    })
-
-    # datatable
-    output$data <- renderTable({
-      mtcars[, c("mpg", input$variable), drop = FALSE]
-    }, rownames = TRUE)
-
-    # send the theme to javascript
-    observe({
-      session$sendCustomMessage(
-        type = "ui-tweak",
-        message = list(os = input$theme, skin = input$color)
-      )
-    })
-
-  }
-)
-
- - - +
+library(shiny)
+library(shinyMobile)
+library(apexcharter)
+
+poll <- data.frame(
+  answer = c("Yes", "No"),
+  n = c(254, 238)
+)
+
+shinyApp(
+  ui = f7Page(
+    options = list(dark = FALSE, filled = FALSE, theme = "md"),
+    title = "My app",
+    f7TabLayout(
+      panels = tagList(
+        f7Panel(title = "Left Panel", side = "left", theme = "light", "Blabla", effect = "cover"),
+        f7Panel(title = "Right Panel", side = "right", theme = "dark", "Blabla", effect = "cover")
+      ),
+      navbar = f7Navbar(
+        title = "Tabs",
+        hairline = TRUE,
+        shadow = TRUE,
+        leftPanel = TRUE,
+        rightPanel = TRUE
+      ),
+      f7Tabs(
+        animated = TRUE,
+        #swipeable = TRUE,
+        f7Tab(
+          title = "Tab 1",
+          tabName = "Tab1",
+          icon = f7Icon("folder"),
+          active = TRUE,
+
+          f7Shadow(
+            intensity = 10,
+            hover = TRUE,
+            f7Card(
+              title = "Card header",
+              apexchartOutput("pie")
+            )
+          )
+        ),
+        f7Tab(
+          title = "Tab 2",
+          tabName = "Tab2",
+          icon = f7Icon("keyboard"),
+          active = FALSE,
+          f7Shadow(
+            intensity = 10,
+            hover = TRUE,
+            f7Card(
+              title = "Card header",
+              apexchartOutput("scatter")
+            )
+          )
+        ),
+        f7Tab(
+          title = "Tab 3",
+          tabName = "Tab3",
+          icon = f7Icon("layers_alt"),
+          active = FALSE,
+          f7Shadow(
+            intensity = 10,
+            hover = TRUE,
+            f7Card(
+              title = "Card header",
+              f7SmartSelect(
+                "variable",
+                "Variables to show:",
+                c("Cylinders" = "cyl",
+                  "Transmission" = "am",
+                  "Gears" = "gear"),
+                openIn = "sheet",
+                multiple = TRUE
+              ),
+              tableOutput("data")
+            )
+          )
+        )
+      )
+    )
+  ),
+  server = function(input, output, session) {
+
+    # river plot
+    dates <- reactive(seq.Date(Sys.Date() - 30, Sys.Date(), by = input$by))
+
+    output$pie <- renderApexchart({
+      apex(
+        data = poll,
+        type = "pie",
+        mapping = aes(x = answer, y = n)
+      )
+    })
+
+    output$scatter <- renderApexchart({
+      apex(
+        data = mtcars,
+        type = "scatter",
+        mapping = aes(
+          x = wt,
+          y = mpg,
+          fill = cyl
+        )
+      )
+    })
+
+    # datatable
+    output$data <- renderTable({
+      mtcars[, c("mpg", input$variable), drop = FALSE]
+    }, rownames = TRUE)
+  }
+)
+
-
-

Developed by David Granjon, Victor Perrier, Isabelle Rudolf.

+
+

+

Developed by David Granjon, Victor Perrier, Isabelle Rudolf.

-
-

Site built with pkgdown 1.6.1.

+
+

+

Site built with pkgdown 2.0.7.

-
+
+ diff --git a/docs/articles/index.html b/docs/articles/index.html index b644eb95..81e2d02c 100644 --- a/docs/articles/index.html +++ b/docs/articles/index.html @@ -1,210 +1,97 @@ - - - - - - - -Articles • shinyMobile - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - +Articles • shinyMobile + Skip to contents + +
-
-
-

Articles

+
+

Articles

All vignettes

-
-
Gadgets
-
-
Single-Layout
-
-
Split-Layout
-
-
Tabs-Layout
-
-
Getting Started
-
-
shinyMobile Tools
-
-
-
-
-
+
Progressive web app support
+
+
shinyMobile Tools
+
+
Getting Started
+
+
+
-
-
-

Developed by David Granjon, Victor Perrier, Isabelle Rudolf.

+
+

Developed by David Granjon, Victor Perrier, Isabelle Rudolf.

-
-

Site built with pkgdown 1.6.1.

+
+

Site built with pkgdown 2.0.7.

-
-
+
+ - - - + diff --git a/docs/articles/shinyMobile.html b/docs/articles/shinyMobile.html index 99aeafb4..03b57564 100644 --- a/docs/articles/shinyMobile.html +++ b/docs/articles/shinyMobile.html @@ -4,7 +4,8 @@ - + + Getting Started • shinyMobile @@ -12,437 +13,922 @@ - - - + + + - - - + + + - -
-
-
-
-

Getting Started

-

David Granjon

+ + + +
+
+

Getting Started

+

David +Granjon

-

2021-09-15

+

2024-01-25

- Source: vignettes/shinyMobile.Rmd - - + Source: vignettes/shinyMobile.Rmd +
shinyMobile.Rmd
- -
-

-Introduction

-

shinyMobile is built on top of the latest framework7 template (V5.7.14). It may be used for different purposes:

+
+

Introduction +

+

shinyMobile is built on top of the framework7 template (V5.7.14) and has +different purposes:

    -
  • develop mobile-ready shinyapps
    • -
  • develop progressive web shinyapps (PWA, similar to native apps)
    • -
  • develop desktop shinyapps
    • +
  • Develop mobile-ready shinyapps.
    • +
  • Develop progressive web shinyapps (PWA, similar to +native apps).
    • +
  • Develop desktop shinyapps.
-
-
-

-Custom skins

-

shinyMobile has 3 skins:

+
+

Custom skins +

+

shinyMobile offers 3 skins:

  • -aurora for desktop apps
    • +aurora for desktop apps.
  • -ios and md for mobile apps
    • +ios and md for mobile apps.
-

It automatically detects if the app is running with android or iOS and accordingly adapt the layout. It is of course possible to apply the iOS skin on android and inversely, even though not recommended.

-

shinyMobile also provides 2 themes, namely light and dark. While framework7 allows to apply dark or light theme not only at the global level but at the “widget level”, shinyMobile does not support that feature, to improve the overall consistency. Only panels can have a color independent of the global theme.

+

It automatically detects if the app is running with android or iOS +and accordingly adapts the layout. It is of course possible to apply the +iOS skin on an android device and inversely, although not +recommended.

+

shinyMobile also provides 2 themes, namely light and +dark.

-
-

-Layouts

-

shinyMobile brings 3 out of the box layouts:

+
+

Layouts +

+

shinyMobile brings 3 out of the box layouts:

  • -f7SingleLayout: develop simple apps (best choice for iOS/android Apps)
    • +f7SingleLayout(): develop simple apps +(best choice for iOS/android Apps).
  • -f7TabLayout: develop complex multi-tabbed Apps (best choice for iOS/android Apps)
    • +f7TabLayout(): develop complex +multi-tabbed apps (best choice for iOS/android +Apps).
  • -f7SplitLayout: for tablets and desktop with a sidebar, navbar and a main panel
    • -
  • Coming soon: a multi-pages layout with animations between pages!
    • +f7SplitLayout(): for tablets and +desktop with a sidebar, navbar and a main panel
-
-

-New Inputs

-

shinyMobile has its own custom input widgets with unique design for each skin (iOS/android/aurora):

+
+

UI elements +

+
+

Inputs: brief comparison side by side with {shiny} +

+

shinyMobile has its own custom input widgets with +unique design for each skin (iOS/android/aurora). Below we summarise all +known shiny inputs and their equivalent with +shinyMobile.

+ +++++ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Features (sample)shinyshinyMobile
Range slidersliderInput()f7Slider()
Text input +textInput(), +textAreaInput() + +f7Text(), f7Password(), +f7TextArea() +
Checkbox +checkboxInput(), +checkboxGroupInput() + +f7Checkbox(), +f7CheckboxGroup() +
RadioradioButtons()f7Radio()
Toggle switch❌ (see bslib)f7Toggle()
NumericnumericInput()f7Stepper()
SelectselectInput() +f7Select(), f7SmartSelect(), +f7Picker() +
Autocomplete❌f7AutoComplete()
Action buttonactionButton() +f7Button() f7Fab() +
Date +dateInput(), +dateRangeInput() +f7DatePicker()
Color❌f7ColorPicker()
DownloaddownloadButton()f7DownloadButton()
+
+
+

Containers +

+
+
+
+
+

Create your first App +

+
+

Page +

+

It is the main template skeleton.

+
+f7Page(
+  ..., 
+  options = list(...),
+  title = NULL,
+  allowPWA = FALSE
+)
+

options sets up the app look and feel (See dedicated +section below). f7Page() accepts any +shinyMobile layout (See below).

+
+ +

The navbar is a mandatory element of any +shinyMobile layout. It contains a title, a subtitle and +triggers for both right and left panels (f7Panel()).

+
+f7Navbar(
+  ..., 
+  subNavbar = NULL, 
+  title = NULL, 
+  subtitle = NULL,
+  hairline = TRUE, 
+  shadow = TRUE, 
+  bigger = FALSE,
+  transparent = FALSE,
+  leftPanel = FALSE, 
+  rightPanel = FALSE
+)
+

For complex apps, you can even add it a sub-navbar with +f7SubNavbar(...), which may contain any element like +f7Button() or text. f7Navbar() exposes styling +parameters such as shadow and hairline.

+
+
+

The Toolbar +

+

This is an option if you decide not to embed a +f7SubNavbar(). The toolbar is the right place to add +f7Button(), f7Link(), f7Badge()… +Its location is controlled with the position parameter (either top or +bottom).

+
+f7Toolbar(
+  ..., 
+  position = c("top", "bottom"), 
+  hairline = TRUE,
+  shadow = TRUE, 
+  icons = FALSE, 
+  scrollable = FALSE
+)
+

Under the hood, f7Tabs() is a custom +f7Toolbar().

+
+
+

Panels +

+

Panels are also called sidebars, f7Panel() being the +corresponding function.

+
+f7Panel(
+  ..., 
+  id = NULL,
+  title = NULL, 
+  side = c("left", "right"),
+  theme = c("dark", "light"), 
+  effect = c("reveal", "cover"),
+  resizable = FALSE
+)
+

f7Panel() has a theme option, +regardless of the main app theme. For instance, it is entirely possible +to create a dark f7Panel() while the page theme is light, +and conversely. Its behavior is controlled via the effect argument:

-

It also has custom update functions to act on the server side:

- -

Finally, it also provides tools to dynamically update widgets on the server side like cards, accordions, tabs, panels and more:

- +

The resizable argument allows to dynamically resize +the panel.

+

Note that for the moment, there is no option to control the width of +each panel.

+

As stated previously for the f7SplitLayout(), the +f7Panel() may also be considered as a sidebar. In that +case, we may include f7PanelMenu(). Finally do not forget +to set up the f7Navbar() so that panels are allowed!

-
-

-Create your first App

-
-

-Select a template

-

This choice is crucial when you are developing an App. It depends on the complexity of your visualizations and content. If your plan is to develop a simple graph or table, you should go for the f7SingleLayout() option. For more complex design, the best is f7TabLayout(). f7SplitLayout() is specific for tablets and desktop apps.

-
-
-

-Simple Layout

-
-f7SingleLayout(
-  ..., 
-  navbar, 
-  toolbar = NULL, 
-  panels = NULL,
-  appbar = NULL
-)
-

While only the navbar is mandatory, other components such as the toolbar are optionnal for the f7SingleLayout().

-
-
-

-Tabs Layout

-
-f7TabLayout(
-  ..., 
-  navbar, 
-  panels = NULL, 
-  appbar = NULL
-)
-

The … argument requires f7Tabs(..., id = NULL, swipeable = FALSE, animated = TRUE). The id argument is mandatory if you want to exploit the updateF7Tabs() function. f7Tabs() expect to have f7Tab(..., tabName, icon = NULL, active = FALSE) passed inside.

-
-
-

-Split Layout (similar to sidebarLayout in {shiny})

-
f7SplitLayout(.
-  ..., 
-  navbar, 
-  sidebar, 
-  toolbar = NULL, 
-  panels = NULL,
-  appbar = NULL
-)
-

The main content goes in the … parameter. Navigation items are gathered in the sidebar slot. The sidebar expect a f7Panel. Importantly, the side parameter must be set to “left” and the style to “reveal”. The navigation menu is organized as follows:

-
-f7PanelMenu(
-  id = "menu",
-  f7PanelItem(
-    tabName = "tab1", 
-    title = "Tab 1", 
-    icon = f7Icon("email"), 
-    active = TRUE
-  ),
-  f7PanelItem(
-    tabName = "tab2", 
-    title = "Tab 2", 
-    icon = f7Icon("home")
-  )
-)
-

The id argument is important if you want to get the currently selected item or update the select tab. Each f7PanelItem has a mandatory tabName. The associated input will be input$menu in that example, with “tab1” for value since the first tab was set to an active state. To adequately link the body and the sidebar, you must wrap the body content in f7Items() containing as many f7Item() as sidebar items. The tabName must correspond!

-
-
-

-Core Layout Components

-
-
-

-Page

-

It is the main skeleton of the template.

+
+

The appbar +

+

f7Appbar() is displayed on top of the +f7Navbar(). It is a best choice to embed +f7Searchbar(). f7Appbar() may also trigger +f7Panel().

-f7Page(
-  ..., 
-  options = list(
-    theme = c("ios", "md", "auto", "aurora"),
-    dark = TRUE,
-    filled = FALSE,
-    color = "#007aff",
-    touch = list(
-      tapHold = TRUE,
-      tapHoldDelay = 750,
-      iosTouchRipple = FALSE
-    ),
-    iosTranslucentBars = FALSE,
-    navbar = list(
-      iosCenterTitle = TRUE,
-      hideNavOnPageScroll = TRUE
-    ),
-    toolbar = list(
-      hideNavOnPageScroll = FALSE
-    ),
-    pullToRefresh = FALSE
-  ),
-  title = NULL, 
-  preloader = FALSE, 
-  loading_duration = 3,
-  allowPWA = FALSE
-)
-

options sets up the app look and feel. preloader is useful in case you want to display a loading screen. f7Page() accepts any shinyMobile layout.

- +
+
+
+

Select a template +

+

This choice is crucial when you are developing an App. It depends on +the complexity of your visualizations and content. If your plan is to +develop a simple graph or table, you should go for the +f7SingleLayout() option. For more complex design, the best +is f7TabLayout(). f7SplitLayout() is specific +for tablets and desktop apps.

+
+

Simple Layout +

+

f7SingleLayout() is dedicated to build simple, one-page +apps or gadgets.

-f7Navbar(
-  ..., 
-  subNavbar = NULL, 
-  title = NULL, 
-  subtitle = NULL,
-  hairline = TRUE, 
-  shadow = TRUE, 
-  bigger = FALSE,
-  leftPanel = FALSE, 
-  rightPanel = FALSE
-)
-

For complex apps, it might be interesting to add a f7SubNavbar(...). It may contain any element like f7Button() or text. f7Navbar() has also styling parameters such as shadow and hairline.

-
-
-
-The Toolbar
-

This is an option if you decide not to embed a f7SubNavbar(). The toolbar is the rigth place to add f7Button(), f7Link(), f7Badge()… Its position is controlled with the position parameter (either top or bottom).

+f7SingleLayout( + ..., + navbar, + toolbar = NULL, + panels = NULL, + appbar = NULL +)
+

While only the navbar is mandatory, other components such as the +toolbar are optional for the f7SingleLayout().

+

The app below runs with specific options:

-f7Toolbar(
-  ..., 
-  position = c("top", "bottom"), 
-  hairline = TRUE,
-  shadow = TRUE, 
-  icons = FALSE, 
-  scrollable = FALSE
-)
-

Under the hood, f7Tabs() is a custom f7Toolbar()!

-
-
-
-Panels
-

Panels are also called sidebars. f7Panel() is the corresponding function.

+f7Page( + options = list(dark = FALSE, filled = FALSE, theme = "md"), + ... +)
+
+
+ +
+ + +
+
+

+
+
-f7Panel(
-  ..., 
-  id = NULL,
-  title = NULL, 
-  side = c("left", "right"),
-  theme = c("dark", "light"), 
-  effect = c("reveal", "cover"),
-  resizable = FALSE
-)
-

Although the App has a theme option, f7Panel() has an independent theme option. For instance, it is definitely possible to create a dark f7Panel() while the page theme is light, and conversely. Its behaviour is controlled via the effect argument:

-
    -
  • -reveal will make the body content move and resize
    • -
  • -cover will cover the body content
    • -
-

The resizable argument allows to dynamically resize the panel.

-

Note that for the moment, there is no option to control the width of each panel.

-

As stated previously for the f7SplitLayout(), the f7Panel() may also be considered as a sidebar. In that case, we may include f7PanelMenu(). Finally do not forget to set up the f7Navbar() so that panels are allowed!

-
-
-
-The appbar
-

f7Appbar() is displayed on top of the f7Navbar(). It is a best choice to embed f7Searchbar(). f7Appbar() may also trigger f7Panel().

+library(shiny) +library(shinyMobile) +library(apexcharter) +library(dplyr) +library(ggplot2) + +data("economics_long") +economics_long <- economics_long %>% + group_by(variable) %>% + slice((n()-100):n()) + + +shinyApp( + ui = f7Page( + title = "My app", + options = list(dark = FALSE, filled = FALSE, theme = "md"), + f7SingleLayout( + navbar = f7Navbar( + title = "Single Layout", + hairline = TRUE, + shadow = TRUE + ), + toolbar = f7Toolbar( + position = "bottom", + f7Link(label = "Link 1", href = "https://www.google.com"), + f7Link(label = "Link 2", href = "https://www.google.com") + ), + # main content + f7Shadow( + intensity = 16, + hover = TRUE, + f7Card( + title = "Card header", + apexchartOutput("areaChart") + ) + ) + ) + ), + server = function(input, output) { + output$areaChart <- renderApexchart({ + apex( + data = economics_long, + type = "area", + mapping = aes( + x = date, + y = value01, + fill = variable + ) + ) %>% + ax_yaxis(decimalsInFloat = 2) %>% # number of decimals to keep + ax_chart(stacked = TRUE) %>% + ax_yaxis(max = 4, tickAmount = 4) + }) + } +)
+
+
+
+

Tabs Layout +

+

Choose this layout to develop complex multi-tabbed +apps (best choice for iOS/android Apps).

-f7Appbar(
-  ..., 
-  leftPanel = FALSE, 
-  rightPanel = FALSE,
-  maximizable = FALSE
-)
-
-
-
-

-Options

-

This is probably the most important element of the template:

+f7TabLayout( + ..., + navbar, + messagebar = NULL, + panels = NULL, + appbar = NULL +)
+

The … argument requires +f7Tabs(..., id = NULL, swipeable = FALSE, animated = TRUE). +The id argument is mandatory if you want to exploit the +updateF7Tabs() function. f7Tabs() expect to +have f7Tab(..., tabName, icon = NULL, active = FALSE) +passed inside.

+

The app below runs with specific options:

-options = list(
-    theme = c("ios", "md", "auto", "aurora"),
-    dark = TRUE,
-    filled = FALSE,
-    color = "#007aff",
-    touch = list(
-      tapHold = TRUE,
-      tapHoldDelay = 750,
-      iosTouchRipple = FALSE
-    ),
-    iosTranslucentBars = FALSE,
-    navbar = list(
-      iosCenterTitle = TRUE,
-      hideNavOnPageScroll = TRUE
-    ),
-    toolbar = list(
-      hideNavOnPageScroll = FALSE
-    ),
-    pullToRefresh = FALSE
-  )
-

As stated above, you may choose between 3 skins and 2 color themes. There is a third option called filled that allows to fill the navbar and toolbar if enabled. The color options simply changes the color of elements such as buttons, panel triggers, tabs triggers, … shinyMobile brings a lot of different colors. hideOnPageScroll allow to hide/show the navbar and toolbar which is useful to focus on the content. The tapHold parameter ensure that the “long-press” feature is activated. Framework7 has many more options which can be passed through this options parameter

+f7Page( + options = list(dark = FALSE, filled = FALSE, theme = "md"), + ... +)
+
+
+
+ +
-
- - +
+

Split Layout +

+

f7SplitLayout() is the third layout introduced with +shinyMobile, similar to sidebarLayout with +{shiny}. This template is focused for tablet/desktop use. It is composed +of a sidebar, and a main panel.

+
+f7SplitLayout(
+  ..., 
+  navbar, 
+  sidebar, 
+  toolbar = NULL, 
+  panels = NULL,
+  appbar = NULL
+)
+

The main content goes in the … parameter. Navigation +items are gathered in the sidebar slot. The sidebar expect a +f7Panel(). Importantly, the side parameter must be set to +left and the style to reveal. The navigation +menu is organized as follows:

+
+f7PanelMenu(
+  id = "menu",
+  f7PanelItem(
+    tabName = "tab1", 
+    title = "Tab 1", 
+    icon = f7Icon("email"), 
+    active = TRUE
+  ),
+  f7PanelItem(
+    tabName = "tab2", 
+    title = "Tab 2", 
+    icon = f7Icon("home")
+  )
+)
+

The id argument is important if you want to get the +currently selected item or update the select tab. Each +f7PanelItem() has a mandatory tabName. The +associated input will be input$menu in that example, with +tab1 for value since the first tab was set to an active +state. To adequately link the body and the sidebar, you must wrap the +body content in f7Items() containing as many +f7Item() as sidebar items. The tabName +must correspond.

+
+
+ +
+ + +
+
+

+
+
+
+library(shiny)
+library(ggplot2)
+library(shinyMobile)
+library(apexcharter)
+library(thematic)
+
+fruits <- data.frame(
+  name = c('Apples', 'Oranges', 'Bananas', 'Berries'),
+  value = c(44, 55, 67, 83)
+)
+
+thematic_shiny(font = "auto")
+
+new_mtcars <- reshape(
+  data = head(mtcars),
+  idvar = "model",
+  varying = list(c("drat", "wt")),
+  times = c("drat", "wt"),
+  direction = "long",
+  v.names = "value",
+  drop = c("mpg", "cyl", "hp", "dist", "qsec", "vs", "am", "gear", "carb")
+)
+
+shinyApp(
+  ui = f7Page(
+    title = "My app",
+    options = list(
+      theme = "aurora",
+      dark = TRUE,
+      filled = FALSE,
+      color = "#007aff",
+      touch = list(
+        tapHold = TRUE,
+        tapHoldDelay = 750,
+        iosTouchRipple = FALSE
+      ),
+      iosTranslucentBars = FALSE,
+      navbar = list(
+        iosCenterTitle = TRUE,
+        hideNavOnPageScroll = TRUE
+      ),
+      toolbar = list(
+        hideNavOnPageScroll = FALSE
+      ),
+      pullToRefresh = FALSE
+    ),
+    f7SplitLayout(
+      sidebar = f7Panel(
+        title = "Sidebar",
+        side = "left",
+        theme = "light",
+        f7PanelMenu(
+          id = "menu",
+          f7PanelItem(
+            tabName = "tab1",
+            title = "Tab 1",
+            icon = f7Icon("equal_circle"),
+            active = TRUE
+          ),
+          f7PanelItem(
+            tabName = "tab2",
+            title = "Tab 2",
+            icon = f7Icon("equal_circle")
+          ),
+          f7PanelItem(
+            tabName = "tab3",
+            title = "Tab 3",
+            icon = f7Icon("equal_circle")
+          )
+        ),
+        uiOutput("selected_tab"),
+        effect = "reveal"
+      ),
+      navbar = f7Navbar(
+        title = "Split Layout",
+        hairline = FALSE,
+        shadow = TRUE
+      ),
+      toolbar = f7Toolbar(
+        position = "bottom",
+        f7Link(label = "Link 1", href = "https://www.google.com"),
+        f7Link(label = "Link 2", href = "https://www.google.com")
+      ),
+      # main content
+      f7Items(
+        f7Item(
+          tabName = "tab1",
+          f7Button("toggleSheet", "Plot parameters"),
+          f7Sheet(
+            id = "sheet1",
+            label = "Plot Parameters",
+            orientation = "bottom",
+            swipeToClose = TRUE,
+            backdrop = TRUE,
+            f7Slider(
+              "obs",
+              "Number of observations:",
+              min = 0, max = 1000,
+              value = 500
+            )
+          ),
+          br(),
+          plotOutput("distPlot")
+        ),
+        f7Item(
+          tabName = "tab2",
+          apexchartOutput("radar")
+        ),
+        f7Item(
+          tabName = "tab3",
+          f7Toggle(
+            inputId = "plot_show",
+            label = "Show Plot?",
+            checked = TRUE
+          ),
+          apexchartOutput("multi_radial")
+        )
+      )
+    )
+  ),
+  server = function(input, output, session) {
+
+    observeEvent(input$toggleSheet, {
+      updateF7Sheet(id = "sheet1")
+    })
+
+    observeEvent(input$obs, {
+      if (input$obs < 500) {
+        f7Notif(
+          text = paste0("The slider value is only ", input$obs, ". Please
+                        increase it"),
+          icon = f7Icon("bolt_fill"),
+          title = "Alert",
+          titleRightText = Sys.Date()
+        )
+      }
+    })
+
+    output$radar <- renderApexchart({
+      apex(
+        data = new_mtcars,
+        type = "radar",
+        mapping = aes(
+          x = model,
+          y = value,
+          group = time)
+      )
+    })
+
+    output$selected_tab <- renderUI({
+      HTML(paste0("Access the currently selected tab: ", strong(input$menu)))
+    })
+
+    output$distPlot <- renderPlot({
+      dist <- rnorm(input$obs)
+      hist(dist)
+    })
+
+    output$multi_radial <- renderApexchart({
+      if (input$plot_show) {
+        apex(data = fruits, type = "radialBar", mapping = aes(x = name, y = value))
+      }
+    })
+
+  }
+)
+
+
+
+
+

App options +

+

This is where you can customize the global app behavior:

+
+options = list(
+    theme = c("ios", "md", "auto", "aurora"),
+    dark = TRUE,
+    filled = FALSE,
+    color = "#007aff",
+    touch = list(
+      tapHold = TRUE,
+      tapHoldDelay = 750,
+      iosTouchRipple = FALSE
+    ),
+    iosTranslucentBars = FALSE,
+    navbar = list(
+      iosCenterTitle = TRUE,
+      hideOnPageScroll = TRUE
+    ),
+    toolbar = list(
+      hideOnPageScroll = FALSE
+    ),
+    pullToRefresh = FALSE
+  )
+

As stated above, you may choose between 3 skins and 2 color themes. +There is a third option called filled that allows to +fill the navbar and toolbar if enabled. The color +options simply changes the color of elements such as buttons, panel +triggers, tabs triggers, … shinyMobile brings a lot of +different colors. hideOnPageScroll allows to hide/show +the navbar and toolbar which is useful to focus on the content. The +tapHold parameter ensure that the “long-press” feature +is activated. preloader is useful in case you want to +display a loading screen. Framework7 has many more options +which can be passed through this options parameter.

+
+
+
+

Gadgets +

+

shinyMobile is particularly well suited to build shiny +gagdets. To convert an existing app to a gadget, wrap +it in the shiny::runGadget() function.

+
+library(shiny)
+library(shinyMobile)
+runGadget(shinyAppDir(system.file("examples/tab_layout", package = "shinyMobile")))
+
+
-
-

Developed by David Granjon, Victor Perrier, Isabelle Rudolf.

+
+

+

Developed by David Granjon, Victor Perrier, Isabelle Rudolf.

-
-

Site built with pkgdown 1.6.1.

+
+

+

Site built with pkgdown 2.0.7.

-
+
+ diff --git a/docs/articles/shinyMobile_tools.html b/docs/articles/shinyMobile_tools.html index 47cef800..b6fa00d2 100644 --- a/docs/articles/shinyMobile_tools.html +++ b/docs/articles/shinyMobile_tools.html @@ -4,7 +4,8 @@ - + + shinyMobile Tools • shinyMobile @@ -12,369 +13,424 @@ - - - + + + - - - + + + - -
-
-
-
-

shinyMobile Tools

+ + + +
+
+

shinyMobile Tools

- Source: vignettes/shinyMobile_tools.Rmd - - + Source: vignettes/shinyMobile_tools.Rmd +
shinyMobile_tools.Rmd
-
-

-Mobile preview

-

Since V0.2.0, shinyMobile has a function to preview your app in a large range of mobile devices: iphone X, iphone 8+, iphone8, iphone 5s, iphone 4s, ipad, Samsung galaxy S5, Samsung galaxy Note 8, … either locally on online:

+
+

Mobile preview +

+

Since V0.2.0, shinyMobile has a function to preview +your app in a large range of mobile devices: iphone X, iphone 8+, +iphone8, iphone 5s, iphone 4s, ipad, Samsung galaxy S5, Samsung galaxy +Note 8, … either locally on online:

-library(shiny)
-library(shinyMobile)
-preview_mobile(appPath = system.file("examples/gallery/app.R", package = "shinyMobile"), device = "iphoneX")
-preview_mobile(url = "https://dgranjon.shinyapps.io/miniUI2DemoMd", device = "ipadMini")
+library(shiny) +library(shinyMobile) +preview_mobile(appPath = system.file("examples/gallery/app.R", package = "shinyMobile"), device = "iphoneX") +preview_mobile(url = "https://dgranjon.shinyapps.io/miniUI2DemoMd", device = "ipadMini")

The local preview is a 4 steps process:

  • run preview_mobile with appPath
    • -
  • Copy the returned code R -e "shiny::runApp('appPath', port = 3838)" in a terminal to launch the app
    • +
  • Copy the returned code +R -e "shiny::runApp('appPath', port = 3838)" in a terminal +to launch the app
  • Press enter to run the wrapper app
  • Have fun!
-

preview_mobile has other options such as color and landscape (to preview in landscape mode).

+

preview_mobile has other options such as color and +landscape (to preview in landscape mode).

+
+
+

Pull to Refresh +

+

shinyMobile introduces the pull to refresh feature. It +may be used to refresh the page content by pulling from top to bottom. +This feature is disabled by default but passing +pullToRefresh = TRUE in f7Page options will +activate it. On the server side, an input, namely input$ptr is TRUE when +ptr is refreshed and becomes NULL at the end of the animation (You may +run the app below in full screen mode and hold a left click with your +mouse from top to bottom):

+
+
+ +
+ +
-
-

-Pull to Refresh

-

shinyMobile introduces the pull to refresh feature. It may be used to refresh the page content by pulling from top to bottom. This feature is disabled by default but passing pullToRefresh = TRUE in f7Page options will activate it. On the server side, an input, namely input$ptr is TRUE when ptr is refreshed and becomes NULL at the end of the animation. This allows to trigger updates/computations on the server side, for instance:

-shinyApp(
-  ui = f7Page(
-    title = "My app",
-    options = list(pullToRefresh = TRUE),
-    f7SingleLayout(
-      navbar = f7Navbar(
-        title = "Single Layout",
-        hairline = FALSE,
-        shadow = TRUE
-      ),
-      toolbar = f7Toolbar(
-        position = "bottom",
-        f7Link(label = "Link 1", href = "https://www.google.com"),
-        f7Link(label = "Link 2", href = "https://www.google.com")
-      ),
-      # main content
-      f7List(
-        lapply(1:3, function(j) {
-          f7ListItem(
-            letters[j],
-            media = f7Icon("alarm_fill"),
-            right = "Right Text",
-            header = "Header",
-            footer = "Footer"
-          )
-        })
-      )
-    )
-  ),
-  server = function(input, output, session) {
-    observe(print(input$ptr))
-
-    observeEvent(input$ptr, {
-      ptrStatus <- if (input$ptr) "on"
-      f7Dialog(
-        text = paste('ptr is', ptrStatus),
-        type = "alert"
-      )
-    })
-  }
-)
+library(shiny) +library(shinyMobile) + +shinyApp( + ui = f7Page( + title = "My app", + options = list(pullToRefresh = TRUE), + f7SingleLayout( + navbar = f7Navbar( + title = "Single Layout", + hairline = FALSE, + shadow = TRUE + ), + toolbar = f7Toolbar( + position = "bottom", + f7Link(label = "Link 1", href = "https://www.google.com"), + f7Link(label = "Link 2", href = "https://www.google.com") + ), + # main content + f7List( + lapply(1:3, function(j) { + f7ListItem( + letters[j], + media = f7Icon("alarm_fill"), + right = "Right Text", + header = "Header", + footer = "Footer" + ) + }) + ) + ) + ), + server = function(input, output, session) { + observe(print(input$ptr)) + + observeEvent(input$ptr, { + ptrStatus <- if (input$ptr) "on" + f7Dialog( + text = paste('ptr is', ptrStatus), + type = "alert" + ) + }) + } +)
+
+
+

Predefined input values +

+

shinyMobile contains a set of useful functions to help +you setting the layout as best as possible.

+
+

Informations about your current device +

+
+

Description +

+

shinyMobile has a predefined input, namely +input$deviceInfo.

+
+
+ +
+ +
-
-

-Predefined input values

-

shinyMobile contains a set of useful functions to help you setting the layout as best as possible.

-
-

-Informations about your current device

-
-

-Description

-

shinyMobile has a predefined input, namely input$deviceInfo:

-shiny::shinyApp(
-  ui = f7Page(
-    title = "My app",
-    f7SingleLayout(
-      navbar = f7Navbar(
-        title = "Access device info",
-        hairline = FALSE,
-        shadow = TRUE
-      ),
-      # main content
-      verbatimTextOutput("info")
-    )
-  ),
-  server = function(input, output) {
-    output$info <- renderPrint({
-      input$deviceInfo
-    })
-  }
-)
+library(shiny) +library(shinyMobile) + +shinyApp( + ui = f7Page( + options = list(dark = FALSE), + title = "My app", + f7SingleLayout( + navbar = f7Navbar( + title = "Access device info", + hairline = FALSE, + shadow = TRUE + ), + # main content + verbatimTextOutput("info") + ) + ), + server = function(input, output) { + output$info <- renderPrint({ + input$deviceInfo + }) + } +)

The following fields are returned:

  • -input$deviceInfo$os, returns a string containing your OS
    • +input$deviceInfo$os, returns a string containing your +OS
  • -input$deviceInfo$desktop, TRUE or FALSE (if you are running the app on your laptop or desktop)
    • +input$deviceInfo$desktop, TRUE or FALSE (if you are +running the app on your laptop or desktop)
  • -input$deviceInfo$standalone, TRUE or FALSE (standalone, namely whether you access the app like a native app)
    • +input$deviceInfo$standalone, TRUE or FALSE (standalone, +namely whether you access the app like a native app)
  • input$deviceInfo$webview, TRUE or FALSE (webview)
  • -input$deviceInfo$electron, TRUE or FALSE (electron)
    • +input$deviceInfo$electron, TRUE or FALSE +(electron)

There are other fields, with less inportance:

  • -input$deviceInfo$ios, TRUE or FALSE (if you are running under iOS)
    • +input$deviceInfo$ios, TRUE or FALSE (if you are running +under iOS)
  • -input$deviceInfo$android, TRUE or FALSE (if you are running under android)
    • +input$deviceInfo$android, TRUE or FALSE (if you are +running under android)
  • -input$deviceInfo$androidChrome, TRUE or FALSE (if you are running under android with Chrome)
    • +input$deviceInfo$androidChrome, TRUE or FALSE (if you +are running under android with Chrome)
  • -input$deviceInfo$iphone, TRUE or FALSE (if you have an iphone)
    • +input$deviceInfo$iphone, TRUE or FALSE (if you have an +iphone)
  • -input$deviceInfo$ipod, TRUE or FALSE (if you have an ipod)
    • +input$deviceInfo$ipod, TRUE or FALSE (if you have an +ipod)
  • -input$deviceInfo$ipad, TRUE or FALSE (if you have an ipad)
    • +input$deviceInfo$ipad, TRUE or FALSE (if you have an +ipad)
  • -input$deviceInfo$edge, TRUE or FALSE (if you are using edge)
    • +input$deviceInfo$edge, TRUE or FALSE (if you are using +edge)
  • -input$deviceInfo$ie, TRUE or FALSE (if you are using Internet Explorer)
    • +input$deviceInfo$ie, TRUE or FALSE (if you are using +Internet Explorer)
  • -input$deviceInfo$firefox, TRUE or FALSE (if you are using Firefox)
    • +input$deviceInfo$firefox, TRUE or FALSE (if you are +using Firefox)
  • -input$deviceInfo$macos, TRUE or FALSE (if you have macOS)
    • +input$deviceInfo$macos, TRUE or FALSE (if you have +macOS)
  • -input$deviceInfo$windows, TRUE or FALSE (if you have Windows)
    • +input$deviceInfo$windows, TRUE or FALSE (if you have +Windows)
  • input$deviceInfo$cordova, TRUE or FALSE (cordova)
  • -input$deviceInfo$phonegap, TRUE or FALSE (phonegap)
    • +input$deviceInfo$phonegap, TRUE or FALSE +(phonegap)
-
-

-Usecase

-

Below the example displays a card only when the app is on desktop.

+
+

Usecase +

+

Below the example displays a card only when the app is on +desktop.

+
+
+ +
+ + +
-shinyApp(
-  ui = f7Page(
-    title = "My app",
-    f7SingleLayout(
-      navbar = f7Navbar(
-        title = "Access device info",
-        hairline = FALSE,
-        shadow = TRUE
-      ),
-      # main content
-      uiOutput("card"),
-      textOutput("userAgent"),
-    )
-  ),
-  server = function(input, output) {
-    
-    output$userAgent <- renderText(input$deviceInfo$desktop)
-    
-    # generate a card only for desktop
-    output$card <- renderUI({
-      if (input$deviceInfo$desktop) {
-        f7Card(
-          "This is a simple card with plain text,
-          but cards can also contain their own header,
-          footer, list view, image, or any other element."
-        )
-      }
-    })
-  }
-)
+library(shiny) +library(shinyMobile) + +shinyApp( + ui = f7Page( + options = list(dark = FALSE), + title = "My app", + f7SingleLayout( + navbar = f7Navbar( + title = "Access device info", + hairline = FALSE, + shadow = TRUE + ), + # main content + uiOutput("card"), + textOutput("userAgent"), + ) + ), + server = function(input, output) { + + output$userAgent <- renderText(input$deviceInfo$desktop) + + # generate a card only for desktop + output$card <- renderUI({ + req(input$deviceInfo$desktop) + f7Card( + "This is a simple card with plain text, + but cards can also contain their own header, + footer, list view, image, or any other element." + ) + }) + } +)
-
-

-Informations about Shiny inputs

-

shinyMobile has input$lastInputChanged which returns the name, value and type of the last changed input, see below:

-
-shinyApp(
-  ui = f7Page(
-    title = "My app",
-    f7SingleLayout(
-      navbar = f7Navbar(
-        title = "Single Layout",
-        hairline = FALSE,
-        shadow = TRUE
-      ),
-      toolbar = f7Toolbar(
-        position = "bottom",
-        f7Link(label = "Link 1", href = "https://www.google.com"),
-        f7Link(label = "Link 2", href = "https://www.google.com")
-      ),
-      # main content
-      f7Card(verbatimTextOutput("infos")),
-      f7Card(
-        f7Text(inputId = "text", label = "Text"),
-        f7Slider(inputId = "range1", label = "Range", min = 0, max = 2, value = 1, step = 0.1),
-        f7Stepper(inputId = "stepper1", label = "Stepper", min = 0, max = 10, value = 5),
-        verbatimTextOutput("lastChanged")
-      )
-    )
-  ),
-  server = function(input, output) {
-    output$infos <- renderPrint(input$shinyInfo)
-    output$lastChanged <- renderPrint(input$lastInputChanged)
-  }
-)
-

This is convenient since usually, there is no shortcut to get the last changed value and this needs to be done server side in shiny.

-

Soon there will be a way to compare initial input values (frozen) to current input values and get a diff.

+
+

Informations about Shiny inputs +

+

shinyMobile has input$lastInputChanged +which returns the name, value and type of the last changed input, see +below.

+
+
+
-
-

-Other information

-

input$shinyInfo gives the current workerId (for shinyapps.io, shiny server pro, rstudio connect), the unique sessionId (equal to session$token on the server side).

+ +
+
+library(shiny)
+library(shinyMobile)
+
+shinyApp(
+  ui = f7Page(
+    options = list(dark = FALSE),
+    title = "My app",
+    f7SingleLayout(
+      navbar = f7Navbar(
+        title = "Single Layout",
+        hairline = FALSE,
+        shadow = TRUE
+      ),
+      toolbar = f7Toolbar(
+        position = "bottom",
+        f7Link(label = "Link 1", href = "https://www.google.com"),
+        f7Link(label = "Link 2", href = "https://www.google.com")
+      ),
+      # main content
+      f7Card(verbatimTextOutput("infos")),
+      f7Card(
+        f7Text(inputId = "text", label = "Text"),
+        f7Slider(inputId = "range1", label = "Range", min = 0, max = 2, value = 1, step = 0.1),
+        f7Stepper(inputId = "stepper1", label = "Stepper", min = 0, max = 10, value = 5),
+        verbatimTextOutput("lastChanged")
+      )
+    )
+  ),
+  server = function(input, output) {
+    output$infos <- renderPrint(input$shinyInfo)
+    output$lastChanged <- renderPrint(input$lastInputChanged)
+  }
+)
+

This is convenient since usually, there is no shortcut to get the +last changed value and this needs to be done server side in shiny.

+

Soon there will be a way to compare initial input values (frozen) to +current input values and get a diff.

-
- - +
-
-

Developed by David Granjon, Victor Perrier, Isabelle Rudolf.

+
+

+

Developed by David Granjon, Victor Perrier, Isabelle Rudolf.

-
-

Site built with pkgdown 1.6.1.

+
+

+

Site built with pkgdown 2.0.7.

-
+
+ diff --git a/docs/authors.html b/docs/authors.html index 4c137754..4dffe623 100644 --- a/docs/authors.html +++ b/docs/authors.html @@ -1,224 +1,135 @@ - - - - - - - -Authors • shinyMobile - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - +Authors and Citation • shinyMobile + Skip to contents + +
-
-
-

Authors

+
+

Authors and Citation

-
    -
  • -

    David Granjon. Author, maintainer. -

    -
    • -
  • -

    Victor Perrier. Author. -

    -
    • -
  • -

    John Coene. Contributor. -

    -
    • -
  • -

    Isabelle Rudolf. Author. -

    -
    • -
  • -

    Dieter Menne. Contributor. -

    -
    • -
  • -

    Marvelapp. Contributor, copyright holder. -
    device.css wrappers

    -
    • -
  • -

    Vladimir Kharlampidi. Contributor, copyright holder. -
    Framework7 HTML template

    -
    • -
- -
- -
- +
+

Authors

+ +
  • +

    David Granjon. Author, maintainer. +

    +
    • +
  • +

    Victor Perrier. Author. +

    +
    • +
  • +

    John Coene. Contributor. +

    +
    • +
  • +

    Isabelle Rudolf. Author. +

    +
    • +
  • +

    Dieter Menne. Contributor. +

    +
    • +
  • +

    Marvelapp. Contributor, copyright holder. +
    device.css wrappers

    +
    • +
  • +

    Vladimir Kharlampidi. Contributor, copyright holder. +
    Framework7 HTML template

    +
    • +
+ +
+

Citation

+

Source: DESCRIPTION

+ +

Granjon D, Perrier V, Rudolf I (2024). +shinyMobile: Mobile Ready 'shiny' Apps with Standalone Capabilities. +https://github.com/RinteRface/shinyMobile, https://rinterface.github.io/shinyMobile/. +

+ 
@Manual{,
+  title = {shinyMobile: Mobile Ready 'shiny' Apps with Standalone Capabilities},
+  author = {David Granjon and Victor Perrier and Isabelle Rudolf},
+  year = {2024},
+  note = {https://github.com/RinteRface/shinyMobile, https://rinterface.github.io/shinyMobile/},
+}
+
+
-
-
-

Developed by David Granjon, Victor Perrier, Isabelle Rudolf.

+
+

Developed by David Granjon, Victor Perrier, Isabelle Rudolf.

-
-

Site built with pkgdown 1.6.1.

+
+

Site built with pkgdown 2.0.7.

-
-
+
+ - - - + diff --git a/docs/extra.css b/docs/extra.css index 467d386c..88b94ad7 100644 --- a/docs/extra.css +++ b/docs/extra.css @@ -1 +1,25 @@ .marvel-device{display:inline-block;position:relative;-webkit-box-sizing:content-box !important;box-sizing:content-box !important}.marvel-device .screen{width:100%;position:relative;height:100%;z-index:3;background:white;overflow:hidden;display:block;border-radius:1px;-webkit-box-shadow:0 0 0 3px #111;box-shadow:0 0 0 3px #111}.marvel-device .top-bar,.marvel-device .bottom-bar{height:3px;background:black;width:100%;display:block}.marvel-device .middle-bar{width:3px;height:4px;top:0px;left:90px;background:black;position:absolute}.marvel-device.iphone8{width:375px;height:667px;padding:105px 24px;background:#d9dbdc;border-radius:56px;-webkit-box-shadow:inset 0 0 3px 0 rgba(0,0,0,0.2);box-shadow:inset 0 0 3px 0 rgba(0,0,0,0.2)}.marvel-device.iphone8:before{width:calc(100% - 12px);height:calc(100% - 12px);position:absolute;top:6px;content:'';left:6px;border-radius:50px;background:#f8f8f8;z-index:1}.marvel-device.iphone8:after{width:calc(100% - 16px);height:calc(100% - 16px);position:absolute;top:8px;content:'';left:8px;border-radius:48px;-webkit-box-shadow:inset 0 0 3px 0 rgba(0,0,0,0.1),inset 0 0 6px 3px #fff;box-shadow:inset 0 0 3px 0 rgba(0,0,0,0.1),inset 0 0 6px 3px #fff;z-index:2}.marvel-device.iphone8 .home{border-radius:100%;width:68px;height:68px;position:absolute;left:50%;margin-left:-34px;bottom:22px;z-index:3;background:#303233;background:linear-gradient(135deg, #303233 0%, #b5b7b9 50%, #f0f2f2 69%, #303233 100%)}.marvel-device.iphone8 .home:before{background:#f8f8f8;position:absolute;content:'';border-radius:100%;width:calc(100% - 8px);height:calc(100% - 8px);top:4px;left:4px}.marvel-device.iphone8 .top-bar{height:14px;background:#bfbfc0;position:absolute;top:68px;left:0}.marvel-device.iphone8 .bottom-bar{height:14px;background:#bfbfc0;position:absolute;bottom:68px;left:0}.marvel-device.iphone8 .sleep{position:absolute;top:190px;right:-4px;width:4px;height:66px;border-radius:0px 2px 2px 0px;background:#d9dbdc}.marvel-device.iphone8 .volume{position:absolute;left:-4px;top:188px;z-index:0;height:66px;width:4px;border-radius:2px 0px 0px 2px;background:#d9dbdc}.marvel-device.iphone8 .volume:before{position:absolute;left:2px;top:-78px;height:40px;width:2px;border-radius:2px 0px 0px 2px;background:inherit;content:'';display:block}.marvel-device.iphone8 .volume:after{position:absolute;left:0px;top:82px;height:66px;width:4px;border-radius:2px 0px 0px 2px;background:inherit;content:'';display:block}.marvel-device.iphone8 .camera{background:#3c3d3d;width:12px;height:12px;position:absolute;top:24px;left:50%;margin-left:-6px;border-radius:100%;z-index:3}.marvel-device.iphone8 .sensor{background:#3c3d3d;width:16px;height:16px;position:absolute;top:49px;left:134px;z-index:3;border-radius:100%}.marvel-device.iphone8 .speaker{background:#292728;width:70px;height:6px;position:absolute;top:54px;left:50%;margin-left:-35px;border-radius:6px;z-index:3}.marvel-device.iphone8.gold{background:#f9e7d3}.marvel-device.iphone8.gold .top-bar,.marvel-device.iphone8.gold .bottom-bar{background:white}.marvel-device.iphone8.gold .sleep,.marvel-device.iphone8.gold .volume{background:#f9e7d3}.marvel-device.iphone8.gold .home{background:#cebba9;background:linear-gradient(135deg, #cebba9 0%, #f9e7d3 50%, #cebba9 100%)}.marvel-device.iphone8.black{background:#464646;-webkit-box-shadow:inset 0 0 3px 0 rgba(0,0,0,0.7);box-shadow:inset 0 0 3px 0 rgba(0,0,0,0.7)}.marvel-device.iphone8.black:before{background:#080808}.marvel-device.iphone8.black:after{-webkit-box-shadow:inset 0 0 3px 0 rgba(0,0,0,0.1),inset 0 0 6px 3px #212121;box-shadow:inset 0 0 3px 0 rgba(0,0,0,0.1),inset 0 0 6px 3px #212121}.marvel-device.iphone8.black .top-bar,.marvel-device.iphone8.black .bottom-bar{background:#212121}.marvel-device.iphone8.black .volume,.marvel-device.iphone8.black .sleep{background:#464646}.marvel-device.iphone8.black .camera{background:#080808}.marvel-device.iphone8.black .home{background:#080808;background:linear-gradient(135deg, #080808 0%, #464646 50%, #080808 100%)}.marvel-device.iphone8.black .home:before{background:#080808}.marvel-device.iphone8.landscape{padding:24px 105px;height:375px;width:667px}.marvel-device.iphone8.landscape .sleep{top:100%;border-radius:0px 0px 2px 2px;right:190px;height:4px;width:66px}.marvel-device.iphone8.landscape .volume{width:66px;height:4px;top:-4px;left:calc(100% - 188px - 66px);border-radius:2px 2px 0px 0px}.marvel-device.iphone8.landscape .volume:before{width:40px;height:2px;top:2px;right:-78px;left:auto;border-radius:2px 2px 0px 0px}.marvel-device.iphone8.landscape .volume:after{left:-82px;width:66px;height:4px;top:0;border-radius:2px 2px 0px 0px}.marvel-device.iphone8.landscape .top-bar{width:14px;height:100%;left:calc(100% - 68px - 14px);top:0}.marvel-device.iphone8.landscape .bottom-bar{width:14px;height:100%;left:68px;top:0}.marvel-device.iphone8.landscape .home{top:50%;margin-top:-34px;margin-left:0;left:22px}.marvel-device.iphone8.landscape .sensor{top:134px;left:calc(100% - 49px - 16px)}.marvel-device.iphone8.landscape .speaker{height:70px;width:6px;left:calc(100% - 54px - 6px);top:50%;margin-left:0px;margin-top:-35px}.marvel-device.iphone8.landscape .camera{left:calc(100% - 32px);top:50%;margin-left:0px;margin-top:-5px}.marvel-device.iphone8plus{width:414px;height:736px;padding:112px 26px;background:#d9dbdc;border-radius:56px;-webkit-box-shadow:inset 0 0 3px 0 rgba(0,0,0,0.2);box-shadow:inset 0 0 3px 0 rgba(0,0,0,0.2)}.marvel-device.iphone8plus:before{width:calc(100% - 12px);height:calc(100% - 12px);position:absolute;top:6px;content:'';left:6px;border-radius:50px;background:#f8f8f8;z-index:1}.marvel-device.iphone8plus:after{width:calc(100% - 16px);height:calc(100% - 16px);position:absolute;top:8px;content:'';left:8px;border-radius:48px;-webkit-box-shadow:inset 0 0 3px 0 rgba(0,0,0,0.1),inset 0 0 6px 3px #fff;box-shadow:inset 0 0 3px 0 rgba(0,0,0,0.1),inset 0 0 6px 3px #fff;z-index:2}.marvel-device.iphone8plus .home{border-radius:100%;width:68px;height:68px;position:absolute;left:50%;margin-left:-34px;bottom:24px;z-index:3;background:#303233;background:linear-gradient(135deg, #303233 0%, #b5b7b9 50%, #f0f2f2 69%, #303233 100%)}.marvel-device.iphone8plus .home:before{background:#f8f8f8;position:absolute;content:'';border-radius:100%;width:calc(100% - 8px);height:calc(100% - 8px);top:4px;left:4px}.marvel-device.iphone8plus .top-bar{height:14px;background:#bfbfc0;position:absolute;top:68px;left:0}.marvel-device.iphone8plus .bottom-bar{height:14px;background:#bfbfc0;position:absolute;bottom:68px;left:0}.marvel-device.iphone8plus .sleep{position:absolute;top:190px;right:-4px;width:4px;height:66px;border-radius:0px 2px 2px 0px;background:#d9dbdc}.marvel-device.iphone8plus .volume{position:absolute;left:-4px;top:188px;z-index:0;height:66px;width:4px;border-radius:2px 0px 0px 2px;background:#d9dbdc}.marvel-device.iphone8plus .volume:before{position:absolute;left:2px;top:-78px;height:40px;width:2px;border-radius:2px 0px 0px 2px;background:inherit;content:'';display:block}.marvel-device.iphone8plus .volume:after{position:absolute;left:0px;top:82px;height:66px;width:4px;border-radius:2px 0px 0px 2px;background:inherit;content:'';display:block}.marvel-device.iphone8plus .camera{background:#3c3d3d;width:12px;height:12px;position:absolute;top:29px;left:50%;margin-left:-6px;border-radius:100%;z-index:3}.marvel-device.iphone8plus .sensor{background:#3c3d3d;width:16px;height:16px;position:absolute;top:54px;left:154px;z-index:3;border-radius:100%}.marvel-device.iphone8plus .speaker{background:#292728;width:70px;height:6px;position:absolute;top:59px;left:50%;margin-left:-35px;border-radius:6px;z-index:3}.marvel-device.iphone8plus.gold{background:#f9e7d3}.marvel-device.iphone8plus.gold .top-bar,.marvel-device.iphone8plus.gold .bottom-bar{background:white}.marvel-device.iphone8plus.gold .sleep,.marvel-device.iphone8plus.gold .volume{background:#f9e7d3}.marvel-device.iphone8plus.gold .home{background:#cebba9;background:linear-gradient(135deg, #cebba9 0%, #f9e7d3 50%, #cebba9 100%)}.marvel-device.iphone8plus.black{background:#464646;-webkit-box-shadow:inset 0 0 3px 0 rgba(0,0,0,0.7);box-shadow:inset 0 0 3px 0 rgba(0,0,0,0.7)}.marvel-device.iphone8plus.black:before{background:#080808}.marvel-device.iphone8plus.black:after{-webkit-box-shadow:inset 0 0 3px 0 rgba(0,0,0,0.1),inset 0 0 6px 3px #212121;box-shadow:inset 0 0 3px 0 rgba(0,0,0,0.1),inset 0 0 6px 3px #212121}.marvel-device.iphone8plus.black .top-bar,.marvel-device.iphone8plus.black .bottom-bar{background:#212121}.marvel-device.iphone8plus.black .volume,.marvel-device.iphone8plus.black .sleep{background:#464646}.marvel-device.iphone8plus.black .camera{background:#080808}.marvel-device.iphone8plus.black .home{background:#080808;background:linear-gradient(135deg, #080808 0%, #464646 50%, #080808 100%)}.marvel-device.iphone8plus.black .home:before{background:#080808}.marvel-device.iphone8plus.landscape{padding:26px 112px;height:414px;width:736px}.marvel-device.iphone8plus.landscape .sleep{top:100%;border-radius:0px 0px 2px 2px;right:190px;height:4px;width:66px}.marvel-device.iphone8plus.landscape .volume{width:66px;height:4px;top:-4px;left:calc(100% - 188px - 66px);border-radius:2px 2px 0px 0px}.marvel-device.iphone8plus.landscape .volume:before{width:40px;height:2px;top:2px;right:-78px;left:auto;border-radius:2px 2px 0px 0px}.marvel-device.iphone8plus.landscape .volume:after{left:-82px;width:66px;height:4px;top:0;border-radius:2px 2px 0px 0px}.marvel-device.iphone8plus.landscape .top-bar{width:14px;height:100%;left:calc(100% - 68px - 14px);top:0}.marvel-device.iphone8plus.landscape .bottom-bar{width:14px;height:100%;left:68px;top:0}.marvel-device.iphone8plus.landscape .home{top:50%;margin-top:-34px;margin-left:0;left:24px}.marvel-device.iphone8plus.landscape .sensor{top:154px;left:calc(100% - 54px - 16px)}.marvel-device.iphone8plus.landscape .speaker{height:70px;width:6px;left:calc(100% - 59px - 6px);top:50%;margin-left:0px;margin-top:-35px}.marvel-device.iphone8plus.landscape .camera{left:calc(100% - 29px);top:50%;margin-left:0px;margin-top:-5px}.marvel-device.iphone5s,.marvel-device.iphone5c{padding:105px 22px;background:#2c2b2c;width:320px;height:568px;border-radius:50px}.marvel-device.iphone5s:before,.marvel-device.iphone5c:before{width:calc(100% - 8px);height:calc(100% - 8px);position:absolute;top:4px;content:'';left:4px;border-radius:46px;background:#1e1e1e;z-index:1}.marvel-device.iphone5s .sleep,.marvel-device.iphone5c .sleep{position:absolute;top:-4px;right:60px;width:60px;height:4px;border-radius:2px 2px 0px 0px;background:#282727}.marvel-device.iphone5s .volume,.marvel-device.iphone5c .volume{position:absolute;left:-4px;top:180px;z-index:0;height:27px;width:4px;border-radius:2px 0px 0px 2px;background:#282727}.marvel-device.iphone5s .volume:before,.marvel-device.iphone5c .volume:before{position:absolute;left:0px;top:-75px;height:35px;width:4px;border-radius:2px 0px 0px 2px;background:inherit;content:'';display:block}.marvel-device.iphone5s .volume:after,.marvel-device.iphone5c .volume:after{position:absolute;left:0px;bottom:-64px;height:27px;width:4px;border-radius:2px 0px 0px 2px;background:inherit;content:'';display:block}.marvel-device.iphone5s .camera,.marvel-device.iphone5c .camera{background:#3c3d3d;width:10px;height:10px;position:absolute;top:32px;left:50%;margin-left:-5px;border-radius:5px;z-index:3}.marvel-device.iphone5s .sensor,.marvel-device.iphone5c .sensor{background:#3c3d3d;width:10px;height:10px;position:absolute;top:60px;left:160px;z-index:3;margin-left:-32px;border-radius:5px}.marvel-device.iphone5s .speaker,.marvel-device.iphone5c .speaker{background:#292728;width:64px;height:10px;position:absolute;top:60px;left:50%;margin-left:-32px;border-radius:5px;z-index:3}.marvel-device.iphone5s.landscape,.marvel-device.iphone5c.landscape{padding:22px 105px;height:320px;width:568px}.marvel-device.iphone5s.landscape .sleep,.marvel-device.iphone5c.landscape .sleep{right:-4px;top:calc(100% - 120px);height:60px;width:4px;border-radius:0px 2px 2px 0px}.marvel-device.iphone5s.landscape .volume,.marvel-device.iphone5c.landscape .volume{width:27px;height:4px;top:-4px;left:calc(100% - 180px);border-radius:2px 2px 0px 0px}.marvel-device.iphone5s.landscape .volume:before,.marvel-device.iphone5c.landscape .volume:before{width:35px;height:4px;top:0px;right:-75px;left:auto;border-radius:2px 2px 0px 0px}.marvel-device.iphone5s.landscape .volume:after,.marvel-device.iphone5c.landscape .volume:after{bottom:0px;left:-64px;z-index:999;height:4px;width:27px;border-radius:2px 2px 0px 0px}.marvel-device.iphone5s.landscape .sensor,.marvel-device.iphone5c.landscape .sensor{top:160px;left:calc(100% - 60px);margin-left:0px;margin-top:-32px}.marvel-device.iphone5s.landscape .speaker,.marvel-device.iphone5c.landscape .speaker{height:64px;width:10px;left:calc(100% - 60px);top:50%;margin-left:0px;margin-top:-32px}.marvel-device.iphone5s.landscape .camera,.marvel-device.iphone5c.landscape .camera{left:calc(100% - 32px);top:50%;margin-left:0px;margin-top:-5px}.marvel-device.iphone5s .home{border-radius:36px;width:68px;-webkit-box-shadow:inset 0 0 0 4px #2c2b2c;box-shadow:inset 0 0 0 4px #2c2b2c;height:68px;position:absolute;left:50%;margin-left:-34px;bottom:19px;z-index:3}.marvel-device.iphone5s .top-bar{top:70px;position:absolute;left:0}.marvel-device.iphone5s .bottom-bar{bottom:70px;position:absolute;left:0}.marvel-device.iphone5s.landscape .home{left:19px;bottom:50%;margin-bottom:-34px;margin-left:0px}.marvel-device.iphone5s.landscape .top-bar{left:70px;top:0px;width:3px;height:100%}.marvel-device.iphone5s.landscape .bottom-bar{right:70px;left:auto;bottom:0px;width:3px;height:100%}.marvel-device.iphone5s.silver{background:#bcbcbc}.marvel-device.iphone5s.silver:before{background:#fcfcfc}.marvel-device.iphone5s.silver .volume,.marvel-device.iphone5s.silver .sleep{background:#d6d6d6}.marvel-device.iphone5s.silver .top-bar,.marvel-device.iphone5s.silver .bottom-bar{background:#eaebec}.marvel-device.iphone5s.silver .home{-webkit-box-shadow:inset 0 0 0 4px #bcbcbc;box-shadow:inset 0 0 0 4px #bcbcbc}.marvel-device.iphone5s.gold{background:#f9e7d3}.marvel-device.iphone5s.gold:before{background:#fcfcfc}.marvel-device.iphone5s.gold .volume,.marvel-device.iphone5s.gold .sleep{background:#f9e7d3}.marvel-device.iphone5s.gold .top-bar,.marvel-device.iphone5s.gold .bottom-bar{background:white}.marvel-device.iphone5s.gold .home{-webkit-box-shadow:inset 0 0 0 4px #f9e7d3;box-shadow:inset 0 0 0 4px #f9e7d3}.marvel-device.iphone5c{background:white;-webkit-box-shadow:0 1px 2px 0 rgba(0,0,0,0.2);box-shadow:0 1px 2px 0 rgba(0,0,0,0.2)}.marvel-device.iphone5c .top-bar,.marvel-device.iphone5c .bottom-bar{display:none}.marvel-device.iphone5c .home{background:#242324;border-radius:36px;width:68px;height:68px;z-index:3;position:absolute;left:50%;margin-left:-34px;bottom:19px}.marvel-device.iphone5c .home:after{width:20px;height:20px;border:1px solid rgba(255,255,255,0.1);border-radius:4px;position:absolute;display:block;content:'';top:50%;left:50%;margin-top:-11px;margin-left:-11px}.marvel-device.iphone5c.landscape .home{left:19px;bottom:50%;margin-bottom:-34px;margin-left:0px}.marvel-device.iphone5c .volume,.marvel-device.iphone5c .sleep{background:#dddddd}.marvel-device.iphone5c.red{background:#f96b6c}.marvel-device.iphone5c.red .volume,.marvel-device.iphone5c.red .sleep{background:#ed5758}.marvel-device.iphone5c.yellow{background:#f2dc60}.marvel-device.iphone5c.yellow .volume,.marvel-device.iphone5c.yellow .sleep{background:#e5ce4c}.marvel-device.iphone5c.green{background:#97e563}.marvel-device.iphone5c.green .volume,.marvel-device.iphone5c.green .sleep{background:#85d94d}.marvel-device.iphone5c.blue{background:#33a2db}.marvel-device.iphone5c.blue .volume,.marvel-device.iphone5c.blue .sleep{background:#2694cd}.marvel-device.iphone4s{padding:129px 27px;width:320px;height:480px;background:#686868;border-radius:54px}.marvel-device.iphone4s:before{content:'';width:calc(100% - 8px);height:calc(100% - 8px);position:absolute;top:4px;left:4px;z-index:1;border-radius:50px;background:#1e1e1e}.marvel-device.iphone4s .top-bar{top:60px;position:absolute;left:0}.marvel-device.iphone4s .bottom-bar{bottom:90px;position:absolute;left:0}.marvel-device.iphone4s .camera{background:#3c3d3d;width:10px;height:10px;position:absolute;top:72px;left:134px;z-index:3;margin-left:-5px;border-radius:100%}.marvel-device.iphone4s .speaker{background:#292728;width:64px;height:10px;position:absolute;top:72px;left:50%;z-index:3;margin-left:-32px;border-radius:5px}.marvel-device.iphone4s .sensor{background:#292728;width:40px;height:10px;position:absolute;top:36px;left:50%;z-index:3;margin-left:-20px;border-radius:5px}.marvel-device.iphone4s .home{background:#242324;border-radius:100%;width:72px;height:72px;z-index:3;position:absolute;left:50%;margin-left:-36px;bottom:30px}.marvel-device.iphone4s .home:after{width:20px;height:20px;border:1px solid rgba(255,255,255,0.1);border-radius:4px;position:absolute;display:block;content:'';top:50%;left:50%;margin-top:-11px;margin-left:-11px}.marvel-device.iphone4s .sleep{position:absolute;top:-4px;right:60px;width:60px;height:4px;border-radius:2px 2px 0px 0px;background:#4D4D4D}.marvel-device.iphone4s .volume{position:absolute;left:-4px;top:160px;height:27px;width:4px;border-radius:2px 0px 0px 2px;background:#4D4D4D}.marvel-device.iphone4s .volume:before{position:absolute;left:0px;top:-70px;height:35px;width:4px;border-radius:2px 0px 0px 2px;background:inherit;content:'';display:block}.marvel-device.iphone4s .volume:after{position:absolute;left:0px;bottom:-64px;height:27px;width:4px;border-radius:2px 0px 0px 2px;background:inherit;content:'';display:block}.marvel-device.iphone4s.landscape{padding:27px 129px;height:320px;width:480px}.marvel-device.iphone4s.landscape .bottom-bar{left:90px;bottom:0px;height:100%;width:3px}.marvel-device.iphone4s.landscape .top-bar{left:calc(100% - 60px);top:0px;height:100%;width:3px}.marvel-device.iphone4s.landscape .camera{top:134px;left:calc(100% - 72px);margin-left:0}.marvel-device.iphone4s.landscape .speaker{top:50%;margin-left:0;margin-top:-32px;left:calc(100% - 72px);width:10px;height:64px}.marvel-device.iphone4s.landscape .sensor{height:40px;width:10px;left:calc(100% - 36px);top:50%;margin-left:0;margin-top:-20px}.marvel-device.iphone4s.landscape .home{left:30px;bottom:50%;margin-left:0;margin-bottom:-36px}.marvel-device.iphone4s.landscape .sleep{height:60px;width:4px;right:-4px;top:calc(100% - 120px);border-radius:0px 2px 2px 0px}.marvel-device.iphone4s.landscape .volume{top:-4px;left:calc(100% - 187px);height:4px;width:27px;border-radius:2px 2px 0px 0px}.marvel-device.iphone4s.landscape .volume:before{right:-70px;left:auto;top:0px;width:35px;height:4px;border-radius:2px 2px 0px 0px}.marvel-device.iphone4s.landscape .volume:after{width:27px;height:4px;bottom:0px;left:-64px;border-radius:2px 2px 0px 0px}.marvel-device.iphone4s.silver{background:#bcbcbc}.marvel-device.iphone4s.silver:before{background:#fcfcfc}.marvel-device.iphone4s.silver .home{background:#fcfcfc;-webkit-box-shadow:inset 0 0 0 1px #bcbcbc;box-shadow:inset 0 0 0 1px #bcbcbc}.marvel-device.iphone4s.silver .home:after{border:1px solid rgba(0,0,0,0.2)}.marvel-device.iphone4s.silver .volume,.marvel-device.iphone4s.silver .sleep{background:#d6d6d6}.marvel-device.nexus5{padding:50px 15px 50px 15px;width:320px;height:568px;background:#1e1e1e;border-radius:20px}.marvel-device.nexus5:before{border-radius:600px / 50px;background:inherit;content:'';top:0;position:absolute;height:103.1%;width:calc(100% - 26px);top:50%;left:50%;-webkit-transform:translateX(-50%) translateY(-50%);transform:translateX(-50%) translateY(-50%)}.marvel-device.nexus5 .top-bar{width:calc(100% - 8px);height:calc(100% - 6px);position:absolute;top:3px;left:4px;border-radius:20px;background:#181818}.marvel-device.nexus5 .top-bar:before{border-radius:600px / 50px;background:inherit;content:'';top:0;position:absolute;height:103.0%;width:calc(100% - 26px);top:50%;left:50%;-webkit-transform:translateX(-50%) translateY(-50%);transform:translateX(-50%) translateY(-50%)}.marvel-device.nexus5 .bottom-bar{display:none}.marvel-device.nexus5 .sleep{width:3px;position:absolute;left:-3px;top:110px;height:100px;background:inherit;border-radius:2px 0px 0px 2px}.marvel-device.nexus5 .volume{width:3px;position:absolute;right:-3px;top:70px;height:45px;background:inherit;border-radius:0px 2px 2px 0px}.marvel-device.nexus5 .camera{background:#3c3d3d;width:10px;height:10px;position:absolute;top:18px;left:50%;z-index:3;margin-left:-5px;border-radius:100%}.marvel-device.nexus5 .camera:before{background:#3c3d3d;width:6px;height:6px;content:'';display:block;position:absolute;top:2px;left:-100px;z-index:3;border-radius:100%}.marvel-device.nexus5.landscape{padding:15px 50px 15px 50px;height:320px;width:568px}.marvel-device.nexus5.landscape:before{width:103.1%;height:calc(100% - 26px);border-radius:50px / 600px}.marvel-device.nexus5.landscape .top-bar{left:3px;top:4px;height:calc(100% - 8px);width:calc(100% - 6px)}.marvel-device.nexus5.landscape .top-bar:before{width:103%;height:calc(100% - 26px);border-radius:50px / 600px}.marvel-device.nexus5.landscape .sleep{height:3px;width:100px;left:calc(100% - 210px);top:-3px;border-radius:2px 2px 0px 0px}.marvel-device.nexus5.landscape .volume{height:3px;width:45px;right:70px;top:100%;border-radius:0px 0px 2px 2px}.marvel-device.nexus5.landscape .camera{top:50%;left:calc(100% - 18px);margin-left:0;margin-top:-5px}.marvel-device.nexus5.landscape .camera:before{top:-100px;left:2px}.marvel-device.s5{padding:60px 18px;border-radius:42px;width:320px;height:568px;background:#bcbcbc}.marvel-device.s5:before,.marvel-device.s5:after{width:calc(100% - 52px);content:'';display:block;height:26px;background:inherit;position:absolute;border-radius:500px / 40px;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.marvel-device.s5:before{top:-7px}.marvel-device.s5:after{bottom:-7px}.marvel-device.s5 .bottom-bar{display:none}.marvel-device.s5 .top-bar{border-radius:37px;width:calc(100% - 10px);height:calc(100% - 10px);top:5px;left:5px;background:radial-gradient(rgba(0,0,0,0.02) 20%, transparent 60%) 0 0,radial-gradient(rgba(0,0,0,0.02) 20%, transparent 60%) 3px 3px;background-color:white;background-size:4px 4px;background-position:center;z-index:2;position:absolute}.marvel-device.s5 .top-bar:before,.marvel-device.s5 .top-bar:after{width:calc(100% - 48px);content:'';display:block;height:26px;background:inherit;position:absolute;border-radius:500px / 40px;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.marvel-device.s5 .top-bar:before{top:-7px}.marvel-device.s5 .top-bar:after{bottom:-7px}.marvel-device.s5 .sleep{width:3px;position:absolute;left:-3px;top:100px;height:100px;background:#cecece;border-radius:2px 0px 0px 2px}.marvel-device.s5 .speaker{width:68px;height:8px;position:absolute;top:20px;display:block;z-index:3;left:50%;margin-left:-34px;background-color:#bcbcbc;background-position:top left;border-radius:4px}.marvel-device.s5 .sensor{display:block;position:absolute;top:20px;right:110px;background:#3c3d3d;border-radius:100%;width:8px;height:8px;z-index:3}.marvel-device.s5 .sensor:after{display:block;content:'';position:absolute;top:0px;right:12px;background:#3c3d3d;border-radius:100%;width:8px;height:8px;z-index:3}.marvel-device.s5 .camera{display:block;position:absolute;top:24px;right:42px;background:black;border-radius:100%;width:10px;height:10px;z-index:3}.marvel-device.s5 .camera:before{width:4px;height:4px;background:#3c3d3d;border-radius:100%;position:absolute;content:'';top:50%;left:50%;margin-top:-2px;margin-left:-2px}.marvel-device.s5 .home{position:absolute;z-index:3;bottom:17px;left:50%;width:70px;height:20px;background:white;border-radius:18px;display:block;margin-left:-35px;border:2px solid black}.marvel-device.s5.landscape{padding:18px 60px;height:320px;width:568px}.marvel-device.s5.landscape:before,.marvel-device.s5.landscape:after{height:calc(100% - 52px);width:26px;border-radius:40px / 500px;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.marvel-device.s5.landscape:before{top:50%;left:-7px}.marvel-device.s5.landscape:after{top:50%;left:auto;right:-7px}.marvel-device.s5.landscape .top-bar:before,.marvel-device.s5.landscape .top-bar:after{width:26px;height:calc(100% - 48px);border-radius:40px / 500px;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.marvel-device.s5.landscape .top-bar:before{right:-7px;top:50%;left:auto}.marvel-device.s5.landscape .top-bar:after{left:-7px;top:50%;right:auto}.marvel-device.s5.landscape .sleep{height:3px;width:100px;left:calc(100% - 200px);top:-3px;border-radius:2px 2px 0px 0px}.marvel-device.s5.landscape .speaker{height:68px;width:8px;left:calc(100% - 20px);top:50%;margin-left:0;margin-top:-34px}.marvel-device.s5.landscape .sensor{right:20px;top:calc(100% - 110px)}.marvel-device.s5.landscape .sensor:after{left:-12px;right:0px}.marvel-device.s5.landscape .camera{top:calc(100% - 42px);right:24px}.marvel-device.s5.landscape .home{width:20px;height:70px;bottom:50%;margin-bottom:-35px;margin-left:0;left:17px}.marvel-device.s5.black{background:#1e1e1e}.marvel-device.s5.black .speaker{background:black}.marvel-device.s5.black .sleep{background:#1e1e1e}.marvel-device.s5.black .top-bar{background:radial-gradient(rgba(0,0,0,0.05) 20%, transparent 60%) 0 0,radial-gradient(rgba(0,0,0,0.05) 20%, transparent 60%) 3px 3px;background-color:#2c2b2c;background-size:4px 4px}.marvel-device.s5.black .home{background:#2c2b2c}.marvel-device.lumia920{padding:80px 35px 125px 35px;background:#ffdd00;width:320px;height:533px;border-radius:40px / 3px}.marvel-device.lumia920 .bottom-bar{display:none}.marvel-device.lumia920 .top-bar{width:calc(100% - 24px);height:calc(100% - 32px);position:absolute;top:16px;left:12px;border-radius:24px;background:black;z-index:1}.marvel-device.lumia920 .top-bar:before{background:#1e1e1e;display:block;content:'';width:calc(100% - 4px);height:calc(100% - 4px);top:2px;left:2px;position:absolute;border-radius:22px}.marvel-device.lumia920 .volume{width:3px;position:absolute;top:130px;height:100px;background:#1e1e1e;right:-3px;border-radius:0px 2px 2px 0px}.marvel-device.lumia920 .volume:before{width:3px;position:absolute;top:190px;content:'';display:block;height:50px;background:inherit;right:0px;border-radius:0px 2px 2px 0px}.marvel-device.lumia920 .volume:after{width:3px;position:absolute;top:460px;content:'';display:block;height:50px;background:inherit;right:0px;border-radius:0px 2px 2px 0px}.marvel-device.lumia920 .camera{background:#3c3d3d;width:10px;height:10px;position:absolute;top:34px;right:130px;z-index:5;border-radius:5px}.marvel-device.lumia920 .speaker{background:#292728;width:64px;height:10px;position:absolute;top:38px;left:50%;margin-left:-32px;border-radius:5px;z-index:3}.marvel-device.lumia920.landscape{padding:35px 80px 35px 125px;height:320px;width:568px;border-radius:2px / 100px}.marvel-device.lumia920.landscape .top-bar{height:calc(100% - 24px);width:calc(100% - 32px);left:16px;top:12px}.marvel-device.lumia920.landscape .volume{height:3px;right:130px;width:100px;top:100%;border-radius:0px 0px 2px 2px}.marvel-device.lumia920.landscape .volume:before{height:3px;right:190px;top:0px;width:50px;border-radius:0px 0px 2px 2px}.marvel-device.lumia920.landscape .volume:after{height:3px;right:430px;top:0px;width:50px;border-radius:0px 0px 2px 2px}.marvel-device.lumia920.landscape .camera{right:30px;top:calc(100% - 140px)}.marvel-device.lumia920.landscape .speaker{width:10px;height:64px;top:50%;margin-left:0;margin-top:-32px;left:calc(100% - 48px)}.marvel-device.lumia920.black{background:black}.marvel-device.lumia920.white{background:white;-webkit-box-shadow:0 1px 2px 0 rgba(0,0,0,0.2);box-shadow:0 1px 2px 0 rgba(0,0,0,0.2)}.marvel-device.lumia920.blue{background:#00acdd}.marvel-device.lumia920.red{background:#CC3E32}.marvel-device.htc-one{padding:72px 25px 100px 25px;width:320px;height:568px;background:#bebebe;border-radius:34px}.marvel-device.htc-one:before{content:'';display:block;width:calc(100% - 4px);height:calc(100% - 4px);position:absolute;top:2px;left:2px;background:#adadad;border-radius:32px}.marvel-device.htc-one:after{content:'';display:block;width:calc(100% - 8px);height:calc(100% - 8px);position:absolute;top:4px;left:4px;background:#eeeeee;border-radius:30px}.marvel-device.htc-one .top-bar{width:calc(100% - 4px);height:635px;position:absolute;background:#424242;top:50px;z-index:1;left:2px}.marvel-device.htc-one .top-bar:before{content:'';position:absolute;width:calc(100% - 4px);height:100%;position:absolute;background:black;top:0px;z-index:1;left:2px}.marvel-device.htc-one .bottom-bar{display:none}.marvel-device.htc-one .speaker{height:16px;width:216px;display:block;position:absolute;top:22px;z-index:2;left:50%;margin-left:-108px;background:radial-gradient(#343434 25%, transparent 50%) 0 0,radial-gradient(#343434 25%, transparent 50%) 4px 4px;background-size:4px 4px;background-position:top left}.marvel-device.htc-one .speaker:after{content:'';height:16px;width:216px;display:block;position:absolute;top:676px;z-index:2;left:50%;margin-left:-108px;background:inherit}.marvel-device.htc-one .camera{display:block;position:absolute;top:18px;right:38px;background:#3c3d3d;border-radius:100%;width:24px;height:24px;z-index:3}.marvel-device.htc-one .camera:before{width:8px;height:8px;background:black;border-radius:100%;position:absolute;content:'';top:50%;left:50%;margin-top:-4px;margin-left:-4px}.marvel-device.htc-one .sensor{display:block;position:absolute;top:29px;left:60px;background:#3c3d3d;border-radius:100%;width:8px;height:8px;z-index:3}.marvel-device.htc-one .sensor:after{display:block;content:'';position:absolute;top:0px;right:12px;background:#3c3d3d;border-radius:100%;width:8px;height:8px;z-index:3}.marvel-device.htc-one.landscape{padding:25px 72px 25px 100px;height:320px;width:568px}.marvel-device.htc-one.landscape .top-bar{height:calc(100% - 4px);width:635px;left:calc(100% - 685px);top:2px}.marvel-device.htc-one.landscape .speaker{width:16px;height:216px;left:calc(100% - 38px);top:50%;margin-left:0px;margin-top:-108px}.marvel-device.htc-one.landscape .speaker:after{width:16px;height:216px;left:calc(100% - 692px);top:50%;margin-left:0;margin-top:-108px}.marvel-device.htc-one.landscape .camera{right:18px;top:calc(100% - 38px)}.marvel-device.htc-one.landscape .sensor{left:calc(100% - 29px);top:60px}.marvel-device.htc-one.landscape .sensor :after{right:0;top:-12px}.marvel-device.ipad{width:576px;height:768px;padding:90px 25px;background:#242324;border-radius:44px}.marvel-device.ipad:before{width:calc(100% - 8px);height:calc(100% - 8px);position:absolute;content:'';display:block;top:4px;left:4px;border-radius:40px;background:#1e1e1e}.marvel-device.ipad .camera{background:#3c3d3d;width:10px;height:10px;position:absolute;top:44px;left:50%;margin-left:-5px;border-radius:100%}.marvel-device.ipad .top-bar,.marvel-device.ipad .bottom-bar{display:none}.marvel-device.ipad .home{background:#242324;border-radius:36px;width:50px;height:50px;position:absolute;left:50%;margin-left:-25px;bottom:22px}.marvel-device.ipad .home:after{width:15px;height:15px;margin-top:-8px;margin-left:-8px;border:1px solid rgba(255,255,255,0.1);border-radius:4px;position:absolute;display:block;content:'';top:50%;left:50%}.marvel-device.ipad.landscape{height:576px;width:768px;padding:25px 90px}.marvel-device.ipad.landscape .camera{left:calc(100% - 44px);top:50%;margin-left:0;margin-top:-5px}.marvel-device.ipad.landscape .home{top:50%;left:22px;margin-left:0;margin-top:-25px}.marvel-device.ipad.silver{background:#bcbcbc}.marvel-device.ipad.silver:before{background:#fcfcfc}.marvel-device.ipad.silver .home{background:#fcfcfc;-webkit-box-shadow:inset 0 0 0 1px #bcbcbc;box-shadow:inset 0 0 0 1px #bcbcbc}.marvel-device.ipad.silver .home:after{border:1px solid rgba(0,0,0,0.2)}.marvel-device.macbook{width:960px;height:600px;padding:44px 44px 76px;margin:0 auto;background:#bebebe;border-radius:34px}.marvel-device.macbook:before{width:calc(100% - 8px);height:calc(100% - 8px);position:absolute;content:'';display:block;top:4px;left:4px;border-radius:30px;background:#1e1e1e}.marvel-device.macbook .top-bar{width:calc(100% + 2 * 70px);height:40px;position:absolute;content:'';display:block;top:680px;left:-70px;border-bottom-left-radius:90px 18px;border-bottom-right-radius:90px 18px;background:#bebebe;-webkit-box-shadow:inset 0px -4px 13px 3px rgba(34,34,34,0.6);box-shadow:inset 0px -4px 13px 3px rgba(34,34,34,0.6)}.marvel-device.macbook .top-bar:before{width:100%;height:24px;content:'';display:block;top:0;left:0;background:#f0f0f0;border-bottom:2px solid #aaa;border-radius:5px;position:relative}.marvel-device.macbook .top-bar:after{width:16%;height:14px;content:'';display:block;top:0;background:#ddd;position:absolute;margin-left:auto;margin-right:auto;left:0;right:0;border-radius:0 0 20px 20px;-webkit-box-shadow:inset 0px -3px 10px #999;box-shadow:inset 0px -3px 10px #999}.marvel-device.macbook .bottom-bar{background:transparent;width:calc(100% + 2 * 70px);height:26px;position:absolute;content:'';display:block;top:680px;left:-70px}.marvel-device.macbook .bottom-bar:before,.marvel-device.macbook .bottom-bar:after{height:calc(100% - 2px);width:80px;content:'';display:block;top:0;position:absolute}.marvel-device.macbook .bottom-bar:before{left:0;background:#f0f0f0;background:-webkit-gradient(linear, left top, right top, from(#747474), color-stop(5%, #c3c3c3), color-stop(14%, #ebebeb), color-stop(41%, #979797), color-stop(80%, #f0f0f0), color-stop(100%, #f0f0f0), to(#f0f0f0));background:linear-gradient(to right, #747474 0%, #c3c3c3 5%, #ebebeb 14%, #979797 41%, #f0f0f0 80%, #f0f0f0 100%, #f0f0f0 100%)}.marvel-device.macbook .bottom-bar:after{right:0;background:#f0f0f0;background:-webkit-gradient(linear, left top, right top, from(#f0f0f0), color-stop(0%, #f0f0f0), color-stop(20%, #f0f0f0), color-stop(59%, #979797), color-stop(86%, #ebebeb), color-stop(95%, #c3c3c3), to(#747474));background:linear-gradient(to right, #f0f0f0 0%, #f0f0f0 0%, #f0f0f0 20%, #979797 59%, #ebebeb 86%, #c3c3c3 95%, #747474 100%)}.marvel-device.macbook .camera{background:#3c3d3d;width:10px;height:10px;position:absolute;top:20px;left:50%;margin-left:-5px;border-radius:100%}.marvel-device.macbook .home{display:none}.marvel-device.iphone-x{width:329px;height:712px;padding:26px;background:#fdfdfd;-webkit-box-shadow:inset 0 0 11px 0 black;box-shadow:inset 0 0 11px 0 black;border-radius:66px}.marvel-device.iphone-x .overflow{width:100%;height:100%;position:absolute;top:0;left:0;border-radius:66px;overflow:hidden}.marvel-device.iphone-x .shadow{border-radius:100%;width:90px;height:90px;position:absolute;background:radial-gradient(ellipse at center, rgba(0,0,0,0.6) 0%, rgba(255,255,255,0) 60%)}.marvel-device.iphone-x .shadow--tl{top:-20px;left:-20px}.marvel-device.iphone-x .shadow--tr{top:-20px;right:-20px}.marvel-device.iphone-x .shadow--bl{bottom:-20px;left:-20px}.marvel-device.iphone-x .shadow--br{bottom:-20px;right:-20px}.marvel-device.iphone-x:before{width:calc(100% - 10px);height:calc(100% - 10px);position:absolute;top:5px;content:'';left:5px;border-radius:61px;background:black;z-index:1}.marvel-device.iphone-x .inner-shadow{width:calc(100% - 20px);height:calc(100% - 20px);position:absolute;top:10px;overflow:hidden;left:10px;border-radius:56px;-webkit-box-shadow:inset 0 0 15px 0 rgba(255,255,255,0.66);box-shadow:inset 0 0 15px 0 rgba(255,255,255,0.66);z-index:1}.marvel-device.iphone-x .inner-shadow:before{-webkit-box-shadow:inset 0 0 20px 0 #FFFFFF;box-shadow:inset 0 0 20px 0 #FFFFFF;width:100%;height:116%;position:absolute;top:-8%;content:'';left:0;border-radius:200px / 112px;z-index:2}.marvel-device.iphone-x .screen{border-radius:40px;-webkit-box-shadow:none;box-shadow:none}.marvel-device.iphone-x .top-bar,.marvel-device.iphone-x .bottom-bar{width:100%;position:absolute;height:8px;background:rgba(0,0,0,0.1);left:0}.marvel-device.iphone-x .top-bar{top:80px}.marvel-device.iphone-x .bottom-bar{bottom:80px}.marvel-device.iphone-x .volume,.marvel-device.iphone-x .volume:before,.marvel-device.iphone-x .volume:after,.marvel-device.iphone-x .sleep{width:3px;background:#b5b5b5;position:absolute}.marvel-device.iphone-x .volume{left:-3px;top:116px;height:32px}.marvel-device.iphone-x .volume:before{height:62px;top:62px;content:'';left:0}.marvel-device.iphone-x .volume:after{height:62px;top:140px;content:'';left:0}.marvel-device.iphone-x .sleep{height:96px;top:200px;right:-3px}.marvel-device.iphone-x .camera{width:6px;height:6px;top:9px;border-radius:100%;position:absolute;left:154px;background:#0d4d71}.marvel-device.iphone-x .speaker{height:6px;width:60px;left:50%;position:absolute;top:9px;margin-left:-30px;background:#171818;border-radius:6px}.marvel-device.iphone-x .notch{position:absolute;width:184px;height:26px;top:23px;left:94.738px;z-index:4;background:black;border-bottom-left-radius:24px;border-bottom-right-radius:24px}.marvel-device.iphone-x .notch:before,.marvel-device.iphone-x .notch:after{content:'';height:8px;position:absolute;top:0;width:8px}.marvel-device.iphone-x .notch:after{background:radial-gradient(circle at bottom left, transparent 0, transparent 70%, black 70%, black 100%);left:-8px}.marvel-device.iphone-x .notch:before{background:radial-gradient(circle at bottom right, transparent 0, transparent 70%, black 70%, black 100%);right:-8px}.marvel-device.iphone-x.landscape{height:375px;width:812px}.marvel-device.iphone-x.landscape .top-bar,.marvel-device.iphone-x.landscape .bottom-bar{width:8px;height:100%;top:0}.marvel-device.iphone-x.landscape .top-bar{left:80px}.marvel-device.iphone-x.landscape .bottom-bar{right:80px;bottom:auto;left:auto}.marvel-device.iphone-x.landscape .volume,.marvel-device.iphone-x.landscape .volume:before,.marvel-device.iphone-x.landscape .volume:after,.marvel-device.iphone-x.landscape .sleep{height:3px}.marvel-device.iphone-x.landscape .inner-shadow:before{height:100%;width:116%;left:-8%;top:0;border-radius:112px / 200px}.marvel-device.iphone-x.landscape .volume{bottom:-3px;top:auto;left:116px;width:32px}.marvel-device.iphone-x.landscape .volume:before{width:62px;left:62px;top:0}.marvel-device.iphone-x.landscape .volume:after{width:62px;left:140px;top:0}.marvel-device.iphone-x.landscape .sleep{width:96px;left:200px;top:-3px;right:auto}.marvel-device.iphone-x.landscape .camera{left:9px;bottom:154px;top:auto}.marvel-device.iphone-x.landscape .speaker{width:6px;height:60px;left:9px;top:50%;margin-top:-30px;margin-left:0}.marvel-device.iphone-x.landscape .notch{height:210px;width:30px;left:26px;bottom:108px;top:auto;border-top-right-radius:24px;border-bottom-right-radius:24px;border-bottom-left-radius:0}.marvel-device.iphone-x.landscape .notch:before,.marvel-device.iphone-x.landscape .notch:after{left:0}.marvel-device.iphone-x.landscape .notch:after{background:radial-gradient(circle at bottom right, transparent 0, transparent 70%, black 70%, black 100%);bottom:-8px;top:auto}.marvel-device.iphone-x.landscape .notch:before{background:radial-gradient(circle at top right, transparent 0, transparent 70%, black 70%, black 100%);top:-8px}.marvel-device.note8{width:400px;height:822px;background:black;border-radius:34px;padding:45px 10px}.marvel-device.note8 .overflow{width:100%;height:100%;position:absolute;top:0;left:0;border-radius:34px;overflow:hidden}.marvel-device.note8 .speaker{height:8px;width:56px;left:50%;position:absolute;top:25px;margin-left:-28px;background:#171818;z-index:1;border-radius:8px}.marvel-device.note8 .camera{height:18px;width:18px;left:86px;position:absolute;top:18px;background:#212b36;z-index:1;border-radius:100%}.marvel-device.note8 .camera:before{content:'';height:8px;width:8px;left:-22px;position:absolute;top:5px;background:#212b36;z-index:1;border-radius:100%}.marvel-device.note8 .sensors{height:10px;width:10px;left:120px;position:absolute;top:22px;background:#1d233b;z-index:1;border-radius:100%}.marvel-device.note8 .sensors:before{content:'';height:10px;width:10px;left:18px;position:absolute;top:0;background:#1d233b;z-index:1;border-radius:100%}.marvel-device.note8 .more-sensors{height:16px;width:16px;left:285px;position:absolute;top:18px;background:#33244a;-webkit-box-shadow:0 0 0 2px rgba(255,255,255,0.1);box-shadow:0 0 0 2px rgba(255,255,255,0.1);z-index:1;border-radius:100%}.marvel-device.note8 .more-sensors:before{content:'';height:11px;width:11px;left:40px;position:absolute;top:4px;background:#214a61;z-index:1;border-radius:100%}.marvel-device.note8 .sleep{width:2px;height:56px;background:black;position:absolute;top:288px;right:-2px}.marvel-device.note8 .volume{width:2px;height:120px;background:black;position:absolute;top:168px;left:-2px}.marvel-device.note8 .volume:before{content:'';top:168px;width:2px;position:absolute;left:0;background:black;height:56px}.marvel-device.note8 .inner{width:100%;height:calc(100% - 8px);position:absolute;top:2px;content:'';left:0px;border-radius:34px;border-top:2px solid #9fa0a2;border-bottom:2px solid #9fa0a2;background:black;z-index:1;-webkit-box-shadow:inset 0 0 6px 0 rgba(255,255,255,0.5);box-shadow:inset 0 0 6px 0 rgba(255,255,255,0.5)}.marvel-device.note8 .shadow{-webkit-box-shadow:inset 0 0 60px 0 white,inset 0 0 30px 0 rgba(255,255,255,0.5),0 0 20px 0 white,0 0 20px 0 rgba(255,255,255,0.5);box-shadow:inset 0 0 60px 0 white,inset 0 0 30px 0 rgba(255,255,255,0.5),0 0 20px 0 white,0 0 20px 0 rgba(255,255,255,0.5);height:101%;position:absolute;top:-0.5%;content:'';width:calc(100% - 20px);left:10px;border-radius:38px;z-index:5;pointer-events:none}.marvel-device.note8 .screen{border-radius:14px;-webkit-box-shadow:none;box-shadow:none}.marvel-device.note8.landscape{height:400px;width:822px;padding:10px 45px}.marvel-device.note8.landscape .speaker{height:56px;width:8px;top:50%;margin-top:-28px;margin-left:0;right:25px;left:auto}.marvel-device.note8.landscape .camera{top:86px;right:18px;left:auto}.marvel-device.note8.landscape .camera:before{top:-22px;left:5px}.marvel-device.note8.landscape .sensors{top:120px;right:22px;left:auto}.marvel-device.note8.landscape .sensors:before{top:18px;left:0}.marvel-device.note8.landscape .more-sensors{top:285px;right:18px;left:auto}.marvel-device.note8.landscape .more-sensors:before{top:40px;left:4px}.marvel-device.note8.landscape .sleep{bottom:-2px;top:auto;right:288px;width:56px;height:2px}.marvel-device.note8.landscape .volume{width:120px;height:2px;top:-2px;right:168px;left:auto}.marvel-device.note8.landscape .volume:before{right:168px;left:auto;top:0;width:56px;height:2px}.marvel-device.note8.landscape .inner{height:100%;width:calc(100% - 8px);left:2px;top:0;border-top:0;border-bottom:0;border-left:2px solid #9fa0a2;border-right:2px solid #9fa0a2}.marvel-device.note8.landscape .shadow{width:101%;height:calc(100% - 20px);left:-0.5%;top:10px} + +/* bslib cards */ + .bslib-card{overflow:auto}.bslib-card .card-body+.card-body{padding-top:0}.bslib-card .card-body{overflow:auto}.bslib-card .card-body p{margin-top:0}.bslib-card .card-body p:last-child{margin-bottom:0}.bslib-card .card-body{max-height:var(--bslib-card-body-max-height, none)}.bslib-card[data-full-screen="true"]>.card-body{max-height:var(--bslib-card-body-max-height-full-screen, none)}.bslib-card .card-header .form-group{margin-bottom:0}.bslib-card .card-header .selectize-control{margin-bottom:0}.bslib-card .card-header .selectize-control .item{margin-right:1.15rem}.bslib-card .card-footer{margin-top:auto}.bslib-card .bslib-navs-card-title{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center}.bslib-card .bslib-navs-card-title .nav{margin-left:auto}.bslib-card .bslib-sidebar-layout:not([data-bslib-sidebar-border="true"]){border:none}.bslib-card .bslib-sidebar-layout:not([data-bslib-sidebar-border-radius="true"]){border-top-left-radius:0;border-top-right-radius:0}[data-full-screen="true"]{position:fixed;inset:3.5rem 1rem 1rem;height:auto !important;max-height:none !important;width:auto !important;z-index:1070}.bslib-full-screen-enter{display:none;position:absolute;bottom:var(--bslib-full-screen-enter-bottom, 0.2rem);right:var(--bslib-full-screen-enter-right, 0);top:var(--bslib-full-screen-enter-top);left:var(--bslib-full-screen-enter-left);color:var(--bslib-color-fg, var(--bs-card-color));background-color:var(--bslib-color-bg, var(--bs-card-bg, var(--bs-body-bg)));border:var(--bs-card-border-width) solid var(--bslib-color-fg, var(--bs-card-border-color));box-shadow:0 2px 4px rgba(0,0,0,0.15);margin:0.2rem 0.4rem;padding:0.55rem !important;font-size:.8rem;cursor:pointer;opacity:0.7;z-index:1070}.bslib-full-screen-enter:hover{opacity:1}.card[data-full-screen="false"]:hover>*>.bslib-full-screen-enter{display:block}.bslib-has-full-screen .card:hover>*>.bslib-full-screen-enter{display:none}@media (max-width: 575.98px){.bslib-full-screen-enter{display:none !important}}.bslib-full-screen-exit{position:relative;top:1.35rem;font-size:0.9rem;cursor:pointer;text-decoration:none;display:flex;float:right;margin-right:2.15rem;align-items:center;color:rgba(var(--bs-body-bg-rgb), 0.8)}.bslib-full-screen-exit:hover{color:rgba(var(--bs-body-bg-rgb), 1)}.bslib-full-screen-exit svg{margin-left:0.5rem;font-size:1.5rem}#bslib-full-screen-overlay{position:fixed;inset:0;background-color:rgba(var(--bs-body-color-rgb), 0.6);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);z-index:1069;animation:bslib-full-screen-overlay-enter 400ms cubic-bezier(0.6, 0.02, 0.65, 1) forwards}@keyframes bslib-full-screen-overlay-enter{0%{opacity:0}100%{opacity:1}} + +/* fill css for fullscreen cards */ +.html-fill-container { + display: flex; + flex-direction: column; + /* Prevent the container from expanding vertically or horizontally beyond its + parent's constraints. */ + min-height: 0; + min-width: 0; +} +.html-fill-container > .html-fill-item { + /* Fill items can grow and shrink freely within + available vertical space in fillable container */ + flex: 1 1 auto; + min-height: 0; + min-width: 0; +} +.html-fill-container > :not(.html-fill-item) { + /* Prevent shrinking or growing of non-fill items */ + flex: 0 0 auto; +} diff --git a/docs/index.html b/docs/index.html index aa0414a2..ce1c523a 100644 --- a/docs/index.html +++ b/docs/index.html @@ -4,7 +4,14 @@ - + + Mobile Ready shiny Apps with Standalone Capabilities • shinyMobile @@ -12,13 +19,12 @@ - - - + + + - - - + + + - -
-
-
-
-

-shinyMobile -

-

Develop outstanding {shiny} apps for iOS, Android, desktop as well as beautiful {shiny} gadgets. {shinyMobile} is built on top of the latest Framework7 template.

+

Develop outstanding {shiny} apps for iOS, Android, desktop as well as beautiful {shiny} gadgets. {shinyMobile} is built on top of the latest Framework7 template.

-

R build status lifecycle Project Status CRAN status

-
-

-Installation

+

R build status lifecycle Project Status CRAN status

+
+

Sandbox +

+

You can play with the below sandbox.

+
+
+ +
+ +
+
+
+

Installation +

-# from CRAN
-install.packages("shinyMobile")
-# for the latest version
-devtools::install_github("RinteRface/shinyMobile")
-
-
-

-Cheatsheet

-

-
-
-

-Demo

-

A running demo is on shinyapps.io. Left side: android demo, right side: iOS demo

- +# from CRAN +install.packages("shinyMobile") +# for the latest version +devtools::install_github("RinteRface/shinyMobile")
+
+
+

Demo +

+

Android demo:

+
+
+
+
+
+
+
+
+
-
- +

iOS demo:

+
+
+
+
+
+
+
-
+
+
-
-

-Progressive Web App (PWA)

-
-

-Configuration

-

shinyMobile is PWA capable, meaning that it can be displayed full screen on many mobile devices. This feature is automatically handled by f7Page() if allowPWA is TRUE (it leverages the Google PWA compatibility script).

-

To setup the necessary assets for your PWA, you may run:

-
-remotes::install_github("RinteRface/charpente")
-library(charpente)
-set_pwa(APP_PATH, ...)
-

where APP_PATH is the app location. It only works if the app is inside a package like with {golem}. Alternatively, you may copy the www folder of the gallery app, which provides:

-
    -
  • A valid service worker.
    • -
  • A valid offline.html fallback.
    • -
  • A valid web manifest. Don’t forget to change the start_url property to the path of your app. For instance, the following app hosted at https://dgranjon.shinyapps.io/rstudio-global-2021-calendar/, has the /rstudio-global-2021-calendar/ path.
    • -
  • A valid set of icons. There are tools such as appsco and app-manifest, to create those custom icons and splash screens, if you need to.
    • -
-

It is really easier with charpente, the reason why we strongly recommend to develop your app inside a package.

-
-
-

-Add the PWA to your desktop Apps

-

Copy the url of your app in your mobile web browser (iOS: Safari and Andoid: Chrome). In this example this is: https://dgranjon.shinyapps.io/miniUI2Demo/. It opens like a classic web app, with top and bottom ugly navigation bars.

-
    -
  • Select the share button located in the bottom bar of your Iphone/Ipad. For Android, you may do something similar. Importantly, Chrome for iOS does not support this feature, that’s why I recommend using Safari.
    • -
  • Click on “Add to Home Screen”
    • -
  • Choose a relevant name and click on OK.
    • -
  • The app will be added to your IOS/Android Apps. In case you want custom icons, replace the content of the www folder with your own.
    • -
-
-
-

-
-
-
-
-

-Limitations

-

It is actually quite complex to guarantee that all mobile platforms are supported. The PWA compatibility script will work in most of the case. If not, please open an issue here, to help improving it!

-
-
-
-

-Acknowledgement

-

A special thanks to Vladimir Kharlampidi for creating this amazing framework7 HTML template.

+
+

Acknowledgement +

+

A special thanks to Vladimir Kharlampidi for creating this amazing framework7 HTML template.

-
-

-Code of Conduct

-

Please note that the shinyMobile project is released with a Contributor Code of Conduct. By contributing to this project, you agree to abide by its terms.

+
+

Code of Conduct +

+

Please note that the shinyMobile project is released with a Contributor Code of Conduct. By contributing to this project, you agree to abide by its terms.

-
- - -
-

Developed by David Granjon, Victor Perrier, Isabelle Rudolf.

+
+

+

Developed by David Granjon, Victor Perrier, Isabelle Rudolf.

-
-

Site built with pkgdown 1.6.1.

+
+

+

Site built with pkgdown 2.0.7.

-
+
+ diff --git a/docs/news/index.html b/docs/news/index.html index 510788a7..115a004a 100644 --- a/docs/news/index.html +++ b/docs/news/index.html @@ -1,599 +1,479 @@ - - - - - - - -Changelog • shinyMobile - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -Changelog • shinyMobile + + Skip to contents + +
-
-
-

Changelog

- Source: NEWS.md +
+

Changelog

+ Source: NEWS.md
-
-

-shinyMobile 0.9.1 Unreleased -

-

This release only fixes an issue with Shiny 1.7.0 with a failing unit test. Thanks @schloerke

+
+

shinyMobile 1.0.1.9000

+
+

New

+
  • Added webR to pkgdown infrastructure which allows to run shinylive apps in the documentation.
    • +
+
+

Minor change

+
+
+

Bug fixes

+
  • Fix ignored height in f7Card() (Typo).
    • +
-
-

-shinyMobile 0.9.0 2021-07-22 -

-

This release also fixes an issue with R CMD check and htmltools

-
-

-Breaking change

- +
+

shinyMobile 1.0.0

CRAN release: 2022-11-25

+
+

New

+
  • Added skeletonsOnLoad to f7Page() options (not compatible) with preloader.
    • +
+
+

Breaking change

+
  • +preloader is moved to f7Page() options list.
    • +
  • Removed loading_duration from f7Page(). Now the preloader will automatically disappear when shiny is idle like in bs4Dash.
    • +
  • +panels becomes panel in f7SplitLayout() for consistency reasons.
    • +
  • +f7Tab() uses validate_tabName so that Tab 1 is not valid anymore but Tab1 yes. Tabs will have to be manually renamed.
    • +
  • +f7Popup() is now generated on the server side like f7Notif(). Remove updateF7Popup(), f7TogglePopup().
    • +
  • Reworked f7listIndex(): remove f7ListIndexItem(). f7ListIndex() is generated from the server side.
    • +
  • Reworked f7Skeleton(): triggered from server side. See examples.
    • +
+
+

Bug fixes and improvements

+
  • Improve f7Swiper(): better CSS, pagination, navigation, scrollbar, …
    • +
  • Fix issue in f7PhotoBrowser() example: wrong default theme …
    • +
  • +f7CheckBox(): better layout.
    • +
  • Fix issue in f7FabMorphTarget() example.
    • +
  • Fix #226: f7PhotoBrowser() just works with two or more pictures. Fix issue in JSON conversion.
    • +
  • Fix issue in updateF7Popup() documentation (showed as deprecated by mistake).
    • +
  • New skeleton effect on load (automatic): applied grey background on elements loading. Ends when shiny is idle.
    • +
  • New skeleton effect on output recalculation.
    • +
  • Fix issue in f7Navbar(): hard-coded css style causing white text on white background.
    • +
  • Fix #151: Issue in navbar/toolbar scroll. See here.
    • +
  • Fix #165: Setting separate theme for panels does not work.
    • +
  • Fix #181: Adding dynamic tab to an empty panel.
    • +
  • Related to #220. A new title parameter is available for f7Tab() so as to pass any name, as oposed to tabName.
    • +
  • Fix #228: Vignette Example doesn’t show graphs. Breaking change in shiny 1.7.2.
    • +
  • Issue in f7SmartSelect() with openIn param (failed when not provided).
    • +
  • Fix #219: Avoid using inline CSS so that users can easily override {shinyMobile} defaults.
    • +
  • Fix #220: f7Tab() can create duplicate IDs which in turn break the page. Now we use validate_tabName internally to check whether the tab is valid (avoid JS issues with jQuery selectors)…
    • +
  • Fix #224: updateF7AutoComplete() accepts choices.
    • +
  • Fixes #217: f7SmartSelect() interfering NS for server-side module.
    • +
  • Fixes #215: Icon not displayed in reconnect / reload toaster. Add f7Icon deps anyway.
    • +
  • Fixes #204: issue with f7DatePicker() and DST.
    • +
  • Update CI/CD setup.
    • +
  • Fix issue where f7Page() does not accept anymore color by its name. Now, and like in earlier versions, f7Page() accepts either hex code or color name.
    • +
  • Fixes #222: f7Slider() code updated to work with the fix for #215 above.
    • +
-
-

-Major change

- +
+

shinyMobile 0.9.1

CRAN release: 2021-09-16

+

This release only fixes an issue with Shiny 1.7.0 with a failing unit test. Thanks @schloerke

-
-

-Minor change

-
+
+

Bug fixes

+
-
-

-shinyMobile 0.8.0 2021-01-11 -

-

This release is to addresses the following reverse dependency issue with shiny. Moreover, it also starts the road to v1.0.0 (later this year).

-
-

-Soft Deprecations

-
-
-

-Major changes

-
+
+

Bug fixes

+
-
-

-shinyMobile 0.7.0 2020-06-17 -

-
-

-Notes

-
    -
  • disable backdrop in f7Searchbar() since it messes up with tabbar navigation. This does not have any impact on user experience. In a future release of shinyMobile, f7Searchbar() will have input binding associated as well as more parameters for configuration
    • -
-
-
-

-Breaking changes

-
    -
  • -f7SmartSelect(): type param becomes openIn to align with other inputs
    • -
  • rework f7Messages(): messages are updated on the server side with f7AddMessages(). New f7MessageBar() to send messages from the server side.
    • -
  • -f7ActionSheet(): to access the currently selected button, use input$[sheet_id]_button. This is to make action sheets compatible with shiny modules. Moreover, the buttons provided must be included in a list (not in a dataframe)
    • -
  • -f7Sheet() is still inserted in the UI side but can be triggered either on the server side in combination with updateF7Sheet() (see example) or on the UI side. Overall, this improves flexibility since user may choose any trigger element. In practice, any element having data-sheet pointing to the sheet id as well as the “sheet-open” css class may open it, instead of having a default trigger contained in the sheet. A use case may be to open a sheet in the tabbar (the trigger would be a f7TabLink() that is a special button styled for the tabbar)
    • +
    +

    shinyMobile 0.7.0

    CRAN release: 2020-06-17

    +
    +

    Notes

    +
    • disable backdrop in f7Searchbar() since it messes up with tabbar navigation. This does not have any impact on user experience. In a future release of shinyMobile, f7Searchbar() will have input binding associated as well as more parameters for configuration
      • +
    +
    +

    Breaking changes

    +
    • +f7SmartSelect(): type param becomes openIn to align with other inputs
      • +
    • rework f7Messages(): messages are updated on the server side with f7AddMessages(). New f7MessageBar() to send messages from the server side.
      • +
    • +f7ActionSheet(): to access the currently selected button, use input$[sheet_id]_button. This is to make action sheets compatible with shiny modules. Moreover, the buttons provided must be included in a list (not in a dataframe)
      • +
    • +f7Sheet() is still inserted in the UI side but can be triggered either on the server side in combination with updateF7Sheet() (see example) or on the UI side. Overall, this improves flexibility since user may choose any trigger element. In practice, any element having data-sheet pointing to the sheet id as well as the “sheet-open” css class may open it, instead of having a default trigger contained in the sheet. A use case may be to open a sheet in the tabbar (the trigger would be a f7TabLink() that is a special button styled for the tabbar)
    • All update method for inputs : argument session is now optional and has been moved to the last position in function call
    • -f7AutoComplete(): type becomes openIn to align with the framework7 documentation
      • +f7AutoComplete(): type becomes openIn to align with the framework7 documentation
    • remove parameter fill from f7Icon() (not used)
      • -
    • Rewrite f7Popup(). It has now an input associated giving the popup state (opened or closed) as well as new parameters: backdrop, closeByBackdropClick, closeOnEscape, animate and swipeToClose. label parameters has been removed. To create an f7Popup() put the f7Popup() tag in you UI. On the server side call f7TogglePopup(). See documentation for a detailed example. Thanks @pasahe
      • +
    • Rewrite f7Popup(). It has now an input associated giving the popup state (opened or closed) as well as new parameters: backdrop, closeByBackdropClick, closeOnEscape, animate and swipeToClose. label parameters has been removed. To create an f7Popup() put the f7Popup() tag in you UI. On the server side call f7TogglePopup(). See documentation for a detailed example. Thanks @pasahe
    • -f7NavbarHide() renamed to f7HideNavbar() for consistancy
      • +f7NavbarHide() renamed to f7HideNavbar() for consistancy
    • -f7NavbarShow() renamed to f7ShowNavbar() for consistancy
      • -
    • In f7Gauge() valueText was removed. It does not make sense that the value can be accidentally different from the text displayed. valueText is then an internal parameter.
      • -
    • In f7DatePicker(): min becomes minDate, max becomes maxDate and format becomes dateFormat
      • -
    • remove maximizable parameter from f7Appbar() +f7NavbarShow() renamed to f7ShowNavbar() for consistancy
      • +
    • In f7Gauge() valueText was removed. It does not make sense that the value can be accidentally different from the text displayed. valueText is then an internal parameter.
      • +
    • In f7DatePicker(): min becomes minDate, max becomes maxDate and format becomes dateFormat
      • +
    • remove maximizable parameter from f7Appbar()
      • -
    -
    -
    -

    -Major changes

    -
      -
    • new input$shinyInfo and input$lastInputChanged (see shinyMobile tools vignette for more details)
      • +
    +
    +

    Major changes

    + -
    -
    -

    -Minor changes

    -
      -
    • add new f7File() for file upload. See shiny fileInput +
    +
    +

    Minor changes

    + -
    -
    -

    -Bug fix

    -
      -
    • Fix issue in updateF7AutoComplete: text input was not updated. Thanks @sanchez5674 for the report
      • +
    +
    +

    Bug fix

    + +
-
-
-

-shinyMobile 0.1.0 2019-11-30 -

-
    -
  • Added a NEWS.md file to track changes to the package.
    • -
-
-
+
+

shinyMobile 0.1.0

CRAN release: 2019-11-30

+
  • Added a NEWS.md file to track changes to the package.
    • +
+
- +
+

Developed by David Granjon, Victor Perrier, Isabelle Rudolf.

- -
-
-

Developed by David Granjon, Victor Perrier, Isabelle Rudolf.

+
+

Site built with pkgdown 2.0.7.

-
-

Site built with pkgdown 1.6.1.

-
- -
-
+
+ - - - + diff --git a/docs/pkgdown.css b/docs/pkgdown.css index 1273238d..80ea5b83 100644 --- a/docs/pkgdown.css +++ b/docs/pkgdown.css @@ -56,8 +56,10 @@ img.icon { float: right; } -img { +/* Ensure in-page images don't run outside their container */ +.contents img { max-width: 100%; + height: auto; } /* Fix bug in bootstrap (only seen in firefox) */ @@ -78,11 +80,10 @@ dd { /* Section anchors ---------------------------------*/ a.anchor { - margin-left: -30px; - display:inline-block; - width: 30px; - height: 30px; - visibility: hidden; + display: none; + margin-left: 5px; + width: 20px; + height: 20px; background-image: url(./link.svg); background-repeat: no-repeat; @@ -90,17 +91,15 @@ a.anchor { background-position: center center; } -.hasAnchor:hover a.anchor { - visibility: visible; -} - -@media (max-width: 767px) { - .hasAnchor:hover a.anchor { - visibility: hidden; - } +h1:hover .anchor, +h2:hover .anchor, +h3:hover .anchor, +h4:hover .anchor, +h5:hover .anchor, +h6:hover .anchor { + display: inline-block; } - /* Fixes for fixed navbar --------------------------*/ .contents h1, .contents h2, .contents h3, .contents h4 { @@ -264,31 +263,26 @@ table { /* Syntax highlighting ---------------------------------------------------- */ -pre { - word-wrap: normal; - word-break: normal; - border: 1px solid #eee; -} - -pre, code { +pre, code, pre code { background-color: #f8f8f8; color: #333; } +pre, pre code { + white-space: pre-wrap; + word-break: break-all; + overflow-wrap: break-word; +} -pre code { - overflow: auto; - word-wrap: normal; - white-space: pre; +pre { + border: 1px solid #eee; } -pre .img { +pre .img, pre .r-plt { margin: 5px 0; } -pre .img img { +pre .img img, pre .r-plt img { background-color: #fff; - display: block; - height: auto; } code a, pre a { @@ -305,9 +299,8 @@ a.sourceLine:hover { .kw {color: #264D66;} /* keyword */ .co {color: #888888;} /* comment */ -.message { color: black; font-weight: bolder;} -.error { color: orange; font-weight: bolder;} -.warning { color: #6A0366; font-weight: bolder;} +.error {font-weight: bolder;} +.warning {font-weight: bolder;} /* Clipboard --------------------------*/ @@ -365,3 +358,27 @@ mark { content: ""; } } + +/* Section anchors --------------------------------- + Added in pandoc 2.11: https://github.com/jgm/pandoc-templates/commit/9904bf71 +*/ + +div.csl-bib-body { } +div.csl-entry { + clear: both; +} +.hanging-indent div.csl-entry { + margin-left:2em; + text-indent:-2em; +} +div.csl-left-margin { + min-width:2em; + float:left; +} +div.csl-right-inline { + margin-left:2em; + padding-left:1em; +} +div.csl-indent { + margin-left: 2em; +} diff --git a/docs/pkgdown.js b/docs/pkgdown.js index 7e7048fa..5fccd9c0 100644 --- a/docs/pkgdown.js +++ b/docs/pkgdown.js @@ -2,70 +2,30 @@ (function($) { $(function() { - $('.navbar-fixed-top').headroom(); + $('nav.navbar').headroom(); - $('body').css('padding-top', $('.navbar').height() + 10); - $(window).resize(function(){ - $('body').css('padding-top', $('.navbar').height() + 10); + Toc.init({ + $nav: $("#toc"), + $scope: $("main h2, main h3, main h4, main h5, main h6") }); - $('[data-toggle="tooltip"]').tooltip(); - - var cur_path = paths(location.pathname); - var links = $("#navbar ul li a"); - var max_length = -1; - var pos = -1; - for (var i = 0; i < links.length; i++) { - if (links[i].getAttribute("href") === "#") - continue; - // Ignore external links - if (links[i].host !== location.host) - continue; - - var nav_path = paths(links[i].pathname); - - var length = prefix_length(nav_path, cur_path); - if (length > max_length) { - max_length = length; - pos = i; - } - } - - // Add class to parent
  • , and enclosing
  • if in dropdown - if (pos >= 0) { - var menu_anchor = $(links[pos]); - menu_anchor.parent().addClass("active"); - menu_anchor.closest("li.dropdown").addClass("active"); - } - }); - - function paths(pathname) { - var pieces = pathname.split("/"); - pieces.shift(); // always starts with / - - var end = pieces[pieces.length - 1]; - if (end === "index.html" || end === "") - pieces.pop(); - return(pieces); - } - - // Returns -1 if not found - function prefix_length(needle, haystack) { - if (needle.length > haystack.length) - return(-1); - - // Special case for length-0 haystack, since for loop won't run - if (haystack.length === 0) { - return(needle.length === 0 ? 0 : -1); + if ($('#toc').length) { + $('body').scrollspy({ + target: '#toc', + offset: $("nav.navbar").outerHeight() + 1 + }); } - for (var i = 0; i < haystack.length; i++) { - if (needle[i] != haystack[i]) - return(i); - } + // Activate popovers + $('[data-bs-toggle="popover"]').popover({ + container: 'body', + html: true, + trigger: 'focus', + placement: "top", + sanitize: false, + }); - return(haystack.length); - } + $('[data-bs-toggle="tooltip"]').tooltip(); /* Clipboard --------------------------*/ @@ -78,9 +38,9 @@ if(ClipboardJS.isSupported()) { $(document).ready(function() { - var copyButton = ""; + var copyButton = ""; - $(".examples, div.sourceCode").addClass("hasCopyButton"); + $("div.sourceCode").addClass("hasCopyButton"); // Insert copy buttons: $(copyButton).prependTo(".hasCopyButton"); @@ -89,20 +49,108 @@ $('.btn-copy-ex').tooltip({container: 'body'}); // Initialize clipboard: - var clipboardBtnCopies = new ClipboardJS('[data-clipboard-copy]', { + var clipboard = new ClipboardJS('[data-clipboard-copy]', { text: function(trigger) { - return trigger.parentNode.textContent; + return trigger.parentNode.textContent.replace(/\n#>[^\n]*/g, ""); } }); - clipboardBtnCopies.on('success', function(e) { + clipboard.on('success', function(e) { changeTooltipMessage(e.trigger, 'Copied!'); e.clearSelection(); }); - clipboardBtnCopies.on('error', function() { + clipboard.on('error', function() { changeTooltipMessage(e.trigger,'Press Ctrl+C or Command+C to copy'); }); + }); } + + /* Search marking --------------------------*/ + var url = new URL(window.location.href); + var toMark = url.searchParams.get("q"); + var mark = new Mark("main#main"); + if (toMark) { + mark.mark(toMark, { + accuracy: { + value: "complementary", + limiters: [",", ".", ":", "/"], + } + }); + } + + /* Search --------------------------*/ + /* Adapted from https://github.com/rstudio/bookdown/blob/2d692ba4b61f1e466c92e78fd712b0ab08c11d31/inst/resources/bs4_book/bs4_book.js#L25 */ + // Initialise search index on focus + var fuse; + $("#search-input").focus(async function(e) { + if (fuse) { + return; + } + + $(e.target).addClass("loading"); + var response = await fetch($("#search-input").data("search-index")); + var data = await response.json(); + + var options = { + keys: ["what", "text", "code"], + ignoreLocation: true, + threshold: 0.1, + includeMatches: true, + includeScore: true, + }; + fuse = new Fuse(data, options); + + $(e.target).removeClass("loading"); + }); + + // Use algolia autocomplete + var options = { + autoselect: true, + debug: true, + hint: false, + minLength: 2, + }; + var q; +async function searchFuse(query, callback) { + await fuse; + + var items; + if (!fuse) { + items = []; + } else { + q = query; + var results = fuse.search(query, { limit: 20 }); + items = results + .filter((x) => x.score <= 0.75) + .map((x) => x.item); + if (items.length === 0) { + items = [{dir:"Sorry 😿",previous_headings:"",title:"No results found.",what:"No results found.",path:window.location.href}]; + } + } + callback(items); +} + $("#search-input").autocomplete(options, [ + { + name: "content", + source: searchFuse, + templates: { + suggestion: (s) => { + if (s.title == s.what) { + return `${s.dir} >
    ${s.title}
    `; + } else if (s.previous_headings == "") { + return `${s.dir} >
    ${s.title}
    > ${s.what}`; + } else { + return `${s.dir} >
    ${s.title}
    > ${s.previous_headings} > ${s.what}`; + } + }, + }, + }, + ]).on('autocomplete:selected', function(event, s) { + window.location.href = s.path + "?q=" + q + "#" + s.id; + }); + }); })(window.jQuery || window.$) + + diff --git a/docs/pkgdown.yml b/docs/pkgdown.yml index 629012dd..6dd6bbd1 100644 --- a/docs/pkgdown.yml +++ b/docs/pkgdown.yml @@ -1,12 +1,9 @@ -pandoc: 2.7.3 -pkgdown: 1.6.1 +pandoc: 3.1.4 +pkgdown: 2.0.7 pkgdown_sha: ~ articles: - Gadgets: Gadgets.html - Single-Layout: Single-Layout.html - Split-Layout: Split-Layout.html - Tabs-Layout: Tabs-Layout.html + pwa: pwa.html + shinyMobile-tools: shinyMobile-tools.html shinyMobile: shinyMobile.html - shinyMobile_tools: shinyMobile_tools.html -last_built: 2021-09-15T19:45Z +last_built: 2024-01-25T22:00Z diff --git a/docs/reference/authentication.html b/docs/reference/authentication.html index fd1ac897..fdfc8b7e 100644 --- a/docs/reference/authentication.html +++ b/docs/reference/authentication.html @@ -1,454 +1,351 @@ - - - - - - +Framework7 login screen — f7Login • shinyMobile + Skip to contents + -Framework7 login screen — f7Login • shinyMobile +
    +
    +
    +

    Framework7 login screen

    + Source: R/f7Login.R +
    authentication.Rd
    +
    - - - +
    +

    Provide a template for authentication

    +

    f7LoginServer is a useful server elements to fine tune the +f7Login page.

    +

    updateF7Login toggles a login page.

    +
    - - +
    +

    Usage

    + 
    f7Login(..., id, title, label = "Sign In", footer = NULL, startOpen = TRUE)
+
+f7LoginServer(input, output, session, ignoreInit = FALSE, trigger = NULL)
+
+updateF7Login(
+  id,
+  user = NULL,
+  password = NULL,
+  session = shiny::getDefaultReactiveDomain()
+)
    +
    - - - +
    +

    Arguments

    +
    ...
    +

    Slot for inputs like password, text, ...

    - - - +
    id
    +

    f7Login unique id.

    - - +
    title
    +

    Login page title.

    - - - +
    label
    +

    Login confirm button label.

    +
    footer
    +

    Optional footer.

    - - - - - - - - - - -
    -
    - - +
    input
    +

    Shiny input object.

    -
    -
    -
    -
    -

    Framework7 login screen

    - Source: R/f7Login.R - -
    +
    output
    +

    Shiny output object.

    -
    -

    Provide a template for authentication

    -

    f7LoginServer is a useful server elements to fine tune the -f7Login page.

    -

    updateF7Login toggles a login page.

    -
    - 
    f7Login(..., id, title, label = "Sign In", footer = NULL, startOpen = TRUE)
-
-f7LoginServer(input, output, session, ignoreInit = FALSE, trigger = NULL)
-
-updateF7Login(
-  id,
-  user = NULL,
-  password = NULL,
-  session = shiny::getDefaultReactiveDomain()
-)
    - -

    Arguments

    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    ...

    Slot for inputs like password, text, ...

    id

    f7Login unique id.

    title

    Login page title.

    label

    Login confirm button label.

    footer

    Optional footer.

    startOpen

    Whether to open the login page at start. Default to TRUE. There -are some cases where it is interesting to set up to FALSE, for instance when you want -to have authentication only in a specific tab of your app (See example 2).

    input

    Shiny input object.

    output

    Shiny output object.

    session

    Shiny session object.

    ignoreInit

    If TRUE, then, when this observeEvent is first +

    session
    +

    Shiny session object.

    + + +
    ignoreInit
    +

    If TRUE, then, when this observeEvent is first created/initialized, ignore the handlerExpr (the second argument), -whether it is otherwise supposed to run or not. The default is FALSE.

    trigger

    Reactive trigger to toggle the login page state. Useful, when -one wants to set up local authentication (for a specific section). See example 2.

    user

    Value of the user input.

    password

    Value of the password input.

    - -

    Details

    +whether it is otherwise supposed to run or not. The default is FALSE.

    + + +
    trigger
    +

    Reactive trigger to toggle the login page state. Useful, when +one wants to set up local authentication (for a specific section). See example 2.

    + +
    user
    +

    Value of the user input.

    + + +
    password
    +

    Value of the password input.

    + +
    +
    +

    Details

    This function does not provide the backend features. You would need to store credentials in a database for instance.

    -

    Note

    - +
    +
    +

    Note

    There is an input associated with the login status, namely input$login. It is linked to an action button, which is 0 when the application starts. As soon as the button is pressed, its value is incremented which might fire a observeEvent listening to it (See example below). Importantly, the login page is closed only if the text and password inputs are filled. The f7LoginServer contains a piece of server logic that does this work for you.

    +
    -

    Examples

    - 
    if (interactive()) {
- # global authentication
- library(shiny)
- library(shinyMobile)
- shinyApp(
-   ui = f7Page(
-     title = "Login module",
-     f7SingleLayout(
-       navbar = f7Navbar(
-         title = "Login Example",
-         hairline = FALSE,
-         shadow = TRUE
-       ),
-       toolbar = f7Toolbar(
-         position = "bottom",
-         f7Link(label = "Link 1", href = "https://www.google.com"),
-         f7Link(label = "Link 2", href = "https://www.google.com")
-       ),
-       f7Login(id = "loginPage", title = "Welcome"),
-       # main content
-       f7BlockTitle(
-         title = HTML(paste("Welcome", textOutput("user"))),
-         size = "large"
-       ) %>% f7Align("center")
-     )
-   ),
-   server = function(input, output, session) {
-
-     loginData <- callModule(f7LoginServer, id = "loginPage")
-
-     output$user <- renderText({
-      req(loginData$user)
-      loginData$user()
-     })
-   }
- )
-
- # section specific authentication
- library(shiny)
- library(shinyMobile)
- shinyApp(
-   ui = f7Page(
-     title = "Local access restriction",
-     f7TabLayout(
-       navbar = f7Navbar(
-         title = "Login Example for Specific Section",
-         hairline = FALSE,
-         shadow = TRUE
-       ),
-       f7Tabs(
-         id = "tabs",
-         f7Tab(
-           tabName = "Tab 1",
-           "Without authentication"
-         ),
-         f7Tab(
-           tabName = "Restricted",
-           # main content
-           f7BlockTitle(
-             title = HTML(paste("Welcome", textOutput("user"))),
-             size = "large"
-           ) %>% f7Align("center")
-         )
-       ),
-       f7Login(id = "loginPage", title = "Welcome", startOpen = FALSE)
-     )
-   ),
-   server = function(input, output, session) {
-
-     # trigger
-     trigger <- reactive({
-      req(input$tabs)
-     })
-
-     # do not run first since the login page is not yet visible
-     loginData <- callModule(
-      f7LoginServer,
-      id = "loginPage",
-      ignoreInit = TRUE,
-      trigger = trigger
-     )
-
-     output$user <- renderText({
-      req(loginData$user)
-      loginData$user()
-     })
-
-   }
- )
-
- # with 2 different protected sections
- library(shiny)
- library(shinyMobile)
- shinyApp(
-   ui = f7Page(
-     title = "Multiple restricted areas",
-     f7TabLayout(
-       navbar = f7Navbar(
-         title = "Login Example for 2 Specific Section",
-         hairline = FALSE,
-         shadow = TRUE
-       ),
-       f7Tabs(
-         id = "tabs",
-         f7Tab(
-           tabName = "Tab 1",
-           "Without authentication"
-         ),
-         f7Tab(
-           tabName = "Restricted",
-           # main content
-           f7BlockTitle(
-             title = "1st restricted area",
-             size = "large"
-           ) %>% f7Align("center")
-         ),
-         f7Tab(
-           tabName = "Restricted 2",
-           # main content
-           f7BlockTitle(
-             title = "2nd restricted area",
-             size = "large"
-           ) %>% f7Align("center")
-         )
-       ),
-       f7Login(id = "loginPage", title = "Welcome", startOpen = FALSE),
-       f7Login(id = "loginPage2", title = "Welcome", startOpen = FALSE)
-     )
-   ),
-   server = function(input, output, session) {
-
-     trigger1 <- reactive({
-       req(input$tabs == "Restricted")
-     })
-
-     trigger2 <- reactive({
-       req(input$tabs == "Restricted 2")
-     })
-
-     # do not run first since the login page is not yet visible
-     callModule(
-       f7LoginServer,
-       id = "loginPage",
-       ignoreInit = TRUE,
-       trigger = trigger1
-     )
-
-     callModule(
-       f7LoginServer,
-       id = "loginPage2",
-       ignoreInit = TRUE,
-       trigger = trigger2
-     )
-
-   }
- )
-}
-
    -
    - -
    +
    +

    Examples

    + 
    if (interactive()) {
+ # global authentication
+ library(shiny)
+ library(shinyMobile)
+ shinyApp(
+   ui = f7Page(
+     title = "Login module",
+     f7SingleLayout(
+       navbar = f7Navbar(
+         title = "Login Example",
+         hairline = FALSE,
+         shadow = TRUE
+       ),
+       toolbar = f7Toolbar(
+         position = "bottom",
+         f7Link(label = "Link 1", href = "https://www.google.com"),
+         f7Link(label = "Link 2", href = "https://www.google.com")
+       ),
+       f7Login(id = "loginPage", title = "Welcome"),
+       # main content
+       f7BlockTitle(
+         title = HTML(paste("Welcome", textOutput("user"))),
+         size = "large"
+       ) %>% f7Align("center")
+     )
+   ),
+   server = function(input, output, session) {
+
+     loginData <- callModule(f7LoginServer, id = "loginPage")
+
+     output$user <- renderText({
+      req(loginData$user)
+      loginData$user()
+     })
+   }
+ )
+
+ # section specific authentication
+ library(shiny)
+ library(shinyMobile)
+ shinyApp(
+   ui = f7Page(
+     title = "Local access restriction",
+     f7TabLayout(
+       navbar = f7Navbar(
+         title = "Login Example for Specific Section",
+         hairline = FALSE,
+         shadow = TRUE
+       ),
+       f7Tabs(
+         id = "tabs",
+         f7Tab(
+           tabName = "Tab 1",
+           "Without authentication"
+         ),
+         f7Tab(
+           tabName = "Restricted",
+           # main content
+           f7BlockTitle(
+             title = HTML(paste("Welcome", textOutput("user"))),
+             size = "large"
+           ) %>% f7Align("center")
+         )
+       ),
+       f7Login(id = "loginPage", title = "Welcome", startOpen = FALSE)
+     )
+   ),
+   server = function(input, output, session) {
+
+     # trigger
+     trigger <- reactive({
+      req(input$tabs)
+     })
+
+     # do not run first since the login page is not yet visible
+     loginData <- callModule(
+      f7LoginServer,
+      id = "loginPage",
+      ignoreInit = TRUE,
+      trigger = trigger
+     )
+
+     output$user <- renderText({
+      req(loginData$user)
+      loginData$user()
+     })
+
+   }
+ )
+
+ # with 2 different protected sections
+ library(shiny)
+ library(shinyMobile)
+ shinyApp(
+   ui = f7Page(
+     title = "Multiple restricted areas",
+     f7TabLayout(
+       navbar = f7Navbar(
+         title = "Login Example for 2 Specific Section",
+         hairline = FALSE,
+         shadow = TRUE
+       ),
+       f7Tabs(
+         id = "tabs",
+         f7Tab(
+           tabName = "Tab 1",
+           "Without authentication"
+         ),
+         f7Tab(
+           tabName = "Restricted",
+           # main content
+           f7BlockTitle(
+             title = "1st restricted area",
+             size = "large"
+           ) %>% f7Align("center")
+         ),
+         f7Tab(
+           tabName = "Restricted 2",
+           # main content
+           f7BlockTitle(
+             title = "2nd restricted area",
+             size = "large"
+           ) %>% f7Align("center")
+         )
+       ),
+       f7Login(id = "loginPage", title = "Welcome", startOpen = FALSE),
+       f7Login(id = "loginPage2", title = "Welcome", startOpen = FALSE)
+     )
+   ),
+   server = function(input, output, session) {
+
+     trigger1 <- reactive({
+       req(input$tabs == "Restricted")
+     })
+
+     trigger2 <- reactive({
+       req(input$tabs == "Restricted 2")
+     })
+
+     # do not run first since the login page is not yet visible
+     callModule(
+       f7LoginServer,
+       id = "loginPage",
+       ignoreInit = TRUE,
+       trigger = trigger1
+     )
+
+     callModule(
+       f7LoginServer,
+       id = "loginPage2",
+       ignoreInit = TRUE,
+       trigger = trigger2
+     )
+
+   }
+ )
+}
+
    +
    +
    • -
    -
    -

    Developed by David Granjon, Victor Perrier, Isabelle Rudolf.

    +
    +

    Developed by David Granjon, Victor Perrier, Isabelle Rudolf.

    -
    -

    Site built with pkgdown 1.6.1.

    +
    +

    Site built with pkgdown 2.0.7.

    -
    -
    +
    + - - - + diff --git a/docs/reference/class2f7.html b/docs/reference/class2f7.html index ce03bd1f..c2985f38 100644 --- a/docs/reference/class2f7.html +++ b/docs/reference/class2f7.html @@ -1,215 +1,105 @@ - - - - - - - -Get CSS class based on cell class — class2f7 • shinyMobile - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - +Get CSS class based on cell class — class2f7 • shinyMobile + Skip to contents + +
    -
    -
    -

    Get CSS class based on cell class

    - Source: R/f7-tables.R - +
    +

    Get CSS class based on cell class

    + Source: R/f7-tables.R +
    class2f7.Rd
    -
    +

    Get CSS class based on cell class

    - 
    class2f7(x)
    +
    +

    Usage

    + 
    class2f7(x)
    +
    -

    Arguments

    - - - - - - -
    x

    Value.

    +
    +

    Arguments

    +
    x
    +

    Value.

    +
    -
    - -
    +
    -
    -
    -

    Developed by David Granjon, Victor Perrier, Isabelle Rudolf.

    +
    +

    Developed by David Granjon, Victor Perrier, Isabelle Rudolf.

    -
    -

    Site built with pkgdown 1.6.1.

    +
    +

    Site built with pkgdown 2.0.7.

    -
    -
    +
    + - - - + diff --git a/docs/reference/createSelectOptions.html b/docs/reference/createSelectOptions.html index 22f77a45..8e513d0a 100644 --- a/docs/reference/createSelectOptions.html +++ b/docs/reference/createSelectOptions.html @@ -1,219 +1,109 @@ - - - - - - - -Create option html tag based on choice input — createSelectOptions • shinyMobile - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - +Create option html tag based on choice input — createSelectOptions • shinyMobile + Skip to contents + +
    -
    -
    -

    Create option html tag based on choice input

    - Source: R/f7-inputs.R - +
    +

    Create option html tag based on choice input

    + Source: R/f7-inputs.R +
    createSelectOptions.Rd
    -
    -

    Used by f7SmartSelect and f7Select

    +
    +

    Used by f7SmartSelect and f7Select

    - 
    createSelectOptions(choices, selected)
    +
    +

    Usage

    + 
    createSelectOptions(choices, selected)
    +
    -

    Arguments

    - - - - - - - - - - -
    choices

    Vector of possibilities.

    selected

    Default selected value.

    +
    +

    Arguments

    +
    choices
    +

    Vector of possibilities.

    -
    - -
    +
    selected
    +

    Default selected value.

    + +
    + +
    -
    -
    -

    Developed by David Granjon, Victor Perrier, Isabelle Rudolf.

    +
    +

    Developed by David Granjon, Victor Perrier, Isabelle Rudolf.

    -
    -

    Site built with pkgdown 1.6.1.

    +
    +

    Site built with pkgdown 2.0.7.

    -
    -
    +
    + - - - + diff --git a/docs/reference/create_app_ui.html b/docs/reference/create_app_ui.html index 087c394b..79a93bc0 100644 --- a/docs/reference/create_app_ui.html +++ b/docs/reference/create_app_ui.html @@ -1,227 +1,117 @@ - - - - - - - -Create the app UI — create_app_ui • shinyMobile - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - +Create the app UI — create_app_ui • shinyMobile + Skip to contents + +
    -
    -
    -

    Create the app UI

    - Source: R/preview_mobile.R - +
    +

    Create the app UI

    + Source: R/preview_mobile.R +
    create_app_ui.Rd
    -
    +

    Create the app UI

    - 
    create_app_ui(iframe, device, color, landscape)
    - -

    Arguments

    - - - - - - - - - - - - - - - - - - -
    iframe

    iframe tag designed by preview_mobile.

    device

    See preview_mobile input.

    color

    See preview_mobile input.

    landscape

    See preview_mobile input.

    +
    +

    Usage

    + 
    create_app_ui(iframe, device, color, landscape)
    +
    + +
    +

    Arguments

    +
    iframe
    +

    iframe tag designed by preview_mobile.

    -
    - -
    +
    device
    +

    See preview_mobile input.

    + + +
    color
    +

    See preview_mobile input.

    -
    -
    -

    Developed by David Granjon, Victor Perrier, Isabelle Rudolf.

    +
    landscape
    +

    See preview_mobile input.

    + +
    + +
    + + +
    +

    Developed by David Granjon, Victor Perrier, Isabelle Rudolf.

    -
    -

    Site built with pkgdown 1.6.1.

    +
    +

    Site built with pkgdown 2.0.7.

    -
    -
    +
    + - - - + diff --git a/docs/reference/f7Align.html b/docs/reference/f7Align.html index 0af72e6a..a0b534cc 100644 --- a/docs/reference/f7Align.html +++ b/docs/reference/f7Align.html @@ -1,244 +1,137 @@ - - - - - - - -Framework7 align utility — f7Align • shinyMobile - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - +Framework7 align utility — f7Align • shinyMobile + Skip to contents + +
    -
    -
    -

    Framework7 align utility

    - Source: R/typography.R - +
    +

    Framework7 align utility

    + Source: R/typography.R +
    f7Align.Rd
    -
    +

    f7Align is an alignment utility for items.

    - 
    f7Align(tag, side = c("left", "center", "right", "justify"))
    - -

    Arguments

    - - - - - - - - - - -
    tag

    Tag to align.

    side

    Side to align: "left", "center", "right" or "justify".

    - -

    Author

    - -

    David Granjon, dgranjon@ymail.com

    - -

    Examples

    - 
    if(interactive()){
- library(shiny)
- library(shinyMobile)
-
- shinyApp(
-   ui = f7Page(
-    title = "Align",
-    f7SingleLayout(
-     navbar = f7Navbar(title = "f7Align"),
-     f7Row(
-      f7Align(h1("Left"), side = "left"),
-      f7Align(h1("Center"), side = "center"),
-      f7Align(h1("Right"), side = "right")
-     )
-    )
-   ),
-   server = function(input, output) {}
- )
-}
-
-
    -
    - -
    +
    +

    Usage

    + 
    f7Align(tag, side = c("left", "center", "right", "justify"))
    +
    + +
    +

    Arguments

    +
    tag
    +

    Tag to align.

    + + +
    side
    +

    Side to align: "left", "center", "right" or "justify".

    +
    +
    +

    Author

    +

    David Granjon, dgranjon@ymail.com

    +
    + +
    +

    Examples

    + 
    if(interactive()){
+ library(shiny)
+ library(shinyMobile)
+
+ shinyApp(
+   ui = f7Page(
+    title = "Align",
+    f7SingleLayout(
+     navbar = f7Navbar(title = "f7Align"),
+     f7Row(
+      f7Align(h1("Left"), side = "left"),
+      f7Align(h1("Center"), side = "center"),
+      f7Align(h1("Right"), side = "right")
+     )
+    )
+   ),
+   server = function(input, output) {}
+ )
+}
+
+
    +
    +
    -
    -
    -

    Developed by David Granjon, Victor Perrier, Isabelle Rudolf.

    + +
    +

    Developed by David Granjon, Victor Perrier, Isabelle Rudolf.

    -
    -

    Site built with pkgdown 1.6.1.

    +
    +

    Site built with pkgdown 2.0.7.

    -
    -
    +
    + - - - + diff --git a/docs/reference/f7Badge.html b/docs/reference/f7Badge.html index c9531b59..5346448f 100644 --- a/docs/reference/f7Badge.html +++ b/docs/reference/f7Badge.html @@ -1,247 +1,140 @@ - - - - - - - -Framework7 badge — f7Badge • shinyMobile - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - +Framework7 badge — f7Badge • shinyMobile + Skip to contents + +
    -
    -
    -

    Framework7 badge

    - Source: R/f7Badge.R - +
    +

    Framework7 badge

    + Source: R/f7Badge.R +
    f7Badge.Rd
    -
    +

    Container to highlight important information with color.

    - 
    f7Badge(..., color = NULL)
    - -

    Arguments

    - - - - - - - - - - -
    ...

    Badge content. Avoid long text.

    color

    Badge color: see here for valid colors https://framework7.io/docs/badge.html.

    - -

    Author

    - -

    David Granjon, dgranjon@ymail.com

    - -

    Examples

    - 
    if(interactive()){
- library(shiny)
- library(shinyMobile)
-
- colors <- getF7Colors()
-
- shinyApp(
-   ui = f7Page(
-     title = "Badges",
-     f7SingleLayout(
-       navbar = f7Navbar(title = "f7Badge"),
-       f7Block(
-         strong = TRUE,
-         lapply(seq_along(colors), function(i) {
-           f7Badge(colors[[i]], color = colors[[i]])
-         })
-       )
-     )
-   ),
-   server = function(input, output) {}
- )
-}
-
-
    -
    - -
    +
    +

    Usage

    + 
    f7Badge(..., color = NULL)
    +
    + +
    +

    Arguments

    +
    ...
    +

    Badge content. Avoid long text.

    + + +
    color
    +

    Badge color: see here for valid colors https://framework7.io/docs/badge.html.

    +
    +
    +

    Author

    +

    David Granjon, dgranjon@ymail.com

    +
    + +
    +

    Examples

    + 
    if(interactive()){
+ library(shiny)
+ library(shinyMobile)
+
+ colors <- getF7Colors()
+
+ shinyApp(
+   ui = f7Page(
+     title = "Badges",
+     f7SingleLayout(
+       navbar = f7Navbar(title = "f7Badge"),
+       f7Block(
+         strong = TRUE,
+         lapply(seq_along(colors), function(i) {
+           f7Badge(colors[[i]], color = colors[[i]])
+         })
+       )
+     )
+   ),
+   server = function(input, output) {}
+ )
+}
+
+
    +
    +
    -
    -
    -

    Developed by David Granjon, Victor Perrier, Isabelle Rudolf.

    + +
    +

    Developed by David Granjon, Victor Perrier, Isabelle Rudolf.

    -
    -

    Site built with pkgdown 1.6.1.

    +
    +

    Site built with pkgdown 2.0.7.

    -
    -
    +
    + - - - + diff --git a/docs/reference/f7BlockFooter.html b/docs/reference/f7BlockFooter.html index eeba4faa..98238b57 100644 --- a/docs/reference/f7BlockFooter.html +++ b/docs/reference/f7BlockFooter.html @@ -1,218 +1,109 @@ - - - - - - - -Framework7 block footer — f7BlockFooter • shinyMobile - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - +Framework7 block footer — f7BlockFooter • shinyMobile + Skip to contents + +
    -
    -
    -

    Framework7 block footer

    - Source: R/f7Block.R - +
    +

    Framework7 block footer

    + Source: R/f7Block.R +
    f7BlockFooter.Rd
    -
    -

    f7BlockFooter creates a footer content for f7Block.

    +
    +

    f7BlockFooter creates a footer content for f7Block.

    - 
    f7BlockFooter(text = NULL)
    - -

    Arguments

    - - - - - - -
    text

    Any text.

    +
    +

    Usage

    + 
    f7BlockFooter(text = NULL)
    +
    -

    Author

    +
    +

    Arguments

    +
    text
    +

    Any text.

    -

    David Granjon, dgranjon@ymail.com

    +
    +
    +

    Author

    +

    David Granjon, dgranjon@ymail.com

    +
    -
    - -
    +
    -
    -
    -

    Developed by David Granjon, Victor Perrier, Isabelle Rudolf.

    +
    +

    Developed by David Granjon, Victor Perrier, Isabelle Rudolf.

    -
    -

    Site built with pkgdown 1.6.1.

    +
    +

    Site built with pkgdown 2.0.7.

    -
    -
    +
    + - - - + diff --git a/docs/reference/f7BlockTitle.html b/docs/reference/f7BlockTitle.html index 50936456..5a1fabbc 100644 --- a/docs/reference/f7BlockTitle.html +++ b/docs/reference/f7BlockTitle.html @@ -1,222 +1,113 @@ - - - - - - - -Framework7 block title — f7BlockTitle • shinyMobile - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - +Framework7 block title — f7BlockTitle • shinyMobile + Skip to contents + +
    -
    -
    -

    Framework7 block title

    - Source: R/f7Block.R - +
    +

    Framework7 block title

    + Source: R/f7Block.R +
    f7BlockTitle.Rd
    -
    -

    f7BlockTitle creates a title for f7Block.

    +
    +

    f7BlockTitle creates a title for f7Block.

    - 
    f7BlockTitle(title = NULL, size = NULL)
    +
    +

    Usage

    + 
    f7BlockTitle(title = NULL, size = NULL)
    +
    -

    Arguments

    - - - - - - - - - - -
    title

    Block title.

    size

    Block title size. NULL by default or "medium", "large".

    +
    +

    Arguments

    +
    title
    +

    Block title.

    -

    Author

    -

    David Granjon, dgranjon@ymail.com

    +
    size
    +

    Block title size. NULL by default or "medium", "large".

    -
    - -
    +
    +
    +

    Author

    +

    David Granjon, dgranjon@ymail.com

    +
    + +
    -
    -
    -

    Developed by David Granjon, Victor Perrier, Isabelle Rudolf.

    +
    +

    Developed by David Granjon, Victor Perrier, Isabelle Rudolf.

    -
    -

    Site built with pkgdown 1.6.1.

    +
    +

    Site built with pkgdown 2.0.7.

    -
    -
    +
    + - - - + diff --git a/docs/reference/f7Chip.html b/docs/reference/f7Chip.html index 3e100c5e..d7608220 100644 --- a/docs/reference/f7Chip.html +++ b/docs/reference/f7Chip.html @@ -1,277 +1,170 @@ - - - - - - - -Framework7 chips — f7Chip • shinyMobile - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -Framework7 chips — f7Chip • shinyMobile + + Skip to contents + +
    -
    -
    -

    Framework7 chips

    - Source: R/f7Chips.R - +
    +

    Framework7 chips

    + Source: R/f7Chips.R +
    f7Chip.Rd
    -
    +

    f7Chip is an improved badge container.

    - 
    f7Chip(
-  label = NULL,
-  image = NULL,
-  icon = NULL,
-  outline = FALSE,
-  status = NULL,
-  iconStatus = NULL,
-  closable = FALSE
-)
    +
    +

    Usage

    + 
    f7Chip(
+  label = NULL,
+  image = NULL,
+  icon = NULL,
+  outline = FALSE,
+  status = NULL,
+  iconStatus = NULL,
+  closable = FALSE
+)
    +
    -

    Arguments

    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    label

    Chip label.

    image

    Chip image, if any.

    icon

    Icon, if any. IOS and Material icons available.

    outline

    Whether to outline chip. FALSE by default.

    status

    Chip color: see here for valid colors https://framework7.io/docs/chips.html.

    iconStatus

    Chip icon color: see here for valid colors https://framework7.io/docs/chips.html.

    closable

    Whether to close the chip. FALSE by default.

    +
    +

    Arguments

    +
    label
    +

    Chip label.

    -

    Author

    -

    David Granjon, dgranjon@ymail.com

    +
    image
    +

    Chip image, if any.

    -

    Examples

    - 
    if(interactive()){
- library(shiny)
- library(shinyMobile)
 
- shinyApp(
-  ui = f7Page(
-    title = "Chips",
-    f7SingleLayout(
-      navbar = f7Navbar(title = "f7Chip"),
-      f7Block(
-        strong = TRUE,
-        f7Chip(label = "simple Chip"),
-        f7Chip(label = "outline Chip", outline = TRUE),
-        f7Chip(label = "icon Chip", icon = f7Icon("plus_circle_fill"), iconStatus = "pink"),
-        f7Chip(label = "image Chip", image = "https://loremflickr.com/g/320/240/london"),
-        f7Chip(label = "closable Chip", closable = TRUE),
-        f7Chip(label = "colored Chip", status = "green"),
-        f7Chip(label = "colored outline Chip", status = "green", outline = TRUE)
-      )
-    )
-  ),
-  server = function(input, output) {}
- )
-}
+
    icon
    
+
    Icon, if any. IOS and Material icons available.
    
 
-
    -
    - -
    +
    outline
    +

    Whether to outline chip. FALSE by default.

    -
    -
    -

    Developed by David Granjon, Victor Perrier, Isabelle Rudolf.

    + +
    status
    +

    Chip color: see here for valid colors https://framework7.io/docs/chips.html.

    + + +
    iconStatus
    +

    Chip icon color: see here for valid colors https://framework7.io/docs/chips.html.

    + + +
    closable
    +

    Whether to close the chip. FALSE by default.

    + +
    +
    +

    Author

    +

    David Granjon, dgranjon@ymail.com

    +
    + +
    +

    Examples

    + 
    if(interactive()){
+ library(shiny)
+ library(shinyMobile)
+
+ shinyApp(
+  ui = f7Page(
+    title = "Chips",
+    f7SingleLayout(
+      navbar = f7Navbar(title = "f7Chip"),
+      f7Block(
+        strong = TRUE,
+        f7Chip(label = "simple Chip"),
+        f7Chip(label = "outline Chip", outline = TRUE),
+        f7Chip(label = "icon Chip", icon = f7Icon("plus_circle_fill"), iconStatus = "pink"),
+        f7Chip(label = "image Chip", image = "https://loremflickr.com/g/320/240/london"),
+        f7Chip(label = "closable Chip", closable = TRUE),
+        f7Chip(label = "colored Chip", status = "green"),
+        f7Chip(label = "colored outline Chip", status = "green", outline = TRUE)
+      )
+    )
+  ),
+  server = function(input, output) {}
+ )
+}
+
+
    +
    +
    + + +
    +

    Developed by David Granjon, Victor Perrier, Isabelle Rudolf.

    -
    -

    Site built with pkgdown 1.6.1.

    +
    +

    Site built with pkgdown 2.0.7.

    -
    -
    +
    + - - - + diff --git a/docs/reference/f7Col.html b/docs/reference/f7Col.html index e2bed2e6..d81ef31a 100644 --- a/docs/reference/f7Col.html +++ b/docs/reference/f7Col.html @@ -1,223 +1,115 @@ - - - - - - - -Framework7 column container — f7Col • shinyMobile - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - +Framework7 column container — f7Col • shinyMobile + Skip to contents + +
    -
    -
    -

    Framework7 column container

    - Source: R/f7Grid.R - +
    +

    Framework7 column container

    + Source: R/f7Grid.R +
    f7Col.Rd
    -
    +

    Build a Framework7 column container

    - 
    f7Col(...)
    - -

    Arguments

    - - - - - - -
    ...

    Column content. The width is automatically handled depending -on the number of columns.

    +
    +

    Usage

    + 
    f7Col(...)
    +
    -

    Note

    +
    +

    Arguments

    +
    ...
    +

    Column content. The width is automatically handled depending +on the number of columns.

    -

    The dark theme does not work for items embedded in a column. Use f7Flex +

    +
    +

    Note

    +

    The dark theme does not work for items embedded in a column. Use f7Flex instead.

    -

    Author

    +
    +
    +

    Author

    +

    David Granjon, dgranjon@ymail.com

    +
    -

    David Granjon, dgranjon@ymail.com

    - -
    - -
    +
    -
    -
    -

    Developed by David Granjon, Victor Perrier, Isabelle Rudolf.

    +
    +

    Developed by David Granjon, Victor Perrier, Isabelle Rudolf.

    -
    -

    Site built with pkgdown 1.6.1.

    +
    +

    Site built with pkgdown 2.0.7.

    -
    -
    +
    + - - - + diff --git a/docs/reference/f7ColorPicker.html b/docs/reference/f7ColorPicker.html index 159e6c24..8dfa7a16 100644 --- a/docs/reference/f7ColorPicker.html +++ b/docs/reference/f7ColorPicker.html @@ -1,301 +1,193 @@ - - - - - - +Create a Framework7 color picker input — f7ColorPicker • shinyMobile + Skip to contents + -Create a Framework7 color picker input — f7ColorPicker • shinyMobile +
    +
    +
    +

    Create a Framework7 color picker input

    + Source: R/f7-inputs.R +
    f7ColorPicker.Rd
    +
    - - - +
    +

    Create a Framework7 color picker input

    +
    - - +
    +

    Usage

    + 
    f7ColorPicker(
+  inputId,
+  label,
+  value = "#ff0000",
+  placeholder = NULL,
+  modules = f7ColorPickerModules,
+  palettes = f7ColorPickerPalettes,
+  sliderValue = TRUE,
+  sliderValueEditable = TRUE,
+  sliderLabel = TRUE,
+  hexLabel = TRUE,
+  hexValueEditable = TRUE,
+  groupedModules = TRUE
+)
    +
    - - - +
    +

    Arguments

    +
    inputId
    +

    Color picker input.

    - - - +
    label
    +

    Color picker label.

    - - +
    value
    +

    Color picker value. hex, rgb, hsl, hsb, alpha, hue, +rgba, hsla are supported.

    - - - +
    placeholder
    +

    Color picker placeholder.

    +
    modules
    +

    Picker color modules. Choose at least one.

    - - - - - - - - - - -
    -
    - - +
    sliderValue
    +

    When enabled, it will display sliders values.

    -
    -
    -
    -
    -

    Create a Framework7 color picker input

    - Source: R/f7-inputs.R - -
    +
    sliderValueEditable
    +

    When enabled, it will display sliders values as <input> +elements to edit directly.

    -
    -

    Create a Framework7 color picker input

    -
    - 
    f7ColorPicker(
-  inputId,
-  label,
-  value = "#ff0000",
-  placeholder = NULL,
-  modules = f7ColorPickerModules,
-  palettes = f7ColorPickerPalettes,
-  sliderValue = TRUE,
-  sliderValueEditable = TRUE,
-  sliderLabel = TRUE,
-  hexLabel = TRUE,
-  hexValueEditable = TRUE,
-  groupedModules = TRUE
-)
    - -

    Arguments

    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    inputId

    Color picker input.

    label

    Color picker label.

    value

    Color picker value. hex, rgb, hsl, hsb, alpha, hue, -rgba, hsla are supported.

    placeholder

    Color picker placeholder.

    modules

    Picker color modules. Choose at least one.

    palettes

    Picker color predefined palettes. Must be a list -of color vectors, each value specified as HEX string.

    sliderValue

    When enabled, it will display sliders values.

    sliderValueEditable

    When enabled, it will display sliders values as <input> -elements to edit directly.

    sliderLabel

    When enabled, it will display sliders labels with text.

    hexLabel

    When enabled, it will display HEX module label text, e.g. HEX.

    hexValueEditable

    When enabled, it will display HEX module value as <input> element to edit directly.

    groupedModules

    When enabled it will add more exposure -to sliders modules to make them look more separated.

    - - -

    Examples

    - 
    if (interactive()) {
- library(shiny)
- library(shinyMobile)
-
- shinyApp(
-   ui = f7Page(
-     title = "My app",
-     f7SingleLayout(
-       navbar = f7Navbar(title = "f7ColorPicker"),
-       f7ColorPicker(
-         inputId = "mycolorpicker",
-         placeholder = "Some text here!",
-         label = "Select a color"
-       ),
-       "The picker value is:",
-       textOutput("colorPickerVal")
-     )
-   ),
-   server = function(input, output) {
-     output$colorPickerVal <- renderText(input$mycolorpicker)
-   }
- )
-}
-
    -
    - -
    +
    sliderLabel
    +

    When enabled, it will display sliders labels with text.

    + + +
    hexLabel
    +

    When enabled, it will display HEX module label text, e.g. HEX.

    + + +
    hexValueEditable
    +

    When enabled, it will display HEX module value as <input> element to edit directly.

    + +
    groupedModules
    +

    When enabled it will add more exposure +to sliders modules to make them look more separated.

    -
    -
    -

    Developed by David Granjon, Victor Perrier, Isabelle Rudolf.

    +
    + +
    +

    Examples

    + 
    if (interactive()) {
+ library(shiny)
+ library(shinyMobile)
+
+ shinyApp(
+   ui = f7Page(
+     title = "My app",
+     f7SingleLayout(
+       navbar = f7Navbar(title = "f7ColorPicker"),
+       f7ColorPicker(
+         inputId = "mycolorpicker",
+         placeholder = "Some text here!",
+         label = "Select a color"
+       ),
+       "The picker value is:",
+       textOutput("colorPickerVal")
+     )
+   ),
+   server = function(input, output) {
+     output$colorPickerVal <- renderText(input$mycolorpicker)
+   }
+ )
+}
+
    +
    +
    + + +
    +

    Developed by David Granjon, Victor Perrier, Isabelle Rudolf.

    -
    -

    Site built with pkgdown 1.6.1.

    +
    +

    Site built with pkgdown 2.0.7.

    -
    -
    +
    + - - - + diff --git a/docs/reference/f7Dialog.html b/docs/reference/f7Dialog.html index f7b2637c..14d1c438 100644 --- a/docs/reference/f7Dialog.html +++ b/docs/reference/f7Dialog.html @@ -1,360 +1,252 @@ - - - - - - - -Framework7 dialog window — f7Dialog • shinyMobile - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -Framework7 dialog window — f7Dialog • shinyMobile + + Skip to contents + +
    -
    -
    -

    Framework7 dialog window

    - Source: R/f7Dialog.R - +
    +

    Framework7 dialog window

    + Source: R/f7Dialog.R +
    f7Dialog.Rd
    -
    +

    f7Dialog generates a modal window.

    - 
    f7Dialog(
-  id = NULL,
-  title = NULL,
-  text,
-  type = c("alert", "confirm", "prompt", "login"),
-  session = shiny::getDefaultReactiveDomain()
-)
    - -

    Arguments

    - - - - - - - - - - - - - - - - - - - - - - -
    id

    Input associated to the alert. Works when type is one of -"confirm", "prompt" or "login".

    title

    Dialog title

    text

    Dialog text.

    type

    Dialog type: c("alert", "confirm", "prompt", "login").

    session

    shiny session.

    - - -

    Examples

    - 
    # simple alert
-if (interactive()) {
-  library(shiny)
-  library(shinyMobile)
-  shinyApp(
-    ui = f7Page(
-      title = "Simple Dialog",
-      f7SingleLayout(
-        navbar = f7Navbar(title = "f7Dialog"),
-        f7Button(inputId = "goButton", "Go!")
-      )
-    ),
-    server = function(input, output, session) {
-      observeEvent(input$goButton,{
-        f7Dialog(
-         title = "Dialog title",
-         text = "This is an alert dialog"
-        )
-      })
-    }
-  )
-}
-# confirm alert
-if (interactive()) {
- library(shiny)
- library(shinyMobile)
- shinyApp(
-   ui = f7Page(
-     title = "Confirm Dialog",
-     f7SingleLayout(
-       navbar = f7Navbar(title = "f7Dialog"),
-       f7Button(inputId = "goButton", "Go!")
-     )
-   ),
-   server = function(input, output, session) {
-
-     observeEvent(input$goButton,{
-       f7Dialog(
-         id = "test",
-         title = "Dialog title",
-         type = "confirm",
-         text = "This is an alert dialog"
-       )
-     })
-
-     observeEvent(input$test, {
-       f7Toast(text = paste("Alert input is:", input$test))
-     })
-
-   }
- )
-}
-# prompt dialog
-if (interactive()) {
- library(shiny)
- library(shinyMobile)
- shinyApp(
-   ui = f7Page(
-     title = "Prompt Dialog",
-     f7SingleLayout(
-       navbar = f7Navbar(title = "f7Dialog"),
-       f7Button(inputId = "goButton", "Go!"),
-       uiOutput("res")
-     )
-   ),
-   server = function(input, output, session) {
-
-     observe({
-       print(input$prompt)
-     })
-
-     observeEvent(input$goButton,{
-       f7Dialog(
-         id = "prompt",
-         title = "Dialog title",
-         type = "prompt",
-         text = "This is a prompt dialog"
-       )
-     })
-
-     output$res <- renderUI(f7BlockTitle(title = input$prompt, size = "large"))
-   }
- )
-}
-
-# login dialog
-if (interactive()) {
- library(shiny)
- library(shinyMobile)
- shinyApp(
-   ui = f7Page(
-     title = "Login Dialog",
-     f7SingleLayout(
-       navbar = f7Navbar(title = "f7Dialog"),
-       f7Button(inputId = "goButton", "Go!"),
-       uiOutput("ui")
-     )
-   ),
-   server = function(input, output, session) {
-
-     observe({
-       print(input$login)
-     })
-
-     observeEvent(input$goButton,{
-       f7Dialog(
-         id = "login",
-         title = "Dialog title",
-         type = "login",
-         text = "This is an login dialog"
-       )
-     })
+    
    
+    
    Usage
    
+    
    f7Dialog(
+  id = NULL,
+  title = NULL,
+  text,
+  type = c("alert", "confirm", "prompt", "login"),
+  session = shiny::getDefaultReactiveDomain()
+)
    
+    
    
 
-     output$ui <- renderUI({
-       req(input$login$user == "David" & input$login$password == "prout")
-       img(src = "https://media2.giphy.com/media/12gfL8Xxrhv7C1fXiV/giphy.gif")
-     })
-   }
- )
-}
-
    -
    - -
    +
    +

    Arguments

    +
    id
    +

    Input associated to the alert. Works when type is one of +"confirm", "prompt" or "login".

    + + +
    title
    +

    Dialog title

    + + +
    text
    +

    Dialog text.

    + + +
    type
    +

    Dialog type: c("alert", "confirm", "prompt", "login").

    + + +
    session
    +

    shiny session.

    + +
    + +
    +

    Examples

    + 
    # simple alert
+if (interactive()) {
+  library(shiny)
+  library(shinyMobile)
+  shinyApp(
+    ui = f7Page(
+      title = "Simple Dialog",
+      f7SingleLayout(
+        navbar = f7Navbar(title = "f7Dialog"),
+        f7Button(inputId = "goButton", "Go!")
+      )
+    ),
+    server = function(input, output, session) {
+      observeEvent(input$goButton,{
+        f7Dialog(
+         title = "Dialog title",
+         text = "This is an alert dialog"
+        )
+      })
+    }
+  )
+}
+# confirm alert
+if (interactive()) {
+ library(shiny)
+ library(shinyMobile)
+ shinyApp(
+   ui = f7Page(
+     title = "Confirm Dialog",
+     f7SingleLayout(
+       navbar = f7Navbar(title = "f7Dialog"),
+       f7Button(inputId = "goButton", "Go!")
+     )
+   ),
+   server = function(input, output, session) {
+
+     observeEvent(input$goButton,{
+       f7Dialog(
+         id = "test",
+         title = "Dialog title",
+         type = "confirm",
+         text = "This is an alert dialog"
+       )
+     })
+
+     observeEvent(input$test, {
+       f7Toast(text = paste("Alert input is:", input$test))
+     })
+
+   }
+ )
+}
+# prompt dialog
+if (interactive()) {
+ library(shiny)
+ library(shinyMobile)
+ shinyApp(
+   ui = f7Page(
+     title = "Prompt Dialog",
+     f7SingleLayout(
+       navbar = f7Navbar(title = "f7Dialog"),
+       f7Button(inputId = "goButton", "Go!"),
+       uiOutput("res")
+     )
+   ),
+   server = function(input, output, session) {
+
+     observe({
+       print(input$prompt)
+     })
+
+     observeEvent(input$goButton,{
+       f7Dialog(
+         id = "prompt",
+         title = "Dialog title",
+         type = "prompt",
+         text = "This is a prompt dialog"
+       )
+     })
+
+     output$res <- renderUI(f7BlockTitle(title = input$prompt, size = "large"))
+   }
+ )
+}
+
+# login dialog
+if (interactive()) {
+ library(shiny)
+ library(shinyMobile)
+ shinyApp(
+   ui = f7Page(
+     title = "Login Dialog",
+     f7SingleLayout(
+       navbar = f7Navbar(title = "f7Dialog"),
+       f7Button(inputId = "goButton", "Go!"),
+       uiOutput("ui")
+     )
+   ),
+   server = function(input, output, session) {
+
+     observe({
+       print(input$login)
+     })
+
+     observeEvent(input$goButton,{
+       f7Dialog(
+         id = "login",
+         title = "Dialog title",
+         type = "login",
+         text = "This is an login dialog"
+       )
+     })
+
+     output$ui <- renderUI({
+       req(input$login$user == "David" & input$login$password == "prout")
+       img(src = "https://media2.giphy.com/media/12gfL8Xxrhv7C1fXiV/giphy.gif")
+     })
+   }
+ )
+}
+
    +
    +
    -
    -
    -

    Developed by David Granjon, Victor Perrier, Isabelle Rudolf.

    +
    +

    Developed by David Granjon, Victor Perrier, Isabelle Rudolf.

    -
    -

    Site built with pkgdown 1.6.1.

    +
    +

    Site built with pkgdown 2.0.7.

    -
    -
    +
    + - - - + diff --git a/docs/reference/f7DownloadButton.html b/docs/reference/f7DownloadButton.html index 75f83eab..527a97be 100644 --- a/docs/reference/f7DownloadButton.html +++ b/docs/reference/f7DownloadButton.html @@ -1,261 +1,156 @@ - - - - - - - -Create a download button — f7DownloadButton • shinyMobile - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + Skip to contents + +
    -
    -
    -

    Create a download button

    - Source: R/f7-download.R - +
    +

    Create a download button

    + Source: R/f7-download.R +
    f7DownloadButton.Rd
    -
    +

    Use these functions to create a download button; when clicked, it will initiate a browser download. The filename and contents are specified by the corresponding shiny downloadHandler() defined in the server function.

    - 
    f7DownloadButton(outputId, label = "Download", class = NULL, ...)
    - -

    Arguments

    - - - - - - - - - - - - - - - - - - -
    outputId

    The name of the output slot that the downloadHandler is assigned to.

    label

    The label that should appear on the button.

    class

    Additional CSS classes to apply to the tag, if any.

    ...

    Other arguments to pass to the container tag function.

    - - -

    Examples

    - 
    if (interactive()) {
- library(shiny)
- library(shinyMobile)
- ui = f7Page(
-  f7SingleLayout(
-    navbar = f7Navbar(title = "File handling"),
-    f7DownloadButton("download","Download!")
-  )
- )
-
- server = function(input, output, session) {
-   # Our dataset
-   data <- mtcars
-
-   output$download = downloadHandler(
-     filename = function() {
-       paste("data-", Sys.Date(), ".csv", sep="")
-     },
-     content = function(file) {
-       write.csv(data, file)
-     }
-   )
- }
+    
    
+    
    Usage
    
+    
    f7DownloadButton(outputId, label = "Download", class = NULL, ...)
    
+    
    
 
- shinyApp(ui, server)
-}
-
    -
    - -
    +
    +

    Arguments

    +
    outputId
    +

    The name of the output slot that the downloadHandler is assigned to.

    + + +
    label
    +

    The label that should appear on the button.

    + + +
    class
    +

    Additional CSS classes to apply to the tag, if any.

    + + +
    ...
    +

    Other arguments to pass to the container tag function.

    + +
    + +
    +

    Examples

    + 
    if (interactive()) {
+ library(shiny)
+ library(shinyMobile)
+ ui = f7Page(
+  f7SingleLayout(
+    navbar = f7Navbar(title = "File handling"),
+    f7DownloadButton("download","Download!")
+  )
+ )
+
+ server = function(input, output, session) {
+   # Our dataset
+   data <- mtcars
+
+   output$download = downloadHandler(
+     filename = function() {
+       paste("data-", Sys.Date(), ".csv", sep="")
+     },
+     content = function(file) {
+       write.csv(data, file)
+     }
+   )
+ }
+
+ shinyApp(ui, server)
+}
+
    +
    +
    -
    -
    -

    Developed by David Granjon, Victor Perrier, Isabelle Rudolf.

    +
    +

    Developed by David Granjon, Victor Perrier, Isabelle Rudolf.

    -
    -

    Site built with pkgdown 1.6.1.

    +
    +

    Site built with pkgdown 2.0.7.

    -
    -
    +
    + - - - + diff --git a/docs/reference/f7FabClose.html b/docs/reference/f7FabClose.html index 47573def..8e1d045d 100644 --- a/docs/reference/f7FabClose.html +++ b/docs/reference/f7FabClose.html @@ -1,215 +1,105 @@ - - - - - - - -Framework7 FAB close — f7FabClose • shinyMobile - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - +Framework7 FAB close — f7FabClose • shinyMobile + Skip to contents + +
    -
    -
    -

    Framework7 FAB close

    - Source: R/f7Fab.R - +
    +

    Framework7 FAB close

    + Source: R/f7Fab.R +
    f7FabClose.Rd
    -
    -

    f7FabClose indicates that the current tag should close the f7Fabs.

    +
    +

    f7FabClose indicates that the current tag should close the f7Fabs.

    - 
    f7FabClose(tag)
    +
    +

    Usage

    + 
    f7FabClose(tag)
    +
    -

    Arguments

    - - - - - - -
    tag

    Target tag.

    +
    +

    Arguments

    +
    tag
    +

    Target tag.

    +
    -
    - -
    +
    -
    -
    -

    Developed by David Granjon, Victor Perrier, Isabelle Rudolf.

    +
    +

    Developed by David Granjon, Victor Perrier, Isabelle Rudolf.

    -
    -

    Site built with pkgdown 1.6.1.

    +
    +

    Site built with pkgdown 2.0.7.

    -
    -
    +
    + - - - + diff --git a/docs/reference/f7File.html b/docs/reference/f7File.html index 56036fd1..f2620cb9 100644 --- a/docs/reference/f7File.html +++ b/docs/reference/f7File.html @@ -1,270 +1,163 @@ - - - - - - - -File Upload Control — f7File • shinyMobile - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -File Upload Control — f7File • shinyMobile + + Skip to contents + +
    -
    -
    -

    File Upload Control

    - Source: R/f7-upload.R - +
    +

    File Upload Control

    + Source: R/f7-upload.R +
    f7File.Rd
    -
    +

    Create a file upload control that can be used to upload one or more files.

    - 
    f7File(
-  inputId,
-  label,
-  multiple = FALSE,
-  accept = NULL,
-  width = NULL,
-  buttonLabel = "Browse...",
-  placeholder = "No file selected"
-)
    +
    +

    Usage

    + 
    f7File(
+  inputId,
+  label,
+  multiple = FALSE,
+  accept = NULL,
+  width = NULL,
+  buttonLabel = "Browse...",
+  placeholder = "No file selected"
+)
    +
    -

    Arguments

    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    inputId

    The input slot that will be used to access the value.

    label

    Display label for the control, or NULL for no label.

    multiple

    Whether the user should be allowed to select and -upload multiple files at once. Does not work on older browsers, including Internet Explorer 9 and earlier.

    accept

    A character vector of MIME types; gives the browser a hint of what kind of files the server is expecting.

    width

    The width of the input, e.g. 400px, or 100%.

    buttonLabel

    The label used on the button. Can be text or an HTML tag object.

    placeholder

    The text to show before a file has been uploaded.

    +
    +

    Arguments

    +
    inputId
    +

    The input slot that will be used to access the value.

    -

    Examples

    - 
    if (interactive()) {
- library(shiny)
- library(shinyMobile)
+
    label
    
+
    Display label for the control, or NULL for no label.
    
 
- ui = f7Page(
-   f7SingleLayout(
-     navbar = f7Navbar(title = "File handling"),
-     f7File("up", "Upload!")
-   )
- )
 
- server = function(input, output) {
-   data <- reactive(input$up)
-   observe(print(data()))
- }
+
    multiple
    
+
    Whether the user should be allowed to select and
+upload multiple files at once. Does not work on older browsers, including Internet Explorer 9 and earlier.
    
 
- shinyApp(ui, server)
-}
-
    -
    - -
    +
    accept
    +

    A character vector of MIME types; gives the browser a hint of what kind of files the server is expecting.

    -
    -
    -

    Developed by David Granjon, Victor Perrier, Isabelle Rudolf.

    + +
    width
    +

    The width of the input, e.g. 400px, or 100%.

    + + +
    buttonLabel
    +

    The label used on the button. Can be text or an HTML tag object.

    + + +
    placeholder
    +

    The text to show before a file has been uploaded.

    + +
    + +
    +

    Examples

    + 
    if (interactive()) {
+ library(shiny)
+ library(shinyMobile)
+
+ ui = f7Page(
+   f7SingleLayout(
+     navbar = f7Navbar(title = "File handling"),
+     f7File("up", "Upload!")
+   )
+ )
+
+ server = function(input, output) {
+   data <- reactive(input$up)
+   observe(print(data()))
+ }
+
+ shinyApp(ui, server)
+}
+
    +
    +
    + + +
    +

    Developed by David Granjon, Victor Perrier, Isabelle Rudolf.

    -
    -

    Site built with pkgdown 1.6.1.

    +
    +

    Site built with pkgdown 2.0.7.

    -
    -
    +
    + - - - + diff --git a/docs/reference/f7Flex.html b/docs/reference/f7Flex.html index 6d41b8e4..0f5a7c05 100644 --- a/docs/reference/f7Flex.html +++ b/docs/reference/f7Flex.html @@ -1,240 +1,133 @@ - - - - - - - -Framework7 flex container — f7Flex • shinyMobile - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - +Framework7 flex container — f7Flex • shinyMobile + Skip to contents + +
    -
    -
    -

    Framework7 flex container

    - Source: R/f7Grid.R - +
    +

    Framework7 flex container

    + Source: R/f7Grid.R +
    f7Flex.Rd
    -
    +

    Build a Framework7 flex container

    - 
    f7Flex(...)
    - -

    Arguments

    - - - - - - -
    ...

    Items.

    - -

    Author

    - -

    David Granjon, dgranjon@ymail.com

    - -

    Examples

    - 
    if(interactive()){
- library(shiny)
- library(shinyMobile)
-
- shinyApp(
-   ui = f7Page(
-    title = "Align",
-    f7SingleLayout(
-     navbar = f7Navbar(title = "f7Flex"),
-     f7Flex(
-      f7Block(strong = TRUE),
-      f7Block(strong = TRUE),
-      f7Block(strong = TRUE)
-     )
-    )
-   ),
-   server = function(input, output) {}
- )
-}
-
-
    -
    - -
    +
    +

    Usage

    + 
    f7Flex(...)
    +
    + +
    +

    Arguments

    +
    ...
    +

    Items.

    +
    +
    +

    Author

    +

    David Granjon, dgranjon@ymail.com

    +
    -
    +
    + - - - + diff --git a/docs/reference/f7Float.html b/docs/reference/f7Float.html index ec0aac50..8c122a50 100644 --- a/docs/reference/f7Float.html +++ b/docs/reference/f7Float.html @@ -1,241 +1,134 @@ - - - - - - - -Framework7 float utility — f7Float • shinyMobile - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - +Framework7 float utility — f7Float • shinyMobile + Skip to contents + +
    -
    -
    -

    Framework7 float utility

    - Source: R/typography.R - +
    +

    Framework7 float utility

    + Source: R/typography.R +
    f7Float.Rd
    -
    +

    f7Float is an alignment utility for items.

    - 
    f7Float(tag, side = c("left", "right"))
    - -

    Arguments

    - - - - - - - - - - -
    tag

    Tag to float.

    side

    Side to float: "left" or "right".

    - -

    Author

    - -

    David Granjon, dgranjon@ymail.com

    - -

    Examples

    - 
    if(interactive()){
- library(shiny)
- library(shinyMobile)
-
- shinyApp(
-   ui = f7Page(
-    title = "Float",
-    f7SingleLayout(
-     navbar = f7Navbar(title = "f7Float"),
-     f7Float(h1("Left"), side = "left"),
-    f7Float(h1("Right"), side = "right")
-    )
-   ),
-   server = function(input, output) {}
- )
-}
-
-
    -
    - -
    +
    +

    Usage

    + 
    f7Float(tag, side = c("left", "right"))
    +
    + +
    +

    Arguments

    +
    tag
    +

    Tag to float.

    + + +
    side
    +

    Side to float: "left" or "right".

    +
    +
    +

    Author

    +

    David Granjon, dgranjon@ymail.com

    +
    + +
    +

    Examples

    + 
    if(interactive()){
+ library(shiny)
+ library(shinyMobile)
+
+ shinyApp(
+   ui = f7Page(
+    title = "Float",
+    f7SingleLayout(
+     navbar = f7Navbar(title = "f7Float"),
+     f7Float(h1("Left"), side = "left"),
+    f7Float(h1("Right"), side = "right")
+    )
+   ),
+   server = function(input, output) {}
+ )
+}
+
+
    +
    +
    -
    -
    -

    Developed by David Granjon, Victor Perrier, Isabelle Rudolf.

    + +
    +

    Developed by David Granjon, Victor Perrier, Isabelle Rudolf.

    -
    -

    Site built with pkgdown 1.6.1.

    +
    +

    Site built with pkgdown 2.0.7.

    -
    -
    +
    + - - - + diff --git a/docs/reference/f7Found.html b/docs/reference/f7Found.html index d0f31518..7c3244f0 100644 --- a/docs/reference/f7Found.html +++ b/docs/reference/f7Found.html @@ -1,216 +1,106 @@ - - - - - - - -Utility to display an item when the search is successful. — f7Found • shinyMobile - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - +Utility to display an item when the search is successful. — f7Found • shinyMobile + Skip to contents + +
    -
    -
    -

    Utility to display an item when the search is successful.

    - Source: R/f7Searchbar.R - +
    +

    Utility to display an item when the search is successful.

    + Source: R/f7Searchbar.R +
    f7Found.Rd
    -
    -

    Use with f7Searchbar.

    +
    +

    Use with f7Searchbar.

    - 
    f7Found(tag)
    +
    +

    Usage

    + 
    f7Found(tag)
    +
    -

    Arguments

    - - - - - - -
    tag

    tag to display. When using f7Searchbar, one must -wrap the items to search in inside f7Found.

    +
    +

    Arguments

    +
    tag
    +

    tag to display. When using f7Searchbar, one must +wrap the items to search in inside f7Found.

    +
    -
    - -
    +
    -
    -
    -

    Developed by David Granjon, Victor Perrier, Isabelle Rudolf.

    +
    +

    Developed by David Granjon, Victor Perrier, Isabelle Rudolf.

    -
    -

    Site built with pkgdown 1.6.1.

    +
    +

    Site built with pkgdown 2.0.7.

    -
    -
    +
    + - - - + diff --git a/docs/reference/f7Gallery.html b/docs/reference/f7Gallery.html index ec930f6e..03cd7999 100644 --- a/docs/reference/f7Gallery.html +++ b/docs/reference/f7Gallery.html @@ -1,214 +1,108 @@ - - - - - - - -Launch the shinyMobile Gallery — f7Gallery • shinyMobile - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - +Launch the shinyMobile Gallery — f7Gallery • shinyMobile + Skip to contents + +
    -
    -
    -

    Launch the shinyMobile Gallery

    - Source: R/f7Gallery.R - +
    +

    Launch the shinyMobile Gallery

    + Source: R/f7Gallery.R +
    f7Gallery.Rd
    -
    +

    A gallery of all components available in shinyMobile.

    - 
    f7Gallery()
    - - - -

    Examples

    - 
    if (interactive()) {
+    
    
+    
    Usage
    
+    
    f7Gallery()
    
+    
    
 
- f7Gallery()
 
-}
-
    -
    - -
    +
    +

    Examples

    + 
    if (interactive()) {
+
+ f7Gallery()
+
+}
+
    +
    +
    -
    -
    -

    Developed by David Granjon, Victor Perrier, Isabelle Rudolf.

    +
    +

    Developed by David Granjon, Victor Perrier, Isabelle Rudolf.

    -
    -

    Site built with pkgdown 1.6.1.

    +
    +

    Site built with pkgdown 2.0.7.

    -
    -
    +
    + - - - + diff --git a/docs/reference/f7HideOnEnable.html b/docs/reference/f7HideOnEnable.html index ebcfd2aa..8dc2fd39 100644 --- a/docs/reference/f7HideOnEnable.html +++ b/docs/reference/f7HideOnEnable.html @@ -1,215 +1,105 @@ - - - - - - - -Utility to hide a given tag when f7Searchbar is enabled. — f7HideOnEnable • shinyMobile - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - +Utility to hide a given tag when f7Searchbar is enabled. — f7HideOnEnable • shinyMobile + Skip to contents + +
    -
    -
    -

    Utility to hide a given tag when f7Searchbar is enabled.

    - Source: R/f7Searchbar.R - +
    +

    Utility to hide a given tag when f7Searchbar is enabled.

    + Source: R/f7Searchbar.R +
    f7HideOnEnable.Rd
    -
    -

    Use with f7Searchbar.

    +
    +

    Use with f7Searchbar.

    - 
    f7HideOnEnable(tag)
    +
    +

    Usage

    + 
    f7HideOnEnable(tag)
    +
    -

    Arguments

    - - - - - - -
    tag

    tag to hide.

    +
    +

    Arguments

    +
    tag
    +

    tag to hide.

    +
    -
    - -
    +
    -
    -
    -

    Developed by David Granjon, Victor Perrier, Isabelle Rudolf.

    +
    +

    Developed by David Granjon, Victor Perrier, Isabelle Rudolf.

    -
    -

    Site built with pkgdown 1.6.1.

    +
    +

    Site built with pkgdown 2.0.7.

    -
    -
    +
    + - - - + diff --git a/docs/reference/f7HideOnSearch.html b/docs/reference/f7HideOnSearch.html index 692fe8e5..11fa9dda 100644 --- a/docs/reference/f7HideOnSearch.html +++ b/docs/reference/f7HideOnSearch.html @@ -1,215 +1,105 @@ - - - - - - - -Utility to hide a given tag on search — f7HideOnSearch • shinyMobile - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - +Utility to hide a given tag on search — f7HideOnSearch • shinyMobile + Skip to contents + +
    -
    -
    -

    Utility to hide a given tag on search

    - Source: R/f7Searchbar.R - +
    +

    Utility to hide a given tag on search

    + Source: R/f7Searchbar.R +
    f7HideOnSearch.Rd
    -
    -

    Use with f7Searchbar.

    +
    +

    Use with f7Searchbar.

    - 
    f7HideOnSearch(tag)
    +
    +

    Usage

    + 
    f7HideOnSearch(tag)
    +
    -

    Arguments

    - - - - - - -
    tag

    tag to hide.

    +
    +

    Arguments

    +
    tag
    +

    tag to hide.

    +
    -
    - -
    +
    -
    -
    -

    Developed by David Granjon, Victor Perrier, Isabelle Rudolf.

    +
    +

    Developed by David Granjon, Victor Perrier, Isabelle Rudolf.

    -
    -

    Site built with pkgdown 1.6.1.

    +
    +

    Site built with pkgdown 2.0.7.

    -
    -
    +
    + - - - + diff --git a/docs/reference/f7Icon.html b/docs/reference/f7Icon.html index 6a2fd502..15116cb9 100644 --- a/docs/reference/f7Icon.html +++ b/docs/reference/f7Icon.html @@ -1,275 +1,169 @@ - - - - - - - -Framework7 icons — f7Icon • shinyMobile - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -Framework7 icons — f7Icon • shinyMobile - + + Skip to contents + +
    -
    -
    -

    Framework7 icons

    - Source: R/f7Icon.R - +
    +

    Framework7 icons

    + Source: R/f7Icon.R +
    f7Icon.Rd
    -
    +

    Use Framework7 icons in shiny applications, - see complete list of icons here : https://framework7.io/icons/.

    + see complete list of icons here : https://framework7.io/icons/.

    +
    + +
    +

    Usage

    + 
    f7Icon(..., lib = NULL, color = NULL, style = NULL, old = NULL)
    - 
    f7Icon(..., lib = NULL, color = NULL, style = NULL, old = NULL)
    +
    +

    Arguments

    +
    ...
    +

    Icon name and f7Badge.

    -

    Arguments

    - - - - - - - - - - - - - - - - - - - - - - -
    ...

    Icon name and f7Badge.

    lib

    Library to use: NULL, "ios" or "md". Leave NULL by default. Specify, md or ios -if you want to hide/show icons on specific devices.

    color

    Icon color, if any.

    style

    CSS styles to be applied on icon, for example -use font-size: 56px; to have a bigger icon.

    old

    Deprecated. This was to handle old and new icons but shinyMobile only uses -new icons from now. This parameter will be removed in a future release.

    -

    Author

    +
    lib
    +

    Library to use: NULL, "ios" or "md". Leave NULL by default. Specify, md or ios +if you want to hide/show icons on specific devices.

    -

    David Granjon, dgranjon@ymail.com

    -

    Examples

    - 
    if(interactive()){
- library(shiny)
- library(shinyMobile)
+
    color
    
+
    Icon color, if any.
    
 
- shinyApp(
-  ui = f7Page(
-    title = "Icons",
-    f7SingleLayout(
-     navbar = f7Navbar(title = "icons"),
-     f7List(
-      f7ListItem(
-        title = tagList(
-         f7Icon("envelope")
-        )
-      ),
-      f7ListItem(
-        title = tagList(
-         f7Icon("envelope_fill", color = "green")
-        )
-      ),
-      f7ListItem(
-        title = f7Icon("home", f7Badge("1", color = "red"))
-      ),
-      f7ListItem(
-        title = f7Icon("envelope", lib = "md"),
-        "This will not appear since only for material design"
-      )
-     )
-    )
-  ),
-  server = function(input, output) {}
- )
-}
 
-
    -
    - -
    +
    style
    +

    CSS styles to be applied on icon, for example +use font-size: 56px; to have a bigger icon.

    + + +
    old
    +

    Deprecated. This was to handle old and new icons but shinyMobile only uses +new icons from now. This parameter will be removed in a future release.

    +
    +
    +

    Author

    +

    David Granjon, dgranjon@ymail.com

    +
    + +
    +

    Examples

    + 
    if(interactive()){
+ library(shiny)
+ library(shinyMobile)
+
+ shinyApp(
+  ui = f7Page(
+    title = "Icons",
+    f7SingleLayout(
+     navbar = f7Navbar(title = "icons"),
+     f7List(
+      f7ListItem(
+        title = tagList(
+         f7Icon("envelope")
+        )
+      ),
+      f7ListItem(
+        title = tagList(
+         f7Icon("envelope_fill", color = "green")
+        )
+      ),
+      f7ListItem(
+        title = f7Icon("home", f7Badge("1", color = "red"))
+      ),
+      f7ListItem(
+        title = f7Icon("envelope", lib = "md"),
+        "This will not appear since only for material design"
+      )
+     )
+    )
+  ),
+  server = function(input, output) {}
+ )
+}
+
+
    +
    +
    -
    -
    -

    Developed by David Granjon, Victor Perrier, Isabelle Rudolf.

    + +
    +

    Developed by David Granjon, Victor Perrier, Isabelle Rudolf.

    -
    -

    Site built with pkgdown 1.6.1.

    +
    +

    Site built with pkgdown 2.0.7.

    -
    -
    +
    + - - - + diff --git a/docs/reference/f7Item.html b/docs/reference/f7Item.html index 3ea9a6f4..8e16440a 100644 --- a/docs/reference/f7Item.html +++ b/docs/reference/f7Item.html @@ -1,222 +1,113 @@ - - - - - - - -Framework7 body item — f7Item • shinyMobile - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - +Framework7 body item — f7Item • shinyMobile + Skip to contents + +
    -
    -
    -

    Framework7 body item

    - Source: R/f7Page.R - +
    +

    Framework7 body item

    + Source: R/f7Page.R +
    f7Item.Rd
    -
    -

    Similar to f7Tab but for the f7SplitLayout.

    +
    +

    Similar to f7Tab but for the f7SplitLayout.

    - 
    f7Item(..., tabName)
    +
    +

    Usage

    + 
    f7Item(..., tabName)
    +
    -

    Arguments

    - - - - - - - - - - -
    ...

    Item content.

    tabName

    Item id. Must be unique.

    +
    +

    Arguments

    +
    ...
    +

    Item content.

    -

    Author

    -

    David Granjon, dgranjon@ymail.com

    +
    tabName
    +

    Item id. Must be unique, without space nor punctuation symbols.

    -
    - -
    +
    +
    +

    Author

    +

    David Granjon, dgranjon@ymail.com

    +
    + +
    -
    -
    -

    Developed by David Granjon, Victor Perrier, Isabelle Rudolf.

    +
    +

    Developed by David Granjon, Victor Perrier, Isabelle Rudolf.

    -
    -

    Site built with pkgdown 1.6.1.

    +
    +

    Site built with pkgdown 2.0.7.

    -
    -
    +
    + - - - + diff --git a/docs/reference/f7Items.html b/docs/reference/f7Items.html index dd48717f..fb991ef2 100644 --- a/docs/reference/f7Items.html +++ b/docs/reference/f7Items.html @@ -1,218 +1,109 @@ - - - - - - - -Framework7 item container — f7Items • shinyMobile - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - +Framework7 item container — f7Items • shinyMobile + Skip to contents + +
    -
    -
    -

    Framework7 item container

    - Source: R/f7Page.R - +
    +

    Framework7 item container

    + Source: R/f7Page.R +
    f7Items.Rd
    -
    -

    Build a Framework7 wrapper for f7Item

    +
    +

    Build a Framework7 wrapper for f7Item

    - 
    f7Items(...)
    - -

    Arguments

    - - - - - - -
    ...

    Slot for wrapper for f7Item.

    +
    +

    Usage

    + 
    f7Items(...)
    +
    -

    Author

    +
    +

    Arguments

    +
    ...
    +

    Slot for wrapper for f7Item.

    -

    David Granjon, dgranjon@ymail.com

    +
    +
    +

    Author

    +

    David Granjon, dgranjon@ymail.com

    +
    -
    - -
    +
    -
    -
    -

    Developed by David Granjon, Victor Perrier, Isabelle Rudolf.

    +
    +

    Developed by David Granjon, Victor Perrier, Isabelle Rudolf.

    -
    -

    Site built with pkgdown 1.6.1.

    +
    +

    Site built with pkgdown 2.0.7.

    -
    -
    +
    + - - - + diff --git a/docs/reference/f7Link.html b/docs/reference/f7Link.html index ddfc2bc6..3620f1be 100644 --- a/docs/reference/f7Link.html +++ b/docs/reference/f7Link.html @@ -1,245 +1,138 @@ - - - - - - - -Framework7 link — f7Link • shinyMobile - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - +Framework7 link — f7Link • shinyMobile + Skip to contents + +
    -
    -
    -

    Framework7 link

    - Source: R/f7Link.R - +
    +

    Framework7 link

    + Source: R/f7Link.R +
    f7Link.Rd
    -
    +

    Link to point toward external content.

    - 
    f7Link(label = NULL, href, icon = NULL)
    - -

    Arguments

    - - - - - - - - - - - - - - -
    label

    Optional link text.

    href

    Link source, url.

    icon

    Link icon, if any. Must pass f7Icon.

    - -

    Author

    - -

    David Granjon, dgranjon@ymail.com

    - -

    Examples

    - 
    if(interactive()){
- library(shiny)
- library(shinyMobile)
-
- shinyApp(
-   ui = f7Page(
-    title = "Links",
-    f7SingleLayout(
-     navbar = f7Navbar(title = "f7Link"),
-     f7Link(label = "Google", href = "https://www.google.com"),
-     f7Link(href = "https://www.twitter.com", icon = f7Icon("bolt_fill"))
-    )
-   ),
-   server = function(input, output) {}
- )
-}
-
-
    -
    - -
    +
    +

    Usage

    + 
    f7Link(label = NULL, href, icon = NULL)
    +
    + +
    +

    Arguments

    +
    label
    +

    Optional link text.

    + + +
    href
    +

    Link source, url.

    + + +
    icon
    +

    Link icon, if any. Must pass f7Icon.

    +
    +
    +

    Author

    +

    David Granjon, dgranjon@ymail.com

    +
    + +
    +

    Examples

    + 
    if(interactive()){
+ library(shiny)
+ library(shinyMobile)
+
+ shinyApp(
+   ui = f7Page(
+    title = "Links",
+    f7SingleLayout(
+     navbar = f7Navbar(title = "f7Link"),
+     f7Link(label = "Google", href = "https://www.google.com"),
+     f7Link(href = "https://www.twitter.com", icon = f7Icon("bolt_fill"))
+    )
+   ),
+   server = function(input, output) {}
+ )
+}
+
+
    +
    +
    -
    -
    -

    Developed by David Granjon, Victor Perrier, Isabelle Rudolf.

    + +
    +

    Developed by David Granjon, Victor Perrier, Isabelle Rudolf.

    -
    -

    Site built with pkgdown 1.6.1.

    +
    +

    Site built with pkgdown 2.0.7.

    -
    -
    +
    + - - - + diff --git a/docs/reference/f7List.html b/docs/reference/f7List.html index 0f142170..1e82f8ba 100644 --- a/docs/reference/f7List.html +++ b/docs/reference/f7List.html @@ -1,298 +1,190 @@ - - - - - - - -Create a framework 7 contact list — f7List • shinyMobile - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -Create a framework 7 contact list — f7List • shinyMobile - + + Skip to contents + +
    -
    -
    -

    Create a framework 7 contact list

    - Source: R/f7List.R - +
    +

    Create a framework 7 contact list

    + Source: R/f7List.R +
    f7List.Rd
    -
    +

    Create a framework 7 contact list

    - 
    f7List(..., mode = NULL, inset = FALSE)
    - -

    Arguments

    - - - - - - - - - - - - - - -
    ...

    Slot for f7ListGroup or f7ListItem.

    mode

    List mode. NULL or "media" or "contacts".

    inset

    Whether to display a card border. FALSE by default.

    - - -

    Examples

    - 
    if (interactive()) {
-library(shiny)
-library(shinyMobile)
-
-shinyApp(
-  ui = f7Page(
-    title = "My app",
-    f7SingleLayout(
-      navbar = f7Navbar(title = "f7List"),
-
-      # simple list
-      f7List(
-        lapply(1:3, function(j) f7ListItem(letters[j]))
-      ),
-
-      # list with complex items
-      f7List(
-        lapply(1:3, function(j) {
-          f7ListItem(
-            letters[j],
-            media = f7Icon("alarm_fill"),
-            right = "Right Text",
-            header = "Header",
-            footer = "Footer"
-          )
-        })
-      ),
-
-      # list with complex items
-      f7List(
-        mode = "media",
-        lapply(1:3, function(j) {
-          f7ListItem(
-            title = letters[j],
-            subtitle = "subtitle",
-            "Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-            Nulla sagittis tellus ut turpis condimentum, ut dignissim
-            lacus tincidunt. Cras dolor metus, ultrices condimentum sodales
-            sit amet, pharetra sodales eros. Phasellus vel felis tellus.
-            Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet,
-            commodo augue id, pulvinar lacus.",
-            media = tags$img(
-             src = paste0(
-             "https://cdn.framework7.io/placeholder/people-160x160-", j, ".jpg"
-             )
-            ),
-            right = "Right Text"
-          )
-        })
-      ),
-
-      # list with links
-      f7List(
-        lapply(1:3, function(j) {
-          f7ListItem(url = "https://google.com", letters[j])
-        })
-      ),
+    
    
+    
    Usage
    
+    
    f7List(..., mode = NULL, inset = FALSE)
    
+    
    
 
-      # grouped lists
-      f7List(
-        mode = "contacts",
-        lapply(1:3, function(i) {
-          f7ListGroup(
-            title = LETTERS[i],
-            lapply(1:3, function(j) f7ListItem(letters[j]))
-          )
-        })
-      )
-    )
-  ),
-  server = function(input, output) {}
- )
-}
-
    -
    - -
    +
    +

    Arguments

    +
    ...
    +

    Slot for f7ListGroup or f7ListItem.

    + + +
    mode
    +

    List mode. NULL or "media" or "contacts".

    + + +
    inset
    +

    Whether to display a card border. FALSE by default.

    + +
    + +
    +

    Examples

    + 
    if (interactive()) {
+library(shiny)
+library(shinyMobile)
+
+shinyApp(
+  ui = f7Page(
+    title = "My app",
+    f7SingleLayout(
+      navbar = f7Navbar(title = "f7List"),
+
+      # simple list
+      f7List(
+        lapply(1:3, function(j) f7ListItem(letters[j]))
+      ),
+
+      # list with complex items
+      f7List(
+        lapply(1:3, function(j) {
+          f7ListItem(
+            letters[j],
+            media = f7Icon("alarm_fill"),
+            right = "Right Text",
+            header = "Header",
+            footer = "Footer"
+          )
+        })
+      ),
+
+      # list with complex items
+      f7List(
+        mode = "media",
+        lapply(1:3, function(j) {
+          f7ListItem(
+            title = letters[j],
+            subtitle = "subtitle",
+            "Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+            Nulla sagittis tellus ut turpis condimentum, ut dignissim
+            lacus tincidunt. Cras dolor metus, ultrices condimentum sodales
+            sit amet, pharetra sodales eros. Phasellus vel felis tellus.
+            Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet,
+            commodo augue id, pulvinar lacus.",
+            media = tags$img(
+             src = paste0(
+             "https://cdn.framework7.io/placeholder/people-160x160-", j, ".jpg"
+             )
+            ),
+            right = "Right Text"
+          )
+        })
+      ),
+
+      # list with links
+      f7List(
+        lapply(1:3, function(j) {
+          f7ListItem(url = "https://google.com", letters[j])
+        })
+      ),
+
+      # grouped lists
+      f7List(
+        mode = "contacts",
+        lapply(1:3, function(i) {
+          f7ListGroup(
+            title = LETTERS[i],
+            lapply(1:3, function(j) f7ListItem(letters[j]))
+          )
+        })
+      )
+    )
+  ),
+  server = function(input, output) {}
+ )
+}
+
    +
    +
    -
    -
    -

    Developed by David Granjon, Victor Perrier, Isabelle Rudolf.

    +
    +

    Developed by David Granjon, Victor Perrier, Isabelle Rudolf.

    -
    -

    Site built with pkgdown 1.6.1.

    +
    +

    Site built with pkgdown 2.0.7.

    -
    -
    +
    + - - - + diff --git a/docs/reference/f7ListGroup.html b/docs/reference/f7ListGroup.html index 2a83eb45..0dd35ae1 100644 --- a/docs/reference/f7ListGroup.html +++ b/docs/reference/f7ListGroup.html @@ -1,219 +1,109 @@ - - - - - - - -Create a framework 7 group of contacts — f7ListGroup • shinyMobile - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - +Create a framework 7 group of contacts — f7ListGroup • shinyMobile + Skip to contents + +
    -
    -
    -

    Create a framework 7 group of contacts

    - Source: R/f7List.R - +
    +

    Create a framework 7 group of contacts

    + Source: R/f7List.R +
    f7ListGroup.Rd
    -
    +

    Create a framework 7 group of contacts

    - 
    f7ListGroup(..., title)
    +
    +

    Usage

    + 
    f7ListGroup(..., title)
    +
    -

    Arguments

    - - - - - - - - - - -
    ...

    slot for f7ListIndexItem.

    title

    Group title.

    +
    +

    Arguments

    +
    ...
    +

    slot for f7ListItem.

    -
    - -
    +
    title
    +

    Group title.

    + +
    + +
    -
    -
    -

    Developed by David Granjon, Victor Perrier, Isabelle Rudolf.

    +
    +

    Developed by David Granjon, Victor Perrier, Isabelle Rudolf.

    -
    -

    Site built with pkgdown 1.6.1.

    +
    +

    Site built with pkgdown 2.0.7.

    -
    -
    +
    + - - - + diff --git a/docs/reference/f7ListIndex.html b/docs/reference/f7ListIndex.html index 54e96592..f60e4e1d 100644 --- a/docs/reference/f7ListIndex.html +++ b/docs/reference/f7ListIndex.html @@ -1,272 +1,173 @@ - - - - - - - -Create a Framework 7 list index — f7ListIndex • shinyMobile - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -Create a Framework 7 list index — f7ListIndex • shinyMobile - + + Skip to contents + +
    -
    -
    -

    Create a Framework 7 list index

    - Source: R/f7List.R - +
    +

    Create a Framework 7 list index

    + Source: R/f7List.R +
    f7ListIndex.Rd
    +
    + +
    +

    List index must be attached to an existing list view.

    -
    -

    Create a Framework 7 list index

    +
    +

    Usage

    + 
    f7ListIndex(id, target, ..., session = shiny::getDefaultReactiveDomain())
    - 
    f7ListIndex(..., id)
    +
    +

    Arguments

    +
    id
    +

    Unique id.

    + + +
    target
    +

    Related list element. CSS selector like .class, #id, ...

    -

    Arguments

    - - - - - - - - - - -
    ...

    Slot for f7ListGroup.

    id

    Unique id.

    -

    Note

    +
    ...
    +

    Other options (see https://v5.framework7.io/docs/list-index#list-index-parameters).

    + +
    session
    +

    Shiny session object.

    + +
    +
    +

    Note

    For some reason, unable to get more than 1 list index working. See example below. The second list does not work.

    +
    -

    Examples

    - 
    if (interactive()) {
- library(shiny)
- library(shinyMobile)
- shinyApp(
-   ui = f7Page(
-     title = "List Index",
-     f7TabLayout(
-       navbar = f7Navbar(
-         title = "f7ListIndex",
-         hairline = FALSE,
-         shadow = TRUE
-       ),
-       f7Tabs(
-         f7Tab(
-           tabName = "List 1",
-           f7ListIndex(
-             id = "listIndex1",
-             lapply(seq_along(LETTERS), function(i) {
-               f7ListGroup(
-                 title = LETTERS[i],
-                 lapply(1:3, function(j) {
-                   f7ListIndexItem(letters[j])
-                 })
-               )
-             })
-           )
-         ),
-         f7Tab(
-           tabName = "List 2",
-           f7ListIndex(
-             id = "listIndex2",
-             lapply(seq_along(LETTERS), function(i) {
-               f7ListGroup(
-                 title = LETTERS[i],
-                 lapply(1:3, function(j) {
-                   f7ListIndexItem(letters[j])
-                 })
-               )
-             })
-           )
-         )
-       )
-     )
-   ),
-   server = function(input, output) {}
- )
-}
-
    -
    - -
    +
    +

    Examples

    + 
    if (interactive()) {
+ library(shiny)
+ library(shinyMobile)
+ shinyApp(
+   ui = f7Page(
+     title = "List Index",
+     f7TabLayout(
+       navbar = f7Navbar(
+         title = "f7ListIndex",
+         hairline = FALSE,
+         shadow = TRUE
+       ),
+       f7Tabs(
+         f7Tab(
+           tabName = "List1",
+           f7List(
+            mode = "contacts",
+            lapply(1:26, function(i) {
+              f7ListGroup(
+                title = LETTERS[i],
+                lapply(1:26, function(j) f7ListItem(letters[j]))
+              )
+            })
+           )
+         ),
+         f7Tab(
+           tabName = "List2",
+           f7List(
+            mode = "contacts",
+            lapply(1:26, function(i) {
+              f7ListGroup(
+                title = LETTERS[i],
+                lapply(1:26, function(j) f7ListItem(letters[j]))
+              )
+            })
+           )
+         )
+       )
+     )
+   ),
+   server = function(input, output, session) {
+    observeEvent(TRUE, {
+     f7ListIndex(id = "list-index-1", target = ".list")
+    }, once = TRUE)
+   }
+ )
+}
+
    +
    +
    -
    -
    -

    Developed by David Granjon, Victor Perrier, Isabelle Rudolf.

    +
    +

    Developed by David Granjon, Victor Perrier, Isabelle Rudolf.

    -
    -

    Site built with pkgdown 1.6.1.

    +
    +

    Site built with pkgdown 2.0.7.

    -
    -
    +
    + - - - + diff --git a/docs/reference/f7ListItem.html b/docs/reference/f7ListItem.html index 867bc3ef..c92765f1 100644 --- a/docs/reference/f7ListItem.html +++ b/docs/reference/f7ListItem.html @@ -1,252 +1,142 @@ - - - - - - - -Create a Framework 7 contact item — f7ListItem • shinyMobile - - - - - - - - +Create a Framework 7 contact item — f7ListItem • shinyMobile + Skip to contents + - - - - +
    +
    +
    +

    Create a Framework 7 contact item

    + Source: R/f7List.R +
    f7ListItem.Rd
    +
    - - - +
    +

    Create a Framework 7 contact item

    +
    - - - +
    +

    Usage

    + 
    f7ListItem(
+  ...,
+  title = NULL,
+  subtitle = NULL,
+  header = NULL,
+  footer = NULL,
+  href = NULL,
+  media = NULL,
+  right = NULL
+)
    +
    +
    +

    Arguments

    +
    ...
    +

    Item text.

    - - +
    title
    +

    Item title.

    - - - +
    subtitle
    +

    Item subtitle.

    +
    header
    +

    Item header. Do not use when f7List mode is not NULL.

    - - - - - - - - - - -
    -
    - - +
    href
    +

    Item external link.

    -
    -
    -
    -
    -

    Create a Framework 7 contact item

    - Source: R/f7List.R - -
    +
    media
    +

    Expect f7Icon or img.

    -
    -

    Create a Framework 7 contact item

    -
    - 
    f7ListItem(
-  ...,
-  title = NULL,
-  subtitle = NULL,
-  header = NULL,
-  footer = NULL,
-  href = NULL,
-  media = NULL,
-  right = NULL
-)
    - -

    Arguments

    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    ...

    Item text.

    title

    Item title.

    subtitle

    Item subtitle.

    header

    Item header. Do not use when f7List mode is not NULL.

    footer

    Item footer. Do not use when f7List mode is not NULL.

    href

    Item external link.

    media

    Expect f7Icon or img.

    right

    Right content if any.

    +
    right
    +

    Right content if any.

    +
    -
    - -
    +
    -
    -
    -

    Developed by David Granjon, Victor Perrier, Isabelle Rudolf.

    +
    +

    Developed by David Granjon, Victor Perrier, Isabelle Rudolf.

    -
    -

    Site built with pkgdown 1.6.1.

    +
    +

    Site built with pkgdown 2.0.7.

    -
    -
    +
    + - - - + diff --git a/docs/reference/f7Margin.html b/docs/reference/f7Margin.html index 03887224..eecd1f69 100644 --- a/docs/reference/f7Margin.html +++ b/docs/reference/f7Margin.html @@ -1,254 +1,147 @@ - - - - - - - -Framework7 margin utility — f7Margin • shinyMobile - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - +Framework7 margin utility — f7Margin • shinyMobile + Skip to contents + +
    -
    -
    -

    Framework7 margin utility

    - Source: R/typography.R - +
    +

    Framework7 margin utility

    + Source: R/typography.R +
    f7Margin.Rd
    -
    +

    f7Margin adds a margin to the given tag.

    - 
    f7Margin(tag, side = NULL)
    - -

    Arguments

    - - - - - - - - - - -
    tag

    Tag to apply the margin.

    side

    margin side: "left", "right", "top", "bottom", +

    +

    Usage

    + 
    f7Margin(tag, side = NULL)
    +
    + +
    +

    Arguments

    +
    tag
    +

    Tag to apply the margin.

    + + +
    side
    +

    margin side: "left", "right", "top", "bottom", "vertical" (top and bottom), "horizontal" (left and right). -Leave NULL to apply on all sides.

    - -

    Author

    - -

    David Granjon, dgranjon@ymail.com

    - -

    Examples

    - 
    if(interactive()){
- library(shiny)
- library(shinyMobile)
-
- cardTag <- f7Card(
-  title = "Card header",
-  "This is a simple card with plain text,
-  but cards can also contain their own header,
-  footer, list view, image, or any other element.",
-  footer = tagList(
-    f7Button(color = "blue", label = "My button", href = "https://www.google.com"),
-    f7Badge("Badge", color = "green")
-  )
- )
-
- shinyApp(
-   ui = f7Page(
-    title = "Margins",
-    f7SingleLayout(
-     navbar = f7Navbar(title = "f7Margin"),
-     f7Margin(cardTag),
-     cardTag
-    )
-   ),
-   server = function(input, output) {}
- )
-}
-
-
    -
    - -
    +Leave NULL to apply on all sides.

    +
    +
    +

    Author

    +

    David Granjon, dgranjon@ymail.com

    +
    + +
    +

    Examples

    + 
    if(interactive()){
+ library(shiny)
+ library(shinyMobile)
+
+ cardTag <- f7Card(
+  title = "Card header",
+  "This is a simple card with plain text,
+  but cards can also contain their own header,
+  footer, list view, image, or any other element.",
+  footer = tagList(
+    f7Button(color = "blue", label = "My button", href = "https://www.google.com"),
+    f7Badge("Badge", color = "green")
+  )
+ )
+
+ shinyApp(
+   ui = f7Page(
+    title = "Margins",
+    f7SingleLayout(
+     navbar = f7Navbar(title = "f7Margin"),
+     f7Margin(cardTag),
+     cardTag
+    )
+   ),
+   server = function(input, output) {}
+ )
+}
+
+
    +
    +
    -
    -
    -

    Developed by David Granjon, Victor Perrier, Isabelle Rudolf.

    + +
    +

    Developed by David Granjon, Victor Perrier, Isabelle Rudolf.

    -
    -

    Site built with pkgdown 1.6.1.

    +
    +

    Site built with pkgdown 2.0.7.

    -
    -
    +
    + - - - + diff --git a/docs/reference/f7NotFound.html b/docs/reference/f7NotFound.html index e4f11650..2c41a214 100644 --- a/docs/reference/f7NotFound.html +++ b/docs/reference/f7NotFound.html @@ -1,215 +1,105 @@ - - - - - - - -Utility to display an item when the search is unsuccessful. — f7NotFound • shinyMobile - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - +Utility to display an item when the search is unsuccessful. — f7NotFound • shinyMobile + Skip to contents + +
    -
    -
    -

    Utility to display an item when the search is unsuccessful.

    - Source: R/f7Searchbar.R - +
    +

    Utility to display an item when the search is unsuccessful.

    + Source: R/f7Searchbar.R +
    f7NotFound.Rd
    -
    -

    Use with f7Searchbar.

    +
    +

    Use with f7Searchbar.

    - 
    f7NotFound(tag)
    +
    +

    Usage

    + 
    f7NotFound(tag)
    +
    -

    Arguments

    - - - - - - -
    tag

    tag to use.

    +
    +

    Arguments

    +
    tag
    +

    tag to use.

    +
    -
    - -
    +
    -
    -
    -

    Developed by David Granjon, Victor Perrier, Isabelle Rudolf.

    +
    +

    Developed by David Granjon, Victor Perrier, Isabelle Rudolf.

    -
    -

    Site built with pkgdown 1.6.1.

    +
    +

    Site built with pkgdown 2.0.7.

    -
    -
    +
    + - - - + diff --git a/docs/reference/f7Notif.html b/docs/reference/f7Notif.html index 10b9bcdf..6e78c516 100644 --- a/docs/reference/f7Notif.html +++ b/docs/reference/f7Notif.html @@ -1,294 +1,186 @@ - - - - - - +Framework7 notification — f7Notif • shinyMobile + Skip to contents + -Framework7 notification — f7Notif • shinyMobile +
    +
    +
    +

    Framework7 notification

    + Source: R/f7Notif.R +
    f7Notif.Rd
    +
    - - - +
    +

    Notification with title, text, icon and more.

    +
    - - +
    +

    Usage

    + 
    f7Notif(
+  text,
+  icon = NULL,
+  title = NULL,
+  titleRightText = NULL,
+  subtitle = NULL,
+  closeTimeout = 5000,
+  closeButton = FALSE,
+  closeOnClick = TRUE,
+  swipeToClose = TRUE,
+  ...,
+  session = shiny::getDefaultReactiveDomain()
+)
    +
    - - - +
    +

    Arguments

    +
    text
    +

    Notification content.

    - - - +
    icon
    +

    Notification icon.

    - - +
    title
    +

    Notification title.

    - - - +
    titleRightText
    +

    Notification right text.

    +
    subtitle
    +

    Notification subtitle

    - - - - - - - - - - -
    -
    - - +
    closeButton
    +

    Whether to display a close button. +FALSE by default.

    -
    -
    -
    -
    -

    Framework7 notification

    - Source: R/f7Notif.R - -
    +
    closeOnClick
    +

    Whether to close the notification on click. TRUE by default.

    -
    -

    Notification with title, text, icon and more.

    -
    - 
    f7Notif(
-  text,
-  icon = NULL,
-  title = NULL,
-  titleRightText = NULL,
-  subtitle = NULL,
-  closeTimeout = 5000,
-  closeButton = FALSE,
-  closeOnClick = TRUE,
-  swipeToClose = TRUE,
-  ...,
-  session = shiny::getDefaultReactiveDomain()
-)
    - -

    Arguments

    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    text

    Notification content.

    icon

    Notification icon.

    title

    Notification title.

    titleRightText

    Notification right text.

    subtitle

    Notification subtitle

    closeTimeout

    Time before notification closes.

    closeButton

    Whether to display a close button. -FALSE by default.

    closeOnClick

    Whether to close the notification on click. TRUE by default.

    swipeToClose

    If enabled, notification can be closed by swipe gesture.

    ...

    Other options. See https://framework7.io/docs/notification.html.

    session

    shiny session.

    - - -

    Examples

    - 
    if (interactive()) {
-  library(shiny)
-  library(shinyMobile)
-  shinyApp(
-    ui = f7Page(
-      title = "My app",
-      f7SingleLayout(
-        navbar = f7Navbar(title = "f7Notif"),
-        f7Button(inputId = "goButton", "Go!")
-      )
-    ),
-    server = function(input, output, session) {
-      observeEvent(input$goButton,{
-        f7Notif(
-          text = "test",
-          icon = f7Icon("bolt_fill"),
-          title = "Notification",
-          subtitle = "A subtitle",
-          titleRightText = "now"
-        )
-      })
-    }
-  )
-}
-
    -
    - -
    +
    swipeToClose
    +

    If enabled, notification can be closed by swipe gesture.

    + + +
    ...
    +

    Other options. See https://framework7.io/docs/notification.html.

    + +
    session
    +

    shiny session.

    -
    -
    -

    Developed by David Granjon, Victor Perrier, Isabelle Rudolf.

    +
    + +
    +

    Examples

    + 
    if (interactive()) {
+  library(shiny)
+  library(shinyMobile)
+  shinyApp(
+    ui = f7Page(
+      title = "My app",
+      f7SingleLayout(
+        navbar = f7Navbar(title = "f7Notif"),
+        f7Button(inputId = "goButton", "Go!")
+      )
+    ),
+    server = function(input, output, session) {
+      observeEvent(input$goButton,{
+        f7Notif(
+          text = "test",
+          icon = f7Icon("bolt_fill"),
+          title = "Notification",
+          subtitle = "A subtitle",
+          titleRightText = "now"
+        )
+      })
+    }
+  )
+}
+
    +
    +
    + + +
    +

    Developed by David Granjon, Victor Perrier, Isabelle Rudolf.

    -
    -

    Site built with pkgdown 1.6.1.

    +
    +

    Site built with pkgdown 2.0.7.

    -
    -
    +
    + - - - + diff --git a/docs/reference/f7Padding.html b/docs/reference/f7Padding.html index c81d9474..3595e0e5 100644 --- a/docs/reference/f7Padding.html +++ b/docs/reference/f7Padding.html @@ -1,250 +1,143 @@ - - - - - - - -Framework7 padding utility — f7Padding • shinyMobile - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - +Framework7 padding utility — f7Padding • shinyMobile + Skip to contents + +
    -
    -
    -

    Framework7 padding utility

    - Source: R/typography.R - +
    +

    Framework7 padding utility

    + Source: R/typography.R +
    f7Padding.Rd
    -
    +

    f7Padding adds padding to the given tag.

    - 
    f7Padding(tag, side = NULL)
    - -

    Arguments

    - - - - - - - - - - -
    tag

    Tag to apply the padding.

    side

    padding side: "left", "right", "top", "bottom", +

    +

    Usage

    + 
    f7Padding(tag, side = NULL)
    +
    + +
    +

    Arguments

    +
    tag
    +

    Tag to apply the padding.

    + + +
    side
    +

    padding side: "left", "right", "top", "bottom", "vertical" (top and bottom), "horizontal" (left and right). -Leave NULL to apply on all sides.

    - -

    Author

    - -

    David Granjon, dgranjon@ymail.com

    - -

    Examples

    - 
    if(interactive()){
- library(shiny)
- library(shinyMobile)
-
- cardTag <- f7Card(
-  title = "Card header",
-  f7Padding(
-   p("The padding is applied here.")
-  ),
-  footer = tagList(
-    f7Button(color = "blue", label = "My button", href = "https://www.google.com"),
-    f7Badge("Badge", color = "green")
-  )
- )
-
- shinyApp(
-   ui = f7Page(
-    title = "Padding",
-    f7SingleLayout(navbar = f7Navbar(title = "f7Padding"), cardTag)
-   ),
-   server = function(input, output) {}
- )
-}
-
-
    -
    - -
    +Leave NULL to apply on all sides.

    +
    +
    +

    Author

    +

    David Granjon, dgranjon@ymail.com

    +
    + +
    +

    Examples

    + 
    if(interactive()){
+ library(shiny)
+ library(shinyMobile)
+
+ cardTag <- f7Card(
+  title = "Card header",
+  f7Padding(
+   p("The padding is applied here.")
+  ),
+  footer = tagList(
+    f7Button(color = "blue", label = "My button", href = "https://www.google.com"),
+    f7Badge("Badge", color = "green")
+  )
+ )
+
+ shinyApp(
+   ui = f7Page(
+    title = "Padding",
+    f7SingleLayout(navbar = f7Navbar(title = "f7Padding"), cardTag)
+   ),
+   server = function(input, output) {}
+ )
+}
+
+
    +
    +
    -
    -
    -

    Developed by David Granjon, Victor Perrier, Isabelle Rudolf.

    + +
    +

    Developed by David Granjon, Victor Perrier, Isabelle Rudolf.

    -
    -

    Site built with pkgdown 1.6.1.

    +
    +

    Site built with pkgdown 2.0.7.

    -
    -
    +
    + - - - + diff --git a/docs/reference/f7Page.html b/docs/reference/f7Page.html index be7ebeff..b6385640 100644 --- a/docs/reference/f7Page.html +++ b/docs/reference/f7Page.html @@ -1,278 +1,157 @@ - - - - - - - -Framework7 page container — f7Page • shinyMobile - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -Framework7 page container — f7Page • shinyMobile + + Skip to contents + +
    -
    -
    -

    Framework7 page container

    - Source: R/f7Page.R - +
    +

    Framework7 page container

    + Source: R/f7Page.R +
    f7Page.Rd
    -
    +

    f7Page is the main app container.

    - 
    f7Page(
-  ...,
-  title = NULL,
-  preloader = FALSE,
-  loading_duration = 3,
-  options = list(theme = c("ios", "md", "auto", "aurora"), dark = TRUE, filled = FALSE,
-    color = "#007aff", touch = list(tapHold = TRUE, tapHoldDelay = 750, iosTouchRipple =
-    FALSE), iosTranslucentBars = FALSE, navbar = list(iosCenterTitle = TRUE,
-    hideOnPageScroll = TRUE), toolbar = list(hideOnPageScroll = FALSE), pullToRefresh =
-    FALSE),
-  allowPWA = FALSE
-)
    +
    +

    Usage

    + 
    f7Page(
+  ...,
+  title = NULL,
+  options = list(theme = c("auto", "ios", "md", "aurora"), dark = TRUE, skeletonsOnLoad =
+    FALSE, preloader = FALSE, filled = FALSE, color = "#007aff", touch = list(tapHold =
+    TRUE, tapHoldDelay = 750, iosTouchRipple = FALSE), iosTranslucentBars = FALSE, navbar
+    = list(iosCenterTitle = TRUE, hideOnPageScroll = TRUE), toolbar =
+    list(hideOnPageScroll = FALSE), pullToRefresh = FALSE),
+  allowPWA = FALSE
+)
    +
    + +
    +

    Arguments

    +
    ...
    +

    Slot for shinyMobile skeleton elements: f7Appbar, f7SingleLayout, +f7TabLayout, f7SplitLayout.

    + -

    Arguments

    - - - - - - - - - - - - - - - - - - - - - - - - - - -
    ...

    Slot for shinyMobile skeleton elements: f7Appbar, f7SingleLayout, -f7TabLayout, f7SplitLayout.

    title

    Page title.

    preloader

    Whether to display a preloader before the app starts. -FALSE by default.

    loading_duration

    Preloader duration.

    options

    shinyMobile configuration. See https://framework7.io/docs/app.html. Below are the most -notable options. General options:

    Toolbar options https://v5.framework7.io/docs/toolbar-tabbar.html#toolbar-app-parameters:

    • hideOnPageScroll: Default to FALSE. Will hide tabs on page scroll.

      • +

    In any case, you must follow the same structure as provided in the function arguments.

    -

    In any case, you must follow the same structure as provided in the function arguments.

    allowPWA

    Whether to include PWA dependencies. Default to FALSE.

    -

    Author

    +
    allowPWA
    +

    Whether to include PWA dependencies. Default to FALSE.

    -

    David Granjon, dgranjon@ymail.com

    +
    +
    +

    Author

    +

    David Granjon, dgranjon@ymail.com

    +
    -
    - -
    +
    -
    -
    -

    Developed by David Granjon, Victor Perrier, Isabelle Rudolf.

    +
    +

    Developed by David Granjon, Victor Perrier, Isabelle Rudolf.

    -
    -

    Site built with pkgdown 1.6.1.

    +
    +

    Site built with pkgdown 2.0.7.

    -
    -
    +
    + - - - + diff --git a/docs/reference/f7Password.html b/docs/reference/f7Password.html index ebb71e32..0af5f8d9 100644 --- a/docs/reference/f7Password.html +++ b/docs/reference/f7Password.html @@ -1,251 +1,143 @@ - - - - - - - -Create an f7 password input — f7Password • shinyMobile - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - +Create an f7 password input — f7Password • shinyMobile + Skip to contents + +
    -
    -
    -

    Create an f7 password input

    - Source: R/f7-inputs.R - +
    +

    Create an f7 password input

    + Source: R/f7-inputs.R +
    f7Password.Rd
    -
    +

    Create an f7 password input

    - 
    f7Password(inputId, label, value = "", placeholder = NULL)
    - -

    Arguments

    - - - - - - - - - - - - - - - - - - -
    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.

    placeholder

    The placeholder to set for the input object.

    - - -

    Examples

    - 
    if(interactive()){
- library(shiny)
- library(shinyMobile)
-
- shinyApp(
-   ui = f7Page(
-     title = "My app",
-     f7SingleLayout(
-      navbar = f7Navbar(title = "f7Password"),
-      f7Password(
-       inputId = "password",
-       label = "Password:",
-       placeholder = "Your password here"
-      ),
-      verbatimTextOutput("value")
-     )
-   ),
-   server = function(input, output) {
-     output$value <- renderPrint({ input$password })
-   }
- )
-}
-
    -
    - -
    +
    +

    Usage

    + 
    f7Password(inputId, label, value = "", placeholder = NULL)
    +
    + +
    +

    Arguments

    +
    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.

    + + +
    placeholder
    +

    The placeholder to set for the input object.

    + +
    + +
    +

    Examples

    + 
    if(interactive()){
+ library(shiny)
+ library(shinyMobile)
+
+ shinyApp(
+   ui = f7Page(
+     title = "My app",
+     f7SingleLayout(
+      navbar = f7Navbar(title = "f7Password"),
+      f7Password(
+       inputId = "password",
+       label = "Password:",
+       placeholder = "Your password here"
+      ),
+      verbatimTextOutput("value")
+     )
+   ),
+   server = function(input, output) {
+     output$value <- renderPrint({ input$password })
+   }
+ )
+}
+
    +
    +
    -
    -
    -

    Developed by David Granjon, Victor Perrier, Isabelle Rudolf.

    +
    +

    Developed by David Granjon, Victor Perrier, Isabelle Rudolf.

    -
    -

    Site built with pkgdown 1.6.1.

    +
    +

    Site built with pkgdown 2.0.7.

    -
    -
    +
    + - - - + diff --git a/docs/reference/f7PhotoBrowser.html b/docs/reference/f7PhotoBrowser.html index 3fd4f06c..74e2868a 100644 --- a/docs/reference/f7PhotoBrowser.html +++ b/docs/reference/f7PhotoBrowser.html @@ -1,269 +1,161 @@ - - - - - - - -Framework7 photo browser — f7PhotoBrowser • shinyMobile - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -Framework7 photo browser — f7PhotoBrowser • shinyMobile + + Skip to contents + +
    -
    -
    -

    Framework7 photo browser

    - Source: R/f7PhotoBrowser.R - +
    +

    Framework7 photo browser

    + Source: R/f7PhotoBrowser.R +
    f7PhotoBrowser.Rd
    -
    +

    A nice photo browser.

    - 
    f7PhotoBrowser(
-  photos,
-  theme = c("light", "dark"),
-  type = c("popup", "standalone", "page"),
-  ...,
-  session = shiny::getDefaultReactiveDomain()
-)
    - -

    Arguments

    - - - - - - - - - - - - - - - - - - - - - - -
    photos

    List of photos

    theme

    Browser theme: choose either light or dark.

    type

    Browser type: choose among c("popup", "standalone", "page").

    ...

    Other options.

    session

    Shiny session object.

    - - -

    Examples

    - 
    if (interactive()) {
- library(shiny)
- library(shinyMobile)
-
- shinyApp(
-   ui = f7Page(
-     title = "f7PhotoBrowser",
-     f7SingleLayout(
-       navbar = f7Navbar(title = "f7PhotoBrowser"),
-       f7Button(inputId = "togglePhoto", "Open photo")
-     )
-   ),
-   server = function(input, output, session) {
-    observeEvent(input$togglePhoto, {
-     f7PhotoBrowser(
-         id = "photobrowser1",
-         label = "Open",
-         theme = "light",
-         type = "standalone",
-         photos = c(
-           "https://cdn.framework7.io/placeholder/sports-1024x1024-1.jpg",
-           "https://cdn.framework7.io/placeholder/sports-1024x1024-2.jpg",
-           "https://cdn.framework7.io/placeholder/sports-1024x1024-3.jpg"
-         )
-       )
-    })
+    
    
+    
    Usage
    
+    
    f7PhotoBrowser(
+  photos,
+  theme = c("light", "dark"),
+  type = c("popup", "standalone", "page"),
+  ...,
+  session = shiny::getDefaultReactiveDomain()
+)
    
+    
    
 
-   }
- )
-}
-
    -
    - -
    +
    +

    Arguments

    +
    photos
    +

    List of photos

    + + +
    theme
    +

    Browser theme: choose either light or dark.

    + + +
    type
    +

    Browser type: choose among c("popup", "standalone", "page").

    + + +
    ...
    +

    Other options.

    + + +
    session
    +

    Shiny session object.

    + +
    + +
    +

    Examples

    + 
    if (interactive()) {
+ library(shiny)
+ library(shinyMobile)
+
+ shinyApp(
+   ui = f7Page(
+     title = "f7PhotoBrowser",
+     f7SingleLayout(
+       navbar = f7Navbar(title = "f7PhotoBrowser"),
+       f7Button(inputId = "togglePhoto", "Open photo")
+     )
+   ),
+   server = function(input, output, session) {
+    observeEvent(input$togglePhoto, {
+     f7PhotoBrowser(
+         id = "photobrowser1",
+         label = "Open",
+         theme = "dark",
+         type = "standalone",
+         photos = c(
+           "https://cdn.framework7.io/placeholder/sports-1024x1024-1.jpg",
+           "https://cdn.framework7.io/placeholder/sports-1024x1024-2.jpg",
+           "https://cdn.framework7.io/placeholder/sports-1024x1024-3.jpg"
+         )
+       )
+    })
+
+   }
+ )
+}
+
    +
    +
    -
    -
    -

    Developed by David Granjon, Victor Perrier, Isabelle Rudolf.

    +
    +

    Developed by David Granjon, Victor Perrier, Isabelle Rudolf.

    -
    -

    Site built with pkgdown 1.6.1.

    +
    +

    Site built with pkgdown 2.0.7.

    -
    -
    +
    + - - - + diff --git a/docs/reference/f7Popup.html b/docs/reference/f7Popup.html index 402a7703..e5677616 100644 --- a/docs/reference/f7Popup.html +++ b/docs/reference/f7Popup.html @@ -1,313 +1,212 @@ - - - - - - +Framework7 popup — f7Popup • shinyMobile + Skip to contents + -Create a f7 popup — f7Popup • shinyMobile +
    +
    +
    +

    Framework7 popup

    + Source: R/f7Popup.R +
    f7Popup.Rd
    +
    - - - +
    +

    f7Popup creates a popup window with any UI content that pops up over App's main content. +Popup as all other overlays is part of so called "Temporary Views".

    +
    - - +
    +

    Usage

    + 
    f7Popup(
+  ...,
+  id,
+  title = NULL,
+  backdrop = TRUE,
+  closeByBackdropClick = TRUE,
+  closeOnEscape = FALSE,
+  animate = TRUE,
+  swipeToClose = FALSE,
+  fullsize = FALSE,
+  closeButton = TRUE,
+  session = shiny::getDefaultReactiveDomain()
+)
    +
    - - - +
    +

    Arguments

    +
    ...
    +

    UI elements for the body of the popup window.

    - - - +
    id
    +

    Popup unique id. Useful if you want to access the popup state. +input$<id> is TRUE when the popup is opened and inversely.

    - - +
    title
    +

    Title for the popup window, use NULL for no title.

    - - - +
    backdrop
    +

    Enables Popup backdrop (dark semi transparent layer behind). +Default to TRUE.

    +
    closeByBackdropClick
    +

    When enabled, popup will be closed on backdrop click. +Default to TRUE.

    - - - - - - - - - - -
    -
    - - +
    animate
    +

    Whether the Popup should be opened/closed with animation or not. +Default to TRUE.

    -
    -
    -
    -
    -

    Create a f7 popup

    - Source: R/f7Popup.R - -
    - -
    -

    Popup is a popup window with any UI content that pops up over App's main content. - Popup as all other overlays is part of so called "Temporary Views".

    -
    - - 
    f7Popup(
-  ...,
-  id,
-  title = NULL,
-  backdrop = TRUE,
-  closeByBackdropClick = TRUE,
-  closeOnEscape = FALSE,
-  animate = TRUE,
-  swipeToClose = FALSE,
-  fullsize = FALSE,
-  closeButton = TRUE
-)
    - -

    Arguments

    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    ...

    UI elements for the body of the popup window.

    id

    Popup unique id.

    title

    Title for the popup window, use NULL for no title.

    backdrop

    Enables Popup backdrop (dark semi transparent layer behind). -Default to TRUE.

    closeByBackdropClick

    When enabled, popup will be closed on backdrop click. -Default to TRUE.

    closeOnEscape

    When enabled, popup will be closed on ESC keyboard key press. -Default to FALSE.

    animate

    Whether the Popup should be opened/closed with animation or not. -Default to TRUE.

    swipeToClose

    Whether the Popup can be closed with swipe gesture. +

    swipeToClose
    +

    Whether the Popup can be closed with swipe gesture. Can be true to allow to close popup with swipes to top and to bottom. -Default to FALSE.

    fullsize

    Open popup in full width or not. Default to FALSE.

    closeButton

    Add or not a button to easily close the popup. -Default to TRUE.

    - - -

    Examples

    - 
    if (interactive()) {
- library(shiny)
- library(shinyMobile)
- shiny::shinyApp(
-   ui = f7Page(
-     color = "pink",
-     title = "My app",
-     f7SingleLayout(
-      navbar = f7Navbar(
-        title = "f7Popup",
-        hairline = FALSE,
-        shadow = TRUE
-      ),
-      f7Button("togglePopup", "Toggle Popup"),
-      f7Popup(
-       id = "popup1",
-       title = "My first popup",
-       f7Text("text", "Popup content", "This is my first popup ever, I swear!"),
-       verbatimTextOutput("popupContent")
-      )
-     )
-   ),
-   server = function(input, output, session) {
-
-    output$popupContent <- renderPrint(input$text)
-
-    observeEvent(input$togglePopup, {
-     f7TogglePopup(id = "popup1")
-    })
-
-    observeEvent(input$popup1, {
-
-     popupStatus <- if (input$popup1) "opened" else "closed"
-
-     f7Toast(
-      session,
-      position = "top",
-      text = paste("Popup is", popupStatus)
-     )
-    })
-   }
- )
-}
    -
    - -
    +Default to FALSE.

    + + +
    fullsize
    +

    Open popup in full width or not. Default to FALSE.

    + + +
    closeButton
    +

    Add or not a button to easily close the popup. +Default to TRUE.

    + + +
    session
    +

    Shiny session object.

    + +
    + +
    +

    Examples

    + 
    if (interactive()) {
+ library(shiny)
+ library(shinyMobile)
+ shinyApp(
+   ui = f7Page(
+     title = "Popup",
+     f7SingleLayout(
+      navbar = f7Navbar(
+        title = "f7Popup",
+        hairline = FALSE,
+        shadow = TRUE
+      ),
+      f7Button("togglePopup", "Toggle Popup")
+     )
+   ),
+   server = function(input, output, session) {
+
+    output$popupContent <- renderPrint(input$text)
+
+    observeEvent(input$togglePopup, {
+     f7Popup(
+       id = "popup1",
+       title = "My first popup",
+       f7Text("text", "Popup content", "This is my first popup ever, I swear!"),
+       verbatimTextOutput("popupContent")
+      )
+    })
+
+    observeEvent(input$popup1, {
+
+     popupStatus <- if (input$popup1) "opened" else "closed"
+
+     f7Toast(
+      position = "top",
+      text = paste("Popup is", popupStatus)
+     )
+    })
+   }
+ )
+}
+
    +
    +
    -
    -
    -

    Developed by David Granjon, Victor Perrier, Isabelle Rudolf.

    +
    +

    Developed by David Granjon, Victor Perrier, Isabelle Rudolf.

    -
    -

    Site built with pkgdown 1.5.1.

    +
    +

    Site built with pkgdown 2.0.7.

    -
    -
    +
    + - - - + diff --git a/docs/reference/f7Row.html b/docs/reference/f7Row.html index f469b098..53d349d4 100644 --- a/docs/reference/f7Row.html +++ b/docs/reference/f7Row.html @@ -1,260 +1,153 @@ - - - - - - - -Framework7 row container — f7Row • shinyMobile - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -Framework7 row container — f7Row • shinyMobile + + Skip to contents + +
    -
    -
    -

    Framework7 row container

    - Source: R/f7Grid.R - +
    +

    Framework7 row container

    + Source: R/f7Grid.R +
    f7Row.Rd
    -
    +

    Build a Framework7 row container

    - 
    f7Row(..., gap = TRUE)
    - -

    Arguments

    - - - - - - - - - - -
    ...

    Row content.

    gap

    Whether to display gap between columns. TRUE by default.

    +
    +

    Usage

    + 
    f7Row(..., gap = TRUE)
    +
    -

    Author

    +
    +

    Arguments

    +
    ...
    +

    Row content.

    -

    David Granjon, dgranjon@ymail.com

    -

    Examples

    - 
    if(interactive()){
- library(shiny)
- library(shinyMobile)
+
    gap
    
+
    Whether to display gap between columns. TRUE by default.
    
 
- shinyApp(
-  ui = f7Page(
-    title = "Grid",
-    f7SingleLayout(
-     navbar = f7Navbar(title = "f7Row, f7Col"),
-     f7Row(
-     f7Col(
-      f7Card(
-       "This is a simple card with plain text,
-       but cards can also contain their own header,
-       footer, list view, image, or any other element."
-      )
-     ),
-     f7Col(
-      f7Card(
-       title = "Card header",
-       "This is a simple card with plain text,
-        but cards can also contain their own header,
-        footer, list view, image, or any other element.",
-       footer = tagList(
-        f7Button(color = "blue", label = "My button"),
-        f7Badge("Badge", color = "green")
-       )
-      )
-     )
-    )
-    )
-  ),
-  server = function(input, output) {}
- )
-}
+
    +
    +

    Author

    +

    David Granjon, dgranjon@ymail.com

    +
    -
    -
    - -
    +
    +

    Examples

    + 
    if(interactive()){
+ library(shiny)
+ library(shinyMobile)
+
+ shinyApp(
+  ui = f7Page(
+    title = "Grid",
+    f7SingleLayout(
+     navbar = f7Navbar(title = "f7Row, f7Col"),
+     f7Row(
+     f7Col(
+      f7Card(
+       "This is a simple card with plain text,
+       but cards can also contain their own header,
+       footer, list view, image, or any other element."
+      )
+     ),
+     f7Col(
+      f7Card(
+       title = "Card header",
+       "This is a simple card with plain text,
+        but cards can also contain their own header,
+        footer, list view, image, or any other element.",
+       footer = tagList(
+        f7Button(color = "blue", label = "My button"),
+        f7Badge("Badge", color = "green")
+       )
+      )
+     )
+    )
+    )
+  ),
+  server = function(input, output) {}
+ )
+}
+
+
    +
    +
    -
    -
    -

    Developed by David Granjon, Victor Perrier, Isabelle Rudolf.

    +
    +

    Developed by David Granjon, Victor Perrier, Isabelle Rudolf.

    -
    -

    Site built with pkgdown 1.6.1.

    +
    +

    Site built with pkgdown 2.0.7.

    -
    -
    +
    + - - - + diff --git a/docs/reference/f7SearchIgnore.html b/docs/reference/f7SearchIgnore.html index d06a601e..0c4ec2f2 100644 --- a/docs/reference/f7SearchIgnore.html +++ b/docs/reference/f7SearchIgnore.html @@ -1,215 +1,105 @@ - - - - - - - -Utility to ignore an item from search. — f7SearchIgnore • shinyMobile - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - +Utility to ignore an item from search. — f7SearchIgnore • shinyMobile + Skip to contents + +
    -
    -
    -

    Utility to ignore an item from search.

    - Source: R/f7Searchbar.R - +
    +

    Utility to ignore an item from search.

    + Source: R/f7Searchbar.R +
    f7SearchIgnore.Rd
    -
    -

    Use with f7Searchbar.

    +
    +

    Use with f7Searchbar.

    - 
    f7SearchIgnore(tag)
    +
    +

    Usage

    + 
    f7SearchIgnore(tag)
    +
    -

    Arguments

    - - - - - - -
    tag

    tag to ignore.

    +
    +

    Arguments

    +
    tag
    +

    tag to ignore.

    +
    -
    - -
    +
    -
    -
    -

    Developed by David Granjon, Victor Perrier, Isabelle Rudolf.

    +
    +

    Developed by David Granjon, Victor Perrier, Isabelle Rudolf.

    -
    -

    Site built with pkgdown 1.6.1.

    +
    +

    Site built with pkgdown 2.0.7.

    -
    -
    +
    + - - - + diff --git a/docs/reference/f7Searchbar.html b/docs/reference/f7Searchbar.html index 4047d06e..7858a0aa 100644 --- a/docs/reference/f7Searchbar.html +++ b/docs/reference/f7Searchbar.html @@ -1,339 +1,231 @@ - - - - - - - -Framework 7 searchbar — f7Searchbar • shinyMobile - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -Framework 7 searchbar — f7Searchbar • shinyMobile - + + Skip to contents + +
    -
    -
    -

    Framework 7 searchbar

    - Source: R/f7Searchbar.R - +
    +

    Framework 7 searchbar

    + Source: R/f7Searchbar.R +
    f7Searchbar.Rd
    -
    +

    Searchbar to filter elements in a page.

    - 
    f7Searchbar(
-  id,
-  placeholder = "Search",
-  expandable = FALSE,
-  inline = FALSE,
-  options = NULL
-)
    - -

    Arguments

    - - - - - - - - - - - - - - - - - - - - - - -
    id

    Necessary when using f7SearchbarTrigger. NULL otherwise.

    placeholder

    Searchbar placeholder.

    expandable

    Whether to enable the searchbar with a target link, -in the navbar. See f7SearchbarTrigger.

    inline

    Useful to add an f7Searchbar in an f7Appbar. -Notice that utilities like f7HideOnSearch and f7NotFound are not -compatible with this mode.

    options

    Search bar options. -See https://v5.framework7.io/docs/searchbar.html#searchbar-parameters. -If no options are provided, the searchbar will search in list elements by -item title. This may be changed by updating the default searchContainer and -searchIn.

    - - -

    Examples

    - 
    if (interactive()) {
-library(shiny)
-library(shinyMobile)
+    
    
+    
    Usage
    
+    
    f7Searchbar(
+  id,
+  placeholder = "Search",
+  expandable = FALSE,
+  inline = FALSE,
+  options = NULL
+)
    
+    
    
 
-cars <- rownames(mtcars)
+    
    
+    
    Arguments
    
+    
    id
    
+
    Necessary when using f7SearchbarTrigger. NULL otherwise.
    
 
-shinyApp(
-  ui = f7Page(
-    title = "Simple searchbar",
-    f7SingleLayout(
-      navbar = f7Navbar(
-        title = "f7Searchbar",
-        hairline = FALSE,
-        shadow = TRUE,
-        subNavbar = f7SubNavbar(
-          f7Searchbar(id = "search1")
-        )
-      ),
-      f7Block(
-        "This block will be hidden on search.
-        Lorem ipsum dolor sit amet, consectetur adipisicing elit."
-      ) %>% f7HideOnSearch(),
-      f7List(
-        lapply(seq_along(cars), function(i) {
-          f7ListItem(cars[i])
-        })
-      ) %>% f7Found(),
 
-      f7Block(
-        p("Nothing found")
-      ) %>% f7NotFound()
+
    placeholder
    
+
    Searchbar placeholder.
    
 
-    )
-  ),
-  server = function(input, output) {}
- )
 
- # Expandable searchbar with trigger
- cities <- names(precip)
+
    expandable
    
+
    Whether to enable the searchbar with a target link,
+in the navbar. See f7SearchbarTrigger.
    
 
- shinyApp(
-   ui = f7Page(
-     title = "Expandable searchbar",
-     f7SingleLayout(
-       navbar = f7Navbar(
-         title = "f7Searchbar with trigger",
-         hairline = FALSE,
-         shadow = TRUE,
-         subNavbar = f7SubNavbar(
-           f7Searchbar(id = "search1", expandable = TRUE)
-         )
-       ),
-       f7Block(
-         f7SearchbarTrigger(targetId = "search1")
-       ) %>% f7HideOnSearch(),
-       f7List(
-         lapply(seq_along(cities), function(i) {
-           f7ListItem(cities[i])
-         })
-       ) %>% f7Found(),
 
-       f7Block(
-         p("Nothing found")
-       ) %>% f7NotFound()
+
    inline
    
+
    Useful to add an f7Searchbar in an f7Appbar.
+Notice that utilities like f7HideOnSearch and f7NotFound are not
+compatible with this mode.
    
 
-     )
-   ),
-   server = function(input, output) {}
- )
 
- # Searchbar in \link{f7Appbar}
- shinyApp(
-  ui = f7Page(
-    title = "Searchbar in appbar",
-    f7Appbar(
-      f7Searchbar(id = "search1", inline = TRUE)
-    ),
-    f7SingleLayout(
-      navbar = f7Navbar(
-        title = "f7Searchbar in f7Appbar",
-        hairline = FALSE,
-        shadow = TRUE
-      ),
-      f7List(
-        lapply(seq_along(cities), function(i) {
-          f7ListItem(cities[i])
-        })
-      ) %>% f7Found()
-    )
-  ),
-  server = function(input, output) {}
- )
-}
-
    -
    - -
    +
    options
    +

    Search bar options. +See https://v5.framework7.io/docs/searchbar.html#searchbar-parameters. +If no options are provided, the searchbar will search in list elements by +item title. This may be changed by updating the default searchContainer and +searchIn.

    + +
    + +
    +

    Examples

    + 
    if (interactive()) {
+library(shiny)
+library(shinyMobile)
+
+cars <- rownames(mtcars)
+
+shinyApp(
+  ui = f7Page(
+    title = "Simple searchbar",
+    f7SingleLayout(
+      navbar = f7Navbar(
+        title = "f7Searchbar",
+        hairline = FALSE,
+        shadow = TRUE,
+        subNavbar = f7SubNavbar(
+          f7Searchbar(id = "search1")
+        )
+      ),
+      f7Block(
+        "This block will be hidden on search.
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit."
+      ) %>% f7HideOnSearch(),
+      f7List(
+        lapply(seq_along(cars), function(i) {
+          f7ListItem(cars[i])
+        })
+      ) %>% f7Found(),
+
+      f7Block(
+        p("Nothing found")
+      ) %>% f7NotFound()
+
+    )
+  ),
+  server = function(input, output) {}
+ )
+
+ # Expandable searchbar with trigger
+ cities <- names(precip)
+
+ shinyApp(
+   ui = f7Page(
+     title = "Expandable searchbar",
+     f7SingleLayout(
+       navbar = f7Navbar(
+         title = "f7Searchbar with trigger",
+         hairline = FALSE,
+         shadow = TRUE,
+         subNavbar = f7SubNavbar(
+           f7Searchbar(id = "search1", expandable = TRUE)
+         )
+       ),
+       f7Block(
+         f7SearchbarTrigger(targetId = "search1")
+       ) %>% f7HideOnSearch(),
+       f7List(
+         lapply(seq_along(cities), function(i) {
+           f7ListItem(cities[i])
+         })
+       ) %>% f7Found(),
+
+       f7Block(
+         p("Nothing found")
+       ) %>% f7NotFound()
+
+     )
+   ),
+   server = function(input, output) {}
+ )
+
+ # Searchbar in \link{f7Appbar}
+ shinyApp(
+  ui = f7Page(
+    title = "Searchbar in appbar",
+    f7Appbar(
+      f7Searchbar(id = "search1", inline = TRUE)
+    ),
+    f7SingleLayout(
+      navbar = f7Navbar(
+        title = "f7Searchbar in f7Appbar",
+        hairline = FALSE,
+        shadow = TRUE
+      ),
+      f7List(
+        lapply(seq_along(cities), function(i) {
+          f7ListItem(cities[i])
+        })
+      ) %>% f7Found()
+    )
+  ),
+  server = function(input, output) {}
+ )
+}
+
    +
    +
    -
    -
    -

    Developed by David Granjon, Victor Perrier, Isabelle Rudolf.

    +
    +

    Developed by David Granjon, Victor Perrier, Isabelle Rudolf.

    -
    -

    Site built with pkgdown 1.6.1.

    +
    +

    Site built with pkgdown 2.0.7.

    -
    -
    +
    + - - - + diff --git a/docs/reference/f7SearchbarTrigger.html b/docs/reference/f7SearchbarTrigger.html index 11b1f9dc..316cdb5c 100644 --- a/docs/reference/f7SearchbarTrigger.html +++ b/docs/reference/f7SearchbarTrigger.html @@ -1,215 +1,105 @@ - - - - - - - -Framework 7 searchbar trigger — f7SearchbarTrigger • shinyMobile - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - +Framework 7 searchbar trigger — f7SearchbarTrigger • shinyMobile + Skip to contents + +
    -
    -
    -

    Framework 7 searchbar trigger

    - Source: R/f7Searchbar.R - +
    +

    Framework 7 searchbar trigger

    + Source: R/f7Searchbar.R +
    f7SearchbarTrigger.Rd
    -
    +

    Element that triggers the searchbar.

    - 
    f7SearchbarTrigger(targetId)
    +
    +

    Usage

    + 
    f7SearchbarTrigger(targetId)
    +
    -

    Arguments

    - - - - - - -
    targetId

    Id of the f7Searchbar.

    +
    +

    Arguments

    +
    targetId
    +

    Id of the f7Searchbar.

    +
    -
    - -
    +
    -
    -
    -

    Developed by David Granjon, Victor Perrier, Isabelle Rudolf.

    +
    +

    Developed by David Granjon, Victor Perrier, Isabelle Rudolf.

    -
    -

    Site built with pkgdown 1.6.1.

    +
    +

    Site built with pkgdown 2.0.7.

    -
    -
    +
    + - - - + diff --git a/docs/reference/f7Segment.html b/docs/reference/f7Segment.html index dcd1da4c..e6d41cdd 100644 --- a/docs/reference/f7Segment.html +++ b/docs/reference/f7Segment.html @@ -1,308 +1,201 @@ - - - - - - - -Framework7 segmented button container — f7Segment • shinyMobile - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -Framework7 segmented button container — f7Segment • shinyMobile - + + Skip to contents + +
    -
    -
    -

    Framework7 segmented button container

    - Source: R/f7Button.R - +
    +

    Framework7 segmented button container

    + Source: R/f7Button.R +
    f7Segment.Rd
    -
    -

    A Framework7 segmented button container for f7Button.

    +
    +

    A Framework7 segmented button container for f7Button.

    - 
    f7Segment(
-  ...,
-  container = c("segment", "row"),
-  shadow = FALSE,
-  rounded = FALSE,
-  strong = FALSE
-)
    +
    +

    Usage

    + 
    f7Segment(
+  ...,
+  container = c("segment", "row"),
+  shadow = FALSE,
+  rounded = FALSE,
+  strong = FALSE
+)
    +
    -

    Arguments

    - - - - - - - - - - - - - - - - - - - - - - -
    ...

    Slot for f7Button.

    container

    Either "row" or "segment".

    shadow

    Button shadow. FALSE by default. Only if the container is segment.

    rounded

    Round style. FALSE by default. Only if the container is segment.

    strong

    Strong style. FALSE by default.

    +
    +

    Arguments

    +
    ...
    +

    Slot for f7Button.

    -

    Author

    -

    David Granjon, dgranjon@ymail.com

    +
    container
    +

    Either "row" or "segment".

    -

    Examples

    - 
    if(interactive()){
- library(shiny)
- library(shinyMobile)
 
- shinyApp(
-  ui = f7Page(
-    title = "Button Segments",
-    f7SingleLayout(
-     navbar = f7Navbar(title = "f7Segment, f7Button"),
-     f7BlockTitle(title = "Simple Buttons in a row container"),
-    f7Segment(
-     container = "row",
-     f7Button(color = "blue", label = "My button", fill = FALSE),
-     f7Button(color = "green", label = "My button", href = "https://www.google.com", fill = FALSE),
-     f7Button(color = "yellow", label = "My button", fill = FALSE)
-    ),
-    f7BlockTitle(title = "Filled Buttons in a segment/rounded container"),
-    f7Segment(
-     rounded = TRUE,
-     container = "segment",
-     f7Button(color = "black", label = "Action Button", inputId = "button2"),
-     f7Button(color = "green", label = "My button", href = "https://www.google.com"),
-     f7Button(color = "yellow", label = "My button")
-    ),
-    f7BlockTitle(title = "Outline Buttons in a segment/shadow container"),
-    f7Segment(
-     shadow = TRUE,
-     container = "segment",
-     f7Button(label = "My button", outline = TRUE, fill = FALSE),
-     f7Button(label = "My button", outline = TRUE, fill = FALSE),
-     f7Button(label = "My button", outline = TRUE, fill = FALSE)
-    ),
-    f7BlockTitle(title = "Buttons in a segment/strong container"),
-    f7Segment(
-     strong = TRUE,
-     container = "segment",
-     f7Button(label = "My button", fill = FALSE),
-     f7Button(label = "My button", fill = FALSE),
-     f7Button(label = "My button", fill = FALSE, active = TRUE)
-    ),
-    f7BlockTitle(title = "Rounded Buttons in a segment container"),
-    f7Segment(
-     container = "segment",
-     f7Button(color = "blue", label = "My button", rounded = TRUE),
-     f7Button(color = "green", label = "My button", rounded = TRUE),
-     f7Button(color = "yellow", label = "My button", rounded = TRUE)
-    ),
-    f7BlockTitle(title = "Buttons of different size in a row container"),
-    f7Segment(
-     container = "row",
-     f7Button(color = "pink", label = "My button", shadow = TRUE),
-     f7Button(color = "purple", label = "My button", size = "large", shadow = TRUE),
-     f7Button(color = "orange", label = "My button", size = "small", shadow = TRUE)
-    ),
+
    shadow
    
+
    Button shadow. FALSE by default. Only if the container is segment.
    
 
-    br(), br(),
-    f7BlockTitle(title = "Click on the black action button to update the value"),
-    verbatimTextOutput("val")
-    )
-  ),
-  server = function(input, output) {
-   output$val <- renderPrint(input$button2)
-  }
- )
-}
 
-
    -
    - -
    +
    rounded
    +

    Round style. FALSE by default. Only if the container is segment.

    -
    -
    -

    Developed by David Granjon, Victor Perrier, Isabelle Rudolf.

    +
    strong
    +

    Strong style. FALSE by default.

    + +
    +
    +

    Author

    +

    David Granjon, dgranjon@ymail.com

    +
    + +
    +

    Examples

    + 
    if(interactive()){
+ library(shiny)
+ library(shinyMobile)
+
+ shinyApp(
+  ui = f7Page(
+    title = "Button Segments",
+    f7SingleLayout(
+     navbar = f7Navbar(title = "f7Segment, f7Button"),
+     f7BlockTitle(title = "Simple Buttons in a row container"),
+    f7Segment(
+     container = "row",
+     f7Button(color = "blue", label = "My button", fill = FALSE),
+     f7Button(color = "green", label = "My button", href = "https://www.google.com", fill = FALSE),
+     f7Button(color = "yellow", label = "My button", fill = FALSE)
+    ),
+    f7BlockTitle(title = "Filled Buttons in a segment/rounded container"),
+    f7Segment(
+     rounded = TRUE,
+     container = "segment",
+     f7Button(color = "black", label = "Action Button", inputId = "button2"),
+     f7Button(color = "green", label = "My button", href = "https://www.google.com"),
+     f7Button(color = "yellow", label = "My button")
+    ),
+    f7BlockTitle(title = "Outline Buttons in a segment/shadow container"),
+    f7Segment(
+     shadow = TRUE,
+     container = "segment",
+     f7Button(label = "My button", outline = TRUE, fill = FALSE),
+     f7Button(label = "My button", outline = TRUE, fill = FALSE),
+     f7Button(label = "My button", outline = TRUE, fill = FALSE)
+    ),
+    f7BlockTitle(title = "Buttons in a segment/strong container"),
+    f7Segment(
+     strong = TRUE,
+     container = "segment",
+     f7Button(label = "My button", fill = FALSE),
+     f7Button(label = "My button", fill = FALSE),
+     f7Button(label = "My button", fill = FALSE, active = TRUE)
+    ),
+    f7BlockTitle(title = "Rounded Buttons in a segment container"),
+    f7Segment(
+     container = "segment",
+     f7Button(color = "blue", label = "My button", rounded = TRUE),
+     f7Button(color = "green", label = "My button", rounded = TRUE),
+     f7Button(color = "yellow", label = "My button", rounded = TRUE)
+    ),
+    f7BlockTitle(title = "Buttons of different size in a row container"),
+    f7Segment(
+     container = "row",
+     f7Button(color = "pink", label = "My button", shadow = TRUE),
+     f7Button(color = "purple", label = "My button", size = "large", shadow = TRUE),
+     f7Button(color = "orange", label = "My button", size = "small", shadow = TRUE)
+    ),
+
+    br(), br(),
+    f7BlockTitle(title = "Click on the black action button to update the value"),
+    verbatimTextOutput("val")
+    )
+  ),
+  server = function(input, output) {
+   output$val <- renderPrint(input$button2)
+  }
+ )
+}
+
+
    +
    +
    + + +
    +

    Developed by David Granjon, Victor Perrier, Isabelle Rudolf.

    -
    -

    Site built with pkgdown 1.6.1.

    +
    +

    Site built with pkgdown 2.0.7.

    -
    -
    +
    + - - - + diff --git a/docs/reference/f7Shadow.html b/docs/reference/f7Shadow.html index 6a052998..18bfee37 100644 --- a/docs/reference/f7Shadow.html +++ b/docs/reference/f7Shadow.html @@ -1,262 +1,155 @@ - - - - - - - -Framework7 shadow effect — f7Shadow • shinyMobile - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -Framework7 shadow effect — f7Shadow • shinyMobile + + Skip to contents + +
    -
    -
    -

    Framework7 shadow effect

    - Source: R/f7Shadow.R - +
    +

    Framework7 shadow effect

    + Source: R/f7Shadow.R +
    f7Shadow.Rd
    -
    -

    Creates a shadow effect to apply on UI elements like f7Card.

    +
    +

    Creates a shadow effect to apply on UI elements like f7Card.

    - 
    f7Shadow(tag, intensity, hover = FALSE, pressed = FALSE)
    +
    +

    Usage

    + 
    f7Shadow(tag, intensity, hover = FALSE, pressed = FALSE)
    +
    -

    Arguments

    - - - - - - - - - - - - - - - - - - -
    tag

    Tag to apply the shadow on.

    intensity

    Shadow intensity. Numeric between 1 and 24. 24 is the highest elevation.

    hover

    Whether to display the shadow on hover. FALSE by default.

    pressed

    Whether to display the shadow on click. FALSE by default.

    +
    +

    Arguments

    +
    tag
    +

    Tag to apply the shadow on.

    -

    Author

    -

    David Granjon, dgranjon@ymail.com

    +
    intensity
    +

    Shadow intensity. Numeric between 1 and 24. 24 is the highest elevation.

    -

    Examples

    - 
    if(interactive()){
- library(shiny)
- library(shinyMobile)
 
- shinyApp(
-   ui = f7Page(
-    title = "Shadows",
-    f7SingleLayout(
-     navbar = f7Navbar(title = "f7Shadow"),
-     f7Shadow(
-     intensity = 16,
-     hover = TRUE,
-     pressed = TRUE,
-     f7Card(
-      title = "Card header",
-      "This is a simple card with plain text,
-       but cards can also contain their own header,
-       footer, list view, image, or any other element.",
-      footer = tagList(
-       f7Button(color = "blue", label = "My button", href = "https://www.google.com"),
-       f7Badge("Badge", color = "green")
-      )
-     )
-    )
-    )
-   ),
-   server = function(input, output) {}
- )
-}
+
    hover
    
+
    Whether to display the shadow on hover. FALSE by default.
    
 
-
    -
    - -
    +
    pressed
    +

    Whether to display the shadow on click. FALSE by default.

    + +
    +
    +

    Author

    +

    David Granjon, dgranjon@ymail.com

    +
    -
    -
    -

    Developed by David Granjon, Victor Perrier, Isabelle Rudolf.

    +
    +

    Examples

    + 
    if(interactive()){
+ library(shiny)
+ library(shinyMobile)
+
+ shinyApp(
+   ui = f7Page(
+    title = "Shadows",
+    f7SingleLayout(
+     navbar = f7Navbar(title = "f7Shadow"),
+     f7Shadow(
+     intensity = 16,
+     hover = TRUE,
+     pressed = TRUE,
+     f7Card(
+      title = "Card header",
+      "This is a simple card with plain text,
+       but cards can also contain their own header,
+       footer, list view, image, or any other element.",
+      footer = tagList(
+       f7Button(color = "blue", label = "My button", href = "https://www.google.com"),
+       f7Badge("Badge", color = "green")
+      )
+     )
+    )
+    )
+   ),
+   server = function(input, output) {}
+ )
+}
+
+
    +
    +
    + + +
    +

    Developed by David Granjon, Victor Perrier, Isabelle Rudolf.

    -
    -

    Site built with pkgdown 1.6.1.

    +
    +

    Site built with pkgdown 2.0.7.

    -
    -
    +
    + - - - + diff --git a/docs/reference/f7SingleLayout.html b/docs/reference/f7SingleLayout.html index 5b043824..9d342574 100644 --- a/docs/reference/f7SingleLayout.html +++ b/docs/reference/f7SingleLayout.html @@ -1,279 +1,172 @@ - - - - - - - -Framework7 single layout — f7SingleLayout • shinyMobile - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -Framework7 single layout — f7SingleLayout • shinyMobile - + + Skip to contents + +
    -
    -
    -

    Framework7 single layout

    - Source: R/f7Page.R - +
    +

    Framework7 single layout

    + Source: R/f7Page.R +
    f7SingleLayout.Rd
    -
    +

    f7SingleLayout provides a simple page layout.

    - 
    f7SingleLayout(..., navbar, toolbar = NULL, panels = NULL, appbar = NULL)
    +
    +

    Usage

    + 
    f7SingleLayout(..., navbar, toolbar = NULL, panels = NULL, appbar = NULL)
    +
    -

    Arguments

    - - - - - - - - - - - - - - - - - - - - - - -
    ...

    Content.

    navbar

    Slot for f7Navbar.

    toolbar

    Slot for f7Toolbar.

    panels

    Slot for f7Panel. -Wrap in tagList if multiple panels.

    appbar

    Slot for f7Appbar.

    +
    +

    Arguments

    +
    ...
    +

    Content.

    -

    Author

    -

    David Granjon, dgranjon@ymail.com

    +
    navbar
    +

    Slot for f7Navbar.

    -

    Examples

    - 
    if(interactive()){
- library(shiny)
- library(shinyMobile)
- shinyApp(
-  ui = f7Page(
-    title = "Single layout",
-    f7SingleLayout(
-      navbar = f7Navbar(
-        title = "Single Layout",
-        hairline = FALSE,
-        shadow = TRUE
-      ),
-      toolbar = f7Toolbar(
-        position = "bottom",
-        f7Link(label = "Link 1", href = "https://www.google.com"),
-        f7Link(label = "Link 2", href = "https://www.google.com")
-      ),
-      # main content
-      f7Shadow(
-        intensity = 10,
-        hover = TRUE,
-        f7Card(
-          title = "Card header",
-          f7Slider("obs", "Number of observations", 0, 1000, 500),
-          plotOutput("distPlot"),
-          footer = tagList(
-            f7Button(color = "blue", label = "My button", href = "https://www.google.com"),
-            f7Badge("Badge", color = "green")
-          )
-        )
-      )
-    )
-  ),
-  server = function(input, output) {
-    output$distPlot <- renderPlot({
-      dist <- rnorm(input$obs)
-      hist(dist)
-    })
-  }
- )
-}
 
-
    -
    - -
    +
    toolbar
    +

    Slot for f7Toolbar.

    + + +
    panels
    +

    Slot for f7Panel. +Wrap in tagList if multiple panels.

    + + +
    appbar
    +

    Slot for f7Appbar.

    +
    +
    +

    Author

    +

    David Granjon, dgranjon@ymail.com

    +
    + +
    +

    Examples

    + 
    if(interactive()){
+ library(shiny)
+ library(shinyMobile)
+ shinyApp(
+  ui = f7Page(
+    title = "Single layout",
+    f7SingleLayout(
+      navbar = f7Navbar(
+        title = "Single Layout",
+        hairline = FALSE,
+        shadow = TRUE
+      ),
+      toolbar = f7Toolbar(
+        position = "bottom",
+        f7Link(label = "Link 1", href = "https://www.google.com"),
+        f7Link(label = "Link 2", href = "https://www.google.com")
+      ),
+      # main content
+      f7Shadow(
+        intensity = 10,
+        hover = TRUE,
+        f7Card(
+          title = "Card header",
+          f7Slider("obs", "Number of observations", 0, 1000, 500),
+          plotOutput("distPlot"),
+          footer = tagList(
+            f7Button(color = "blue", label = "My button", href = "https://www.google.com"),
+            f7Badge("Badge", color = "green")
+          )
+        )
+      )
+    )
+  ),
+  server = function(input, output) {
+    output$distPlot <- renderPlot({
+      dist <- rnorm(input$obs)
+      hist(dist)
+    })
+  }
+ )
+}
+
+
    +
    +
    -
    -
    -

    Developed by David Granjon, Victor Perrier, Isabelle Rudolf.

    + +
    +

    Developed by David Granjon, Victor Perrier, Isabelle Rudolf.

    -
    -

    Site built with pkgdown 1.6.1.

    +
    +

    Site built with pkgdown 2.0.7.

    -
    -
    +
    + - - - + diff --git a/docs/reference/f7Skeleton.html b/docs/reference/f7Skeleton.html index 20501314..c94cd6c1 100644 --- a/docs/reference/f7Skeleton.html +++ b/docs/reference/f7Skeleton.html @@ -1,260 +1,170 @@ - - - - - - - -Framework 7 skeleton effect — f7Skeleton • shinyMobile - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -Framework 7 skeleton effect — f7Skeleton • shinyMobile + + Skip to contents + +
    -
    -
    -

    Framework 7 skeleton effect

    - Source: R/f7Skeleton.R - +
    +

    Framework 7 skeleton effect

    + Source: R/f7Skeleton.R +
    f7Skeleton.Rd
    -
    +

    Nice loading overlay for UI elements.

    - 
    f7Skeleton(tag, effect = "fade", duration = 2)
    - -

    Arguments

    - - - - - - - - - - - - - - -
    tag

    Tag to be modified.

    effect

    Choose between "fade", "blink" or "pulse".

    duration

    Effect duration: 2s by default.

    - - -

    Examples

    - 
    if (interactive()) {
- library(shiny)
- library(shinyMobile)
-
- shinyApp(
-   ui = f7Page(
-     title = "Skeletons",
-     f7SingleLayout(
-       navbar = f7Navbar(title = "f7Skeleton"),
-       f7Card(
-         title = "Card header",
-         "This is a simple card with plain text,
-      but cards can also contain their own header,
-      footer, list view, image, or any other element.",
-         footer = tagList(
-           f7Button(color = "blue", label = "My button", href = "https://www.google.com"),
-           f7Badge("Badge", color = "green")
-         )
-       ) %>% f7Skeleton(),
+    
    
+    
    Usage
    
+    
    f7Skeleton(
+  target = ".card",
+  effect = c("fade", "blink", "pulse"),
+  duration = NULL,
+  session = shiny::getDefaultReactiveDomain()
+)
    
+    
    
 
-        f7List(
-         f7ListItem(
-           href = "https://www.google.com",
-           title = "Item 1"
-         ) %>% f7Skeleton(effect = "pulse", duration = 5) ,
-         f7ListItem(
-           href = "https://www.google.com",
-           title = "Item 2"
-         ) %>% f7Skeleton(effect = "pulse", duration = 5)
-        )
-     )
-   ),
-   server = function(input, output) {}
- )
-}
-
    -
    - -
    +
    +

    Arguments

    +
    target
    +

    CSS selector on which to apply the effect. +In general, you apply the effect on a wrapper such as a card, +such that all nested elements receive the skeleton.

    + + +
    effect
    +

    Choose between "fade", "blink" or "pulse".

    + + +
    duration
    +

    Effect duration. NULL by default. If you know +exactly how much time your most time consuming output takes +to render, you can pass an explicit duration. In other cases, +leave it to NULL.

    + + +
    session
    +

    Shiny session object.

    + +
    + +
    +

    Examples

    + 
    if (interactive()) {
+ library(shiny)
+ library(shinyMobile)
+
+ shinyApp(
+   ui = f7Page(
+     title = "Skeletons",
+     f7SingleLayout(
+       navbar = f7Navbar(title = "f7Skeleton"),
+       f7Card(
+         title = "Card header",
+         "This is a simple card with plain text,
+      but cards can also contain their own header,
+      footer, list view, image, or any other element.",
+         footer = tagList(
+           f7Button(color = "blue", label = "My button", href = "https://www.google.com"),
+           f7Badge("Badge", color = "green")
+         )
+       ),
+
+        f7List(
+         f7ListItem(
+           href = "https://www.google.com",
+           title = "Item 1"
+         ),
+         f7ListItem(
+           href = "https://www.google.com",
+           title = "Item 2"
+         )
+        )
+     )
+   ),
+   server = function(input, output, session) {
+     observeEvent(TRUE, {
+       f7Skeleton(".card", "fade", 2)
+     }, once = TRUE)
+   }
+ )
+}
+
    +
    +
    -
    -
    -

    Developed by David Granjon, Victor Perrier, Isabelle Rudolf.

    +
    +

    Developed by David Granjon, Victor Perrier, Isabelle Rudolf.

    -
    -

    Site built with pkgdown 1.6.1.

    +
    +

    Site built with pkgdown 2.0.7.

    -
    -
    +
    + - - - + diff --git a/docs/reference/f7Slide.html b/docs/reference/f7Slide.html index 749d31cd..b569d1cb 100644 --- a/docs/reference/f7Slide.html +++ b/docs/reference/f7Slide.html @@ -1,215 +1,105 @@ - - - - - - - -Framework7 slide — f7Slide • shinyMobile - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - +Framework7 slide — f7Slide • shinyMobile + Skip to contents + +
    -
    -
    -

    Framework7 slide

    - Source: R/f7Swiper.R - +
    +

    Framework7 slide

    + Source: R/f7Swiper.R +
    f7Slide.Rd
    -
    -

    f7Slide is an f7Swiper element.

    +
    +

    f7Slide is an f7Swiper element.

    - 
    f7Slide(...)
    +
    +

    Usage

    + 
    f7Slide(...)
    +
    -

    Arguments

    - - - - - - -
    ...

    Slide content. Any element.

    +
    +

    Arguments

    +
    ...
    +

    Slide content. Any element.

    +
    -
    - -
    +
    -
    -
    -

    Developed by David Granjon, Victor Perrier, Isabelle Rudolf.

    +
    +

    Developed by David Granjon, Victor Perrier, Isabelle Rudolf.

    -
    -

    Site built with pkgdown 1.6.1.

    +
    +

    Site built with pkgdown 2.0.7.

    -
    -
    +
    + - - - + diff --git a/docs/reference/f7SplitLayout.html b/docs/reference/f7SplitLayout.html index 68ec8771..38f01615 100644 --- a/docs/reference/f7SplitLayout.html +++ b/docs/reference/f7SplitLayout.html @@ -1,307 +1,201 @@ - - - - - - - -Framework7 split layout — f7SplitLayout • shinyMobile - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -Framework7 split layout — f7SplitLayout • shinyMobile - + + Skip to contents + +
    -
    -
    -

    Framework7 split layout

    - Source: R/f7Page.R - +
    +

    Framework7 split layout

    + Source: R/f7Page.R +
    f7SplitLayout.Rd
    -
    -

    This is a modified version of the f7SingleLayout. +

    +

    This is a modified version of the f7SingleLayout. It is intended to be used with tablets.

    - 
    f7SplitLayout(
-  ...,
-  navbar,
-  sidebar,
-  toolbar = NULL,
-  panels = NULL,
-  appbar = NULL
-)
    +
    +

    Usage

    + 
    f7SplitLayout(
+  ...,
+  navbar,
+  sidebar,
+  toolbar = NULL,
+  panel = NULL,
+  appbar = NULL
+)
    +
    -

    Arguments

    - - - - - - - - - - - - - - - - - - - - - - - - - - -
    ...

    Content.

    navbar

    Slot for f7Navbar.

    sidebar

    Slot for f7Panel. Particularly we expect the following code: -f7Panel(title = "Sidebar", side = "left", theme = "light", "Blabla", style = "reveal")

    toolbar

    Slot for f7Toolbar.

    panels

    Slot for f7Panel. Expect only a right panel, for instance: -f7Panel(title = "Left Panel", side = "right", theme = "light", "Blabla", style = "cover")

    appbar

    Slot for f7Appbar.

    +
    +

    Arguments

    +
    ...
    +

    Content.

    -

    Author

    -

    David Granjon, dgranjon@ymail.com

    +
    navbar
    +

    Slot for f7Navbar.

    -

    Examples

    - 
    if(interactive()){
- library(shiny)
- library(shinyMobile)
- shinyApp(
-   ui = f7Page(
-     title = "Split layout",
-     f7SplitLayout(
-       sidebar = f7Panel(
-         id = "sidebar",
-         title = "Sidebar",
-         side = "left",
-         theme = "dark",
-         f7PanelMenu(
-           id = "menu",
-           f7PanelItem(tabName = "tab1", title = "Tab 1", icon = f7Icon("envelope"), active = TRUE),
-           f7PanelItem(tabName = "tab2", title = "Tab 2", icon = f7Icon("house"))
-         ),
-         uiOutput("selected_tab")
-       ),
-       navbar = f7Navbar(
-         title = "Split Layout",
-         hairline = FALSE,
-         shadow = TRUE
-       ),
-       toolbar = f7Toolbar(
-         position = "bottom",
-         f7Link(label = "Link 1", href = "https://www.google.com"),
-         f7Link(label = "Link 2", href = "https://www.google.com")
-       ),
-       # main content
-       f7Items(
-         f7Item(
-           tabName = "tab1",
-           f7Slider("obs", "Number of observations:",
-                       min = 0, max = 1000, value = 500
-           ),
-           plotOutput("distPlot")
-         ),
-         f7Item(tabName = "tab2", "Tab 2 content")
-       )
-     )
-   ),
-   server = function(input, output) {
 
-     output$selected_tab <- renderUI({
-      HTML(paste0("Selected tab: ", strong(input$menu)))
-     })
+
    sidebar
    
+
    Slot for f7Panel. Particularly we expect the following code:
+f7Panel(title = "Sidebar", side = "left", theme = "light", "Blabla", style = "reveal")
    
 
-     output$distPlot <- renderPlot({
-       dist <- rnorm(input$obs)
-       hist(dist)
-     })
-   }
- )
-}
 
-
    -
    - -
    +
    toolbar
    +

    Slot for f7Toolbar.

    + + +
    panel
    +

    Slot for f7Panel. Expect only a right panel, for instance: +f7Panel(title = "Left Panel", side = "right", theme = "light", "Blabla", style = "cover")

    + + +
    appbar
    +

    Slot for f7Appbar.

    +
    +
    +

    Author

    +

    David Granjon, dgranjon@ymail.com

    +
    + +
    +

    Examples

    + 
    if(interactive()){
+ library(shiny)
+ library(shinyMobile)
+ shinyApp(
+   ui = f7Page(
+     title = "Split layout",
+     f7SplitLayout(
+       sidebar = f7Panel(
+         id = "sidebar",
+         title = "Sidebar",
+         side = "left",
+         theme = "dark",
+         f7PanelMenu(
+           id = "menu",
+           f7PanelItem(tabName = "tab1", title = "Tab 1", icon = f7Icon("envelope"), active = TRUE),
+           f7PanelItem(tabName = "tab2", title = "Tab 2", icon = f7Icon("house"))
+         ),
+         uiOutput("selected_tab")
+       ),
+       navbar = f7Navbar(
+         title = "Split Layout",
+         hairline = FALSE,
+         shadow = TRUE
+       ),
+       toolbar = f7Toolbar(
+         position = "bottom",
+         f7Link(label = "Link 1", href = "https://www.google.com"),
+         f7Link(label = "Link 2", href = "https://www.google.com")
+       ),
+       # main content
+       f7Items(
+         f7Item(
+           tabName = "tab1",
+           f7Slider("obs", "Number of observations:",
+                       min = 0, max = 1000, value = 500
+           ),
+           plotOutput("distPlot")
+         ),
+         f7Item(tabName = "tab2", "Tab 2 content")
+       )
+     )
+   ),
+   server = function(input, output) {
+
+     output$selected_tab <- renderUI({
+      HTML(paste0("Selected tab: ", strong(input$menu)))
+     })
+
+     output$distPlot <- renderPlot({
+       dist <- rnorm(input$obs)
+       hist(dist)
+     })
+   }
+ )
+}
+
+
    +
    +
    -
    -
    -

    Developed by David Granjon, Victor Perrier, Isabelle Rudolf.

    + +
    +

    Developed by David Granjon, Victor Perrier, Isabelle Rudolf.

    -
    -

    Site built with pkgdown 1.6.1.

    +
    +

    Site built with pkgdown 2.0.7.

    -
    -
    +
    + - - - + diff --git a/docs/reference/f7SubNavbar.html b/docs/reference/f7SubNavbar.html index 8b3943c1..56d577df 100644 --- a/docs/reference/f7SubNavbar.html +++ b/docs/reference/f7SubNavbar.html @@ -1,270 +1,163 @@ - - - - - - - -Framework7 sub navbar — f7SubNavbar • shinyMobile - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -Framework7 sub navbar — f7SubNavbar • shinyMobile + + Skip to contents + +
    -
    -
    -

    Framework7 sub navbar

    - Source: R/f7Navbar.R - +
    +

    Framework7 sub navbar

    + Source: R/f7Navbar.R +
    f7SubNavbar.Rd
    -
    +

    f7SubNavbar creates a nested navbar component for -f7Navbar.

    +f7Navbar.

    - 
    f7SubNavbar(...)
    - -

    Arguments

    - - - - - - -
    ...

    Any elements.

    - - -

    Examples

    - 
    if (interactive()) {
- library(shiny)
- library(shinyMobile)
+    
    
+    
    Usage
    
+    
    f7SubNavbar(...)
    
+    
    
 
- shinyApp(
-  ui = f7Page(
-     title = "Sub Navbar",
-     f7TabLayout(
-        panels = tagList(
-         f7Panel(title = "Left Panel", side = "left", theme = "light", "Blabla", style = "cover"),
-         f7Panel(title = "Right Panel", side = "right", theme = "dark", "Blabla", style = "cover")
-        ),
-        navbar = f7Navbar(
-           title = "SubNavbar",
-           hairline = FALSE,
-           shadow = TRUE,
-           leftPanel = TRUE,
-           rightPanel = TRUE,
-           subNavbar = f7SubNavbar(
-              f7Button(label = "My button"),
-              f7Button(label = "My button"),
-              f7Button(label = "My button")
-           )
-        ),
-        f7Tabs(
-           animated = TRUE,
-           #swipeable = TRUE,
-           f7Tab(
-              tabName = "Tab 1",
-              icon = f7Icon("envelope"),
-              active = TRUE,
-              "Tab 1"
-           ),
-           f7Tab(
-              tabName = "Tab 2",
-              icon = f7Icon("today"),
-              active = FALSE,
-              "Tab 2"
-           ),
-           f7Tab(
-              tabName = "Tab 3",
-              icon = f7Icon("cloud_upload"),
-              active = FALSE,
-              "Tab 3"
-           )
-        )
-     )
-  ),
-  server = function(input, output) {}
- )
-}
-
    -
    - -
    +
    +

    Arguments

    +
    ...
    +

    Any elements.

    + +
    + +
    +

    Examples

    + 
    if (interactive()) {
+ library(shiny)
+ library(shinyMobile)
+
+ shinyApp(
+  ui = f7Page(
+     title = "Sub Navbar",
+     f7TabLayout(
+        panels = tagList(
+         f7Panel(title = "Left Panel", side = "left", theme = "light", "Blabla", style = "cover"),
+         f7Panel(title = "Right Panel", side = "right", theme = "dark", "Blabla", style = "cover")
+        ),
+        navbar = f7Navbar(
+           title = "SubNavbar",
+           hairline = FALSE,
+           shadow = TRUE,
+           leftPanel = TRUE,
+           rightPanel = TRUE,
+           subNavbar = f7SubNavbar(
+              f7Button(label = "My button"),
+              f7Button(label = "My button"),
+              f7Button(label = "My button")
+           )
+        ),
+        f7Tabs(
+           animated = TRUE,
+           #swipeable = TRUE,
+           f7Tab(
+              tabName = "Tab 1",
+              icon = f7Icon("envelope"),
+              active = TRUE,
+              "Tab 1"
+           ),
+           f7Tab(
+              tabName = "Tab 2",
+              icon = f7Icon("today"),
+              active = FALSE,
+              "Tab 2"
+           ),
+           f7Tab(
+              tabName = "Tab 3",
+              icon = f7Icon("cloud_upload"),
+              active = FALSE,
+              "Tab 3"
+           )
+        )
+     )
+  ),
+  server = function(input, output) {}
+ )
+}
+
    +
    +
    -
    -
    -

    Developed by David Granjon, Victor Perrier, Isabelle Rudolf.

    +
    +

    Developed by David Granjon, Victor Perrier, Isabelle Rudolf.

    -
    -

    Site built with pkgdown 1.6.1.

    +
    +

    Site built with pkgdown 2.0.7.

    -
    -
    +
    + - - - + diff --git a/docs/reference/f7Tab.html b/docs/reference/f7Tab.html index d47118bb..6ca1f671 100644 --- a/docs/reference/f7Tab.html +++ b/docs/reference/f7Tab.html @@ -1,237 +1,132 @@ - - - - - - - -Create a Framework7 tab item — f7Tab • shinyMobile - - - - - - - - - - - - - - +Create a Framework7 tab item — f7Tab • shinyMobile + Skip to contents + - +
    +
    +
    +

    Create a Framework7 tab item

    + Source: R/f7-tabs.R +
    f7Tab.Rd
    +
    +
    +

    Build a Framework7 tab item

    +
    +
    +

    Usage

    + 
    f7Tab(..., title = NULL, tabName, icon = NULL, active = FALSE, hidden = FALSE)
    +
    - - +
    +

    Arguments

    +
    ...
    +

    Item content.

    - - - +
    title
    +

    Tab title (name).

    +
    tabName
    +

    Item id. Must be unique, without space nor punctuation symbols.

    - - - - - - - - - - -
    -
    - - +
    active
    +

    Whether the tab is active at start. Do not select multiple tabs, only +the first one will be set to active.

    -
    -
    -
    -
    -

    Create a Framework7 tab item

    - Source: R/f7-tabs.R - -
    +
    hidden
    +

    Whether to hide the tab. This is useful when you want to add invisible tabs +(that do not appear in the tabbar) but you can still navigate with updateF7Tabs.

    -
    -

    Build a Framework7 tab item

    +
    +
    +

    Author

    +

    David Granjon, dgranjon@ymail.com

    - 
    f7Tab(..., tabName, icon = NULL, active = FALSE, hidden = FALSE)
    - -

    Arguments

    - - - - - - - - - - - - - - - - - - - - - - -
    ...

    Item content.

    tabName

    Item id. Must be unique.

    icon

    Item icon. Expect f7Icon function with the suitable lib argument -(either md or ios or NULL for native f7 icons).

    active

    Whether the tab is active at start. Do not select multiple tabs, only -the first one will be set to active.

    hidden

    Whether to hide the tab. This is useful when you want to add invisible tabs -(that do not appear in the tabbar) but you can still navigate with updateF7Tabs.

    - -

    Author

    - -

    David Granjon, dgranjon@ymail.com

    +
    -
    - -
    - -
    -
    -

    Developed by David Granjon, Victor Perrier, Isabelle Rudolf.

    +
    +

    Developed by David Granjon, Victor Perrier, Isabelle Rudolf.

    -
    -

    Site built with pkgdown 1.6.1.

    +
    +

    Site built with pkgdown 2.0.7.

    -
    -
    +
    + - - - + diff --git a/docs/reference/f7TabLayout.html b/docs/reference/f7TabLayout.html index f2a35293..6c820bc0 100644 --- a/docs/reference/f7TabLayout.html +++ b/docs/reference/f7TabLayout.html @@ -1,379 +1,273 @@ - - - - - - - -Framework7 tab layout — f7TabLayout • shinyMobile - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -Framework7 tab layout — f7TabLayout • shinyMobile + + Skip to contents + +
    -
    -
    -

    Framework7 tab layout

    - Source: R/f7Page.R - +
    +

    Framework7 tab layout

    + Source: R/f7Page.R +
    f7TabLayout.Rd
    -
    +

    f7TabLayout create a single page app with multiple tabs, giving the illusion of a multi pages experience.

    - 
    f7TabLayout(..., navbar, messagebar = NULL, panels = NULL, appbar = NULL)
    +
    +

    Usage

    + 
    f7TabLayout(..., navbar, messagebar = NULL, panels = NULL, appbar = NULL)
    +
    -

    Arguments

    - - - - - - - - - - - - - - - - - - - - - - -
    ...

    Slot for f7Tabs.

    navbar

    Slot for f7Navbar.

    messagebar

    Slot for f7MessageBar.

    panels

    Slot for f7Panel. -Wrap in tagList if multiple panels.

    appbar

    Slot for f7Appbar.

    +
    +

    Arguments

    +
    ...
    +

    Slot for f7Tabs.

    -

    Author

    -

    David Granjon, dgranjon@ymail.com

    +
    navbar
    +

    Slot for f7Navbar.

    -

    Examples

    - 
    if(interactive()){
- library(shiny)
- library(shinyMobile)
- library(shinyWidgets)
 
- shinyApp(
-   ui = f7Page(
-     title = "Tab layout",
-     f7TabLayout(
-       tags$head(
-         tags$script(
-           "$(function(){
-               $('#tapHold').on('taphold', function () {
-                 app.dialog.alert('Tap hold fired!');
-               });
-             });
-             "
-         )
-       ),
-       panels = tagList(
-         f7Panel(title = "Left Panel", side = "left", theme = "light", "Blabla", effect = "cover"),
-         f7Panel(title = "Right Panel", side = "right", theme = "dark", "Blabla", effect = "cover")
-       ),
-       navbar = f7Navbar(
-         title = "Tabs",
-         hairline = FALSE,
-         shadow = TRUE,
-         leftPanel = TRUE,
-         rightPanel = TRUE
-       ),
-       f7Tabs(
-         animated = FALSE,
-         swipeable = TRUE,
-         f7Tab(
-           tabName = "Tab 1",
-           icon = f7Icon("envelope"),
-           active = TRUE,
-           f7Shadow(
-             intensity = 10,
-             hover = TRUE,
-             f7Card(
-               title = "Card header",
-               f7Stepper(
-                 "obs1",
-                 "Number of observations",
-                 min = 0,
-                 max = 1000,
-                 value = 500,
-                 step = 100
-               ),
-               plotOutput("distPlot1"),
-               footer = tagList(
-                 f7Button(inputId = "tapHold", label = "My button"),
-                 f7Badge("Badge", color = "green")
-               )
-             )
-           )
-         ),
-         f7Tab(
-           tabName = "Tab 2",
-           icon = f7Icon("today"),
-           active = FALSE,
-           f7Shadow(
-             intensity = 10,
-             hover = TRUE,
-             f7Card(
-               title = "Card header",
-               f7Select(
-                 inputId = "obs2",
-                 label = "Distribution type:",
-                 choices = c(
-                   "Normal" = "norm",
-                   "Uniform" = "unif",
-                   "Log-normal" = "lnorm",
-                   "Exponential" = "exp"
-                 )
-               ),
-               plotOutput("distPlot2"),
-               footer = tagList(
-                 f7Button(label = "My button", href = "https://www.google.com"),
-                 f7Badge("Badge", color = "orange")
-               )
-             )
-           )
-         ),
-         f7Tab(
-           tabName = "Tab 3",
-           icon = f7Icon("cloud_upload"),
-           active = FALSE,
-           f7Shadow(
-             intensity = 10,
-             hover = TRUE,
-             f7Card(
-               title = "Card header",
-               f7SmartSelect(
-                 inputId = "variable",
-                 label = "Variables to show:",
-                 c("Cylinders" = "cyl",
-                   "Transmission" = "am",
-                   "Gears" = "gear"),
-                 multiple = TRUE,
-                 selected = "cyl"
-               ),
-               tableOutput("data"),
-               footer = tagList(
-                 f7Button(label = "My button", href = "https://www.google.com"),
-                 f7Badge("Badge", color = "green")
-               )
-             )
-           )
-         )
-       )
-     )
-   ),
-   server = function(input, output) {
-     output$distPlot1 <- renderPlot({
-       dist <- rnorm(input$obs1)
-       hist(dist)
-     })
+
    messagebar
    
+
    Slot for f7MessageBar.
    
 
-     output$distPlot2 <- renderPlot({
-       dist <- switch(
-         input$obs2,
-         norm = rnorm,
-         unif = runif,
-         lnorm = rlnorm,
-         exp = rexp,
-         rnorm
-       )
 
-       hist(dist(500))
-     })
+
    panels
    
+
    Slot for f7Panel.
+Wrap in tagList if multiple panels.
    
 
-     output$data <- renderTable({
-       mtcars[, c("mpg", input$variable), drop = FALSE]
-     }, rownames = TRUE)
-   }
- )
-}
 
-
    -
    - -
    +
    appbar
    +

    Slot for f7Appbar.

    +
    +
    +

    Author

    +

    David Granjon, dgranjon@ymail.com

    +
    -
    -
    -

    Developed by David Granjon, Victor Perrier, Isabelle Rudolf.

    +
    +

    Examples

    + 
    if(interactive()){
+ library(shiny)
+ library(shinyMobile)
+ library(shinyWidgets)
+
+ shinyApp(
+   ui = f7Page(
+     title = "Tab layout",
+     f7TabLayout(
+       tags$head(
+         tags$script(
+           "$(function(){
+               $('#tapHold').on('taphold', function () {
+                 app.dialog.alert('Tap hold fired!');
+               });
+             });
+             "
+         )
+       ),
+       panels = tagList(
+         f7Panel(title = "Left Panel", side = "left", theme = "light", "Blabla", effect = "cover"),
+         f7Panel(title = "Right Panel", side = "right", theme = "dark", "Blabla", effect = "cover")
+       ),
+       navbar = f7Navbar(
+         title = "Tabs",
+         hairline = FALSE,
+         shadow = TRUE,
+         leftPanel = TRUE,
+         rightPanel = TRUE
+       ),
+       f7Tabs(
+         animated = FALSE,
+         swipeable = TRUE,
+         f7Tab(
+           tabName = "Tab1",
+           icon = f7Icon("envelope"),
+           active = TRUE,
+           f7Shadow(
+             intensity = 10,
+             hover = TRUE,
+             f7Card(
+               title = "Card header",
+               f7Stepper(
+                 "obs1",
+                 "Number of observations",
+                 min = 0,
+                 max = 1000,
+                 value = 500,
+                 step = 100
+               ),
+               plotOutput("distPlot1"),
+               footer = tagList(
+                 f7Button(inputId = "tapHold", label = "My button"),
+                 f7Badge("Badge", color = "green")
+               )
+             )
+           )
+         ),
+         f7Tab(
+           tabName = "Tab2",
+           icon = f7Icon("today"),
+           active = FALSE,
+           f7Shadow(
+             intensity = 10,
+             hover = TRUE,
+             f7Card(
+               title = "Card header",
+               f7Select(
+                 inputId = "obs2",
+                 label = "Distribution type:",
+                 choices = c(
+                   "Normal" = "norm",
+                   "Uniform" = "unif",
+                   "Log-normal" = "lnorm",
+                   "Exponential" = "exp"
+                 )
+               ),
+               plotOutput("distPlot2"),
+               footer = tagList(
+                 f7Button(label = "My button", href = "https://www.google.com"),
+                 f7Badge("Badge", color = "orange")
+               )
+             )
+           )
+         ),
+         f7Tab(
+           tabName = "Tab3",
+           icon = f7Icon("cloud_upload"),
+           active = FALSE,
+           f7Shadow(
+             intensity = 10,
+             hover = TRUE,
+             f7Card(
+               title = "Card header",
+               f7SmartSelect(
+                 inputId = "variable",
+                 label = "Variables to show:",
+                 c("Cylinders" = "cyl",
+                   "Transmission" = "am",
+                   "Gears" = "gear"),
+                 multiple = TRUE,
+                 selected = "cyl"
+               ),
+               tableOutput("data"),
+               footer = tagList(
+                 f7Button(label = "My button", href = "https://www.google.com"),
+                 f7Badge("Badge", color = "green")
+               )
+             )
+           )
+         )
+       )
+     )
+   ),
+   server = function(input, output) {
+     output$distPlot1 <- renderPlot({
+       dist <- rnorm(input$obs1)
+       hist(dist)
+     })
+
+     output$distPlot2 <- renderPlot({
+       dist <- switch(
+         input$obs2,
+         norm = rnorm,
+         unif = runif,
+         lnorm = rlnorm,
+         exp = rexp,
+         rnorm
+       )
+
+       hist(dist(500))
+     })
+
+     output$data <- renderTable({
+       mtcars[, c("mpg", input$variable), drop = FALSE]
+     }, rownames = TRUE)
+   }
+ )
+}
+
+
    +
    +
    + + +
    +

    Developed by David Granjon, Victor Perrier, Isabelle Rudolf.

    -
    -

    Site built with pkgdown 1.6.1.

    +
    +

    Site built with pkgdown 2.0.7.

    -
    -
    +
    + - - - + diff --git a/docs/reference/f7TabLink.html b/docs/reference/f7TabLink.html index fd67b53b..09f2fc1e 100644 --- a/docs/reference/f7TabLink.html +++ b/docs/reference/f7TabLink.html @@ -1,223 +1,113 @@ - - - - - - - -Special button/link to insert in the tabbar — f7TabLink • shinyMobile - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - +Special button/link to insert in the tabbar — f7TabLink • shinyMobile + Skip to contents + +
    -
    -
    -

    Special button/link to insert in the tabbar

    - Source: R/f7-tabs.R - +
    +

    Special button/link to insert in the tabbar

    + Source: R/f7-tabs.R +
    f7TabLink.Rd
    -
    -

    Use in the .items slot of f7Tabs.

    +
    +

    Use in the .items slot of f7Tabs.

    - 
    f7TabLink(..., icon = NULL, label = NULL)
    - -

    Arguments

    - - - - - - - - - - - - - - -
    ...

    Any attribute like `data-sheet`, id, ...

    icon

    Expect f7Icon.

    label

    Button label.

    +
    +

    Usage

    + 
    f7TabLink(..., icon = NULL, label = NULL)
    +
    +
    +

    Arguments

    +
    ...
    +

    Any attribute like `data-sheet`, id, ...

    + + +
    icon
    +

    Expect f7Icon.

    -
    - -
    +
    label
    +

    Button label.

    -
    -
    -

    Developed by David Granjon, Victor Perrier, Isabelle Rudolf.

    +
    + +
    + + +
    +

    Developed by David Granjon, Victor Perrier, Isabelle Rudolf.

    -
    -

    Site built with pkgdown 1.6.1.

    +
    +

    Site built with pkgdown 2.0.7.

    -
    -
    +
    + - - - + diff --git a/docs/reference/f7Table.html b/docs/reference/f7Table.html index aec209bf..878cb11a 100644 --- a/docs/reference/f7Table.html +++ b/docs/reference/f7Table.html @@ -1,246 +1,138 @@ - - - - - - - -Framework7 table — f7Table • shinyMobile - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - +Framework7 table — f7Table • shinyMobile + Skip to contents + +
    -
    -
    -

    Framework7 table

    - Source: R/f7-tables.R - +
    +

    Framework7 table

    + Source: R/f7-tables.R +
    f7Table.Rd
    -
    +

    Creates a table container.

    - 
    f7Table(data, colnames = NULL, card = FALSE)
    - -

    Arguments

    - - - - - - - - - - - - - - -
    data

    A data.frame.

    colnames

    Column names to use, if NULL uses data column names.

    card

    Whether to use as card.

    - - -

    Examples

    - 
    if(interactive()){
- library(shiny)
- library(shinyMobile)
- shiny::shinyApp(
-  ui = f7Page(
-    title = "My app",
-    f7SingleLayout(
-       navbar = f7Navbar(
-         title = "f7Table"
-       ),
-      uiOutput("table")
-    )
-  ),
-  server = function(input, output) {
-    output$table <- renderUI({
-      f7Table(mtcars)
-    })
-  }
- )
-}
-
-
    -
    - -
    +
    +

    Usage

    + 
    f7Table(data, colnames = NULL, card = FALSE)
    +
    + +
    +

    Arguments

    +
    data
    +

    A data.frame.

    + + +
    colnames
    +

    Column names to use, if NULL uses data column names.

    + + +
    card
    +

    Whether to use as card.

    + +
    + +
    +

    Examples

    + 
    if(interactive()){
+ library(shiny)
+ library(shinyMobile)
+ shiny::shinyApp(
+  ui = f7Page(
+    title = "My app",
+    f7SingleLayout(
+       navbar = f7Navbar(
+         title = "f7Table"
+       ),
+      uiOutput("table")
+    )
+  ),
+  server = function(input, output) {
+    output$table <- renderUI({
+      f7Table(mtcars)
+    })
+  }
+ )
+}
+
+
    +
    +
    -
    -
    -

    Developed by David Granjon, Victor Perrier, Isabelle Rudolf.

    +
    +

    Developed by David Granjon, Victor Perrier, Isabelle Rudolf.

    -
    -

    Site built with pkgdown 1.6.1.

    +
    +

    Site built with pkgdown 2.0.7.

    -
    -
    +
    + - - - + diff --git a/docs/reference/f7Tabs.html b/docs/reference/f7Tabs.html index cb89dc5b..6251fa35 100644 --- a/docs/reference/f7Tabs.html +++ b/docs/reference/f7Tabs.html @@ -1,407 +1,301 @@ - - - - - - - -Create a Framework7 tabs — f7Tabs • shinyMobile - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + Skip to contents + +
    -
    -
    -

    Create a Framework7 tabs

    - Source: R/f7-tabs.R - +
    +

    Create a Framework7 tabs

    + Source: R/f7-tabs.R +
    f7Tabs.Rd
    -
    -

    By default, f7Tabs are used within the f7TabLayout. However, you +

    +

    By default, f7Tabs are used within the f7TabLayout. However, you may use them as standalone components if you specify a the segmented or strong styles.

    - 
    f7Tabs(
-  ...,
-  .items = NULL,
-  id = NULL,
-  swipeable = FALSE,
-  animated = TRUE,
-  style = c("toolbar", "segmented", "strong")
-)
    +
    +

    Usage

    + 
    f7Tabs(
+  ...,
+  .items = NULL,
+  id = NULL,
+  swipeable = FALSE,
+  animated = TRUE,
+  style = c("toolbar", "segmented", "strong")
+)
    +
    -

    Arguments

    - - - - - - - - - - - - - - - - - - - - - - - - - - -
    ...

    Slot for f7Tab.

    .items

    Slot for other items that could be part of the toolbar such as -buttons or f7TabLink. This may be useful to open an f7Sheet from -the tabbar.

    id

    Optional to get the id of the currently selected f7Tab.

    swipeable

    Whether to allow finger swip. FALSE by default. Only for touch-screens. -Not compatible with animated.

    animated

    Whether to show transition between tabs. TRUE by default. -Not compatible with swipeable.

    style

    Tabs style: c("toolbar", "segmented", "strong"). If style -is toolbar, then f7Tab have a toolbar behavior.

    +
    +

    Arguments

    +
    ...
    +

    Slot for f7Tab.

    -

    Author

    -

    David Granjon, dgranjon@ymail.com

    +
    .items
    +

    Slot for other items that could be part of the toolbar such as +buttons or f7TabLink. This may be useful to open an f7Sheet from +the tabbar.

    -

    Examples

    - 
    if (interactive()) {
- # tabs as toolbar
- library(shiny)
- library(shinyMobile)
- shiny::shinyApp(
-  ui = f7Page(
-    title = "Tab Layout",
-    f7TabLayout(
-      navbar = f7Navbar(title = HTML(paste("Currently selected:", textOutput("selected")))),
-      f7Tabs(
-        id = "tabdemo",
-        swipeable = TRUE,
-        animated = FALSE,
-        f7Tab(
-         tabName = "Tab 1",
-         f7Sheet(
-          id = "sheet",
-          label = "More",
-          orientation = "bottom",
-          swipeToClose = TRUE,
-          swipeToStep = TRUE,
-          backdrop = TRUE,
-          "Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-          Quisque ac diam ac quam euismod porta vel a nunc. Quisque sodales
-          scelerisque est, at porta justo cursus ac"
-         )
-        ),
-        f7Tab(tabName = "Tab 2", "tab 2 text"),
-        f7Tab(tabName = "Tab 3", "tab 3 text"),
-        .items = f7TabLink(
-         icon = f7Icon("bolt_fill"),
-         label = "Toggle Sheet",
-         `data-sheet` = "#sheet",
-         class = "sheet-open"
-        )
-      )
-    )
-  ),
-  server = function(input, output) {
-    output$selected <- renderText(input$tabdemo)
-  }
- )
- # standalone tabs
- library(shiny)
- library(shinyMobile)
- shiny::shinyApp(
-   ui = f7Page(
-     title = "My app",
-     f7SingleLayout(
-       navbar = f7Navbar(
-         title = "Standalone tabs",
-         hairline = FALSE,
-         shadow = TRUE
-       ),
-       f7Tabs(
-         id = "tabs",
-         style = "strong", animated = FALSE, swipeable = TRUE,
-         f7Tab(
-           tabName = "Tab 1",
-           icon = f7Icon("envelope"),
-           active = TRUE,
-           f7Shadow(
-             intensity = 10,
-             hover = TRUE,
-             f7Card(
-               title = "Card header",
-               f7Stepper(
-                 "obs1",
-                 "Number of observations",
-                 min = 0,
-                 max = 1000,
-                 value = 500,
-                 step = 100
-               ),
-               plotOutput("distPlot")
-             )
-           )
-         ),
-         f7Tab(
-           tabName = "Tab 2",
-           icon = f7Icon("today"),
-           active = FALSE,
-           f7Shadow(
-             intensity = 10,
-             hover = TRUE,
-             f7Card(
-               title = "Card header",
-               f7Select(
-                 inputId = "obs2",
-                 label = "Distribution type:",
-                 choices = c(
-                   "Normal" = "norm",
-                   "Uniform" = "unif",
-                   "Log-normal" = "lnorm",
-                   "Exponential" = "exp"
-                 )
-               ),
-               plotOutput("distPlot2")
-             )
-           )
-         ),
-         f7Tab(
-           tabName = "Tab 3",
-           icon = f7Icon("cloud_upload"),
-           active = FALSE,
-           f7Shadow(
-             intensity = 10,
-             hover = TRUE,
-             f7Card(
-               title = "Card header",
-               f7SmartSelect(
-                 inputId = "variable",
-                 label = "Variables to show:",
-                 c("Cylinders" = "cyl",
-                   "Transmission" = "am",
-                   "Gears" = "gear"),
-                 multiple = TRUE,
-                 selected = "cyl"
-               ),
-               tableOutput("data")
-             )
-           )
-         )
-       )
-     )
-   ),
-   server = function(input, output) {
-     output$distPlot <- renderPlot({
-       dist <- rnorm(input$obs1)
-       hist(dist)
-     })
 
-     output$distPlot2 <- renderPlot({
-       dist <- switch(
-         input$obs2,
-         norm = rnorm,
-         unif = runif,
-         lnorm = rlnorm,
-         exp = rexp,
-         rnorm
-       )
+
    id
    
+
    Optional to get the id of the currently selected f7Tab.
    
 
-       hist(dist(500))
-     })
 
-     output$data <- renderTable({
-       mtcars[, c("mpg", input$variable), drop = FALSE]
-     }, rownames = TRUE)
-   }
- )
-}
-
    -
    - -
    +
    swipeable
    +

    Whether to allow finger swip. FALSE by default. Only for touch-screens. +Not compatible with animated.

    + + +
    animated
    +

    Whether to show transition between tabs. TRUE by default. +Not compatible with swipeable.

    + + +
    style
    +

    Tabs style: c("toolbar", "segmented", "strong"). If style +is toolbar, then f7Tab have a toolbar behavior.

    +
    +
    +

    Author

    +

    David Granjon, dgranjon@ymail.com

    +
    + +
    +

    Examples

    + 
    if (interactive()) {
+ # tabs as toolbar
+ library(shiny)
+ library(shinyMobile)
+ shiny::shinyApp(
+  ui = f7Page(
+    title = "Tab Layout",
+    f7TabLayout(
+      navbar = f7Navbar(title = HTML(paste("Currently selected:", textOutput("selected")))),
+      f7Tabs(
+        id = "tabdemo",
+        swipeable = TRUE,
+        animated = FALSE,
+        f7Tab(
+         title = "Tab 1",
+         tabName = "Tab1",
+         f7Sheet(
+          id = "sheet",
+          label = "More",
+          orientation = "bottom",
+          swipeToClose = TRUE,
+          swipeToStep = TRUE,
+          backdrop = TRUE,
+          "Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+          Quisque ac diam ac quam euismod porta vel a nunc. Quisque sodales
+          scelerisque est, at porta justo cursus ac"
+         )
+        ),
+        f7Tab(title = "Tab 2", tabName = "Tab2", "tab 2 text"),
+        f7Tab(title = "Tab 3", tabName = "Tab3", "tab 3 text"),
+        .items = f7TabLink(
+         icon = f7Icon("bolt_fill"),
+         label = "Toggle Sheet",
+         `data-sheet` = "#sheet",
+         class = "sheet-open"
+        )
+      )
+    )
+  ),
+  server = function(input, output) {
+    output$selected <- renderText(input$tabdemo)
+  }
+ )
+ # standalone tabs
+ library(shiny)
+ library(shinyMobile)
+ shiny::shinyApp(
+   ui = f7Page(
+     title = "My app",
+     f7SingleLayout(
+       navbar = f7Navbar(
+         title = "Standalone tabs",
+         hairline = FALSE,
+         shadow = TRUE
+       ),
+       f7Tabs(
+         id = "tabs",
+         style = "strong", animated = FALSE, swipeable = TRUE,
+         f7Tab(
+           tabName = "Tab1",
+           icon = f7Icon("envelope"),
+           active = TRUE,
+           f7Shadow(
+             intensity = 10,
+             hover = TRUE,
+             f7Card(
+               title = "Card header",
+               f7Stepper(
+                 "obs1",
+                 "Number of observations",
+                 min = 0,
+                 max = 1000,
+                 value = 500,
+                 step = 100
+               ),
+               plotOutput("distPlot")
+             )
+           )
+         ),
+         f7Tab(
+           tabName = "Tab2",
+           icon = f7Icon("today"),
+           f7Shadow(
+             intensity = 10,
+             hover = TRUE,
+             f7Card(
+               title = "Card header",
+               f7Select(
+                 inputId = "obs2",
+                 label = "Distribution type:",
+                 choices = c(
+                   "Normal" = "norm",
+                   "Uniform" = "unif",
+                   "Log-normal" = "lnorm",
+                   "Exponential" = "exp"
+                 )
+               ),
+               plotOutput("distPlot2")
+             )
+           )
+         ),
+         f7Tab(
+           tabName = "Tab3",
+           icon = f7Icon("cloud_upload"),
+           f7Shadow(
+             intensity = 10,
+             hover = TRUE,
+             f7Card(
+               title = "Card header",
+               f7SmartSelect(
+                 inputId = "variable",
+                 label = "Variables to show:",
+                 c("Cylinders" = "cyl",
+                   "Transmission" = "am",
+                   "Gears" = "gear"),
+                 multiple = TRUE,
+                 selected = "cyl"
+               ),
+               tableOutput("data")
+             )
+           )
+         )
+       )
+     )
+   ),
+   server = function(input, output) {
+     output$distPlot <- renderPlot({
+       dist <- rnorm(input$obs1)
+       hist(dist)
+     })
+
+     output$distPlot2 <- renderPlot({
+       dist <- switch(
+         input$obs2,
+         norm = rnorm,
+         unif = runif,
+         lnorm = rlnorm,
+         exp = rexp,
+         rnorm
+       )
+
+       hist(dist(500))
+     })
+
+     output$data <- renderTable({
+       mtcars[, c("mpg", input$variable), drop = FALSE]
+     }, rownames = TRUE)
+   }
+ )
+}
+
    +
    +
    -
    -
    -

    Developed by David Granjon, Victor Perrier, Isabelle Rudolf.

    + +
    +

    Developed by David Granjon, Victor Perrier, Isabelle Rudolf.

    -
    -

    Site built with pkgdown 1.6.1.

    +
    +

    Site built with pkgdown 2.0.7.

    -
    -
    +
    + - - - + diff --git a/docs/reference/f7TapHold.html b/docs/reference/f7TapHold.html index cafb23bd..b21e5403 100644 --- a/docs/reference/f7TapHold.html +++ b/docs/reference/f7TapHold.html @@ -1,248 +1,140 @@ - - - - - - - -Framework7 tapHold module — f7TapHold • shinyMobile - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - +Framework7 tapHold module — f7TapHold • shinyMobile + Skip to contents + +
    -
    -
    -

    Framework7 tapHold module

    - Source: R/f7TapHold.R - +
    +

    Framework7 tapHold module

    + Source: R/f7TapHold.R +
    f7TapHold.Rd
    -
    +

    f7TapHold is triggered after long press on an element, from the server.

    - 
    f7TapHold(target, callback, session = shiny::getDefaultReactiveDomain())
    - -

    Arguments

    - - - - - - - - - - - - - - -
    target

    Element to apply the tapHold event on. Must be a jQuery selector, -such as "#id" or ".class", ".class1, .class2", "a"...

    callback

    Javascript callback.

    session

    Shiny session object.

    - - -

    Examples

    - 
    if (interactive()) {
-library(shiny)
-library(shinyMobile)
-
- shinyApp(
-   ui = f7Page(
-     title = "Taphold",
-     f7SingleLayout(
-       navbar = f7Navbar(title = "f7TapHold"),
-       f7Button(inputId = "pressme", label = "Press me")
-     )
-   ),
-   server = function(input, output, session) {
-    observe({
-      f7TapHold(
-       target = "#pressme",
-       callback = "app.dialog.alert('Tap hold fired!')"
-      )
-    })
-   }
- )
-}
-
    -
    - -
    +
    +

    Usage

    + 
    f7TapHold(target, callback, session = shiny::getDefaultReactiveDomain())
    +
    + +
    +

    Arguments

    +
    target
    +

    Element to apply the tapHold event on. Must be a jQuery selector, +such as "#id" or ".class", ".class1, .class2", "a"...

    + + +
    callback
    +

    Javascript callback.

    + + +
    session
    +

    Shiny session object.

    + +
    + +
    +

    Examples

    + 
    if (interactive()) {
+library(shiny)
+library(shinyMobile)
+
+ shinyApp(
+   ui = f7Page(
+     title = "Taphold",
+     f7SingleLayout(
+       navbar = f7Navbar(title = "f7TapHold"),
+       f7Button(inputId = "pressme", label = "Press me")
+     )
+   ),
+   server = function(input, output, session) {
+    observe({
+      f7TapHold(
+       target = "#pressme",
+       callback = "app.dialog.alert('Tap hold fired!')"
+      )
+    })
+   }
+ )
+}
+
    +
    +
    -
    -
    -

    Developed by David Granjon, Victor Perrier, Isabelle Rudolf.

    +
    +

    Developed by David Granjon, Victor Perrier, Isabelle Rudolf.

    -
    -

    Site built with pkgdown 1.6.1.

    +
    +

    Site built with pkgdown 2.0.7.

    -
    -
    +
    + - - - + diff --git a/docs/reference/f7Toast.html b/docs/reference/f7Toast.html index 7429bbbf..4048917a 100644 --- a/docs/reference/f7Toast.html +++ b/docs/reference/f7Toast.html @@ -1,282 +1,174 @@ - - - - - - +Framework7 toast — f7Toast • shinyMobile + Skip to contents + -Framework7 toast — f7Toast • shinyMobile +
    +
    +
    +

    Framework7 toast

    + Source: R/f7Toast.R +
    f7Toast.Rd
    +
    - - - +
    +

    f7Toast creates a small toast notification from the server side.

    +
    - - +
    +

    Usage

    + 
    f7Toast(
+  text,
+  position = c("bottom", "top", "center"),
+  closeButton = TRUE,
+  closeButtonText = "close",
+  closeButtonColor = "red",
+  closeTimeout = 3000,
+  icon = NULL,
+  ...,
+  session = shiny::getDefaultReactiveDomain()
+)
    +
    - - - +
    +

    Arguments

    +
    text
    +

    Toast content.

    - - - +
    position
    +

    Toast position c("bottom", "top", "center").

    - - +
    closeButton
    +

    Whether to close the toast with a button. +TRUE by default.

    - - - +
    closeButtonText
    +

    Close button text.

    +
    closeButtonColor
    +

    Close button color.

    - - - - - - - - - - -
    -
    - - +
    icon
    +

    Optional. Expect f7Icon. Warning: +Adding icon will hide the close button.

    -
    -
    -
    -
    -

    Framework7 toast

    - Source: R/f7Toast.R - -
    +
    ...
    +

    Other options. See https://framework7.io/docs/toast.html#toast-parameters.

    -
    -

    f7Toast creates a small toast notification from the server side.

    -
    - 
    f7Toast(
-  text,
-  position = c("bottom", "top", "center"),
-  closeButton = TRUE,
-  closeButtonText = "close",
-  closeButtonColor = "red",
-  closeTimeout = 3000,
-  icon = NULL,
-  ...,
-  session = shiny::getDefaultReactiveDomain()
-)
    - -

    Arguments

    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    text

    Toast content.

    position

    Toast position c("bottom", "top", "center").

    closeButton

    Whether to close the toast with a button. -TRUE by default.

    closeButtonText

    Close button text.

    closeButtonColor

    Close button color.

    closeTimeout

    Time before toast closes.

    icon

    Optional. Expect f7Icon. Warning: -Adding icon will hide the close button.

    ...

    Other options. See https://framework7.io/docs/toast.html#toast-parameters.

    session

    Shiny session.

    - - -

    Examples

    - 
    if (interactive()) {
- library(shiny)
- library(shinyMobile)
- shinyApp(
-  ui = f7Page(
-    title = "Toast",
-    f7SingleLayout(
-      navbar = f7Navbar(title = "f7Toast"),
-      f7Button(inputId = "toast", label = "Open Toast")
-    )
-  ),
-  server = function(input, output, session) {
-    observeEvent(input$toast, {
-      f7Toast(
-        position = "top",
-        text = "I am a toast. Eat me!"
-      )
-    })
-  }
- )
-}
-
    -
    - -
    +
    session
    +

    Shiny session.

    +
    -
    + + +
    +

    Developed by David Granjon, Victor Perrier, Isabelle Rudolf.

    -
    -

    Site built with pkgdown 1.6.1.

    +
    +

    Site built with pkgdown 2.0.7.

    -
    -
    +
    + - - - + diff --git a/docs/reference/f7Toolbar.html b/docs/reference/f7Toolbar.html index 89ff02bb..799b7396 100644 --- a/docs/reference/f7Toolbar.html +++ b/docs/reference/f7Toolbar.html @@ -1,247 +1,139 @@ - - - - - - - -Framework7 Toolbar — f7Toolbar • shinyMobile - - - - - - - - - - - - - - +Framework7 Toolbar — f7Toolbar • shinyMobile + Skip to contents + - +
    +
    +
    +

    Framework7 Toolbar

    + Source: R/f7Toolbar.R +
    f7Toolbar.Rd
    +
    +
    +

    f7Toolbar is a layout element located at the bottom or top. It is +internally used by f7Tabs.

    +
    +
    +

    Usage

    + 
    f7Toolbar(
+  ...,
+  position = c("top", "bottom"),
+  hairline = TRUE,
+  shadow = TRUE,
+  icons = FALSE,
+  scrollable = FALSE
+)
    +
    - - +
    +

    Arguments

    +
    ...
    +

    Slot for f7Link or any other element.

    - - - +
    position
    +

    Tabs position: "top" or "bottom".

    +
    hairline
    +

    Whether to display a thin border on the top of the toolbar. TRUE by default.

    - - - - - - - - - - -
    -
    - - +
    icons
    +

    Whether to use icons instead of text. Either ios or md icons.

    -
    -
    -
    -
    -

    Framework7 Toolbar

    - Source: R/f7Toolbar.R - -
    +
    scrollable
    +

    Whether to allow scrolling. FALSE by default.

    -
    -

    f7Toolbar is a layout element located at the bottom or top. It is -internally used by f7Tabs.

    +
    +
    +

    Author

    +

    David Granjon, dgranjon@ymail.com

    - 
    f7Toolbar(
-  ...,
-  position = c("top", "bottom"),
-  hairline = TRUE,
-  shadow = TRUE,
-  icons = FALSE,
-  scrollable = FALSE
-)
    - -

    Arguments

    - - - - - - - - - - - - - - - - - - - - - - - - - - -
    ...

    Slot for f7Link or any other element.

    position

    Tabs position: "top" or "bottom".

    hairline

    Whether to display a thin border on the top of the toolbar. TRUE by default.

    shadow

    Whether to display a shadow. TRUE by default.

    icons

    Whether to use icons instead of text. Either ios or md icons.

    scrollable

    Whether to allow scrolling. FALSE by default.

    - -

    Author

    - -

    David Granjon, dgranjon@ymail.com

    +
    -
    - -
    - -
    -
    -

    Developed by David Granjon, Victor Perrier, Isabelle Rudolf.

    +
    +

    Developed by David Granjon, Victor Perrier, Isabelle Rudolf.

    -
    -

    Site built with pkgdown 1.6.1.

    +
    +

    Site built with pkgdown 2.0.7.

    -
    -
    +
    + - - - + diff --git a/docs/reference/getF7Colors.html b/docs/reference/getF7Colors.html index 690ebb4f..bca5ad29 100644 --- a/docs/reference/getF7Colors.html +++ b/docs/reference/getF7Colors.html @@ -1,210 +1,105 @@ - - - - - - - -Function to get all colors available in shinyMobile — getF7Colors • shinyMobile - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - +Function to get all colors available in shinyMobile — getF7Colors • shinyMobile + Skip to contents + +
    -
    -
    -

    Function to get all colors available in shinyMobile

    - Source: R/utils.R - +
    +

    Function to get all colors available in shinyMobile

    + Source: R/utils.R +
    getF7Colors.Rd
    -
    +

    Function to get all colors available in shinyMobile

    - 
    getF7Colors()
    - +
    +

    Usage

    + 
    getF7Colors()
    +
    -

    Value

    +
    +

    Value

    + -

    A vector containing colors

    +

    A vector containing colors

    +
    -
    - -
    +
    -
    -
    -

    Developed by David Granjon, Victor Perrier, Isabelle Rudolf.

    +
    +

    Developed by David Granjon, Victor Perrier, Isabelle Rudolf.

    -
    -

    Site built with pkgdown 1.6.1.

    +
    +

    Site built with pkgdown 2.0.7.

    -
    -
    +
    + - - - + diff --git a/docs/reference/index.html b/docs/reference/index.html index 6d6bf5ff..a933eec5 100644 --- a/docs/reference/index.html +++ b/docs/reference/index.html @@ -1,1336 +1,1028 @@ - - - - - - +Function reference • shinyMobile + Skip to contents + -Function reference • shinyMobile +
    +
    +
    +

    Function reference

    +
    - - - +
    +

    Basic functions

    + +

    Page skeleton functions

    - - + +
    + + + - - - +
    + + f7Appbar() f7Back() f7Next() +
    +
    Framework7 appbar
    +
    + + f7Item() +
    +
    Framework7 body item
    +
    + + f7Items() +
    +
    Framework7 item container
    +
    + + f7Navbar() updateF7Navbar() +
    +
    Framework7 Navbar
    +
    + + f7Page() +
    +
    Framework7 page container
    +
    + + f7Panel() updateF7Panel() +
    +
    Framework7 panel
    +
    + + f7PanelMenu() f7PanelItem() +
    +
    Framework7 sidebar menu
    +
    + + f7SubNavbar() +
    +
    Framework7 sub navbar
    +
    + + f7Tab() +
    +
    Create a Framework7 tab item
    +
    + + f7Tabs() +
    +
    Create a Framework7 tabs
    +
    + + f7Toolbar() +
    +
    Framework7 Toolbar
    +
    +

    Authentication

    + +

    UI skeletons for authentication purposes

    - - - + +
    + + + +
    + + f7Login() f7LoginServer() updateF7Login() +
    +
    Framework7 login screen
    +
    +

    Toward progressive web app

    + +

    Tools to build a progressive web app

    + +
    + + + - - +
    + + f7checkBox() f7checkBoxGroup() f7InsertTab() f7RemoveTab() f7ValidateInput() f7AddMessages() f7HideNavbar() f7ShowNavbar() f7Popover() f7PopoverTarget() f7ShowPreloader() hideF7Preloader() create_manifest() +
    +
    Deprecated functions
    +
    + + preview_mobile() +
    +
    Allow to preview a given app on different devices.
    +
    +

    Inputs validation

    + +

    Provide feedback when an input is missing, …

    - - + +
    + + + +
    + + f7checkBox() f7checkBoxGroup() f7InsertTab() f7RemoveTab() f7ValidateInput() f7AddMessages() f7HideNavbar() f7ShowNavbar() f7Popover() f7PopoverTarget() f7ShowPreloader() hideF7Preloader() create_manifest() +
    +
    Deprecated functions
    +
    + + validateF7Input() +
    +
    Framework7 input validation
    +
    +

    Grid functions

    + +

    Rows, columns, flex, …

    + +
    + + + +
    + + f7Col() +
    +
    Framework7 column container
    +
    + + f7Flex() +
    +
    Framework7 flex container
    +
    + + f7Row() +
    +
    Framework7 row container
    +
    +

    Tab Navigation

    + +

    Next, back

    - - - + +
    + + + - - - - - - - -
    -
    - +
    + + + +
    + + f7SingleLayout() +
    +
    Framework7 single layout
    +
    + + f7SplitLayout() +
    +
    Framework7 split layout
    +
    + + f7TabLayout() +
    +
    Framework7 tab layout
    +
    +

    Download/Upload

    + - + +
    + + + -
    -
    -
    -

    Reference

    -
    +
    + + f7DownloadButton() +
    +
    Create a download button
    +
    + + f7File() +
    +
    File Upload Control
    +
    +

    Inputs

    + +

    slider, radio, checkboxes, …

    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    -

    Basic functions

    -

    Page skeleton functions

    -
    -

    f7Appbar() f7Back() f7Next()

    -

    Framework7 appbar

    -

    f7Item()

    -

    Framework7 body item

    -

    f7Items()

    -

    Framework7 item container

    -

    f7Navbar() updateF7Navbar()

    -

    Framework7 Navbar

    -

    f7Page()

    -

    Framework7 page container

    -

    f7Panel() updateF7Panel()

    -

    Framework7 panel

    -

    f7PanelMenu() f7PanelItem()

    -

    Framework7 sidebar menu

    -

    f7SubNavbar()

    -

    Framework7 sub navbar

    -

    f7Tab()

    -

    Create a Framework7 tab item

    -

    f7Tabs()

    -

    Create a Framework7 tabs

    -

    f7Toolbar()

    -

    Framework7 Toolbar

    -

    Authentication

    -

    UI skeletons for authentication purposes

    -
    -

    f7Login() f7LoginServer() updateF7Login()

    -

    Framework7 login screen

    -

    Toward progressive web app

    -

    Tools to build a progressive web app

    -
    -

    f7checkBox() f7checkBoxGroup() f7InsertTab() f7RemoveTab() f7ValidateInput() f7AddMessages() f7HideNavbar() f7ShowNavbar() f7Popover() f7PopoverTarget() updateF7Popup() f7TogglePopup() f7ShowPreloader() hideF7Preloader() create_manifest()

    -

    Deprecated functions

    -

    preview_mobile()

    -

    Allow to preview a given app on different devices.

    -

    Inputs validation

    -

    Provide feedback when an input is missing, …

    -
    -

    f7checkBox() f7checkBoxGroup() f7InsertTab() f7RemoveTab() f7ValidateInput() f7AddMessages() f7HideNavbar() f7ShowNavbar() f7Popover() f7PopoverTarget() updateF7Popup() f7TogglePopup() f7ShowPreloader() hideF7Preloader() create_manifest()

    -

    Deprecated functions

    -

    validateF7Input()

    -

    Framework7 input validation

    -

    Grid functions

    -

    Rows, columns, flex, …

    -
    -

    f7Col()

    -

    Framework7 column container

    -

    f7Flex()

    -

    Framework7 flex container

    -

    f7Row()

    -

    Framework7 row container

    -

    Tab Navigation

    -

    Next, back

    -
    -

    f7Appbar() f7Back() f7Next()

    -

    Framework7 appbar

    -

    Layouts

    -

    Functions that create layouts

    -
    -

    f7SingleLayout()

    -

    Framework7 single layout

    -

    f7SplitLayout()

    -

    Framework7 split layout

    -

    f7TabLayout()

    -

    Framework7 tab layout

    -

    Download/Upload

    -

    -
    -

    f7DownloadButton()

    -

    Create a download button

    -

    f7File()

    -

    File Upload Control

    -

    Inputs

    -

    slider, radio, checkboxes, …

    -
    -

    f7AutoComplete() updateF7AutoComplete()

    -

    Framework7 autocomplete input

    -

    f7checkBox() f7checkBoxGroup() f7InsertTab() f7RemoveTab() f7ValidateInput() f7AddMessages() f7HideNavbar() f7ShowNavbar() f7Popover() f7PopoverTarget() updateF7Popup() f7TogglePopup() f7ShowPreloader() hideF7Preloader() create_manifest()

    -

    Deprecated functions

    -

    f7Checkbox() updateF7Checkbox()

    -

    Framework7 checkbox

    -

    f7CheckboxGroup()

    -

    Framework7 checkbox group

    -

    f7ColorPicker()

    -

    Create a Framework7 color picker input

    -

    f7DatePicker() updateF7DatePicker()

    -

    Framework7 date picker

    -

    f7Password()

    -

    Create an f7 password input

    -

    f7Picker() updateF7Picker()

    -

    Framework7 picker input

    -

    f7Radio() updateF7Radio()

    -

    Framework7 radio input

    -

    f7Select() updateF7Select()

    -

    Framework7 select input

    -

    f7Slider() updateF7Slider()

    -

    Framework7 range slider

    -

    f7Stepper() updateF7Stepper()

    -

    Framework7 stepper input

    -

    f7SmartSelect() updateF7SmartSelect()

    -

    Framework7 smart select

    -

    f7Text() updateF7Text()

    -

    Framework7 text input

    -

    f7TextArea() updateF7TextArea()

    -

    Framework7 text area input

    -

    f7Toggle() updateF7Toggle()

    -

    Framework7 toggle input

    -

    Update inputs

    -

    slider, radio, checkboxes, …

    -
    -

    f7checkBox() f7checkBoxGroup() f7InsertTab() f7RemoveTab() f7ValidateInput() f7AddMessages() f7HideNavbar() f7ShowNavbar() f7Popover() f7PopoverTarget() updateF7Popup() f7TogglePopup() f7ShowPreloader() hideF7Preloader() create_manifest()

    -

    Deprecated functions

    -

    insertF7Tab()

    -

    Framework7 tab insertion

    -

    f7Navbar() updateF7Navbar()

    -

    Framework7 Navbar

    -

    removeF7Tab()

    -

    Framework7 tab deletion

    -

    f7Accordion() f7AccordionItem() updateF7Accordion()

    -

    Framework7 accordion container

    -

    f7AutoComplete() updateF7AutoComplete()

    -

    Framework7 autocomplete input

    -

    f7Button() updateF7Button()

    -

    Framework7 action button

    -

    f7Card() f7SocialCard() f7ExpandableCard() updateF7Card()

    -

    Framework7 card

    -

    f7Checkbox() updateF7Checkbox()

    -

    Framework7 checkbox

    -

    f7DatePicker() updateF7DatePicker()

    -

    Framework7 date picker

    -

    f7Fab() updateF7Fab()

    -

    Framework7 floating action button (FAB)

    -

    f7Fabs() updateF7Fabs() f7FabMorphTarget()

    -

    Framework7 container for floating action button (FAB)

    -

    f7Gauge() updateF7Gauge()

    -

    Framework7 gauge

    -

    f7Login() f7LoginServer() updateF7Login()

    -

    Framework7 login screen

    -

    f7Messages() f7Message() updateF7Messages()

    -

    Framework7 messages container

    -

    f7MessageBar() updateF7MessageBar()

    -

    Framework7 message bar.

    -

    f7Panel() updateF7Panel()

    -

    Framework7 panel

    -

    f7Picker() updateF7Picker()

    -

    Framework7 picker input

    -

    f7Progress() updateF7Progress()

    -

    Framework7 progress bar

    -

    f7Select() updateF7Select()

    -

    Framework7 select input

    -

    f7Sheet() updateF7Sheet()

    -

    Framework7 sheet

    -

    f7Slider() updateF7Slider()

    -

    Framework7 range slider

    -

    f7SmartSelect() updateF7SmartSelect()

    -

    Framework7 smart select

    -

    f7Stepper() updateF7Stepper()

    -

    Framework7 stepper input

    -

    updateF7Tabs()

    -

    Update a Framework 7 tabsetPanel

    -

    f7Text() updateF7Text()

    -

    Framework7 text input

    -

    f7TextArea() updateF7TextArea()

    -

    Framework7 text area input

    -

    f7Toggle() updateF7Toggle()

    -

    Framework7 toggle input

    -

    updateF7VirtualList()

    -

    Update an f7VirtualList on the server side

    -

    updateF7App()

    -

    Update Framework7 configuration

    -

    updateF7Entity()

    -

    Update Framework7 entity

    - -

    Searchbar and utilities

    -
    -

    f7Found()

    -

    Utility to display an item when the search is successful.

    -

    f7NotFound()

    -

    Utility to display an item when the search is unsuccessful.

    -

    f7HideOnEnable()

    -

    Utility to hide a given tag when f7Searchbar is enabled.

    -

    f7HideOnSearch()

    -

    Utility to hide a given tag on search

    -

    f7Searchbar()

    -

    Framework 7 searchbar

    -

    f7SearchIgnore()

    -

    Utility to ignore an item from search.

    -

    f7SearchbarTrigger()

    -

    Framework 7 searchbar trigger

    -

    Cards

    -

    social cards, cards, …

    -
    -

    f7Card() f7SocialCard() f7ExpandableCard() updateF7Card()

    -

    Framework7 card

    -

    Lists

    -

    Framework 7 lists

    -
    -

    f7List()

    -

    Create a framework 7 contact list

    -

    f7ListGroup()

    -

    Create a framework 7 group of contacts

    -

    f7ListItem()

    -

    Create a Framework 7 contact item

    -

    f7ListIndex()

    -

    Create a Framework 7 list index

    -

    f7ListIndexItem()

    -

    Create a Framework 7 list index item

    -

    f7VirtualList() f7VirtualListItem()

    -

    Framework7 virtual list

    -

    Text containers

    -

    blocks to contain text

    -
    -

    f7Block() f7BlockHeader()

    -

    Framework7 block

    -

    f7BlockFooter()

    -

    Framework7 block footer

    -

    f7BlockTitle()

    -

    Framework7 block title

    -

    Buttons

    -

    some are inputs

    -
    -

    f7Button() updateF7Button()

    -

    Framework7 action button

    -

    f7Fab() updateF7Fab()

    -

    Framework7 floating action button (FAB)

    -

    f7Fabs() updateF7Fabs() f7FabMorphTarget()

    -

    Framework7 container for floating action button (FAB)

    -

    f7Link()

    -

    Framework7 link

    -

    f7Menu() f7MenuItem() f7MenuDropdown() f7MenuDropdownDivider() updateF7MenuDropdown()

    -

    Framework7 menu container

    -

    f7Segment()

    -

    Framework7 segmented button container

    -

    f7TabLink()

    -

    Special button/link to insert in the tabbar

    -

    Buttons Effects

    -

    FAB can morph into other HTML elements

    -
    -

    f7FabClose()

    -

    Framework7 FAB close

    -

    f7Fabs() updateF7Fabs() f7FabMorphTarget()

    -

    Framework7 container for floating action button (FAB)

    -

    Modals, Popups...

    -

    Functions that trigger server actions

    -
    -

    f7ActionSheet() updateF7ActionSheet()

    -

    Framework7 action sheet

    -

    f7Dialog()

    -

    Framework7 dialog window

    -

    f7Notif()

    -

    Framework7 notification

    -

    f7checkBox() f7checkBoxGroup() f7InsertTab() f7RemoveTab() f7ValidateInput() f7AddMessages() f7HideNavbar() f7ShowNavbar() f7Popover() f7PopoverTarget() updateF7Popup() f7TogglePopup() f7ShowPreloader() hideF7Preloader() create_manifest()

    -

    Deprecated functions

    -

    addF7Popover() toggleF7Popover()

    -

    Add Framework7 popover

    -

    f7Popup()

    -

    Framework7 popup

    -

    f7Sheet() updateF7Sheet()

    -

    Framework7 sheet

    -

    f7Swipeout() f7SwipeoutItem()

    -

    Framework7 swipeout element

    -

    f7TapHold()

    -

    Framework7 tapHold module

    -

    f7Toast()

    -

    Framework7 toast

    -

    f7Tooltip() addF7Tooltip() updateF7Tooltip()

    -

    Framework7 tooltip

    -

    f7 elements

    -

    timelines, carousels, …

    -
    -

    f7Accordion() f7AccordionItem() updateF7Accordion()

    -

    Framework7 accordion container

    -

    f7checkBox() f7checkBoxGroup() f7InsertTab() f7RemoveTab() f7ValidateInput() f7AddMessages() f7HideNavbar() f7ShowNavbar() f7Popover() f7PopoverTarget() updateF7Popup() f7TogglePopup() f7ShowPreloader() hideF7Preloader() create_manifest()

    -

    Deprecated functions

    -

    f7Badge()

    -

    Framework7 badge

    -

    f7Chip()

    -

    Framework7 chips

    -

    f7Messages() f7Message() updateF7Messages()

    -

    Framework7 messages container

    -

    f7MessageBar() updateF7MessageBar()

    -

    Framework7 message bar.

    -

    f7PhotoBrowser()

    -

    Framework7 photo browser

    -

    f7Slide()

    -

    Framework7 slide

    -

    f7Swiper()

    -

    Framework7 swiper

    -

    f7Table()

    -

    Framework7 table

    -

    f7Timeline() f7TimelineItem()

    -

    Framework7 timeline

    -

    Metric elements

    -

    Gauges, progres, …

    -
    -

    f7Gauge() updateF7Gauge()

    -

    Framework7 gauge

    -

    f7Progress() updateF7Progress()

    -

    Framework7 progress bar

    -

    Typography functions

    -

    Rows, columns, flex, …

    -
    -

    f7Align()

    -

    Framework7 align utility

    -

    f7Float()

    -

    Framework7 float utility

    -

    f7Margin()

    -

    Framework7 margin utility

    -

    f7Padding()

    -

    Framework7 padding utility

    -

    Icons

    -

    icon wrapper function

    -
    -

    f7Icon()

    -

    Framework7 icons

    -

    Loaders

    -

    Loading screens

    -
    -

    f7checkBox() f7checkBoxGroup() f7InsertTab() f7RemoveTab() f7ValidateInput() f7AddMessages() f7HideNavbar() f7ShowNavbar() f7Popover() f7PopoverTarget() updateF7Popup() f7TogglePopup() f7ShowPreloader() hideF7Preloader() create_manifest()

    -

    Deprecated functions

    -

    showF7Preloader() f7HidePreloader()

    -

    Framework7 preloader

    -

    CSS effects

    -

    shadows, …

    -
    -

    f7Shadow()

    -

    Framework7 shadow effect

    -

    f7Skeleton()

    -

    Framework 7 skeleton effect

    - -

    shinyMobile showcase

    -
    -

    f7Gallery()

    -

    Launch the shinyMobile Gallery

    -

    Utils

    -

    colors, tools, …

    -
    -

    createSelectOptions()

    -

    Create option html tag based on choice input

    -

    getF7Colors()

    -

    Function to get all colors available in shinyMobile

    -
    + +
    + + + - -
    +
    + + f7AutoComplete() updateF7AutoComplete() +
    +
    Framework7 autocomplete input
    +
    + + f7checkBox() f7checkBoxGroup() f7InsertTab() f7RemoveTab() f7ValidateInput() f7AddMessages() f7HideNavbar() f7ShowNavbar() f7Popover() f7PopoverTarget() f7ShowPreloader() hideF7Preloader() create_manifest() +
    +
    Deprecated functions
    +
    + + f7Checkbox() updateF7Checkbox() +
    +
    Framework7 checkbox
    +
    + + f7CheckboxGroup() +
    +
    Framework7 checkbox group
    +
    + + f7ColorPicker() +
    +
    Create a Framework7 color picker input
    +
    + + f7DatePicker() updateF7DatePicker() +
    +
    Framework7 date picker
    +
    + + f7Password() +
    +
    Create an f7 password input
    +
    + + f7Picker() updateF7Picker() +
    +
    Framework7 picker input
    +
    + + f7Radio() updateF7Radio() +
    +
    Framework7 radio input
    +
    + + f7Select() updateF7Select() +
    +
    Framework7 select input
    +
    + + f7Slider() updateF7Slider() +
    +
    Framework7 range slider
    +
    + + f7Stepper() updateF7Stepper() +
    +
    Framework7 stepper input
    +
    + + f7SmartSelect() updateF7SmartSelect() +
    +
    Framework7 smart select
    +
    + + f7Text() updateF7Text() +
    +
    Framework7 text input
    +
    + + f7TextArea() updateF7TextArea() +
    +
    Framework7 text area input
    +
    + + f7Toggle() updateF7Toggle() +
    +
    Framework7 toggle input
    +
    +

    Update inputs

    + +

    slider, radio, checkboxes, …

    + + +
    + + + + +
    + + f7checkBox() f7checkBoxGroup() f7InsertTab() f7RemoveTab() f7ValidateInput() f7AddMessages() f7HideNavbar() f7ShowNavbar() f7Popover() f7PopoverTarget() f7ShowPreloader() hideF7Preloader() create_manifest() +
    +
    Deprecated functions
    +
    + + insertF7Tab() +
    +
    Framework7 tab insertion
    +
    + + f7Navbar() updateF7Navbar() +
    +
    Framework7 Navbar
    +
    + + removeF7Tab() +
    +
    Framework7 tab deletion
    +
    + + f7Accordion() f7AccordionItem() updateF7Accordion() +
    +
    Framework7 accordion container
    +
    + + f7AutoComplete() updateF7AutoComplete() +
    +
    Framework7 autocomplete input
    +
    + + f7Button() updateF7Button() +
    +
    Framework7 action button
    +
    + + f7Card() f7SocialCard() f7ExpandableCard() updateF7Card() +
    +
    Framework7 card
    +
    + + f7Checkbox() updateF7Checkbox() +
    +
    Framework7 checkbox
    +
    + + f7DatePicker() updateF7DatePicker() +
    +
    Framework7 date picker
    +
    + + f7Fab() updateF7Fab() +
    +
    Framework7 floating action button (FAB)
    +
    + + f7Fabs() updateF7Fabs() f7FabMorphTarget() +
    +
    Framework7 container for floating action button (FAB)
    +
    + + f7Gauge() updateF7Gauge() +
    +
    Framework7 gauge
    +
    + + f7Login() f7LoginServer() updateF7Login() +
    +
    Framework7 login screen
    +
    + + f7Messages() f7Message() updateF7Messages() +
    +
    Framework7 messages container
    +
    + + f7MessageBar() updateF7MessageBar() +
    +
    Framework7 message bar.
    +
    + + f7Panel() updateF7Panel() +
    +
    Framework7 panel
    +
    + + f7Picker() updateF7Picker() +
    +
    Framework7 picker input
    +
    + + f7Progress() updateF7Progress() +
    +
    Framework7 progress bar
    +
    + + f7Select() updateF7Select() +
    +
    Framework7 select input
    +
    + + f7Sheet() updateF7Sheet() +
    +
    Framework7 sheet
    +
    + + f7Slider() updateF7Slider() +
    +
    Framework7 range slider
    +
    + + f7SmartSelect() updateF7SmartSelect() +
    +
    Framework7 smart select
    +
    + + f7Stepper() updateF7Stepper() +
    +
    Framework7 stepper input
    +
    + + updateF7Tabs() +
    +
    Update a Framework 7 tabsetPanel
    +
    + + f7Text() updateF7Text() +
    +
    Framework7 text input
    +
    + + f7TextArea() updateF7TextArea() +
    +
    Framework7 text area input
    +
    + + f7Toggle() updateF7Toggle() +
    +
    Framework7 toggle input
    +
    + + updateF7VirtualList() +
    +
    Update an f7VirtualList on the server side
    +
    + + updateF7App() +
    +
    Update Framework7 configuration
    +
    + + updateF7Entity() +
    +
    Update Framework7 entity
    +
    + + +

    Searchbar and utilities

    + + +
    + + + + +
    + + f7Found() +
    +
    Utility to display an item when the search is successful.
    +
    + + f7NotFound() +
    +
    Utility to display an item when the search is unsuccessful.
    +
    + + f7HideOnEnable() +
    +
    Utility to hide a given tag when f7Searchbar is enabled.
    +
    + + f7HideOnSearch() +
    +
    Utility to hide a given tag on search
    +
    + + f7Searchbar() +
    +
    Framework 7 searchbar
    +
    + + f7SearchIgnore() +
    +
    Utility to ignore an item from search.
    +
    + + f7SearchbarTrigger() +
    +
    Framework 7 searchbar trigger
    +
    +

    Cards

    + +

    social cards, cards, …

    + +
    + + + + +
    + + f7Card() f7SocialCard() f7ExpandableCard() updateF7Card() +
    +
    Framework7 card
    +
    +

    Lists

    + +

    Framework 7 lists

    + + +
    + + + + +
    + + f7List() +
    +
    Create a framework 7 contact list
    +
    + + f7ListGroup() +
    +
    Create a framework 7 group of contacts
    +
    + + f7ListItem() +
    +
    Create a Framework 7 contact item
    +
    + + f7ListIndex() +
    +
    Create a Framework 7 list index
    +
    + + f7VirtualList() f7VirtualListItem() +
    +
    Framework7 virtual list
    +
    +

    Text containers

    + +

    blocks to contain text

    + + +
    + + + + +
    + + f7Block() f7BlockHeader() +
    +
    Framework7 block
    +
    + + f7BlockFooter() +
    +
    Framework7 block footer
    +
    + + f7BlockTitle() +
    +
    Framework7 block title
    +
    +

    Buttons

    + +

    some are inputs

    + + +
    + + + + +
    + + f7Button() updateF7Button() +
    +
    Framework7 action button
    +
    + + f7Fab() updateF7Fab() +
    +
    Framework7 floating action button (FAB)
    +
    + + f7Fabs() updateF7Fabs() f7FabMorphTarget() +
    +
    Framework7 container for floating action button (FAB)
    +
    + + f7Link() +
    +
    Framework7 link
    +
    + + f7Menu() f7MenuItem() f7MenuDropdown() f7MenuDropdownDivider() updateF7MenuDropdown() +
    +
    Framework7 menu container
    +
    + + f7Segment() +
    +
    Framework7 segmented button container
    +
    + + f7TabLink() +
    +
    Special button/link to insert in the tabbar
    +
    +

    Buttons Effects

    + +

    FAB can morph into other HTML elements

    + + +
    + + + + +
    + + f7FabClose() +
    +
    Framework7 FAB close
    +
    + + f7Fabs() updateF7Fabs() f7FabMorphTarget() +
    +
    Framework7 container for floating action button (FAB)
    +
    +

    Modals, Popups…

    + +

    Functions that trigger server actions

    + + +
    + + + + +
    + + f7ActionSheet() updateF7ActionSheet() +
    +
    Framework7 action sheet
    +
    + + f7Dialog() +
    +
    Framework7 dialog window
    +
    + + f7Notif() +
    +
    Framework7 notification
    +
    + + f7checkBox() f7checkBoxGroup() f7InsertTab() f7RemoveTab() f7ValidateInput() f7AddMessages() f7HideNavbar() f7ShowNavbar() f7Popover() f7PopoverTarget() f7ShowPreloader() hideF7Preloader() create_manifest() +
    +
    Deprecated functions
    +
    + + addF7Popover() toggleF7Popover() +
    +
    Add Framework7 popover
    +
    + + f7Popup() +
    +
    Framework7 popup
    +
    + + f7Sheet() updateF7Sheet() +
    +
    Framework7 sheet
    +
    + + f7Swipeout() f7SwipeoutItem() +
    +
    Framework7 swipeout element
    +
    + + f7TapHold() +
    +
    Framework7 tapHold module
    +
    + + f7Toast() +
    +
    Framework7 toast
    +
    + + f7Tooltip() addF7Tooltip() updateF7Tooltip() +
    +
    Framework7 tooltip
    +
    +

    f7 elements

    + +

    timelines, carousels, …

    + + +
    + + + + +
    + + f7Accordion() f7AccordionItem() updateF7Accordion() +
    +
    Framework7 accordion container
    +
    + + f7checkBox() f7checkBoxGroup() f7InsertTab() f7RemoveTab() f7ValidateInput() f7AddMessages() f7HideNavbar() f7ShowNavbar() f7Popover() f7PopoverTarget() f7ShowPreloader() hideF7Preloader() create_manifest() +
    +
    Deprecated functions
    +
    + + f7Badge() +
    +
    Framework7 badge
    +
    + + f7Chip() +
    +
    Framework7 chips
    +
    + + f7Messages() f7Message() updateF7Messages() +
    +
    Framework7 messages container
    +
    + + f7MessageBar() updateF7MessageBar() +
    +
    Framework7 message bar.
    +
    + + f7PhotoBrowser() +
    +
    Framework7 photo browser
    +
    + + f7Slide() +
    +
    Framework7 slide
    +
    + + f7Swiper() +
    +
    Framework7 swiper
    +
    + + f7Table() +
    +
    Framework7 table
    +
    + + f7Timeline() f7TimelineItem() +
    +
    Framework7 timeline
    +
    +

    Metric elements

    + +

    Gauges, progres, …

    + + +
    + + + + +
    + + f7Gauge() updateF7Gauge() +
    +
    Framework7 gauge
    +
    + + f7Progress() updateF7Progress() +
    +
    Framework7 progress bar
    +
    +

    Typography functions

    + +

    Rows, columns, flex, …

    + + +
    + + + + +
    + + f7Align() +
    +
    Framework7 align utility
    +
    + + f7Float() +
    +
    Framework7 float utility
    +
    + + f7Margin() +
    +
    Framework7 margin utility
    +
    + + f7Padding() +
    +
    Framework7 padding utility
    +
    +

    Icons

    + +

    icon wrapper function

    + + +
    + + + + +
    + + f7Icon() +
    +
    Framework7 icons
    +
    +

    Loaders

    + +

    Loading screens

    + + +
    + + + + +
    + + f7checkBox() f7checkBoxGroup() f7InsertTab() f7RemoveTab() f7ValidateInput() f7AddMessages() f7HideNavbar() f7ShowNavbar() f7Popover() f7PopoverTarget() f7ShowPreloader() hideF7Preloader() create_manifest() +
    +
    Deprecated functions
    +
    + + showF7Preloader() f7HidePreloader() +
    +
    Framework7 preloader
    +
    +

    CSS effects

    + +

    shadows, …

    -
    -
    -

    Developed by David Granjon, Victor Perrier, Isabelle Rudolf.

    + +
    + + + + +
    + + f7Shadow() +
    +
    Framework7 shadow effect
    +
    + + f7Skeleton() +
    +
    Framework 7 skeleton effect
    +
    + + +

    shinyMobile showcase

    + + +
    + + + + +
    + + f7Gallery() +
    +
    Launch the shinyMobile Gallery
    +
    +

    Utils

    + +

    colors, tools, …

    + + +
    + + + + +
    + + createSelectOptions() +
    +
    Create option html tag based on choice input
    +
    + + getF7Colors() +
    +
    Function to get all colors available in shinyMobile
    +
    +
    + + +
    +

    Developed by David Granjon, Victor Perrier, Isabelle Rudolf.

    -
    -

    Site built with pkgdown 1.6.1.

    +
    +

    Site built with pkgdown 2.0.7.

    -
    -
    +
    + - - - + diff --git a/docs/reference/pipe.html b/docs/reference/pipe.html index 3a974cbc..bd9387a0 100644 --- a/docs/reference/pipe.html +++ b/docs/reference/pipe.html @@ -1,207 +1,98 @@ - - - - - - - -Pipe operator — %>% • shinyMobile - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - +Pipe operator — %>% • shinyMobile + Skip to contents + +
    -
    -
    -

    Pipe operator

    - Source: R/utils-pipe.R - +
    +

    Pipe operator

    + Source: R/utils-pipe.R +
    pipe.Rd
    -
    +

    See magrittr::%>% for details.

    - 
    lhs %>% rhs
    - +
    +

    Usage

    + 
    lhs %>% rhs
    +
    -
    - -
    +
    -
    -
    -

    Developed by David Granjon, Victor Perrier, Isabelle Rudolf.

    +
    +

    Developed by David Granjon, Victor Perrier, Isabelle Rudolf.

    -
    -

    Site built with pkgdown 1.6.1.

    +
    +

    Site built with pkgdown 2.0.7.

    -
    -
    +
    + - - - + diff --git a/docs/reference/preloader.html b/docs/reference/preloader.html index d99bb811..02acf25b 100644 --- a/docs/reference/preloader.html +++ b/docs/reference/preloader.html @@ -1,313 +1,206 @@ - - - - - - - -Framework7 preloader — showF7Preloader • shinyMobile - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -Framework7 preloader — showF7Preloader • shinyMobile - + + Skip to contents + +
    -
    -
    -

    Framework7 preloader

    - Source: R/f7Preloader.R - +
    +

    Framework7 preloader

    + Source: R/f7Preloader.R +
    preloader.Rd
    -
    +

    showF7Preloader shows a preloader.

    f7HidePreloader hides a preloader.

    - 
    showF7Preloader(
-  target = NULL,
-  color = NULL,
-  session = shiny::getDefaultReactiveDomain()
-)
-
-f7HidePreloader(target = NULL, session = shiny::getDefaultReactiveDomain())
    - -

    Arguments

    - - - - - - - - - - - - - - -
    target

    Element where preloader overlay will be added.

    color

    Preloader color.

    session

    Shiny session object.

    - - -

    Examples

    - 
    if (interactive()) {
- library(shiny)
- library(shinyMobile)
-
- # basic preloader with red color
- shinyApp(
-  ui = f7Page(
-    title = "Preloader",
-    f7SingleLayout(
-      navbar = f7Navbar(
-        title = "Preloader",
-        hairline = FALSE,
-        shadow = TRUE
-      ),
-      # main content
-      f7Button("showLoader", "Show loader"),
-      f7Shadow(
-        intensity = 10,
-        hover = TRUE,
-        f7Card(
-          title = "Card header",
-          f7Slider("obs", "Number of observations", 0, 1000, 500),
-          plotOutput("distPlot")
-        )
-      )
-    )
-  ),
-  server = function(input, output, session) {
-    output$distPlot <- renderPlot({
-      dist <- rnorm(input$obs)
-      hist(dist)
-    })
-
-    observeEvent(input$showLoader, {
-      showF7Preloader(color = "red")
-      Sys.sleep(2)
-      f7HidePreloader()
-    })
-  }
- )
-
- # preloader in container
- shinyApp(
-  ui = f7Page(
-    title = "Preloader in container",
-    f7SingleLayout(
-      navbar = f7Navbar(
-        title = "Preloader in container",
-        hairline = FALSE,
-        shadow = TRUE
-      ),
-      # main content
-      f7Shadow(
-        intensity = 10,
-        hover = TRUE,
-        f7Card(
-          title = "Card header",
-          f7Slider("obs", "Number of observations", 0, 1000, 500),
-          plotOutput("distPlot")
-        )
-      ),
-      f7Card("This is a simple card with plain text,
-       but cards can also contain their own header,
-       footer, list view, image, or any other element.")
-    )
-  ),
-  server = function(input, output, session) {
-    output$distPlot <- renderPlot({
-      dist <- rnorm(input$obs)
-      hist(dist)
-    })
+    
    
+    
    Usage
    
+    
    showF7Preloader(
+  target = NULL,
+  color = NULL,
+  session = shiny::getDefaultReactiveDomain()
+)
+
+f7HidePreloader(target = NULL, session = shiny::getDefaultReactiveDomain())
    
+    
    
 
-    observeEvent(input$obs, {
-      showF7Preloader(target = "#distPlot", color = "red")
-      Sys.sleep(2)
-      f7HidePreloader()
-    })
-  }
- )
-}
-
    -
    - -
    +
    +

    Arguments

    +
    target
    +

    Element where preloader overlay will be added.

    + + +
    color
    +

    Preloader color.

    + + +
    session
    +

    Shiny session object.

    + +
    + +
    +

    Examples

    + 
    if (interactive()) {
+ library(shiny)
+ library(shinyMobile)
+
+ # basic preloader with red color
+ shinyApp(
+  ui = f7Page(
+    title = "Preloader",
+    f7SingleLayout(
+      navbar = f7Navbar(
+        title = "Preloader",
+        hairline = FALSE,
+        shadow = TRUE
+      ),
+      # main content
+      f7Button("showLoader", "Show loader"),
+      f7Shadow(
+        intensity = 10,
+        hover = TRUE,
+        f7Card(
+          title = "Card header",
+          f7Slider("obs", "Number of observations", 0, 1000, 500),
+          plotOutput("distPlot")
+        )
+      )
+    )
+  ),
+  server = function(input, output, session) {
+    output$distPlot <- renderPlot({
+      dist <- rnorm(input$obs)
+      hist(dist)
+    })
+
+    observeEvent(input$showLoader, {
+      showF7Preloader(color = "red")
+      Sys.sleep(2)
+      f7HidePreloader()
+    })
+  }
+ )
+
+ # preloader in container
+ shinyApp(
+  ui = f7Page(
+    title = "Preloader in container",
+    f7SingleLayout(
+      navbar = f7Navbar(
+        title = "Preloader in container",
+        hairline = FALSE,
+        shadow = TRUE
+      ),
+      # main content
+      f7Shadow(
+        intensity = 10,
+        hover = TRUE,
+        f7Card(
+          title = "Card header",
+          f7Slider("obs", "Number of observations", 0, 1000, 500),
+          plotOutput("distPlot")
+        )
+      ),
+      f7Card("This is a simple card with plain text,
+       but cards can also contain their own header,
+       footer, list view, image, or any other element.")
+    )
+  ),
+  server = function(input, output, session) {
+    output$distPlot <- renderPlot({
+      dist <- rnorm(input$obs)
+      hist(dist)
+    })
+
+    observeEvent(input$obs, {
+      showF7Preloader(target = "#distPlot", color = "red")
+      Sys.sleep(2)
+      f7HidePreloader()
+    })
+  }
+ )
+}
+
    +
    +
    -
    -
    -

    Developed by David Granjon, Victor Perrier, Isabelle Rudolf.

    +
    +

    Developed by David Granjon, Victor Perrier, Isabelle Rudolf.

    -
    -

    Site built with pkgdown 1.6.1.

    +
    +

    Site built with pkgdown 2.0.7.

    -
    -
    +
    + - - - + diff --git a/docs/reference/preview_mobile.html b/docs/reference/preview_mobile.html index 05ee5783..5fc46fd5 100644 --- a/docs/reference/preview_mobile.html +++ b/docs/reference/preview_mobile.html @@ -1,260 +1,156 @@ - - - - - - - -Allow to preview a given app on different devices. — preview_mobile • shinyMobile - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -Allow to preview a given app on different devices. — preview_mobile • shinyMobile + + Skip to contents + +
    -
    -
    -

    Allow to preview a given app on different devices.

    - Source: R/preview_mobile.R - +
    +

    Allow to preview a given app on different devices.

    + Source: R/preview_mobile.R +
    preview_mobile.Rd
    -
    +

    Allow to preview a given app on different devices.

    - 
    preview_mobile(
-  appPath = NULL,
-  url = NULL,
-  port = 3838,
-  device = c("iphoneX", "galaxyNote8", "iphone8", "iphone8+", "iphone5s", "iphone5c",
-    "ipadMini", "iphone4s", "nexus5", "galaxyS5", "htcOne"),
-  color = NULL,
-  landscape = FALSE
-)
    +
    +

    Usage

    + 
    preview_mobile(
+  appPath = NULL,
+  url = NULL,
+  port = 3838,
+  device = c("iphoneX", "galaxyNote8", "iphone8", "iphone8+", "iphone5s", "iphone5c",
+    "ipadMini", "iphone4s", "nexus5", "galaxyS5", "htcOne"),
+  color = NULL,
+  landscape = FALSE
+)
    +
    + +
    +

    Arguments

    +
    appPath
    +

    App to preview if local.

    + + +
    url
    +

    App to preview if online.

    + -

    Arguments

    - - - - - - - - - - - - - - - - - - - - - - - - - - -
    appPath

    App to preview if local.

    url

    App to preview if online.

    port

    Default port. Ignored if url is provided.

    device

    Wrapper devices.

    color

    Wrapper color. Only with iphone8 (black, silver, gold), +

    port
    +

    Default port. Ignored if url is provided.

    + + +
    device
    +

    Wrapper devices.

    + + +
    color
    +

    Wrapper color. Only with iphone8 (black, silver, gold), iphone8+ (black, silver, gold), iphone5s (black, silver, gold), iphone5c (white,red , yellow, green, blue), iphone4s (black, silver), ipadMini (black, silver) and -galaxyS5 (black, white).

    landscape

    Whether to put the device wrapper in landscape mode. Default to FALSE.

    +galaxyS5 (black, white).

    -

    Value

    -

    A shiny app containing an iframe surrounded by the device wrapper.

    -

    Note

    +
    landscape
    +

    Whether to put the device wrapper in landscape mode. Default to FALSE.

    +
    +
    +

    Value

    + + +

    A shiny app containing an iframe surrounded by the device wrapper.

    +
    +
    +

    Note

    choose either url or appPath!

    +
    -

    Examples

    - 
    if (interactive()) {
- library(shiny)
- library(shinyMobile)
- preview_mobile(appPath = "~/whatever", device = "galaxyNote8")
- preview_mobile(url = "https://dgranjon.shinyapps.io/miniUI2DemoMd", device = "ipadMini")
-}
-
    -
    - -
    +
    +

    Examples

    + 
    if (interactive()) {
+ library(shiny)
+ library(shinyMobile)
+ preview_mobile(appPath = "~/whatever", device = "galaxyNote8")
+ preview_mobile(url = "https://dgranjon.shinyapps.io/miniUI2DemoMd", device = "ipadMini")
+}
+
    +
    +
    -
    -
    -

    Developed by David Granjon, Victor Perrier, Isabelle Rudolf.

    +
    +

    Developed by David Granjon, Victor Perrier, Isabelle Rudolf.

    -
    -

    Site built with pkgdown 1.6.1.

    +
    +

    Site built with pkgdown 2.0.7.

    -
    -
    +
    + - - - + diff --git a/docs/reference/sheet.html b/docs/reference/sheet.html index 5b7565de..4e00c344 100644 --- a/docs/reference/sheet.html +++ b/docs/reference/sheet.html @@ -1,345 +1,239 @@ - - - - - - +Framework7 sheet — f7Sheet • shinyMobile + Skip to contents + -Framework7 sheet — f7Sheet • shinyMobile +
    +
    +
    +

    Framework7 sheet

    + Source: R/f7Sheet.R +
    sheet.Rd
    +
    - - - +
    +

    f7Sheet creates an f7 sheet modal window.

    +

    updateF7Sheet toggles an f7Sheet on the client.

    +
    - - +
    +

    Usage

    + 
    f7Sheet(
+  ...,
+  id,
+  hiddenItems = NULL,
+  orientation = c("top", "bottom"),
+  swipeToClose = FALSE,
+  swipeToStep = FALSE,
+  backdrop = FALSE,
+  closeByOutsideClick = TRUE,
+  swipeHandler = TRUE
+)
+
+updateF7Sheet(id, session = shiny::getDefaultReactiveDomain())
    +
    - - - +
    +

    Arguments

    +
    ...
    +

    Sheet content. If wipeToStep is TRUE, these items will be visible at start.

    - - - +
    id
    +

    Sheet id.

    - - +
    hiddenItems
    +

    Put items you want to hide inside. Only works when +swipeToStep is TRUE. Default to NULL.

    - - - +
    orientation
    +

    "top" or "bottom".

    +
    swipeToClose
    +

    If TRUE, it can be closed by swiping down.

    - - - - - - - - - - -
    -
    - - +
    backdrop
    +

    Enables Sheet backdrop (dark semi transparent layer +behind). By default it is TRUE for MD and Aurora themes and +FALSE for iOS theme.

    -
    -
    -
    -
    -

    Framework7 sheet

    - Source: R/f7Sheet.R - -
    +
    closeByOutsideClick
    +

    When enabled, sheet will be closed on +when click outside of it.

    -
    -

    f7Sheet creates an f7 sheet modal window.

    -

    updateF7Sheet toggles an f7Sheet on the client.

    -
    - 
    f7Sheet(
-  ...,
-  id,
-  hiddenItems = NULL,
-  orientation = c("top", "bottom"),
-  swipeToClose = FALSE,
-  swipeToStep = FALSE,
-  backdrop = FALSE,
-  closeByOutsideClick = TRUE,
-  swipeHandler = TRUE
-)
-
-updateF7Sheet(id, session = shiny::getDefaultReactiveDomain())
    - -

    Arguments

    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    ...

    Sheet content. If wipeToStep is TRUE, these items will be visible at start.

    id

    Sheet id.

    hiddenItems

    Put items you want to hide inside. Only works when -swipeToStep is TRUE. Default to NULL.

    orientation

    "top" or "bottom".

    swipeToClose

    If TRUE, it can be closed by swiping down.

    swipeToStep

    If TRUE then sheet will be opened partially, -and with swipe it can be further expanded.

    backdrop

    Enables Sheet backdrop (dark semi transparent layer -behind). By default it is TRUE for MD and Aurora themes and -FALSE for iOS theme.

    closeByOutsideClick

    When enabled, sheet will be closed on -when click outside of it.

    swipeHandler

    Whether to display a swipe handler. TRUE by default. -Need either swipeToClose or swipeToStep set to TRUE to work.

    session

    Shiny session object

    - -

    Note

    +
    swipeHandler
    +

    Whether to display a swipe handler. TRUE by default. +Need either swipeToClose or swipeToStep set to TRUE to work.

    + +
    session
    +

    Shiny session object

    + +
    +
    +

    Note

    The sheet modal has to be used in combination with updateF7Sheet. Yet, if you need a specific trigger, simply add `data-sheet` = paste0("#", id), to the tag of your choice (a button), where id refers to the sheet unique id.

    +
    -

    Examples

    - 
    # Toggle sheet modal
-if (interactive()) {
- library(shiny)
- library(shinyMobile)
- shinyApp(
-    ui = f7Page(
-       title = "Update f7Sheet",
-       f7SingleLayout(
-          navbar = f7Navbar(title = "f7Sheet"),
-          f7Button(inputId = "go", label = "Go"),
-          f7Sheet(
-             id = "sheet1",
-             label = "More",
-             orientation = "bottom",
-             swipeToClose = TRUE,
-             swipeToStep = TRUE,
-             backdrop = TRUE,
-             "Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-             Quisque ac diam ac quam euismod porta vel a nunc. Quisque sodales
-             scelerisque est, at porta justo cursus ac",
-             hiddenItems = tagList(
-                f7Segment(
-                   container = "segment",
-                   rounded = TRUE,
-                   f7Button(color = "blue", label = "My button 1", rounded = TRUE),
-                   f7Button(color = "green", label = "My button 2", rounded = TRUE),
-                   f7Button(color = "yellow", label = "My button 3", rounded = TRUE)
-                ),
-                f7Flex(
-                   f7Gauge(
-                      id = "mygauge",
-                      type  = "semicircle",
-                      value = 10,
-                      borderColor = "#2196f3",
-                      borderWidth = 10,
-                      valueFontSize = 41,
-                      valueTextColor = "#2196f3",
-                      labelText = "amount of something"
-                   )
-                ),
-                f7Slider(
-                   inputId = "obs",
-                   label = "Number of observations",
-                   max = 100,
-                   min = 0,
-                   value = 10,
-                   scale = TRUE
-                ),
-                plotOutput("distPlot")
-             )
-          )
-       )
-    ),
-    server = function(input, output, session) {
-       observe({print(input$sheet1)})
-       output$distPlot <- renderPlot({
-          hist(rnorm(input$obs))
-       })
-       observeEvent(input$obs, {
-          updateF7Gauge(id = "mygauge", value = input$obs)
-       })
-       observeEvent(input$go, {
-          updateF7Sheet(id = "sheet1")
-       })
-    }
- )
-}
-
    -
    - -
    +
    +

    Examples

    + 
    # Toggle sheet modal
+if (interactive()) {
+ library(shiny)
+ library(shinyMobile)
+ shinyApp(
+    ui = f7Page(
+       title = "Update f7Sheet",
+       f7SingleLayout(
+          navbar = f7Navbar(title = "f7Sheet"),
+          f7Button(inputId = "go", label = "Go"),
+          f7Sheet(
+             id = "sheet1",
+             label = "More",
+             orientation = "bottom",
+             swipeToClose = TRUE,
+             swipeToStep = TRUE,
+             backdrop = TRUE,
+             "Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+             Quisque ac diam ac quam euismod porta vel a nunc. Quisque sodales
+             scelerisque est, at porta justo cursus ac",
+             hiddenItems = tagList(
+                f7Segment(
+                   container = "segment",
+                   rounded = TRUE,
+                   f7Button(color = "blue", label = "My button 1", rounded = TRUE),
+                   f7Button(color = "green", label = "My button 2", rounded = TRUE),
+                   f7Button(color = "yellow", label = "My button 3", rounded = TRUE)
+                ),
+                f7Flex(
+                   f7Gauge(
+                      id = "mygauge",
+                      type  = "semicircle",
+                      value = 10,
+                      borderColor = "#2196f3",
+                      borderWidth = 10,
+                      valueFontSize = 41,
+                      valueTextColor = "#2196f3",
+                      labelText = "amount of something"
+                   )
+                ),
+                f7Slider(
+                   inputId = "obs",
+                   label = "Number of observations",
+                   max = 100,
+                   min = 0,
+                   value = 10,
+                   scale = TRUE
+                ),
+                plotOutput("distPlot")
+             )
+          )
+       )
+    ),
+    server = function(input, output, session) {
+       observe({print(input$sheet1)})
+       output$distPlot <- renderPlot({
+          hist(rnorm(input$obs))
+       })
+       observeEvent(input$obs, {
+          updateF7Gauge(id = "mygauge", value = input$obs)
+       })
+       observeEvent(input$go, {
+          updateF7Sheet(id = "sheet1")
+       })
+    }
+ )
+}
+
    +
    +
    -
    -
    -

    Developed by David Granjon, Victor Perrier, Isabelle Rudolf.

    +
    +

    Developed by David Granjon, Victor Perrier, Isabelle Rudolf.

    -
    -

    Site built with pkgdown 1.6.1.

    +
    +

    Site built with pkgdown 2.0.7.

    -
    -
    +
    + - - - + diff --git a/docs/reference/updateF7Tabs.html b/docs/reference/updateF7Tabs.html index 1c5044da..5ba85047 100644 --- a/docs/reference/updateF7Tabs.html +++ b/docs/reference/updateF7Tabs.html @@ -1,340 +1,235 @@ - - - - - - - -Update a Framework 7 tabsetPanel — updateF7Tabs • shinyMobile - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -Update a Framework 7 tabsetPanel — updateF7Tabs • shinyMobile - + + Skip to contents + +
    -
    -
    -

    Update a Framework 7 tabsetPanel

    - Source: R/f7-tabs.R - +
    +

    Update a Framework 7 tabsetPanel

    + Source: R/f7-tabs.R +
    updateF7Tabs.Rd
    -
    -

    Update f7Tabs.

    +
    +

    Update f7Tabs.

    - 
    updateF7Tabs(id, selected = NULL, session = shiny::getDefaultReactiveDomain())
    - -

    Arguments

    - - - - - - - - - - - - - - -
    id

    Id of the f7Tabs to update.

    selected

    Newly selected tab.

    session

    Shiny session object.

    - - -

    Examples

    - 
    if (interactive()) {
- library(shiny)
- library(shinyMobile)
-
- subtabs_ui <- function(id) {
-   ns <- NS(id)
-
-   tagList(
-     f7Toggle(inputId = ns("updateSubTab"), label = "Update SubTab", checked = FALSE),
-     f7Tabs(
-       id = ns("subtabdemo"),
-       style = "strong",
-       animated = FALSE,
-       f7Tab(tabName = "SubTab 1", "SubTab 1"),
-       f7Tab(tabName = "SubTab 2", "SubTab 2", active = TRUE),
-       f7Tab(tabName = "SubTab 3", "SubTab 3")
-     )
-   )
- }
-
- subtabs <- function(input, output, session) {
-   observeEvent(input$updateSubTab, {
-     selected <- ifelse(input$updateSubTab, "SubTab 1", "SubTab 2")
-     updateF7Tabs(session, id = "subtabdemo", selected = selected)
-   })
-   return(reactive(input$subtabdemo))
- }
-
- shinyApp(
-   ui = f7Page(
-     title = "Tab Layout",
-     f7TabLayout(
-       navbar = f7Navbar(
-         title =
-           f7Flex(
-             HTML(paste("Selected Tab:", textOutput("selectedTab"))),
-             HTML(paste("Selected Subtab:", textOutput("selectedSubTab")))
-           )
-         ,
-         subNavbar = f7SubNavbar(
-           f7Flex(
-             f7Toggle(inputId = "updateTab", label = "Update Tab", checked = TRUE),
-             subtabs_ui("subtabs1")[[1]]
-           )
-         )
-       ),
-       f7Tabs(
-         id = "tabdemo",
-         swipeable = TRUE,
-         animated = FALSE,
-         f7Tab(
-           tabName = "Tab 1",
-           subtabs_ui("subtabs1")[[2]]
-         ),
-         f7Tab(tabName = "Tab 2", "Tab 2"),
-         f7Tab(tabName = "Tab 3", "Tab 3")
-       )
-     )
-   ),
-   server = function(input, output, session) {
-     output$selectedTab <- renderText(input$tabdemo)
-     observeEvent(input$updateTab, {
-       selected <- ifelse(input$updateTab, "Tab 1", "Tab 2")
-       updateF7Tabs(id = "tabdemo", selected = selected)
-     })
-     subtab <- callModule(subtabs, "subtabs1")
-     output$selectedSubTab <- renderText(subtab())
-   }
- )
- # with hidden tabs
- shinyApp(
-  ui <- f7Page(
-    title = "shinyMobile",
-    f7TabLayout(
-      navbar = f7Navbar(
-        title = "Update Tabs with hidden tab",
-        subtitle = "",
-        hairline = TRUE,
-        shadow = TRUE,
-        bigger = FALSE,
-        transparent = TRUE
-      ),
-      f7Tabs(
-        id = 'tabs',
-        animated = TRUE,
-        f7Tab(
-          active = TRUE,
-          tabName = 'Main tab',
-          icon = f7Icon('doc_text'),
-          h1("This is the first tab."),
-          f7Button(inputId ='goto', label = 'Go to hidden tab')
-        ),
-        f7Tab(
-          tabName = 'Second tab',
-          icon = f7Icon('bolt_horizontal'),
-          h1('This is the second tab.')
-        ),
-        f7Tab(
-          tabName = 'Hidden tab',
-          hidden = TRUE,
-          h1('This is a tab that does not appear in the tab menu.
-          Yet, you can still access it.')
-        )
-      )
-    )
-  ),
-  server = function(input, output, session) {
-    observe(print(input$tabs))
-    observeEvent(input$goto,{
-      updateF7Tabs(session = session, id = 'tabs', selected = 'Hidden tab')
-    })
+    
    
+    
    Usage
    
+    
    updateF7Tabs(id, selected = NULL, session = shiny::getDefaultReactiveDomain())
    
+    
    
 
-  }
- )
-}
-
    -
    - -
    +
    +

    Arguments

    +
    id
    +

    Id of the f7Tabs to update.

    + + +
    selected
    +

    Newly selected tab.

    + + +
    session
    +

    Shiny session object.

    + +
    + +
    +

    Examples

    + 
    if (interactive()) {
+ library(shiny)
+ library(shinyMobile)
+
+ subtabs_ui <- function(id) {
+   ns <- NS(id)
+
+   tagList(
+     f7Toggle(inputId = ns("updateSubTab"), label = "Update SubTab", checked = FALSE),
+     f7Tabs(
+       id = ns("subtabdemo"),
+       style = "strong",
+       animated = FALSE,
+       f7Tab(title = "Subtab 1", tabName = "SubTab1", "SubTab 1"),
+       f7Tab(title = "Subtab 2", tabName = "SubTab2", "SubTab 2", active = TRUE),
+       f7Tab(title = "Subtab 3", tabName = "SubTab3", "SubTab 3")
+     )
+   )
+ }
+
+ subtabs <- function(input, output, session) {
+   observeEvent(input$updateSubTab, {
+     selected <- ifelse(input$updateSubTab, "SubTab1", "SubTab2")
+     updateF7Tabs(session, id = "subtabdemo", selected = selected)
+   })
+   return(reactive(input$subtabdemo))
+ }
+
+ shinyApp(
+   ui = f7Page(
+     title = "Tab Layout",
+     f7TabLayout(
+       navbar = f7Navbar(
+         title =
+           f7Flex(
+             HTML(paste("Selected Tab:", textOutput("selectedTab"))),
+             HTML(paste("Selected Subtab:", textOutput("selectedSubTab")))
+           )
+         ,
+         subNavbar = f7SubNavbar(
+           f7Flex(
+             f7Toggle(inputId = "updateTab", label = "Update Tab", checked = TRUE),
+             subtabs_ui("subtabs1")[[1]]
+           )
+         )
+       ),
+       f7Tabs(
+         id = "tabdemo",
+         swipeable = TRUE,
+         animated = FALSE,
+         f7Tab(
+           title = "Tab 1",
+           tabName = "Tab1",
+           subtabs_ui("subtabs1")[[2]]
+         ),
+         f7Tab(title = "Tab 2", tabName = "Tab2", "Tab 2"),
+         f7Tab(title = "Tab 3", tabName = "Tab3", "Tab 3")
+       )
+     )
+   ),
+   server = function(input, output, session) {
+     output$selectedTab <- renderText(input$tabdemo)
+     observeEvent(input$updateTab, {
+       selected <- ifelse(input$updateTab, "Tab1", "Tab2")
+       updateF7Tabs(id = "tabdemo", selected = selected)
+     })
+     subtab <- callModule(subtabs, "subtabs1")
+     output$selectedSubTab <- renderText(subtab())
+   }
+ )
+ # with hidden tabs
+ shinyApp(
+  ui <- f7Page(
+    title = "shinyMobile",
+    f7TabLayout(
+      navbar = f7Navbar(
+        title = "Update Tabs with hidden tab",
+        subtitle = "",
+        hairline = TRUE,
+        shadow = TRUE,
+        bigger = FALSE,
+        transparent = TRUE
+      ),
+      f7Tabs(
+        id = 'tabs',
+        animated = TRUE,
+        f7Tab(
+          active = TRUE,
+          title = "Main tab",
+          tabName = "Tab1",
+          icon = f7Icon("doc_text"),
+          h1("This is the first tab."),
+          f7Button(inputId = "goto", label = "Go to hidden tab")
+        ),
+        f7Tab(
+          title = "Second tab",
+          tabName = "Tab2",
+          icon = f7Icon("bolt_horizontal"),
+          h1("This is the second tab.")
+        ),
+        f7Tab(
+          title = "Hidden tab",
+          tabName = "Tab3",
+          hidden = TRUE,
+          h1("This is a tab that does not appear in the tab menu.
+          Yet, you can still access it.")
+        )
+      )
+    )
+  ),
+  server = function(input, output, session) {
+    observe(print(input$tabs))
+    observeEvent(input$goto, {
+      updateF7Tabs(session = session, id = "tabs", selected = "Tab3")
+    })
+  }
+ )
+}
+
    +
    +
    -
    -
    -

    Developed by David Granjon, Victor Perrier, Isabelle Rudolf.

    +
    +

    Developed by David Granjon, Victor Perrier, Isabelle Rudolf.

    -
    -

    Site built with pkgdown 1.6.1.

    +
    +

    Site built with pkgdown 2.0.7.

    -
    -
    +
    + - - - + diff --git a/docs/reference/updateF7VirtualList.html b/docs/reference/updateF7VirtualList.html index 1bcb7a7f..32a7c387 100644 --- a/docs/reference/updateF7VirtualList.html +++ b/docs/reference/updateF7VirtualList.html @@ -1,435 +1,327 @@ - - - - - - - -Update an f7VirtualList on the server side — updateF7VirtualList • shinyMobile - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - +Update an f7VirtualList on the server side — updateF7VirtualList • shinyMobile + Skip to contents + +
    -
    -
    -

    Update an f7VirtualList on the server side

    - Source: R/f7List.R - +
    +

    Update an f7VirtualList on the server side

    + Source: R/f7List.R +
    updateF7VirtualList.Rd
    -
    -

    This function wraps all methods from https://framework7.io/docs/virtual-list.html

    +
    +

    This function wraps all methods from https://framework7.io/docs/virtual-list.html

    - 
    updateF7VirtualList(
-  id,
-  action = c("appendItem", "appendItems", "prependItem", "prependItems", "replaceItem",
-    "replaceAllItems", "moveItem", "insertItemBefore", "filterItems", "deleteItem",
-    "deleteAllItems", "scrollToItem"),
-  item = NULL,
-  items = NULL,
-  index = NULL,
-  indexes = NULL,
-  oldIndex = NULL,
-  newIndex = NULL,
-  session = shiny::getDefaultReactiveDomain()
-)
    - -

    Arguments

    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    id

    f7VirtualList to update.

    action

    Action to perform. See https://framework7.io/docs/virtual-list.html.

    item

    If action is one of appendItem, prependItem, replaceItem, insertItemBefore.

    items

    If action is one of appendItems, prependItems, replaceAllItems.

    index

    If action is one of replaceItem, insertItemBefore, deleteItem.

    indexes

    If action if one of filterItems, deleteItems.

    oldIndex

    If action is moveItem.

    newIndex

    If action is moveItem.

    session

    Shiny session.

    - - -

    Examples

    - 
    if (interactive()) {
- library(shiny)
- library(shinyMobile)
- shinyApp(
-   ui = f7Page(
-     title = "Update virtual list",
-     f7SingleLayout(
-       navbar = f7Navbar(
-         title = "Virtual Lists",
-         hairline = FALSE,
-         shadow = TRUE
-       ),
-       # main content
-       f7Segment(
-         container = "segment",
-
-         f7Button(inputId = "appendItem", "Append Item"),
-         f7Button(inputId = "prependItems", "Prepend Items"),
-         f7Button(inputId = "insertBefore", "Insert before"),
-         f7Button(inputId = "replaceItem", "Replace Item")
-       ),
-       f7Segment(
-         container = "segment",
-         f7Button(inputId = "deleteAllItems", "Remove All"),
-         f7Button(inputId = "moveItem", "Move Item"),
-         f7Button(inputId = "filterItems", "Filter Items")
-       ),
-       f7Flex(
-         uiOutput("itemIndexUI"),
-         uiOutput("itemNewIndexUI"),
-         uiOutput("itemsFilterUI")
-       ),
-       f7VirtualList(
-         id = "vlist",
-         items = lapply(1:5, function(i) {
-           f7VirtualListItem(
-             title = paste("Title", i),
-             subtitle = paste("Subtitle", i),
-             header = paste("Header", i),
-             footer = paste("Footer", i),
-             right = paste("Right", i),
-             content = i,
-             media = img(src = "https://cdn.framework7.io/placeholder/fashion-88x88-3.jpg")
-           )
-         })
-       )
-     )
-   ),
-   server = function(input, output, session) {
-
-     output$itemIndexUI <- renderUI({
-       req(input$vlist$length > 2)
-       f7Stepper(
-         inputId = "itemIndex",
-         label = "Index",
-         min = 1,
-         value = 2,
-         max = input$vlist$length
-       )
-     })
-
-     output$itemNewIndexUI <- renderUI({
-       req(input$vlist$length > 2)
-       f7Stepper(
-         inputId = "itemNewIndex",
-         label = "New Index",
-         min = 1,
-         value = 1,
-         max = input$vlist$length
-       )
-     })
-
-     output$itemsFilterUI <- renderUI({
-       input$appendItem
-       input$prependItems
-       input$insertBefore
-       input$replaceItem
-       input$deleteAllItems
-       input$moveItem
-       isolate({
-         req(input$vlist$length > 2)
-         f7Slider(
-           inputId = "itemsFilter",
-           label = "Items to Filter",
-           min = 1,
-           max = input$vlist$length,
-           value = c(1, input$vlist$length)
-         )
-       })
-     })
-
-     observe(print(input$vlist))
-
-     observeEvent(input$appendItem, {
-       updateF7VirtualList(
-         id = "vlist",
-         action = "appendItem",
-         item = f7VirtualListItem(
-           title = "New Item Title",
-           right = "New Item Right",
-           content = "New Item Content",
-           media = img(src = "https://cdn.framework7.io/placeholder/fashion-88x88-1.jpg")
-         )
-       )
-     })
-
-     observeEvent(input$prependItems, {
-       updateF7VirtualList(
-         id = "vlist",
-         action = "prependItems",
-         items = lapply(1:5, function(i) {
-           f7VirtualListItem(
-             title = paste("Title", i),
-             right = paste("Right", i),
-             content = i,
-             media = img(src = "https://cdn.framework7.io/placeholder/fashion-88x88-1.jpg")
-           )
-         })
-       )
-     })
-
-     observeEvent(input$insertBefore, {
-       updateF7VirtualList(
-         id = "vlist",
-         action = "insertItemBefore",
-         index = input$itemIndex,
-         item = f7VirtualListItem(
-           title = "New Item Title",
-           content = "New Item Content",
-           media = img(src = "https://cdn.framework7.io/placeholder/fashion-88x88-1.jpg")
-         )
-       )
-     })
-
-     observeEvent(input$replaceItem, {
-       updateF7VirtualList(
-         id = "vlist",
-         action = "replaceItem",
-         index = input$itemIndex,
-         item = f7VirtualListItem(
-           title = "Replacement",
-           content = "Replacement Content",
-           media = img(src = "https://cdn.framework7.io/placeholder/fashion-88x88-1.jpg")
-         )
-       )
-     })
-
-     observeEvent(input$deleteAllItems, {
-       updateF7VirtualList(
-         id = "vlist",
-         action = "deleteAllItems"
-       )
-     })
-
-     observeEvent(input$moveItem, {
-       updateF7VirtualList(
-         id = "vlist",
-         action = "moveItem",
-         oldIndex = input$itemIndex,
-         newIndex = input$itemNewIndex
-       )
-     })
-
-     observeEvent(input$filterItems, {
-       updateF7VirtualList(
-         id = "vlist",
-         action = "filterItems",
-         indexes = input$itemsFilter[1]:input$itemsFilter[2]
-       )
-     })
-
-   }
- )
-}
-
    -
    - -
    +
    +

    Usage

    + 
    updateF7VirtualList(
+  id,
+  action = c("appendItem", "appendItems", "prependItem", "prependItems", "replaceItem",
+    "replaceAllItems", "moveItem", "insertItemBefore", "filterItems", "deleteItem",
+    "deleteAllItems", "scrollToItem"),
+  item = NULL,
+  items = NULL,
+  index = NULL,
+  indexes = NULL,
+  oldIndex = NULL,
+  newIndex = NULL,
+  session = shiny::getDefaultReactiveDomain()
+)
    +
    + +
    +

    Arguments

    +
    id
    +

    f7VirtualList to update.

    + + +
    action
    +

    Action to perform. See https://framework7.io/docs/virtual-list.html.

    + + +
    item
    +

    If action is one of appendItem, prependItem, replaceItem, insertItemBefore.

    + + +
    items
    +

    If action is one of appendItems, prependItems, replaceAllItems.

    + + +
    index
    +

    If action is one of replaceItem, insertItemBefore, deleteItem.

    + + +
    indexes
    +

    If action if one of filterItems, deleteItems.

    + + +
    oldIndex
    +

    If action is moveItem.

    + + +
    newIndex
    +

    If action is moveItem.

    + + +
    session
    +

    Shiny session.

    + +
    + +
    +

    Examples

    + 
    if (interactive()) {
+ library(shiny)
+ library(shinyMobile)
+ shinyApp(
+   ui = f7Page(
+     title = "Update virtual list",
+     f7SingleLayout(
+       navbar = f7Navbar(
+         title = "Virtual Lists",
+         hairline = FALSE,
+         shadow = TRUE
+       ),
+       # main content
+       f7Segment(
+         container = "segment",
+
+         f7Button(inputId = "appendItem", "Append Item"),
+         f7Button(inputId = "prependItems", "Prepend Items"),
+         f7Button(inputId = "insertBefore", "Insert before"),
+         f7Button(inputId = "replaceItem", "Replace Item")
+       ),
+       f7Segment(
+         container = "segment",
+         f7Button(inputId = "deleteAllItems", "Remove All"),
+         f7Button(inputId = "moveItem", "Move Item"),
+         f7Button(inputId = "filterItems", "Filter Items")
+       ),
+       f7Flex(
+         uiOutput("itemIndexUI"),
+         uiOutput("itemNewIndexUI"),
+         uiOutput("itemsFilterUI")
+       ),
+       f7VirtualList(
+         id = "vlist",
+         items = lapply(1:5, function(i) {
+           f7VirtualListItem(
+             title = paste("Title", i),
+             subtitle = paste("Subtitle", i),
+             header = paste("Header", i),
+             footer = paste("Footer", i),
+             right = paste("Right", i),
+             content = i,
+             media = img(src = "https://cdn.framework7.io/placeholder/fashion-88x88-3.jpg")
+           )
+         })
+       )
+     )
+   ),
+   server = function(input, output, session) {
+
+     output$itemIndexUI <- renderUI({
+       req(input$vlist$length > 2)
+       f7Stepper(
+         inputId = "itemIndex",
+         label = "Index",
+         min = 1,
+         value = 2,
+         max = input$vlist$length
+       )
+     })
+
+     output$itemNewIndexUI <- renderUI({
+       req(input$vlist$length > 2)
+       f7Stepper(
+         inputId = "itemNewIndex",
+         label = "New Index",
+         min = 1,
+         value = 1,
+         max = input$vlist$length
+       )
+     })
+
+     output$itemsFilterUI <- renderUI({
+       input$appendItem
+       input$prependItems
+       input$insertBefore
+       input$replaceItem
+       input$deleteAllItems
+       input$moveItem
+       isolate({
+         req(input$vlist$length > 2)
+         f7Slider(
+           inputId = "itemsFilter",
+           label = "Items to Filter",
+           min = 1,
+           max = input$vlist$length,
+           value = c(1, input$vlist$length)
+         )
+       })
+     })
+
+     observe(print(input$vlist))
+
+     observeEvent(input$appendItem, {
+       updateF7VirtualList(
+         id = "vlist",
+         action = "appendItem",
+         item = f7VirtualListItem(
+           title = "New Item Title",
+           right = "New Item Right",
+           content = "New Item Content",
+           media = img(src = "https://cdn.framework7.io/placeholder/fashion-88x88-1.jpg")
+         )
+       )
+     })
+
+     observeEvent(input$prependItems, {
+       updateF7VirtualList(
+         id = "vlist",
+         action = "prependItems",
+         items = lapply(1:5, function(i) {
+           f7VirtualListItem(
+             title = paste("Title", i),
+             right = paste("Right", i),
+             content = i,
+             media = img(src = "https://cdn.framework7.io/placeholder/fashion-88x88-1.jpg")
+           )
+         })
+       )
+     })
+
+     observeEvent(input$insertBefore, {
+       updateF7VirtualList(
+         id = "vlist",
+         action = "insertItemBefore",
+         index = input$itemIndex,
+         item = f7VirtualListItem(
+           title = "New Item Title",
+           content = "New Item Content",
+           media = img(src = "https://cdn.framework7.io/placeholder/fashion-88x88-1.jpg")
+         )
+       )
+     })
+
+     observeEvent(input$replaceItem, {
+       updateF7VirtualList(
+         id = "vlist",
+         action = "replaceItem",
+         index = input$itemIndex,
+         item = f7VirtualListItem(
+           title = "Replacement",
+           content = "Replacement Content",
+           media = img(src = "https://cdn.framework7.io/placeholder/fashion-88x88-1.jpg")
+         )
+       )
+     })
+
+     observeEvent(input$deleteAllItems, {
+       updateF7VirtualList(
+         id = "vlist",
+         action = "deleteAllItems"
+       )
+     })
+
+     observeEvent(input$moveItem, {
+       updateF7VirtualList(
+         id = "vlist",
+         action = "moveItem",
+         oldIndex = input$itemIndex,
+         newIndex = input$itemNewIndex
+       )
+     })
+
+     observeEvent(input$filterItems, {
+       updateF7VirtualList(
+         id = "vlist",
+         action = "filterItems",
+         indexes = input$itemsFilter[1]:input$itemsFilter[2]
+       )
+     })
+
+   }
+ )
+}
+
    +
    +
    -
    -
    -

    Developed by David Granjon, Victor Perrier, Isabelle Rudolf.

    +
    +

    Developed by David Granjon, Victor Perrier, Isabelle Rudolf.

    -
    -

    Site built with pkgdown 1.6.1.

    +
    +

    Site built with pkgdown 2.0.7.

    -
    -
    +
    + - - - + diff --git a/index.Rmd b/index.Rmd index adf76f33..eabe41d4 100644 --- a/index.Rmd +++ b/index.Rmd @@ -1,9 +1,11 @@ --- output: github_document +always_allow_html: true --- ```{r setup, include=FALSE} knitr::opts_chunk$set(echo = TRUE) +library(bslib) ``` # shinyMobile @@ -17,6 +19,20 @@ knitr::opts_chunk$set(echo = TRUE) [![Project Status](https://www.repostatus.org/badges/latest/wip.svg)](https://www.repostatus.org/#wip) [![CRAN status](https://www.r-pkg.org/badges/version/shinyMobile)](https://cran.r-project.org/package=shinyMobile) +## Sandbox + +You can play with the below sandbox. + +```{r, eval=TRUE, echo=FALSE} +card( + shinyMobile:::create_app_link( + "NobwRAdghgtgpmAXGKAHVA6ASmANGAYwHsIAXOMpMAGwEsAjAJykYE8AKAZwAtaJWAlAB0IdJiw48+rALJF6tanGEQRaVAH0iqUpwAEAHgC0eup1LsRe63tLc48PQF49QsLSKc3uKzYAmLADWznoAYgCCADIAygCiPhA2egBmikp+IREx8b7WxNREjCFuAMQADGUA7FDJyd65tkQArgTcIWYWDdakaAASRNQZLgAqWACqOYlJtn0DfgAicNRQrCGVAKxlCdN6HpzDza1YtOhKmVFxDQLbNnvDzBCc1C0UpABCLPouWXE31tAAN3oLHatHMlimST2AGFXnBGMNaKQziNxpMdrw-HAAPIQAAKUAA5nBogRGANqCFRhMrn9GgNgUUXB0IRjaFjcQTiaTydRKd8LrFaQ1UE0+QcsHBkow4DxztlfCoRFJ+OF0Ky9E1aCFkpUuXANdZtKQPI8QuotDpOHSTci4MUwCrZPJFPbolAIH56EQAB71SEpSrDKD0SIrZqdAPWVAepZfGaEyJgyM7ay6gkQJbsW0o1xgSJS0h6DNLbx6Tjs+0uNxKZKkMt2BxVvN0Qncet4PNvZb0ZZlqXJOAEIvVwhEAHwtzXLo2dOx6jZpG5tzHNtFkvUMsVrEOxi0NcN+yOUcBRiBMtubshvudgdDkd54gTxhTmfTqN6QGMnWVAByUCBFhDWmHNmzcJ05AUM53U9b0-TwGdrG4KBaEYOhMypNE6SSHgoD8IgAHdMImbCbFrUgN2I9FUz3NdKNRGkP3fHZdWDehOGApIPVoGAoHIIY9GpaidhKTgCJOOBr2bITSLTIMQ04kClzAsA2L0ABGf1UxsHp6H-Y88zYzSEI-KFiESFxdQASXMywwGSOZJzAZjtL0KBh1oCcqISRCyPUagOHUxAAGYtkDaEWD8FRtJclj5PoRSklAh01IAJi01zdP0lS2PSkzXN2cyfxskg7MCOBWG9SKp1k2dKmiZD8IIxLpj4chHiRVYXHUrZfKSbhx3hby+rqiLGD8FqdmS0cxoyew8Kc2qdjccI9AIaqwBG6xotcnadli6ZWIUkbpsMkM9GCjLtKy2AcpDS78tc2gissyoSogOzllYeFOA0KBqA7A64oavDCMm24yAoCtSC6jTetM6YBufYaEaSXVZvBpLlIdWa9HmrEX0egq5OiXjGFIaIlnvTHpjcAEWFoKSruJ6w3AANQZqT9FIIhywGgjEGZlmCDs6FWHQgmvDAB0CHFoWWcMh5OBgMEKxINwHVgeWWbcABxSTGClh1iRYGqtumbQKCsiy8x4OA4A7JbUxgMUTVQXMhPN7anaSqTsSaUhRU6MAAh6V9UZsPbUyjpIY70KOdpczh4WRyymggDzSr4IPcD0CMc-LWU1YgAQ9BABoSj0UO+KZgN84DgASavDBMGVPXhNilHYcuPxgUh1sN4Bc5FtwYFQQky2zxv6b3KTrir8lUHlOIAF0GgAX1z8kCOgeB4yEnb15EFQwHXlegA", #nolint + "editor" + ), + full_screen = TRUE +) +``` + ## Installation ```r @@ -26,83 +42,29 @@ install.packages("shinyMobile") devtools::install_github("RinteRface/shinyMobile") ``` - -## Cheatsheet - - - - ## Demo -A running demo is on [shinyapps.io](https://dgranjon.shinyapps.io/miniUI2Demo/). -Left side: android demo, right side: iOS demo +Android demo: ```{r, echo=FALSE} shinyMobile:::app_container( - "https://dgranjon.shinyapps.io/miniUI2DemoMd", + "https://shinylive.io/r/app/#h=0&code=NobwRAdghgtgpmAXGKAHVA6ASmANGAYwHsIAXOMpMAGwEsAjAJykYE8AKAZwAtaJWAlAB0IdJiw48+rALJF6tanGEQRAYgAEnIgFdGBOBphEAJjqWcRhgDwBaDRQButRiXhl2K1FFLcNdrVZOchgMADNFOHYhMDgAD1hUCwB6AHMoaiU2ZNIoek5kmNwNbwIAayhUwwBeDRipfjkFJRiVTjQkjhENDTpg8MjOaIgenu9fXG7RvgJqHRM4DBMXTg1agDEAQQAZAGUAUUmR0fHyRhHamOwiqZ7aVIgiRkWCKE4ajQAVLABVfamBEcemEdBACKRaCR2GEBBoQFpdPoohElBhxtx2OjijDitQiK9qGsHLCAL4iFTqLS8fgaDoiBqsTboYY9HS0IlhADsAAVKlFbrTMkQAO7cgDqmyJ3z+xSIqAhJFWtT6pHYJhYZSJWz2hw0KKUJi1OwOxVQzzxUAWjClv32gIFXM+eW2UFYulVAp6HXoLA5nKZqB9jBZo1DXPWSji0M5ACEoOV2LlGFVSABJQ2XMC5fJwUitbGcgBy8VVSZT6aJMWz7zzYAE9uOoeBnN2cBYBG4QfYtAzdTA73b3AAjEUNHw6BAPtLdUl43BuERqFbK2BPmwjIYSBpfIYACy+bd5ACErU9GgbTY3nHaVSDfpkcGvfLjwb4qB0ad7MRgrHgT9vLCjrOBgLkucDWpmD7-nA+Znt4k7UEqh6pNstDBCGl5cryCEYZeY5fmA8FwNQ2xwGEtZAnhPQQqQSgrqR5EaNhxE3I2eGcD2HwxEo5GsVR1HcHA8ArnQqTcBRZ6hjEMbUHksl8fxZFhHA4Irs8jhttQMSSeelGYTyUA4Tp1G0LRXFgFg9ziUxhksXgxlaJxalWRJbGXjuwmZuqjBlApVHSbJ9DyfZblNkpKmkCuxAaYw2mhT0KiXheTbQI4d61FyhZQGlLC4aGNF0ZmDJNJEflNpwOj0AV5lhE8Gi7NSrBlaG3BQC4E5Traenla1JgijaMo6TxpDMYStTTt1oaMC5o0DYcOkKKkVQQV8XU6aQzAQJw3jPGQRo6meyVhpy2xEKkfB5dMBF4udEC8lUzWjNVK4AJq6BozwZNQrDbtSmpujoGivCMqREBognPAA-I9wJEEQZwrp8vCrO84KQiMHEwOYPiPrSIxQB+glkLQrwKiMZr4o+nAYF8EMwfFY6rPGpA6F9P2PBoOjvNahmGt417Ck8hrqtmbyLExH4aMKrXkDFGgA1LhmRfQH46X1EAAOSRUo2WGEFhllCeIVUcELCkAA8qgFD7Sah2TRomjPNF4G-YYxB4taqAk2ULtvpLvOc6gIuGDu24lhoPrlKkrigiYZ6aO7dXxsQjDLBAqTfRgZ65KknAACScAQ03ypdPQxHn0KgmjUKwiADkNdIGCWiYADCXOkEQMBQTecAABK81k7BayWtiJ4wGvYlXZPsH+Pe1w5PQVxrahj9y3vgQAahkGsCBgBDXkPkdlNHugQCYo+Lk8E9XnPADcDkkgI9+qAzPQ1qmZDgY4GSV2C0-z6-UYS9aAwFSDvJupANpDyLkQa8Tx7h8GvhrQyJBfy6E4DvZ+-ENAkmKAAVgAAwEIpIA5IyRtxnQzoYWefII6+h9O8Q0W5Q4ED0LtWiP13hKHBHAQ02Z66NSbiYVu7dO7dz5P3M+g8taUKUOIgC49J5-3RjPKmfIAHYLuGEDQqjoJrGqLUDWHYfA7zhAvIBQ81A-hoQo8BPARSeCwZoxeQ8MAd0XEGNxzo+BlAwbvXgCxHHmJJA4RChg66ANDEvKxv41G2P8ZxIJkSLEazcXDagnjsyoQgL4uxC5hRJOcWSQBj8nGXlKTpOKSV7aOjyEMHSPYVzVlzDDPGICca9m1LbBmnBhS0CtnJTqg0GbZg-u+UgnB7bUTyDGUgW0pmHnoC3FgJhJnrW8cENZIy8ifBLAs0ZEBar7LyObHcjBLChUSqMI625TKFT7MVeQpUwAAkotzOWGUp4qL9qQWUH5xnFHeNedGACBSaB+Rob+dARbowFPId5UQImXihT2HG6xORjI-N2CA4yKyZnIHECiY5Dlg0zGKGWcAYqnlCii4O6LMUegZj8vFfZ+a9KFq0044ELh9mAAQ2wABOAAugAKlaeBVwK0Yjm1EOzHQMB6DgVWEkNs7wjaHQFI-EQYKKFLTojYvWLBEBUl0EuDQJBvoR0MMsTgslWC8KlkTc1IxQ4GtWPwti8Kv5wH2BpDwPy87NN+WY0KQKOIkALhQERwQxFxKiKQVgVsmmyLgPIuAQZRwBqDVcnoWqX6hk0FzF27wz4aEnMKG+fI4U5kYBpX1FBVQ-OAMAb8sToJBlsCWuOYAhVCuKEipsOgg5os5Gm+pTKCLWLjZYY2eEVSl1GFyNNC78rh1qAGqd7aWALNDNATyfYAAi2UeytPyom8yJbXLOMEpaF2kE40aF7m2K0p7F1wwRvevR6x33gVfdREsT7b1StXOHQDL7Z3YIJaQb98M719igxoGDZw-20m-kmFc4lSCoE4IgMhBATAQHCMweAgsfKcgwJCZIwF5yLitFRuAcolC2CHEQuILH+XkYAFaoFSFU-iOamwCYSpqkhBa9RQB9hQj6Kk4C0A0h9XmndK1VAuaGL1tbEVnj4LSnGLozjsEIUQoTZbYC4wCAQaIYAN4kw7rFPAfYABSRBuCqDrGePdNh7DtBgCq9gHnJkaCHKJwdw7yDorHQuxpmZN09xnQs+dDkl1xpXU9NdfY00oY80SDzO6nrnrUjJuTvCUPZR8L6TMmHsO4eSPhwjYRiNwFI2UcjlHqOgTo1bRjcBmOsfY4KjA3HeMvMAcZ4TlyRParYpoDa9xlp6jqjdPgAoZtLRdgET6aMNLsAHVNOAABHbF4zA11NzPovsxjawCbzWJxbGNvXWmMGYFobECTUDkE9-koUuSnVuq2DTjB7ZRb7Ld+6MEIPTAeE8OAH9TJzXtitubtQEe-rYsFno7ojscRGOtqN4FuR4lVEkeGXA+DFFsF7YoAAmEVXt6xwv+R+POxBVg47PnjgnmIOfM7JxTjQ1Pado-NQz0ggbw6s6tNyaa-qcWM6gwJjHjO2WkcNOLvHUvG0y5F0roW8vhei8JSwNs-h7C7Ql+rw7suSyG6gLrrDjPbWcWtKrxgku+Aa8x9C8CtuPeO6wIZKoxvpNs5d+bgNDurR+-TsoenduRfBDgOgNbJvcch7dxbuP5BE+MG94zjsKlNTO9d9Lo7efyg55F6X4+MdUCB9N2rtPAbK8nyHeXvOzBlhg0L6HzXbfLSQlbx3PVnmg9m4bz3wfVDW9cIirXlPRf3f2+IhFVvULZ-B-n+nvOKtIEkEp1PmAZsRZQDX1aJ0QVNOhRvSYGepBXjnOAMUCz34eOZp75wA-jAJnEUBBoEwrga8bDGj7BCpXbFCuDCj+ZzRT5L7ghHrkAn717F6M7Byt4EwdzEA+ZKCywZAIGp5IEi4-hoH4idwqrkCC6yToDfTsBDiIBDiU5KLVwQDdgaJNgK6kDNr8zkAEKWbPBxZjgCC9q4G7KEqYhvBcGWYxgfgdyubFDsiTBgCMx9iyGa4cFiFwDcExBVQyH8G9p05sTXajBsF5xezlBfw4HO7CEL4EGJrrzZ4x4l6Xwu62FbyEgWElib4-hjwmE+x2H5qjCaBdquxAyOElC2HErjJSYOa7DVoIr1r4F5yeGOHeHgT9pnhhroyRpnxtwxpdzJYJpJr4ojxjyjgGpEgbqsBeG2FXYkI6qoByhDr2GK71GoAtwkDkB7Rd5j5HZ1HvioCWGC7qZ1p+pWGBoprcjNGpFfY8jNGRYEQ9FDojjg75R3LmQyA-QRDnKRTzGoCtKOjuExDbGWGjgxDjG9HBGfxkDHGrjIyKE-h6grBbHNEOAxTFCphaDChtiMBGw3KhgxQ+gQgwCWHmzC6WbbGtEXGXYar6EDE1pDENqb7bFDiTGXi0DaKb5BpnYnHNEzosGXjbG7C5Asws72Cok6IBqImwgxBygUDFYKHETvDnZ4iMJ8b6SfBEBiEpZ1EcRkzJo7FLFNgIa1CcH8hgCnFDqMxATNEEk+BcyjbnhnjFKhh5o6o8BwCnZE55iep66qm5j47wy4F6mqg7ajDIyqjnBPAwCb46kWz5B6FKkwmxHDHokpoNRqnBrGmsihZwDoqum5jdgETWmLHVGTZiaPAQgRCkzoyqajAUGdDUGIAADMDB08tAuJhhsJPqTpTawAwpGhYAoMhY8MqJmaAhfaESDSxA2OJJaJ7IAApLWXzmdsQnqBipWZZvQIuKQAAPr6itChIMmFg-DbDbAhl4SZRFlhApaCnwaPhXr8QkxbjrqVm5bPRClqGWaFnhkkw+Cwr2apm5YVRVQrEriSiHnVSvrVSWRiSkCWFlE6TGYGG5qC6aAHq0AZBnTRk9CaBhmonblkyfm9AdBUE0FJl6hfJQipkhqXiDGZnwnZm5mWagyvnvlDayGlmTENI1lnZBZQX8RcjIU3QpYmRmQrgEVnS3JmQobTkxBIxoSKGGSCjgSRTLAoUsl4RykhL0mGCkndhnZ764VUT4VvmEXmJA4xCVkbEwBkWoXmKrmHrCXkXnn8nuT5aZgSUuAwBUVpY0U3F0UMXqWMAwC-4KVDYOQcX9ncVYUGIaAJlpn6TSVEX4QrgUw+akDSVUXHmZjSUUUtDKUCmqWsquCuVaWEqIy6VMwlBBXyjGWsXDbYIcUKnBl+Ho4ZlxEjEGVSUmXIlNiOjsnoTTnCmWabBZCRQQpoSICv4OGHIaXSV2mjDKlamx7GFRUbRmbJ7B4-CpjbZaY1nUwQDmDUAIktW1V2WLqxh4jlCfArGJieV9gtx0DlDOoxU3QRxSFbgJnUrlJnhcgyT4hlBTVmQzUkXro94uXyi1UTbJUOwlByhEAxQAUwVpUIm3UxSSE74QDZWhjNzoqnF3XgSzHOUvXgRvXSGtJyj-lEjzqVntGRSZi0WrB6Utkg0kCbWCaXU6odxiEPWpVZnj55XunbWchskck6RcmmTowrgdk76aV+XUVgBvGwC0gUJiE0z7A+AbjqrjbQmjlfm0iMFUhukxHepPUBqgybCMG+kE1THi1kyS0LrRxA4TQNIETMzoyLELLb7SFIQJaAI63OJ02bm-mRko1+WhgLk8pciphtkxB8C1SwTJJjxEiDnDlmW5Z62aJ03uWm3TCVl+hW1QjcQuQqwZI9mKBaR1i5Y9CO21DO0jkjb3lQn2k83mo41wU96q0kBDhdma0kCfXTA1np2MFZ050XC1A4UeljWG2TkOR01vSAyzDrxMIuqCT3GbGrXvWvrm1+3W1gAdnUDdm9kR012zUxBV1-m7krkrFXniS3mZiPDChsWhgPkWVjgF1HYZ0QDF1rWl186jXNgOUORiUoAS2CS5he2T3HVzULWajCQdyAVVx+DH7E3BBGwrkBXiUkCSUXnaVgB11AzX0OrMIt2owkCGgl2L3XIKno2eqp3xG9L9JwAy3ozZ3b151aJklv59JWxIMkAoPvXYV70tlV1Tk-1-0N2mFN1BEbHBDt2g3e1d0ZStkB292dmh2ZD22QYj1gBj3G0yHD1mTT03k-3z0QNjblIr08Vh5YOIOMF4PSF8WENCUoUpZH0b2S3n38P3IxDzXewbhSayQP1M3P2kCv013v2ECf0aXf2hWZhkMAOUOhwgOlrgNxXsVQPc1XWPW43r0n1unSVoMtnGOJhpaFUxDFVMXhGSzlWVWM5qOn1uUmV1VPnJ2FpemRVnS8GrAZowOOlp1HZDrBw8ZIkCWjAFMjqS4ZNUz+nOWpDq2QoZA6AfABplOZ61NJU6otOGDpA6APQ5PC3eOM6dPdNVDFMV2dPooADiBMVQ1T0WrAwzcAdTUKjTZRPeQz0ziz7TU2DgcQ8Ehod+hoG1fTGmItPeoMyyqcAT4znIFz1+R9BzG1bmHjGNKafNKcHenjsDIxYtBA7z6MVzXp6K4tfzAdE6K4ycQsatrS0+PCvYI4XNSdV1qTwcJQtkWkxzcJ8RoMo0ALdKBkOER9REJEZEkJzz2z8DnWqsGLsFcD0jVdAT454ZC6dN5AwQrSDDLZ-tTBmhrDg9PxT0XDPDO5JtCyZ5XDp5lUSl+yU9Lks9fYIjrjS90DamXzVp0j4Tn+DLnIB9IyXD3lUr60P98N9F+MJVy1Z0EDWzKruTtLCDODEAktWr9rctOkCtvYStYLRU6rjBrSJd2taEjK2C7tkGP9QrZMKGHLltPdttRAHDmi0dGgsdrtDkwb-EntJlEbvtjDXLlmok4kwd9AbD4d-Ll4CbSb8dDMxmVr-hkVxE7JVo2NNrIx9iwop0QGATLbP15o9b-1ZYp2mYagZodbQGhpo4CbmhcwYOxmuwQQGAtqapqA7Ae+Z4AS3pPI3bQGiYLAKYK4g7G7EuBOqNyTjV3R+77O+pheHOFdpp7A5phl1BRm1bvNqAC4d9TAIo3MQtJzAzIuE+Sg3Ir7RAWrAH8MRAMY4B3MzLgk+6MQ3kvktN5jpsZ875k4nKgHSET+gCMQlWOGeGBGRGpmTWLWRAVGskIEtG4EyQ20TwEyPWlOu4bGBC9HzGA2L+3t2HkCVWeHdWDWRHFGJHbWFHjAVHdRn+nAdHDHLGzHlOrHMlWHYAOH1WtWBHJGTwzW-HpHc47WlH1HYnEnjHzHCZsnoj8pCL9Vz5GgD4-Vjb-TeTsuKaVnOguLI6jnB6-+fUEBlm7gOgQZyr6ZTbHhFAOgqYIQozhNxDdNYoxEhI6scA3xfnvNnAPsWBKN1L3VoU2mGQqK5Aem-1u4RCxChNuwyXuYzDc7JX0htgKoVxYQt6o4y7ZLYmqENDfACwcQYKXj8JE0JTmgLZzXaYbOUYOqV0IkAbtgrX8QzGZUvX0yyY-bfYagKo43g3tgfbc5vNMZeQxEc0w3AmaguCzqBgUBKTJQA1Umzw9Wj43AOqnX8R8oAOPXw3JQG00pRJgekjp1G0lJYAJtYKT3SjIl2zq6NjqL8eQ893jM1893r3sp3UM31E5jGQTFbFM3e3OCwWxSKgYAJIQqQAA", #nolint deps = TRUE, skin = "galaxyNote8" ) +``` +iOS demo: + +```{r, echo=FALSE} shinyMobile:::app_container( - "https://dgranjon.shinyapps.io/miniUI2Demo", + "https://shinylive.io/r/app/#h=0&code=NobwRAdghgtgpmAXGKAHVA6ASmANGAYwHsIAXOMpMAGwEsAjAJykYE8AKAZwAtaJWAlAB0IdJiw48+rALJF6tanGEQRAYgAEnIgFdGBOBphEAJjqWcRhgDwBaDRQButRiXhl2K1FFLcNdrVZOchgMADNFOHYhMDgAD1hUCwB6AHMoaiU2ZNIoek5kmNwNbwIAayhUwwBeDRipfjkFJRiVTjQkjhENDTpg8MjOaIgenu9fXG7RvgJqHRM4DBMXTg1agDEAQQAZAGUAUUmR0fHyRhHamOwiqZ7aVIgiRkWCKE4ajQAVLABVfamBEcemEdBACKRaCR2GEBBoQFpdPoohElBhxtx2OjijDitQiK9qGsHLCAL4iFTqLS8fgaDoiBqsTboYY9HS0IlhADsAAVKlFbrTMkQAO7cgDqmyJ3z+xSIqAhJFWtT6pHYJhYZSJWz2hw0KKUJi1OwOxVQzzxUAWjClv11vjg8CJMUhljAgIFXM+eW2UFYulVAp6HXoLA5nKZqBDjBZo1jXPWSji0M5ACEoOV2LlGFVSABJQ2XMC5fJwUitbGcgBy8VVWZz+adRby7zLbvdx1jwM5uzgLAI3Cj7FoBbqYHefe4AEYiho+HQIB9pbqkum4NwiNQrY3PmwjIYSBp7RoACy+Q95ACErUDGnbnb3nHaVSjYZkcEffLT0b4qB0eZHMQwKw8Afs+LAziuBjrpucDWoWb6gXA5Y3t4C7UEq56pNstDBDG95cryaF4fes4AWAqFwNQ2xwGErZAiRPQQqQSiNtRtEaIRlE3B2JGcMOHwxEotHcQxjHcA6Ak0Pc3B0TesYxCm1B5EpImiTRYRwOCjbPI4vbUDEcm3vR+E8lARGGYxtDMZJWDSaQHFmVxeAWVo-HaXZqkMfajqFuqjBlJ5JEKUp9Aqc5PH3upmn2YWxC6YwBkRaMKj3nenbQI4L61FylZQJlLDEbGTEsYWDJNJEgWxpwOj0MVklhE8Gi7NSrCVaM3BQC486LraxmdjwloijaMqGUJpCcYStRLn1saMHZE3DYchkKKkVRwV8vWGaQzAQJw3jPGQRo6jeaVxpy2xEKkfCFdMZF4ldEC8lUbWWdZjYAJq6BozwZNQrCHtSmp+joGivCMqREBo4nPAA-C9epEEQZzbrwqzvOCkIjHxMDmD4760iMUB-uJZC0K8CojGa+LvpwGBfNDSFJXcqzpqQOi-f9jwaDo7zWmZhreI+wpPIa6rFm8iwcX+GjCh15DxRowMy2Z9n0H+hkmCQADk9lKHlhihWZZRXuFDHBCwpAAPKoBQR0midM0aJozxxbBAOGMQeLWqgZNlG7P7S-z3OoGLhhHuQcSq+mZSpK4oImDemie416bEIwywQKkf0YDeuSpJwAAknAEHN8o3T0MQF9CoIY1CsIgC5zXSBglomAAwjzpBEDACFPnAAAS-NZOwOs1rYyeMFr2I1xT7AgX39cuT0Vda2oE-cr7sEAGoZFrAgYAQj4jyG5Sx7oEAmOPG5PFPD4LwA3C5JICI-qhM6MLa5mQsGOBk1dgrPRe79Ywr1oDAVIe8W6kG2iPEuRBHxPHuHwW+WszIkGAroTge9X6iQ0CSYoABWAADEQikwCNDJGSIeS6WdDDzz5BoF8IZ3iGgPEeAgegDrMX+u8JQ4I4CGmLI3FqLcTDt07t3XufJB4X2HjrGhSgpFgUntPABmM540z5EA3BdwwgaA0YhNY1Raha37D4PecIl6jBXmoIC9DlGQJ4CKTwOCdHLxHhgLuG4oyeO9HwMoWD968AWC4qxJIHDoUMA3chICR62OApohxQT+KhJidYjxXjqA+OLNhCAATHHrmFKktxZJyHP1cfecphlEqpUdp6Zs5dSKNmLC2eGZkwF4xHNqe279ODCloDbZSPURrv2LF-X8pBOCO0YnkFMpBdrTPPPQNuLATBTK2n44I6zRl5E+DWRZYyIANQOXkS29pGCWCSilZKfU6qNjKvICqYAAT0V5grbKM91EB1ILKP8EzijvEfJjIBApNDfI0L-OgYtMYCnkG8qI0T7yQuHHjdYnJxl-iHBACZDZCwRzorOI5kNCxijlnAeK14krItDmijFAZ37fNxaOQWfSRbw1OLBC4o5gBENsAATgALoACp4awVcOtGIltRCcx0DAegsFVhJF7O8E2J0BTPxEKC6hq0WL2INiwRAVJdCbg0CQP6jDDDLE4EpVgAiZYk1NSMI8erVhCJ4nCn+cB9i6Q8N8guLTSzFERf1GmmMi4UHEcESRiSoikFYDbZpCi4BKLgFGGcfqA2kGuT0DVb9YyaB5m7d4F8NALmFHfPksKSyMF0t6igqpvnAGAIBBJiEoy2GLQnMAAqBVBpvDoEOqLOQpqGIZYcjY7ExtdIslUjSuwprnaMfFRI-WTrbSwRZsZoA+VHAAETysOeGRV42SWLbJNJ4lLRu3gjGjQ-dexWiPaMBqSNr2jhTRodYiMzhPsYjWe9V6JVgD2ZHO9D7YK-sPDWL9r6gPLpgz+02Oi8o+FDIWGSpBUCcEQJQggJgIDhGYPAYW-lOQYEhMkSCa4NxWko3AOUShbCThIXEZjvKyMACtUCpBqaJbNnZ+M9H47mrVYQoB+2od9TScBaC6W+vzbuFaqiXNjB6mtCKbx8GpXjH0Zx2DEJIYJ0tsB8YBAINEMAW8yZdwSngUcAApIg3BVBuhvNumw9h2gwCVewdzUyNCTjIfeAdNLh1TsaeOwsa6+7TtGjheluCuQLqscum9iFIPuaJO5zdS6T3aWk7JgRkGUNZkbBhrDOHkh4YI2EIjcASNlDIxRqj0FaM2wY3AJjLG2P8owFxnjzzyFGaE2qniImeKaG2vcNaCNrT3T4AKKbq03YBB+hjXS7Bg2zTgAARyxRM-1zZSxGNHGY1swn+OaHm1jT11pjBmBaDxAk1A5APf5ElLkF0Ho9nU4wR2kXRzXaekhJDsZ7iPGeF-Kyi1HZLZm7UOHEGeJBdGP6A7fERirYjbBbkeJVRJCRlwPgxRbA+2KAAJiFT7AQ-G0d-gLsQVYWOL447x5iNnjOSdk40JT6nKOeh09IP6ms-h7AHStNyOavrsX0-xbTv59OWUkcNMziXUuG0y6F0rkW8vMOy5rCwXsoupMs8YJLvgGuDv4sN1AXX6OoUrbF9js36v9v0+tfxRgdv3cO8YFgMyVRjfi5x67v1HurT+8zsoWFCuhfBDgOgR3Ju1cW7d3H8gievcx710L-smlNSq5D6nv1efyje9z+JU+cdUBB+d+b6XB3S8x2r+XguzBliQ0Ly74vmu2+WkhK3ruOqPPJ6Lw32XSbW+8OirX039fLfu8otFVvkLZ8p-H0LtW0CSDk6nzAC2YsoBr9gl6UKGmkqXpMHPUgrwLnAGKOZwC3H02984PvxgkzKKAg0CYVwNeNjGj7ACrCbFCuDCh+aLRT5L7gj7rkDH7d4b4Fyhyt5ExdzEDeZKDywZDwHz5p4FxASoH4jdxKrkD869AdB-TsCTiICTjk6qK1wQBDjaKdiC5NqCzkBEIWbPDTqzgCA9rwEgb45vAcEWYph-hdwubFDsiTBgCzirAv4TJsHCFwCcExC1SSG8E9o07qqt4+zlA-zYFd6CF4FAR6F+xZ7uqx4M7Xxm6byMA7yEhGE1gmGsATxmGwRkGaCdruygw2ElB2GEoTKSb2a7BVrwp1qIFARuF2F9pJSAp8QkDhoXwdxRo9wxqZh5Z4pjwTwzh6orq95RE2HuEWGxjjZaqoBygDrZ4HYVG-ioBtwkDkCHRd64F+q1EDqCFkFqa1o+oL5C5D60LciVGoCxEmRDF1ERZkTtGoDTig6dh3LwT-QRAXL2TTHwyejOExDTGCEzgxDjEDq+HfxkC7HAaoxyFGBLErCrHDEODxTFC5haDCi9iMAmynSdjxQhgQgwCCGWyx4WbTENFHHnajalFdHVo9H1p4HTGTijGdi0B6J4GZonZ7HDGujMH3jTG7C5BsxM72Dwn6JtHDGBajhygUBFayGUTvCnZ4gsK8YmSfBEDCGLoVF8QUyJqoBPqpYlDKEWb7E144QQTDFYk+A8zDa3g3ilKgmaoTZUhwDHYE5liWE55FziSli45Iw4Fs5bbtTxbsDnBPAwB4E8BylWz5DaFjZgnhG9GIlJrNQmmwmxghZDp2mlhDhkTGmlizEXbSn5qlpIzwlkw+CYwqajBKToCUHUEADM9Bs8tA6JqO4JXq1pjawA7BKhFmEMlY-pYQ6afBva0SY6xAmOeJCJ7IAApGWTzidqQnqOikWRZvQBuKQAAPr6itARJUmVg-DbDbA+kkQ5TZmLpckxDkDBBPpkwHi1ATkQA5YLHcnx4WZZkQgRDkwwp2Zxk5bVS1RWQlSjiShbl1Sck7lwC2SpAySCErqGRGa5pSl5qjCaC7q0AZCXQhk9CaCPDLmBkUyvnkHhkcBRkxlfLxkC6JkRF9FKHx6qFgAQyPnPkDZSF5mxFjqlknbEnakmSwX3SLqvS7kxCYWXSHjHmQbDmnE4TnFmSCiwT2TLBwV0kkRinhKUmGD4lDgna76WLkJcj4WpDYVNKxQkDLEwDcXEXHmNjcWEXWTEWZGnYCUuAwDEUi6FifBnFkUUVFmCU-5Pn3R0WpSGSMWRKzgoXGIaCRnAWdhcVaWXS8UA5bGuDeakDCVzFeSiWFjiWHlOUkRxoJqFhUz2UKWgZKUqUswlB2XyiaW0WDa4IMUSnel3kgVWmQkl6yWMBCWWWpAOnPqcgMlMlclpkWabBZD2Tgo4SIAKH07qVyXcXmm3nVGK6hXbSmZO6m4-C5ibaaalm0wQDmDUBQn1VVVmVdiKT4hlCfDHmZguWjhtx0DlCOrhX3SMLiEHiRmUqVI3hchDXlCjXWTjVvRTm96+XyhVU6F9lvklByhEDxQ-ndFJmJX7XnXxRiHb4zkcX3itxorjEXWwSTGNi1GfWMCPUSHwxyjflEizpFlNExSjjKVkWqW1kA0kArUCbHVxVOzULCFXWgXJm95dzCEZVdjZW4SGQslWSYyNiNnb7yUeV-oBWjgPGwC0ho39AaD7A+B7iqpXLI1aqsyk0emKmqaY23UHYQybAMEuk-IvXmXhii2qkJYkSxwA7TRjpkTc0kCzGLJb4SEYSzouTa1pIkVLkBmrkI1U1wlFlhi5j1nOhErIRpITxEhdk9kuRvH3i61uIkWOU5Z3Bm3ZR1lQiCR2RqxZKtmKD6Ruie2+Fez23dm9lDZXkgmjDjb80JWIEq0QCTjNka0kB42GUEm96p3p2Z0XC1BoWGQDnLlDmKWjifQgyzCbysJOriR6hXELVPXjne21kW1+1gCNnUAtltlh0uRzkxAG0rlBnG2znHmnnnmV0xCPDCg6XJQSkdnMWll50MEF2LVF084DW1ncWLo2UoDS0mke2D0TUxBTW+x7iSZKQ1x+BH4E2kAmyznSUxAVUpWckz1gDV2gzTV+z10+HowkCGiF0L0jZJSSkJ2WmepgVGn9I2wi0UwZ2b3Z0sVh5wNwAIOYxINPWoU71l3wkV000xDf2136H-1HjLHBAt2A0m1e2Tkd2W3d1NnB2ZA224JD1gAj1flrkT3WRT2kAXmFhz2gPingPL052wMDIYMMHYMSFsV4Och70uQH2p1i0n3kIcMX0zWOhdzkG30M0P1P2D0v2EDJWU2zmf0kO-12psKN2AMlogORX0USmc3uoC0p1H2ljcXZ2eiMm4S5U8kxAFVUWBHSwlVlVC6qMy39WuO+lOlwFUyxw0yMLgRuPJ19EFzxMJ6pAwkS2OmDrkDvWuBJNHwH3cZq0QoZA6AfB+pZPlOxVapZMaDpA6DPRpPQNY0HZZMtNVC5PoXByhYADiRMVQbpE6rAPTcAFTkK1T+RXTBTcAkzgWsT95DgcQqEhot+hoy17T6mMDfqEMKy6c2dWTaKRzV+B9Wzy1rmFpJ1qNAxLEqcIsMKuzEJiBwtBAacHez1-TpzUtXz6iStjYTz6cmMathk0+-CI404HNtzKNBaCz3JaEYRHTgt9OEME0JzCz71jkPVZTuLbEwJcLWqfSUj-oKLeznT7u6DI9PjVYg5W0n9o556DE055tjDPdfdIdbDnlZ9nD2Z3D49ELNUHD+5IrRFJtdU-Dgjo4wjTjsYDTrzN1iBpL8DhVdLSjoyfLblErByn90NqwqlhMhVc1l0C9irSdqLKr6DmDJAYtdLtrEAYtjS8tI4itDK7pNrDB8MhdWtupOt-retn9XDRtkhVibLPtndjBVtDUPLuCdttQDtMdUVOWrtOi7taVkGEbDDXddAZ5pAgd9ALDodztJECbGgSbTtcdsLNVMpZolEjJVoGN6TRphSF0gG2dTiwoRTDbgGmYLAOYjYag9bFoEueOM45bahcwIORmuwQQGA1qcpqA7Au+N4wScAPbo7X1dYx2hYw75ojbrOSMiNOauhB7gG6p9kLRWpa7up+pKVVBhmFrqzqA64ujTAIovMFLbzGTDzcA3Ib7RAdLAHSMRAKYYBvMjS3kkkfkAUkrJj5sF8z5C47KgHGEj+5CMQ5W2GuG+GhGJmDWTWRAlGSkUENGsEyQe0TwkyXW5Ox4rGRCdHTGfWz+tDo42HlW1W+HxGTwjW5GxHLW5HjAlHFRH+nAtH9HzGTH5OLH8FLkWH0CFWuHNWdWhH-HJHq4rWFHVHYnEnDHTHkZsnIjRmz7p1b4XVzbVrv7Sa5nOgWLoWtnu6f+ms4BFm7gOgXpKz8VVnJhFAOguYIQfTa19L5dJFYolEhImsC4rxXnqNnAfsmBCNSrbVSUWmGQKK5AumX1x4JCpCwXuwCXpYXdC7hXEhtgKoJxYmCwM4q7xLMp2EVDfACwcQoK11MD00eTqNtZDXeYLOSYWqt0jYKotgTX8QTGgUmgS6A7u7o4agw3o3cQtgO7LLqzoZeQlEi0A3l2+CjqBgkBdzmgv4mQkmzwtW743AWqbXVLWu20GVagA3JQ20wpOJxuqD+120sIMQxtoKD3FlcFxEk3S6ldeVWs8o1oOEt8YPz3opfUgPjEJjGQVFdFgPl2eCKOpSKgYAJIAqQAA", #nolint deps = TRUE, skin = "iphone8", color = "black" ) ``` - -## Progressive Web App (PWA) - -### Configuration - -`{shinyMobile}` is PWA capable, meaning that it can be displayed full screen on many mobile -devices. This feature is automatically handled by `f7Page()` if `allowPWA` is `TRUE` (it leverages the Google PWA compatibility -[script](https://github.com/GoogleChromeLabs/pwacompat)). - -To setup the necessary assets for your PWA, you may run: - -```r -remotes::install_github("RinteRface/charpente") -library(charpente) -set_pwa(APP_PATH, ...) -``` - -where `APP_PATH` is the app location. It only works if the app is inside a package like with -{golem}. Alternatively, you may copy the `www` folder of the gallery [app](https://github.com/RinteRface/shinyMobile/tree/master/inst/examples/gallery/www), which provides: - -- A valid service worker. -- A valid `offline.html` fallback. -- A valid web manifest. Don't forget to change the `start_url` property to the path of your app. -For instance, the following app hosted at https://dgranjon.shinyapps.io/rstudio-global-2021-calendar/, has the `/rstudio-global-2021-calendar/` path. -- A valid set of icons. There are tools such as [appsco](https://appsco.pe/developer/splash-screens) and [app-manifest](https://app-manifest.firebaseapp.com), to create -those custom icons and splash screens, if you need to. - -It is really easier with `{charpente}`, the reason why we strongly recommend to develop your app -inside a package. - -### Add the PWA to your desktop Apps - -Copy the url of your app in your mobile web browser (iOS: Safari and Andoid: Chrome). In this example this is: https://dgranjon.shinyapps.io/miniUI2Demo/. It opens like a classic web app, with top and bottom ugly navigation bars. - -- Select the share button located in the bottom bar of your Iphone/Ipad. For Android, -you may do something similar. Importantly, Chrome for iOS does not support this feature, that's why I recommend using Safari. -- Click on "Add to Home Screen" -- Choose a relevant name and click on OK. -- The app will be added to your IOS/Android Apps. In case you want custom icons, replace the content of the www folder with your own. - -
    -
    - -
    -
    - -### Limitations -It is actually quite complex to guarantee that all mobile platforms are supported. -The PWA compatibility script will work in most of the case. If not, please open an issue [here](https://github.com/GoogleChromeLabs/pwacompat/issues), to help improving it! - - ## Acknowledgement A special thanks to [Vladimir Kharlampidi](https://github.com/nolimits4web) for creating this diff --git a/index.md b/index.md index 9dab0dae..8a4fb9b2 100644 --- a/index.md +++ b/index.md @@ -13,6 +13,21 @@ Status](https://www.repostatus.org/badges/latest/wip.svg)](https://www.repostatu [![CRAN status](https://www.r-pkg.org/badges/version/shinyMobile)](https://cran.r-project.org/package=shinyMobile) +## Sandbox + +You can play with the below sandbox. + +
    +
    + +
    + + + + + +
    + ## Installation ``` r @@ -22,17 +37,11 @@ install.packages("shinyMobile") devtools::install_github("RinteRface/shinyMobile") ``` -## Cheatsheet - - - ## Demo -A running demo is on -[shinyapps.io](https://dgranjon.shinyapps.io/miniUI2Demo/). Left side: -android demo, right side: iOS demo +Android demo: - +
    @@ -45,11 +54,13 @@ android demo, right side: iOS demo
    - +
    - +iOS demo: + +
    @@ -58,84 +69,12 @@ android demo, right side: iOS demo
    - +
    -## Progressive Web App (PWA) - -### Configuration - -`{shinyMobile}` is PWA capable, meaning that it can be displayed full -screen on many mobile devices. This feature is automatically handled by -`f7Page()` if `allowPWA` is `TRUE` (it leverages the Google PWA -compatibility [script](https://github.com/GoogleChromeLabs/pwacompat)). - -To setup the necessary assets for your PWA, you may run: - -``` r -remotes::install_github("RinteRface/charpente") -library(charpente) -set_pwa(APP_PATH, ...) -``` - -where `APP_PATH` is the app location. It only works if the app is inside -a package like with {golem}. Alternatively, you may copy the `www` -folder of the gallery -[app](https://github.com/RinteRface/shinyMobile/tree/master/inst/examples/gallery/www), -which provides: - - - A valid service worker. - - A valid `offline.html` fallback. - - A valid web manifest. Don’t forget to change the `start_url` - property to the path of your app. For instance, the following app - hosted at - , has - the `/rstudio-global-2021-calendar/` path. - - A valid set of icons. There are tools such as - [appsco](https://appsco.pe/developer/splash-screens) and - [app-manifest](https://app-manifest.firebaseapp.com), to create - those custom icons and splash screens, if you need to. - -It is really easier with `{charpente}`, the reason why we strongly -recommend to develop your app inside a package. - -### Add the PWA to your desktop Apps - -Copy the url of your app in your mobile web browser (iOS: Safari and -Andoid: Chrome). In this example this is: -. It opens like a classic -web app, with top and bottom ugly navigation bars. - - - Select the share button located in the bottom bar of your - Iphone/Ipad. For Android, you may do something similar. Importantly, - Chrome for iOS does not support this feature, that’s why I recommend - using Safari. - - Click on “Add to Home Screen” - - Choose a relevant name and click on OK. - - The app will be added to your IOS/Android Apps. In case you want - custom icons, replace the content of the www folder with your own. - -
    - -
    - - - -
    - -
    - -### Limitations - -It is actually quite complex to guarantee that all mobile platforms are -supported. The PWA compatibility script will work in most of the case. -If not, please open an issue -[here](https://github.com/GoogleChromeLabs/pwacompat/issues), to help -improving it\! - ## Acknowledgement A special thanks to [Vladimir diff --git a/inst/examples/gallery/tabs/tabBtns.R b/inst/examples/gallery/tabs/tabBtns.R index 618faa38..648cfd5c 100644 --- a/inst/examples/gallery/tabs/tabBtns.R +++ b/inst/examples/gallery/tabs/tabBtns.R @@ -1,4 +1,5 @@ tabBtns <- f7Tab( + title = "Buttons", tabName = "FABs", icon = f7Icon("circle_grid_hex"), active = FALSE, diff --git a/inst/examples/gallery/tabs/tabCards.R b/inst/examples/gallery/tabs/tabCards.R index fd03a86c..5b0ddd72 100644 --- a/inst/examples/gallery/tabs/tabCards.R +++ b/inst/examples/gallery/tabs/tabCards.R @@ -1,4 +1,5 @@ tabCards <- f7Tab( + title = "Cards", tabName = "Cards", icon = f7Icon("rectangle_stack", f7Badge(8, color = "green")), active = FALSE, diff --git a/inst/examples/gallery/tabs/tabChat.R b/inst/examples/gallery/tabs/tabChat.R index 8ff6b3b0..ba7b8981 100644 --- a/inst/examples/gallery/tabs/tabChat.R +++ b/inst/examples/gallery/tabs/tabChat.R @@ -1,4 +1,5 @@ tabText <- f7Tab( + title = "Chat", tabName = "chat", icon = f7Icon("chat_bubble_2"), # this is the message container. Everything happens on the server side! diff --git a/inst/examples/gallery/tabs/tabInfo.R b/inst/examples/gallery/tabs/tabInfo.R index 858f977b..7af4ce6a 100644 --- a/inst/examples/gallery/tabs/tabInfo.R +++ b/inst/examples/gallery/tabs/tabInfo.R @@ -1,4 +1,5 @@ tabInfo <- f7Tab( + title = "Info", tabName = "Popups", icon = f7Icon("info_round_fill"), diff --git a/inst/examples/gallery/tabs/tabInputs.R b/inst/examples/gallery/tabs/tabInputs.R index 8a3fc490..18ca3d9d 100644 --- a/inst/examples/gallery/tabs/tabInputs.R +++ b/inst/examples/gallery/tabs/tabInputs.R @@ -1,4 +1,5 @@ tabInputs <- f7Tab( + title = "Inputs", tabName = "Inputs", icon = f7Icon("rocket_fill"), active = TRUE, diff --git a/inst/examples/gallery/tabs/tabLists.R b/inst/examples/gallery/tabs/tabLists.R index 5ec6edd5..b5c8ed7b 100644 --- a/inst/examples/gallery/tabs/tabLists.R +++ b/inst/examples/gallery/tabs/tabLists.R @@ -14,6 +14,7 @@ tabLists <- f7Tab( + title = "Lists", tabName = "Lists", icon = f7Icon("list_dash", f7Badge("New", color = "red")), active = FALSE, diff --git a/inst/examples/gallery/tabs/tabOthers.R b/inst/examples/gallery/tabs/tabOthers.R index 11a67a9a..57fc5f54 100644 --- a/inst/examples/gallery/tabs/tabOthers.R +++ b/inst/examples/gallery/tabs/tabOthers.R @@ -1,4 +1,5 @@ tabOthers <- f7Tab( + title = "Others", tabName = "Others", icon = f7Icon("plus_circle"), diff --git a/inst/examples/split_layout/app.R b/inst/examples/split_layout/app.R index 65615a2c..576f6eeb 100644 --- a/inst/examples/split_layout/app.R +++ b/inst/examples/split_layout/app.R @@ -34,15 +34,16 @@ shinyApp( iosTranslucentBars = FALSE, navbar = list( iosCenterTitle = TRUE, - hideNavOnPageScroll = TRUE + hideOnPageScroll = TRUE ), toolbar = list( - hideNavOnPageScroll = FALSE + hideOnPageScroll = FALSE ), pullToRefresh = FALSE ), f7SplitLayout( sidebar = f7Panel( + id = "sidebar", title = "Sidebar", side = "left", theme = "dark", @@ -51,7 +52,8 @@ shinyApp( f7PanelItem( tabName = "tab1", title = "Tab 1", - icon = f7Icon("equal_circle") + icon = f7Icon("equal_circle"), + active = TRUE ), f7PanelItem( tabName = "tab2", @@ -64,8 +66,7 @@ shinyApp( icon = f7Icon("equal_circle") ) ), - uiOutput("selected_tab"), - effect = "reveal" + uiOutput("selected_tab") ), navbar = f7Navbar( title = "Split Layout", diff --git a/inst/examples/standalone_tabs/app.R b/inst/examples/standalone_tabs/app.R index f817227e..ef089930 100644 --- a/inst/examples/standalone_tabs/app.R +++ b/inst/examples/standalone_tabs/app.R @@ -17,10 +17,10 @@ shinyApp( iosTranslucentBars = FALSE, navbar = list( iosCenterTitle = TRUE, - hideNavOnPageScroll = TRUE + hideOnPageScroll = TRUE ), toolbar = list( - hideNavOnPageScroll = FALSE + hideOnPageScroll = FALSE ), pullToRefresh = TRUE ), @@ -36,6 +36,7 @@ shinyApp( id = "tabs", style = "strong", animated = FALSE, swipeable = TRUE, f7Tab( + title = "Tab 1", tabName = "Tab1", icon = f7Icon("folder"), active = TRUE, @@ -57,6 +58,7 @@ shinyApp( ) ), f7Tab( + title = "Tab 2", tabName = "Tab2", icon = f7Icon("today"), active = FALSE, @@ -80,6 +82,7 @@ shinyApp( ) ), f7Tab( + title = "Tab 3", tabName = "Tab3", icon = f7Icon("cloud_upload"), active = FALSE, diff --git a/inst/examples/tab_layout/app.R b/inst/examples/tab_layout/app.R index fa01f156..8196a5c4 100644 --- a/inst/examples/tab_layout/app.R +++ b/inst/examples/tab_layout/app.R @@ -27,6 +27,7 @@ shinyApp( animated = TRUE, #swipeable = TRUE, f7Tab( + title = "Tab 1", tabName = "Tab1", icon = f7Icon("folder"), active = TRUE, @@ -91,6 +92,7 @@ shinyApp( ) ), f7Tab( + title = "Tab 2", tabName = "Tab2", icon = f7Icon("keyboard"), f7Shadow( @@ -103,6 +105,7 @@ shinyApp( ) ), f7Tab( + title = "Tab 3", tabName = "Tab3", icon = f7Icon("layers_alt"), f7Shadow( diff --git a/inst/shinyMobile-1.0.0/js/shinyMobile.min.js b/inst/shinyMobile-1.0.0/js/shinyMobile.min.js deleted file mode 100644 index 46972314..00000000 --- a/inst/shinyMobile-1.0.0/js/shinyMobile.min.js +++ /dev/null @@ -1,2 +0,0 @@ -$((function(){var e=$(document).find("script[data-for='app']");e=JSON.parse(e.html());var n="true"===$("body").attr("data-pwa");if(e.root="#app",n&&(e.serviceWorker={path:window.location.pathname+"service-worker.js",scope:window.location.pathname}),e.methods={toggleDarkTheme:function(){this.$(".view-main").toggleClass("theme-dark")}},e.data=function(){return{popovers:[],tooltips:[],actions:[]}},app=new Framework7(e),mainView=app.views.create(".view-main"),e.hasOwnProperty("dark")||(e.dark=!1),e.dark&&app.methods.toggleDarkTheme(),app.device.desktop||$("