f7Fabs | R Documentation |
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.
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)
... |
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: |
session |
The Shiny session object, usually the default value will suffice. |
tag |
Target tag. |
The background color might be an issue depending on the parent container. Consider it experimental.
David Granjon, dgranjon@ymail.com
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) {} ) }
Add the following code to your website.
For more information on customizing the embed code, read Embedding Snippets.