shinyMobile (version 1.0.1)

f7Fabs: Framework7 container for floating action button (FAB)

Description

f7Fabs hosts multiple f7Fab.

updateF7Fabs toggles f7Fabs on the server side.

f7FabMorphTarget convert a tag into a target morphing. See https://v5.framework7.io/docs/floating-action-button.html#fab-morph.

Usage

f7Fabs(
  ...,
  id = NULL,
  position = c("right-top", "right-center", "right-bottom", "left-top", "left-center",
    "left-bottom", "center-center", "center-top", "center-bottom"),
  color = NULL,
  extended = FALSE,
  label = NULL,
  sideOpen = c("left", "right", "top", "bottom", "center"),
  morph = FALSE,
  morphTarget = NULL
)
updateF7Fabs(id, session = shiny::getDefaultReactiveDomain())
f7FabMorphTarget(tag)

Arguments

...

Slot for f7Fab.

id

The id of the input object.

position

Container position.

color

Container color.

extended

If TRUE, the FAB will be wider. This allows to use a label (see below).

label

Container label. Only if extended is TRUE.

sideOpen

When the container is pressed, indicate where buttons are displayed.

morph

Whether to allow the FAB to transofrm into another UI element.

morphTarget

CSS selector of the morph target: ".toolbar" for instance.

session

The Shiny session object, usually the default value will suffice.

tag

Target tag.

Author

David Granjon,

Examples

if(interactive()){
 library(shiny)
 library(shinyMobile)

 shinyApp(
  ui = f7Page(
    title = "Floating action buttons",
    f7SingleLayout(
     navbar = f7Navbar(title = "f7Fabs"),
     f7Fabs(
      extended = TRUE,
      label = "Menu",
      position = "center-top",
      color = "yellow",
      sideOpen = "right",
      lapply(1:4, function(i) f7Fab(paste0("btn", i), i))
    ),
    lapply(1:4, function(i) verbatimTextOutput(paste0("res", i))),

    f7Fabs(
      position = "center-center",
      color = "purple",
      sideOpen = "center",
      lapply(5:8, function(i) f7Fab(paste0("btn", i), i))
    ),
    lapply(5:8, function(i) verbatimTextOutput(paste0("res", i))),

    f7Fabs(
      position = "left-bottom",
      color = "pink",
      sideOpen = "top",
      lapply(9:12, function(i) f7Fab(paste0("btn", i), i))
    )
    )

  ),
  server = function(input, output) {
    lapply(1:12, function(i) {
      output[[paste0("res", i)]] <- renderPrint(input[[paste0("btn", i)]])
    })
  }
 )
}

if (interactive()) {
 library(shiny)
 library(shinyMobile)

 shinyApp(
  ui = f7Page(
    title = "Update f7Fabs",
    f7SingleLayout(
      navbar = f7Navbar(title = "Update f7Fabs"),
      f7Button(inputId = "toggleFabs", label = "Toggle Fabs"),
      f7Fabs(
        position = "center-center",
        id = "fabs",
        lapply(1:3, function(i) f7Fab(inputId = i, label = i))
      )
    )
  ),
  server = function(input, output, session) {
    observe(print(input$fabs))
    observeEvent(input$toggleFabs, {
      updateF7Fabs(id = "fabs")
    })
  }
 )
}
if (interactive()) {
 library(shiny)
 library(shinyMobile)

 shinyApp(
   ui = f7Page(
     f7SingleLayout(
       navbar = f7Navbar(title = "f7Fabs Morph"),
       toolbar = f7Toolbar(
         position = "bottom",
         lapply(1:3, function(i) f7Link(label = i, href = "#") %>% f7FabClose())
       ) %>% f7FabMorphTarget(),
       # put an empty f7Fabs container
       f7Fabs(
         extended = TRUE,
         label = "Open",
         position = "center-top",
         color = "yellow",
         sideOpen = "right",
         morph = TRUE,
         morphTarget = ".toolbar"
       )
     )

   ),
   server = function(input, output) {}
 )
}