shinyMobile (version 1.0.1)

f7Skeleton: Framework 7 skeleton effect

Description

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)
   }
 )
}