Framework7 sheet — f7Sheet • shinyMobile

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

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")
       })
    }
 )
}