shinyMobile (version 0.8.0)

f7Popover: Framework7 popover

Description

f7Popover is deprecated. It has to be used in an oberve or observeEvent context. Only works for input elements!

f7PopoverTarget is deprecated. This must be used in combination of f7Popover. Only works for input elements!

addF7Popover adds a popover to the given target and show it if enabled by toggleF7Popover.

toggleF7Popover toggles the visibility of popover. See example for use case.

Usage

f7Popover(targetId, content, session = shiny::getDefaultReactiveDomain())
f7PopoverTarget(tag, targetId)
addF7Popover(
  id = NULL,
  selector = NULL,
  options,
  session = shiny::getDefaultReactiveDomain()
)
toggleF7Popover(
  id = NULL,
  selector = NULL,
  session = shiny::getDefaultReactiveDomain()
)

Arguments

targetId

Popover id. Must correspond to the f7Popover targetId.

content

Popover content.

session

Shiny session object.

tag

Tag that will be targeted. Must be a f7Input element.

id

Popover target id.

selector

jQuery selector. Allow more customization for the target (nested tags).

options

List of options to pass to the popover. See https://framework7.io/docs/popover.html#popover-parameters.

Examples

# NOT RUN {
if (interactive()) {
 library(shiny)
 library(shinyMobile)
 shinyApp(
   ui = f7Page(
     title = "f7Popover",
     f7SingleLayout(
       navbar = f7Navbar(title = "f7Popover"),
       f7PopoverTarget(
         f7Button(
           inputId = "goButton",
           "Go!"
         ),
         targetId = "test"
       ),
       br(),
       br(),
       f7PopoverTarget(
         f7Slider(
           inputId = "slider",
           label = "Value",
           value = 10,
           min = 0,
           max = 20
         ),
         targetId = "test2"
       )
     )
   ),
   server = function(input, output, session) {
     observe({
       f7Popover(
         targetId = "test",
         content = "This is a f7Button"
       )
     })

     observe({
       f7Popover(
         targetId = "test2",
         content = "This is a f7Slider"
       )
     })
   }
 )
}
if (interactive()) {
 library(shiny)
 library(shinyMobile)

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

 popovers <- data.frame(
   id = paste0("target_", 1:10),
   content = paste("Popover content", 1:10, lorem_ipsum),
   stringsAsFactors = FALSE
 )


 shinyApp(
   ui = f7Page(
     options = list(theme = "ios"),
     title = "f7Popover",
     f7SingleLayout(
       navbar = f7Navbar(
         title = "f7Popover",
         subNavbar = f7SubNavbar(
           f7Toggle(
             inputId = "toggle",
             "Enable popover",
             color = "green",
             checked = TRUE
           )
         )
       ),
       f7Segment(
         lapply(seq_len(nrow(popovers)), function(i) {
           f7Button(
             inputId = sprintf("target_%s", i),
             sprintf("Target %s", i)
           )
         })
       )
     )
   ),
   server = function(input, output, session) {
     # Enable/disable (don't run first)
     observeEvent(input$toggle, {
       lapply(seq_len(nrow(popovers)), function(i) toggleF7Popover(id = popovers[i, "id"]) )
     }, ignoreInit = TRUE)

     # show
     lapply(seq_len(nrow(popovers)), function(i) {
       observeEvent(input[[popovers[i, "id"]]], {
         addF7Popover(
           id = popovers[i, "id"],
           options = list(
             content = popovers[i, "content"]
           )
         )
       })
     })
   }
 )
}
# }