Nice loading overlay for UI elements.
Usage
f7Skeleton(
target = ".card",
effect = c("fade", "blink", "pulse"),
duration = NULL,
session = shiny::getDefaultReactiveDomain()
)
Arguments
- target
CSS selector on which to apply the effect. In general, you apply the effect on a wrapper such as a card, such that all nested elements receive the skeleton.
- effect
Choose between "fade", "blink" or "pulse".
- duration
Effect duration. NULL by default. If you know exactly how much time your most time consuming output takes to render, you can pass an explicit duration. In other cases, leave it to NULL.
- session
Shiny session object.
Examples
if (interactive()) {
library(shiny)
library(shinyMobile)
shinyApp(
ui = f7Page(
title = "Skeletons",
f7SingleLayout(
navbar = f7Navbar(title = "f7Skeleton"),
f7Card(
title = "Card header",
"This is a simple card with plain text,
but cards can also contain their own header,
footer, list view, image, or any other element.",
footer = tagList(
f7Button(color = "blue", label = "My button", href = "https://www.google.com"),
f7Badge("Badge", color = "green")
)
),
f7List(
f7ListItem(
href = "https://www.google.com",
title = "Item 1"
),
f7ListItem(
href = "https://www.google.com",
title = "Item 2"
)
)
)
),
server = function(input, output, session) {
observeEvent(TRUE, {
f7Skeleton(".card", "fade", 2)
}, once = TRUE)
}
)
}