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.
Note
The background color might be an issue depending on the parent container. Consider it experimental.
Author
David Granjon, dgranjon@ymail.com
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) {}
)
}