Package 'shinyMobile'

Description

This function only works if there are existing dependencies. Otherwise, an error is raised.

Usage

add_dependencies(tag, deps = NULL)

Arguments

Description

This function attaches icon dependencies to the given tag.

Usage

add_f7icons_dependencies(tag)

Arguments

Description

This function attaches framework7. dependencies to the given tag

Usage

add_framework7_deps(tag)

Arguments

Description

This function attaches PWA manifest and icons to the given tag

Usage

add_pwa_deps(tag)

Arguments

Description

This function attaches pwacompat. dependencies to the given tag

Usage

add_pwacompat_deps(tag)

Arguments

Description

This function attaches shinyMobile dependencies to the given tag

Usage

add_shinyMobile_deps(tag)

Arguments

Description

addF7Popover adds a popover to the given target and show it if enabled by toggleF7Popover.

toggleF7Popover toggles the visibility of popover. See example for use case.

Usage

addF7Popover(
  id = NULL,
  selector = NULL,
  options,
  session = shiny::getDefaultReactiveDomain()
)

toggleF7Popover(
  id = NULL,
  selector = NULL,
  session = shiny::getDefaultReactiveDomain()
)

Arguments

Examples

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

 lorem_ipsum <- "Lorem ipsum dolor sit amet,
           consectetur adipiscing elit. Quisque ac diam ac quam euismod
           porta vel a nunc. Quisque sodales scelerisque est, at porta
           justo cursus ac."

 popovers <- data.frame(
   id = paste0("target_", 1:10),
   content = paste("Popover content", 1:10, lorem_ipsum),
   stringsAsFactors = FALSE
 )


 shinyApp(
   ui = f7Page(
     options = list(theme = "ios"),
     title = "f7Popover",
     f7SingleLayout(
       navbar = f7Navbar(
         title = "f7Popover",
         subNavbar = f7SubNavbar(
           f7Toggle(
             inputId = "toggle",
             "Enable popover",
             color = "green",
             checked = TRUE
           )
         )
       ),
       f7Segment(
         lapply(seq_len(nrow(popovers)), function(i) {
           f7Button(
             inputId = sprintf("target_%s", i),
             sprintf("Target %s", i)
           )
         })
       )
     )
   ),
   server = function(input, output, session) {
     # Enable/disable (don't run first)
     observeEvent(input$toggle, {
       lapply(seq_len(nrow(popovers)), function(i) toggleF7Popover(id = popovers[i, "id"]) )
     }, ignoreInit = TRUE)

     # show
     lapply(seq_len(nrow(popovers)), function(i) {
       observeEvent(input[[popovers[i, "id"]]], {
         addF7Popover(
           id = popovers[i, "id"],
           options = list(
             content = popovers[i, "content"]
           )
         )
       })
     })
   }
 )
}

Description

Internal

Usage

create_app_ui(iframe, device, color, landscape)

Arguments

Description

Used by f7SmartSelect and f7Select

Usage

createSelectOptions(choices, selected)

Arguments

Description

f7Accordion creates an interactive accordion container.

f7AccordionItem is to be inserted in f7Accordion.

updateF7Accordion toggles an f7Accordion on the client.

Usage

f7Accordion(..., id = NULL, multiCollapse = FALSE)

f7AccordionItem(..., title = NULL, open = FALSE)

updateF7Accordion(
  id,
  selected = NULL,
  session = shiny::getDefaultReactiveDomain()
)

Arguments

Author(s)

David Granjon, [email protected]

Examples

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

 shinyApp(
  ui = f7Page(
    title = "Accordions",
    f7SingleLayout(
     navbar = f7Navbar("Accordions"),
     f7Accordion(
      id = "myaccordion1",
      f7AccordionItem(
       title = "Item 1",
       f7Block("Item 1 content"),
       open = TRUE
      ),
      f7AccordionItem(
       title = "Item 2",
       f7Block("Item 2 content")
      )
     ),
     f7Accordion(
      multiCollapse = TRUE,
      inputId = "myaccordion2",
      f7AccordionItem(
       title = "Item 1",
       f7Block("Item 1 content")
      ),
      f7AccordionItem(
       title = "Item 2",
       f7Block("Item 2 content")
      )
     )
    )
  ),
  server = function(input, output, session) {
   observe({
    print(
     list(
      accordion1 = input$myaccordion1,
      accordion2 = input$myaccordion2
     )
    )
   })
  }
 )
}

# Update accordion
if (interactive()) {
 library(shiny)
 library(shinyMobile)

 shinyApp(
   ui = f7Page(
     title = "Accordions",
     f7SingleLayout(
       navbar = f7Navbar("Accordions"),
       f7Button(inputId = "go", "Go"),
       f7Accordion(
         id = "myaccordion1",
         f7AccordionItem(
           title = "Item 1",
           f7Block("Item 1 content"),
           open = TRUE
         ),
         f7AccordionItem(
           title = "Item 2",
           f7Block("Item 2 content")
         )
       )
     )
   ),
   server = function(input, output, session) {

     observeEvent(input$go, {
       updateF7Accordion(id = "myaccordion1", selected = 2)
     })

     observe({
       print(
         list(
           accordion1_state = input$myaccordion1$state,
           accordion1_values = unlist(input$myaccordion1$value)
         )
       )
     })
   }
 )
}

Description

f7ActionSheet creates an action sheet may contain multiple buttons. Each of them triggers an action on the server side. It may be updated later by updateF7ActionSheet.

updateF7ActionSheet updates an f7ActionSheet from the server.

Usage

f7ActionSheet(
  id,
  buttons,
  grid = FALSE,
  ...,
  session = shiny::getDefaultReactiveDomain()
)

updateF7ActionSheet(id, options, session = shiny::getDefaultReactiveDomain())

Arguments

buttons <- list(
  list(
    text = "Notification",
    icon = f7Icon("info"),
    color = NULL
  ),
  list(
    text = "Dialog",
    icon = f7Icon("lightbulb_fill"),
    color = NULL
  )
 )

Examples

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

 shinyApp(
   ui = f7Page(
     title = "Action sheet",
     f7SingleLayout(
       navbar = f7Navbar("Action sheet"),
       br(),
       f7Button(inputId = "go", label = "Show action sheet", color = "red")
     )
   ),
   server = function(input, output, session) {

     observe({
       print(list(
         sheetOpen = input$action1,
         button = input$action1_button
       ))
     })

     observeEvent(input$action1_button, {
       if (input$action1_button == 1) {
         f7Notif(
           text = "You clicked on the first button",
           icon = f7Icon("bolt_fill"),
           title = "Notification",
           titleRightText = "now"
         )
       } else if (input$action1_button == 2) {
         f7Dialog(
           id = "test",
           title = "Click me to launch a Toast!",
           type = "confirm",
           text = "You clicked on the second button"
         )
       }
     })

     observeEvent(input$test, {
       f7Toast(text = paste("Alert input is:", input$test))
     })

     observeEvent(input$go, {
       f7ActionSheet(
         grid = TRUE,
         id = "action1",
         buttons = list(
          list(
            text = "Notification",
            icon = f7Icon("info"),
            color = NULL
          ),
          list(
            text = "Dialog",
            icon = f7Icon("lightbulb_fill"),
            color = NULL
          )
         )
       )
     })
   }
 )

 ### in shiny module
 library(shiny)
 library(shinyMobile)

 sheetModuleUI <- function(id) {
   ns <- NS(id)
   f7Button(inputId = ns("go"), label = "Show action sheet", color = "red")
 }

 sheetModule <- function(input, output, session) {

   ns <- session$ns

   observe({
     print(list(
       sheetOpen = input$action1,
       button = input$action1_button
     ))
   })

   observeEvent(input$action1_button, {
     if (input$action1_button == 1) {
       f7Notif(
         text = "You clicked on the first button",
         icon = f7Icon("bolt_fill"),
         title = "Notification",
         titleRightText = "now"
       )
     } else if (input$action1_button == 2) {
       f7Dialog(
         id = ns("test"),
         title = "Click me to launch a Toast!",
         type = "confirm",
         text = "You clicked on the second button",
       )
     }
   })

   observeEvent(input$test, {
     f7Toast(text = paste("Alert input is:", input$test))
   })

   observeEvent(input$go, {
     f7ActionSheet(
       grid = TRUE,
       id = ns("action1"),
       buttons = list(
         list(
           text = "Notification",
           icon = f7Icon("info"),
           color = NULL
         ),
         list(
           text = "Dialog",
           icon = f7Icon("lightbulb_fill"),
           color = NULL
         )
       )
     )
   })
 }

 shinyApp(
   ui = f7Page(
     title = "Action sheet",
     f7SingleLayout(
       navbar = f7Navbar("Action sheet"),
       br(),
       sheetModuleUI(id = "sheet1")
     )
   ),
   server = function(input, output, session) {
     callModule(sheetModule, "sheet1")
   }
 )
}
if (interactive()) {
 library(shiny)
 library(shinyMobile)

 shinyApp(
   ui = f7Page(
     title = "Update Action sheet",
     f7SingleLayout(
       navbar = f7Navbar("Update Action sheet"),
       br(),
       f7Segment(
         f7Button(inputId = "go", label = "Show action sheet", color = "green"),
         f7Button(inputId = "update", label = "Update action sheet", color = "red")
       )
     )
   ),
   server = function(input, output, session) {

     observe({
       print(list(
         sheetOpen = input$action1,
         button = input$action1_button
       ))
     })

     observeEvent(input$go, {
       f7ActionSheet(
         grid = TRUE,
         id = "action1",
         buttons = list(
           list(
             text = "Notification",
             icon = f7Icon("info"),
             color = NULL
           ),
           list(
             text = "Dialog",
             icon = f7Icon("lightbulb_fill"),
             color = NULL
           )
         )
       )
     })

     observeEvent(input$update, {
       updateF7ActionSheet(
         id = "action1",
         options = list(
           grid = TRUE,
           buttons = list(
             list(
               text = "Plop",
               icon = f7Icon("info"),
               color = "orange"
             )
           )
         )
       )
     })
   }
 )
}

Description

f7Align is an alignment utility for items.

Usage

f7Align(tag, side = c("left", "center", "right", "justify"))

Arguments

Author(s)

David Granjon, [email protected]

Examples

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

 shinyApp(
   ui = f7Page(
    title = "Align",
    f7SingleLayout(
     navbar = f7Navbar(title = "f7Align"),
     f7Row(
      f7Align(h1("Left"), side = "left"),
      f7Align(h1("Center"), side = "center"),
      f7Align(h1("Right"), side = "right")
     )
    )
   ),
   server = function(input, output) {}
 )
}

Description

f7Appbar is displayed on top of an f7Navbar. f7Appbar can also trigger f7Panel.

f7Back is a button to go back in f7Tabs.

f7Next is a button to go next in f7Tabs.

Usage

f7Appbar(..., leftPanel = FALSE, rightPanel = FALSE)

f7Back(targetId)

f7Next(targetId)

Arguments

Examples

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

 cities <- names(precip)

 shinyApp(
   ui = f7Page(
     title = "My app",
     f7Appbar(
       f7Flex(f7Back(targetId = "tabset"), f7Next(targetId = "tabset")),
       f7Searchbar(id = "search1", inline = TRUE)
     ),
     f7TabLayout(
       navbar = f7Navbar(
         title = "f7Appbar",
         hairline = FALSE,
         shadow = TRUE
       ),
       f7Tabs(
         animated = FALSE,
         swipeable = TRUE,
         id = "tabset",
         f7Tab(
           tabName = "Tab 1",
           icon = f7Icon("envelope"),
           active = TRUE,
           "Text 1"
         ),
         f7Tab(
           tabName = "Tab 2",
           icon = f7Icon("today"),
           active = FALSE,
           "Text 2"
         ),
         f7Tab(
           tabName = "Tab 3",
           icon = f7Icon("cloud_upload"),
           active = FALSE,
           "Text 3"
         )
       )
     )
   ),
   server = function(input, output) {}
 )
}

Description

f7AutoComplete generates a Framework7 autocomplete input.

updateF7AutoComplete changes the value of an autocomplete input on the client.

Usage

f7AutoComplete(
  inputId,
  label,
  placeholder = NULL,
  value = choices[1],
  choices,
  openIn = c("popup", "page", "dropdown"),
  typeahead = TRUE,
  expandInput = TRUE,
  closeOnSelect = FALSE,
  dropdownPlaceholderText = NULL,
  multiple = FALSE
)

updateF7AutoComplete(
  inputId,
  value = NULL,
  session = shiny::getDefaultReactiveDomain()
)

Arguments

Note

You cannot update choices yet.

Author(s)

David Granjon, [email protected]

Examples

# Autocomplete input
if(interactive()){
 library(shiny)
 library(shinyMobile)

 shinyApp(
   ui = f7Page(
    title = "My app",
    f7SingleLayout(
     navbar = f7Navbar(title = "f7AutoComplete"),
     f7AutoComplete(
      inputId = "myautocomplete1",
      placeholder = "Some text here!",
      dropdownPlaceholderText = "Try to type Apple",
      label = "Type a fruit name",
      openIn = "dropdown",
      choices = c('Apple', 'Apricot', 'Avocado', 'Banana', 'Melon',
       'Orange', 'Peach', 'Pear', 'Pineapple')
     ),
     textOutput("autocompleteval1"),
     f7AutoComplete(
      inputId = "myautocomplete2",
      placeholder = "Some text here!",
      openIn = "popup",
      multiple = TRUE,
      label = "Type a fruit name",
      choices = c('Apple', 'Apricot', 'Avocado', 'Banana', 'Melon',
                  'Orange', 'Peach', 'Pear', 'Pineapple')
     ),
     verbatimTextOutput("autocompleteval2")
    )
   ),
   server = function(input, output) {
    observe({
     print(input$myautocomplete1)
     print(input$myautocomplete2)
    })
    output$autocompleteval1 <- renderText(input$myautocomplete1)
    output$autocompleteval2 <- renderPrint(input$myautocomplete2)
   }
 )
}

# Update autocomplete
if (interactive()) {
 library(shiny)
 library(shinyMobile)
 shinyApp(
  ui = f7Page(
    title = "My app",
    f7SingleLayout(
      navbar = f7Navbar(title = "Update autocomplete"),
      f7Card(
        f7Button(inputId = "update", label = "Update autocomplete"),
        f7AutoComplete(
         inputId = "myautocomplete",
         placeholder = "Some text here!",
         openIn = "dropdown",
         label = "Type a fruit name",
         choices = c('Apple', 'Apricot', 'Avocado', 'Banana', 'Melon',
                     'Orange', 'Peach', 'Pear', 'Pineapple')
        ),
        verbatimTextOutput("autocompleteval")
      )
    )
  ),
  server = function(input, output, session) {

    observe({
     print(input$myautocomplete)
    })

    output$autocompleteval <- renderText(input$myautocomplete)

    observeEvent(input$update, {
      updateF7AutoComplete(
        inputId = "myautocomplete",
        value = "Banana"
      )
    })
  }
 )
}

Description

Container to highlight important information with color.

Usage

f7Badge(..., color = NULL)

Arguments

Author(s)

David Granjon, [email protected]

Examples

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

 colors <- getF7Colors()

 shinyApp(
   ui = f7Page(
     title = "Badges",
     f7SingleLayout(
       navbar = f7Navbar(title = "f7Badge"),
       f7Block(
         strong = TRUE,
         lapply(seq_along(colors), function(i) {
           f7Badge(colors[[i]], color = colors[[i]])
         })
       )
     )
   ),
   server = function(input, output) {}
 )
}

Description

f7Block creates a block container.

f7BlockHeader creates a header content for f7Block.

Usage

f7Block(..., hairlines = TRUE, strong = FALSE, inset = FALSE, tablet = FALSE)

f7BlockHeader(text = NULL)

Arguments

Author(s)

David Granjon, [email protected]

Examples

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

 shinyApp(
  ui = f7Page(
    title = "Blocks",
    f7SingleLayout(
     navbar = f7Navbar(title = "f7Block"),
     f7BlockTitle(title = "A large title", size = "large"),
    f7Block(
     f7BlockHeader(text = "Header"),
     "Here comes paragraph within content block.
     Donec et nulla auctor massa pharetra
     adipiscing ut sit amet sem. Suspendisse
     molestie velit vitae mattis tincidunt.
     Ut sit amet quam mollis, vulputate
     turpis vel, sagittis felis.",
     f7BlockFooter(text = "Footer")
    ),

    f7BlockTitle(title = "A medium title", size = "medium"),
    f7Block(
     strong = TRUE,
     f7BlockHeader(text = "Header"),
     "Here comes paragraph within content block.
     Donec et nulla auctor massa pharetra
     adipiscing ut sit amet sem. Suspendisse
     molestie velit vitae mattis tincidunt.
     Ut sit amet quam mollis, vulputate
     turpis vel, sagittis felis.",
     f7BlockFooter(text = "Footer")
    ),

    f7BlockTitle(title = "A normal title", size = NULL),
    f7Block(
     inset = TRUE,
     strong = TRUE,
     f7BlockHeader(text = "Header"),
     "Here comes paragraph within content block.
     Donec et nulla auctor massa pharetra
     adipiscing ut sit amet sem. Suspendisse
     molestie velit vitae mattis tincidunt.
     Ut sit amet quam mollis, vulputate
     turpis vel, sagittis felis.",
     f7BlockFooter(text = "Footer")
    ),
    f7Block(
     tablet = TRUE,
     strong = TRUE,
     f7BlockHeader(text = "Header"),
     "Here comes paragraph within content block.
     Donec et nulla auctor massa pharetra
     adipiscing ut sit amet sem. Suspendisse
     molestie velit vitae mattis tincidunt.
     Ut sit amet quam mollis, vulputate
     turpis vel, sagittis felis.",
     f7BlockFooter(text = "Footer")
    ),
    f7Block(
     inset = TRUE,
     strong = TRUE,
     hairlines = FALSE,
     f7BlockHeader(text = "Header"),
     "Here comes paragraph within content block.
     Donec et nulla auctor massa pharetra
     adipiscing ut sit amet sem. Suspendisse
     molestie velit vitae mattis tincidunt.
     Ut sit amet quam mollis, vulputate
     turpis vel, sagittis felis.",
     f7BlockFooter(text = "Footer")
    )
    )
  ),
  server = function(input, output) {}
 )
}

Description

f7BlockFooter creates a footer content for f7Block.

Usage

f7BlockFooter(text = NULL)

Arguments

Author(s)

David Granjon, [email protected]

Description

f7BlockTitle creates a title for f7Block.

Usage

f7BlockTitle(title = NULL, size = NULL)

Arguments

Author(s)

David Granjon, [email protected]

Description

f7Button generates a Framework7 action button.

updateF7Button updates an f7Button.

Usage

f7Button(
  inputId = NULL,
  label = NULL,
  href = NULL,
  color = NULL,
  fill = TRUE,
  outline = FALSE,
  shadow = FALSE,
  rounded = FALSE,
  size = NULL,
  active = FALSE
)

updateF7Button(
  inputId,
  label = NULL,
  color = NULL,
  fill = NULL,
  outline = NULL,
  shadow = NULL,
  rounded = NULL,
  size = NULL,
  session = shiny::getDefaultReactiveDomain()
)

Arguments

Author(s)

David Granjon, [email protected]

Examples

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

 shiny::shinyApp(
  ui = f7Page(
    title = "Update f7Button",
    f7SingleLayout(
      navbar = f7Navbar(title = "Update f7Button"),
      f7Button(
        "test",
        "Test",
        color = "orange",
        outline = FALSE,
        fill = TRUE,
        shadow = FALSE,
        rounded = FALSE,
        size = NULL),
      f7Toggle("prout", "Update Button")
    )
  ),
  server = function(input, output, session) {
    observe(print(input$test))
    observeEvent(input$prout, {
      if (input$prout) {
        updateF7Button(
          inputId = "test",
          label = "Updated",
          color = "purple",
          shadow = TRUE,
          rounded = TRUE,
          size = "large"
        )
      }
    })
  }
 )
}

Description

f7Card creates a simple card container.

f7SocialCard is a special card for social content.

f7ExpandableCard is a card that can expand. Ideal for a gallery.

updateF7Card maximizes an f7ExpandableCard on the client.

Usage

f7Card(
  ...,
  image = NULL,
  title = NULL,
  footer = NULL,
  outline = FALSE,
  height = NULL
)

f7SocialCard(..., image = NULL, author = NULL, date = NULL, footer = NULL)

f7ExpandableCard(
  ...,
  id = NULL,
  title = NULL,
  subtitle = NULL,
  color = NULL,
  image = NULL,
  fullBackground = FALSE
)

updateF7Card(id, session = shiny::getDefaultReactiveDomain())

Arguments

Note

For f7ExpandableCard, image and color are not compatible. Choose one of them.

Author(s)

David Granjon, [email protected]

Examples

# Simple card
if(interactive()){
 library(shiny)
 library(shinyMobile)

 shinyApp(
  ui = f7Page(
    title = "Cards",
    f7SingleLayout(
     navbar = f7Navbar(title = "f7Card"),
     f7Card("This is a simple card with plain text,
    but cards can also contain their own header,
    footer, list view, image, or any other element."),
    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"),
      f7Badge("Badge", color = "green")
     )
    ),
    f7Card(
     title = "Card header",
     image = "https://loremflickr.com/320/240",
     "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"),
      f7Badge("Badge", color = "green")
     )
    )
    )
  ),
  server = function(input, output) {}
 )
}

# Social card
if(interactive()){
 library(shiny)
 library(shinyMobile)

 shinyApp(
  ui = f7Page(
    title = "Social Card",
    f7SingleLayout(
     navbar = f7Navbar(title = "f7SocialCard"),
     f7SocialCard(
     image = "https://loremflickr.com/g/320/240/paris",
     author = "John Doe",
     date = "Monday at 3:47 PM",
     "What a nice photo i took yesterday!",
     img(src = "https://loremflickr.com/g/320/240/paris", width = "100%"),
     footer = tagList(
      f7Badge("1", color = "yellow"),
      f7Badge("2", color = "green"),
      f7Badge("3", color = "blue")
     )
    )
    )
  ),
  server = function(input, output) {}
 )
}

# Expandable card
if(interactive()){
 library(shiny)
 library(shinyMobile)

 shinyApp(
  ui = f7Page(
    title = "Expandable Cards",
    f7SingleLayout(
      navbar = f7Navbar(
       title = "Expandable Cards",
       hairline = FALSE,
       shadow = TRUE
      ),
      f7ExpandableCard(
       id = "card1",
       title = "Expandable Card 1",
       color = "blue",
       subtitle = "Click on me pleaaaaase",
       "Framework7 - is a free and open source HTML mobile framework
       to develop hybrid mobile apps or web apps with iOS or Android
       native look and feel. It is also an indispensable prototyping apps tool
       to show working app prototype as soon as possible in case you need to."
      ),
      f7ExpandableCard(
       id = "card2",
       title = "Expandable Card 2",
       color = "green",
       "Framework7 - is a free and open source HTML mobile framework
       to develop hybrid mobile apps or web apps with iOS or Android
       native look and feel. It is also an indispensable prototyping apps tool
       to show working app prototype as soon as possible in case you need to."
      ),
      f7ExpandableCard(
       id = "card3",
       title = "Expandable Card 3",
       image = "https://i.pinimg.com/originals/73/38/6e/73386e0513d4c02a4fbb814cadfba655.jpg",
       "Framework7 - is a free and open source HTML mobile framework
        to develop hybrid mobile apps or web apps with iOS or Android
        native look and feel. It is also an indispensable prototyping apps tool
        to show working app prototype as soon as possible in case you need to."
      ),
      f7ExpandableCard(
       id = "card4",
       title = "Expandable Card 4",
       fullBackground = TRUE,
       image = "https://i.ytimg.com/vi/8q_kmxwK5Rg/maxresdefault.jpg",
       "Framework7 - is a free and open source HTML mobile framework
              to develop hybrid mobile apps or web apps with iOS or Android
              native look and feel. It is also an indispensable prototyping apps tool
              to show working app prototype as soon as possible in case you need to."
      )
    )
  ),
  server = function(input, output) {}
 )
}

# Update expandable card
if (interactive()) {
 library(shiny)
 library(shinyMobile)

 shinyApp(
   ui = f7Page(
     title = "Expandable Cards",
     f7SingleLayout(
       navbar = f7Navbar(
         title = "Expandable Cards",
         hairline = FALSE,
         shadow = TRUE
       ),
       f7ExpandableCard(
         id = "card1",
         title = "Expandable Card 1",
         image = "http://i.pinimg.com/originals/73/38/6e/73386e0513d4c02a4fbb814cadfba655.jpg",
         "Framework7 - is a free and open source HTML mobile framework
         to develop hybrid mobile apps or web apps with iOS or Android
         native look and feel. It is also an indispensable prototyping apps tool
         to show working app prototype as soon as possible in case you need to."
       ),

       hr(),
       f7BlockTitle(title = "Click below to expand the card!") %>% f7Align(side = "center"),
       f7Button(inputId = "go", label = "Go"),
       br(),
       f7ExpandableCard(
         id = "card2",
         title = "Expandable Card 2",
         fullBackground = TRUE,
         image = "http://i.ytimg.com/vi/8q_kmxwK5Rg/maxresdefault.jpg",
         "Framework7 - is a free and open source HTML mobile framework
               to develop hybrid mobile apps or web apps with iOS or Android
               native look and feel. It is also an indispensable prototyping apps tool
               to show working app prototype as soon as possible in case you need to."
       )
     )
   ),
   server = function(input, output, session) {

     observeEvent(input$go, {
       updateF7Card(id = "card2")
     })

     observe({
       list(
         print(input$card1),
         print(input$card2)
       )
     })
   }
 )
}

Description

f7Checkbox creates a checkbox input.

updateF7Checkbox changes the value of a checkbox input on the client.

Usage

f7Checkbox(inputId, label, value = FALSE)

updateF7Checkbox(
  inputId,
  label = NULL,
  value = NULL,
  session = shiny::getDefaultReactiveDomain()
)

Arguments

Examples

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

 shinyApp(
   ui = f7Page(
    title = "My app",
    f7SingleLayout(
     navbar = f7Navbar(title = "f7Checkbox"),
     f7Card(
      f7Checkbox(
       inputId = "check",
       label = "Checkbox",
       value = FALSE
      ),
      verbatimTextOutput("test")
     )
    )
   ),
   server = function(input, output) {
    output$test <- renderPrint({input$check})
   }
 )
}
if (interactive()) {
 library(shiny)
 library(shinyMobile)

 ui <- f7Page(
   f7SingleLayout(
    navbar = f7Navbar(title = "updateF7CheckBox"),
    f7Slider(
     inputId = "controller",
     label = "Number of observations",
     max = 10,
     min = 0,
     value = 1,
     step = 1,
     scale = TRUE
    ),
    f7checkBox(
     inputId = "check",
     label = "Checkbox"
    )
   )
 )

 server <- function(input, output, session) {
   observe({
     # TRUE if input$controller is odd, FALSE if even.
     x_even <- input$controller %% 2 == 1

     if (x_even) {
      showNotification(
       id = "notif",
       paste("The slider is ", input$controller, "and the checkbox is", input$check),
       duration = NULL,
       type = "warning"
      )
     } else {
      removeNotification("notif")
     }

     updateF7Checkbox("check", value = x_even)
   })
 }

shinyApp(ui, server)
}

Description

f7CheckboxGroup creates a checkbox group input

Usage

f7CheckboxGroup(inputId, label, choices = NULL, selected = NULL)

Arguments

Examples

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

  shiny::shinyApp(
    ui = f7Page(
     title = "My app",
     f7SingleLayout(
      navbar = f7Navbar(title = "f7CheckboxGroup"),
      f7CheckboxGroup(
       inputId = "variable",
       label = "Choose a variable:",
       choices = colnames(mtcars)[-1],
       selected = NULL
      ),
      tableOutput("data")
     )
    ),
    server = function(input, output) {
     output$data <- renderTable({
      mtcars[, c("mpg", input$variable), drop = FALSE]
      }, rownames = TRUE)
    }
  )
 }

Description

f7Chip is an improved badge container.

Usage

f7Chip(
  label = NULL,
  image = NULL,
  icon = NULL,
  outline = FALSE,
  status = NULL,
  iconStatus = NULL,
  closable = FALSE
)

Arguments

Author(s)

David Granjon, [email protected]

Examples

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

 shinyApp(
  ui = f7Page(
    title = "Chips",
    f7SingleLayout(
      navbar = f7Navbar(title = "f7Chip"),
      f7Block(
        strong = TRUE,
        f7Chip(label = "simple Chip"),
        f7Chip(label = "outline Chip", outline = TRUE),
        f7Chip(label = "icon Chip", icon = f7Icon("plus_circle_fill"), iconStatus = "pink"),
        f7Chip(label = "image Chip", image = "https://loremflickr.com/g/320/240/london"),
        f7Chip(label = "closable Chip", closable = TRUE),
        f7Chip(label = "colored Chip", status = "green"),
        f7Chip(label = "colored outline Chip", status = "green", outline = TRUE)
      )
    )
  ),
  server = function(input, output) {}
 )
}

Description

Build a Framework7 column container

Usage

f7Col(...)

Arguments

Note

The dark theme does not work for items embedded in a column. Use f7Flex instead.

Author(s)

David Granjon, [email protected]

Description

Create a Framework7 color picker input

Usage

f7ColorPicker(
  inputId,
  label,
  value = "#ff0000",
  placeholder = NULL,
  modules = f7ColorPickerModules,
  palettes = f7ColorPickerPalettes,
  sliderValue = TRUE,
  sliderValueEditable = TRUE,
  sliderLabel = TRUE,
  hexLabel = TRUE,
  hexValueEditable = TRUE,
  groupedModules = TRUE
)

Arguments

Examples

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

 shinyApp(
   ui = f7Page(
     title = "My app",
     f7SingleLayout(
       navbar = f7Navbar(title = "f7ColorPicker"),
       f7ColorPicker(
         inputId = "mycolorpicker",
         placeholder = "Some text here!",
         label = "Select a color"
       ),
       "The picker value is:",
       textOutput("colorPickerVal")
     )
   ),
   server = function(input, output) {
     output$colorPickerVal <- renderText(input$mycolorpicker)
   }
 )
}

Description

f7DatePicker creates a Framework7 date picker input.

updateF7DatePicker changes the value of a date picker input on the client.

Usage

f7DatePicker(
  inputId,
  label,
  value = NULL,
  multiple = FALSE,
  direction = c("horizontal", "vertical"),
  minDate = NULL,
  maxDate = NULL,
  dateFormat = "yyyy-mm-dd",
  openIn = c("auto", "popover", "sheet", "customModal"),
  scrollToInput = FALSE,
  closeByOutsideClick = TRUE,
  toolbar = TRUE,
  toolbarCloseText = "Done",
  header = FALSE,
  headerPlaceholder = "Select date"
)

updateF7DatePicker(
  inputId,
  value = NULL,
  ...,
  session = shiny::getDefaultReactiveDomain()
)

Arguments

Value

a Date vector.

Examples

# Date picker
if (interactive()) {
  library(shiny)
  library(shinyMobile)

  shinyApp(
    ui = f7Page(
      title = "My app",
      f7SingleLayout(
        navbar = f7Navbar(title = "f7DatePicker"),
        f7DatePicker(
          inputId = "date",
          label = "Choose a date",
          value = "2019-08-24"
        ),
        "The selected date is",
        verbatimTextOutput("selectDate"),
        f7DatePicker(
          inputId = "multipleDates",
          label = "Choose multiple dates",
          value = Sys.Date() + 0:3,
          multiple = TRUE
        ),
        "The selected date is",
        verbatimTextOutput("selectMultipleDates"),
        f7DatePicker(
          inputId = "default",
          label = "Choose a date",
          value = NULL
        ),
        "The selected date is",
        verbatimTextOutput("selectDefault")
      )
    ),
    server = function(input, output, session) {

      output$selectDate <- renderPrint(input$date)
      output$selectMultipleDates <- renderPrint(input$multipleDates)
      output$selectDefault <- renderPrint(input$default)

    }
  )
}
# Update date picker
if (interactive()) {
  library(shiny)
  library(shinyMobile)

  shinyApp(
    ui = f7Page(
      title = "My app",
      f7SingleLayout(
        navbar = f7Navbar(title = "Update date picker"),
        f7Card(
          f7Button(inputId = "selectToday", label = "Select today"),
          f7Button(inputId = "rmToolbar", label = "Remove toolbar"),
          f7Button(inputId = "addToolbar", label = "Add toolbar"),
          f7DatePicker(
            inputId = "mypicker",
            label = "Choose a date",
            value = Sys.Date() - 7,
            openIn = "auto",
            direction = "horizontal"
          ),
          verbatimTextOutput("pickerval")
        )
      )
    ),
    server = function(input, output, session) {

      output$pickerval <- renderPrint(input$mypicker)

      observeEvent(input$selectToday, {
        updateF7DatePicker(
          inputId = "mypicker",
          value = Sys.Date()
        )
      })

      observeEvent(input$rmToolbar, {
        updateF7DatePicker(
          inputId = "mypicker",
          toolbar = FALSE,
          dateFormat = "yyyy-mm-dd" # preserve date format
        )
      })

      observeEvent(input$addToolbar, {
        updateF7DatePicker(
          inputId = "mypicker",
          toolbar = TRUE,
          dateFormat = "yyyy-mm-dd" # preserve date format
        )
      })

    }
  )
}

Description

f7Dialog generates a modal window.

Usage

f7Dialog(
  id = NULL,
  title = NULL,
  text,
  type = c("alert", "confirm", "prompt", "login"),
  session = shiny::getDefaultReactiveDomain()
)

Arguments

Examples

# simple alert
if (interactive()) {
  library(shiny)
  library(shinyMobile)
  shinyApp(
    ui = f7Page(
      title = "Simple Dialog",
      f7SingleLayout(
        navbar = f7Navbar(title = "f7Dialog"),
        f7Button(inputId = "goButton", "Go!")
      )
    ),
    server = function(input, output, session) {
      observeEvent(input$goButton,{
        f7Dialog(
         title = "Dialog title",
         text = "This is an alert dialog"
        )
      })
    }
  )
}
# confirm alert
if (interactive()) {
 library(shiny)
 library(shinyMobile)
 shinyApp(
   ui = f7Page(
     title = "Confirm Dialog",
     f7SingleLayout(
       navbar = f7Navbar(title = "f7Dialog"),
       f7Button(inputId = "goButton", "Go!")
     )
   ),
   server = function(input, output, session) {

     observeEvent(input$goButton,{
       f7Dialog(
         id = "test",
         title = "Dialog title",
         type = "confirm",
         text = "This is an alert dialog"
       )
     })

     observeEvent(input$test, {
       f7Toast(text = paste("Alert input is:", input$test))
     })

   }
 )
}
# prompt dialog
if (interactive()) {
 library(shiny)
 library(shinyMobile)
 shinyApp(
   ui = f7Page(
     title = "Prompt Dialog",
     f7SingleLayout(
       navbar = f7Navbar(title = "f7Dialog"),
       f7Button(inputId = "goButton", "Go!"),
       uiOutput("res")
     )
   ),
   server = function(input, output, session) {

     observe({
       print(input$prompt)
     })

     observeEvent(input$goButton,{
       f7Dialog(
         id = "prompt",
         title = "Dialog title",
         type = "prompt",
         text = "This is a prompt dialog"
       )
     })

     output$res <- renderUI(f7BlockTitle(title = input$prompt, size = "large"))
   }
 )
}

# login dialog
if (interactive()) {
 library(shiny)
 library(shinyMobile)
 shinyApp(
   ui = f7Page(
     title = "Login Dialog",
     f7SingleLayout(
       navbar = f7Navbar(title = "f7Dialog"),
       f7Button(inputId = "goButton", "Go!"),
       uiOutput("ui")
     )
   ),
   server = function(input, output, session) {

     observe({
       print(input$login)
     })

     observeEvent(input$goButton,{
       f7Dialog(
         id = "login",
         title = "Dialog title",
         type = "login",
         text = "This is an login dialog"
       )
     })

     output$ui <- renderUI({
       req(input$login$user == "David" & input$login$password == "prout")
       img(src = "https://media2.giphy.com/media/12gfL8Xxrhv7C1fXiV/giphy.gif")
     })
   }
 )
}

Description

Use these functions to create a download button; when clicked, it will initiate a browser download. The filename and contents are specified by the corresponding shiny downloadHandler() defined in the server function.

Usage

f7DownloadButton(outputId, label = "Download", class = NULL, ...)

Arguments

Examples

if (interactive()) {
 library(shiny)
 library(shinyMobile)
 ui = f7Page(
  f7SingleLayout(
    navbar = f7Navbar(title = "File handling"),
    f7DownloadButton("download","Download!")
  )
 )

 server = function(input, output, session) {
   # Our dataset
   data <- mtcars

   output$download = downloadHandler(
     filename = function() {
       paste("data-", Sys.Date(), ".csv", sep="")
     },
     content = function(file) {
       write.csv(data, file)
     }
   )
 }

 shinyApp(ui, server)
}

Description

f7Fab generates a nice button to be put in f7Fabs.

updateF7Fab changes the label of an f7Fab input on the client.

Usage

f7Fab(inputId, label, width = NULL, ..., flag = NULL)

updateF7Fab(inputId, label = NULL, session = shiny::getDefaultReactiveDomain())

Arguments

Author(s)

David Granjon, [email protected]

Examples

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

 ui <- f7Page(
   f7SingleLayout(
    navbar = f7Navbar(title = "updateF7Fab"),
    f7Fab("trigger", "Click me")
   )
 )

 server <- function(input, output, session) {
   observeEvent(input$trigger, {
     updateF7Fab("trigger", label = "Don't click me")
   })
 }
shinyApp(ui, server)
}

Description

f7FabClose indicates that the current tag should close the f7Fabs.

Usage

f7FabClose(tag)

Arguments

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

Note

The background color might be an issue depending on the parent container. Consider it experimental.

Author(s)

David Granjon, [email protected]

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(href = i) %>% 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) {}
 )
}

Description

Create a file upload control that can be used to upload one or more files.

Usage

f7File(
  inputId,
  label,
  multiple = FALSE,
  accept = NULL,
  width = NULL,
  buttonLabel = "Browse...",
  placeholder = "No file selected"
)

Arguments

Examples

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

 ui = f7Page(
   f7SingleLayout(
     navbar = f7Navbar(title = "File handling"),
     f7File("up", "Upload!")
   )
 )

 server = function(input, output) {
   data <- reactive(input$up)
   observe(print(data()))
 }

 shinyApp(ui, server)
}

Description

Build a Framework7 flex container

Usage

f7Flex(...)

Arguments

Author(s)

David Granjon, [email protected]

Examples

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

 shinyApp(
   ui = f7Page(
    title = "Align",
    f7SingleLayout(
     navbar = f7Navbar(title = "f7Flex"),
     f7Flex(
      f7Block(strong = TRUE),
      f7Block(strong = TRUE),
      f7Block(strong = TRUE)
     )
    )
   ),
   server = function(input, output) {}
 )
}

Description

f7Float is an alignment utility for items.

Usage

f7Float(tag, side = c("left", "right"))

Arguments

Author(s)

David Granjon, [email protected]

Examples

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

 shinyApp(
   ui = f7Page(
    title = "Float",
    f7SingleLayout(
     navbar = f7Navbar(title = "f7Float"),
     f7Float(h1("Left"), side = "left"),
    f7Float(h1("Right"), side = "right")
    )
   ),
   server = function(input, output) {}
 )
}

Description

Use with f7Searchbar.

Usage

f7Found(tag)

Arguments

Description

A gallery of all components available in shinyMobile.

Usage

f7Gallery()

Examples

if (interactive()) {

 f7Gallery()

}

Description

f7Gauge creates a gauge instance.

updateF7Gauge updates a framework7 gauge from the server side.

Usage

f7Gauge(
  id,
  type = "circle",
  value,
  size = 200,
  bgColor = "transparent",
  borderBgColor = "#eeeeee",
  borderColor = "#000000",
  borderWidth = "10",
  valueText = NULL,
  valueTextColor = "#000000",
  valueFontSize = "31",
  valueFontWeight = "500",
  labelText = NULL,
  labelTextColor = "#888888",
  labelFontSize = "14",
  labelFontWeight = "400"
)

updateF7Gauge(
  id,
  value = NULL,
  labelText = NULL,
  size = NULL,
  bgColor = NULL,
  borderBgColor = NULL,
  borderColor = NULL,
  borderWidth = NULL,
  valueText = NULL,
  valueTextColor = NULL,
  valueFontSize = NULL,
  valueFontWeight = NULL,
  labelTextColor = NULL,
  labelFontSize = NULL,
  labelFontWeight = NULL,
  session = shiny::getDefaultReactiveDomain()
)

Arguments

Author(s)

David Granjon [email protected]

Examples

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

 shinyApp(
  ui = f7Page(
    title = "Gauges",
    f7SingleLayout(
     navbar = f7Navbar(title = "f7Gauge"),
     f7Block(
      f7Gauge(
       id = "mygauge",
       type  = "semicircle",
       value = 50,
       borderColor = "#2196f3",
       borderWidth = 10,
       valueFontSize = 41,
       valueTextColor = "#2196f3",
       labelText = "amount of something"
      )
     )
    )
  ),
  server = function(input, output) {}
 )
}

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


 shinyApp(
    ui = f7Page(
       title = "Gauges",
       f7SingleLayout(
          navbar = f7Navbar(title = "update f7Gauge"),
          f7Gauge(
             id = "mygauge",
             type  = "semicircle",
             value = 50,
             borderColor = "#2196f3",
             borderWidth = 10,
             valueFontSize = 41,
             valueTextColor = "#2196f3",
             labelText = "amount of something"
          ),
          f7Button("go", "Update Gauge")
       )
    ),
    server = function(input, output, session) {
       observeEvent(input$go, {
          updateF7Gauge(id = "mygauge", value = 75, labelText = "New label!")
       })
    }
 )
}

Utility to hide a given tag when f7Searchbar is enabled.

Description

Use with f7Searchbar.

Usage

f7HideOnEnable(tag)

Arguments

Description

Use with f7Searchbar.

Usage

f7HideOnSearch(tag)

Arguments

Description

Use Framework7 icons in shiny applications, see complete list of icons here : https://framework7.io/icons/.

Usage

f7Icon(..., lib = NULL, color = NULL, style = NULL, old = NULL)

Arguments

Author(s)

David Granjon, [email protected]

Examples

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

 shinyApp(
  ui = f7Page(
    title = "Icons",
    f7SingleLayout(
     navbar = f7Navbar(title = "icons"),
     f7List(
      f7ListItem(
        title = tagList(
         f7Icon("envelope")
        )
      ),
      f7ListItem(
        title = tagList(
         f7Icon("envelope_fill", color = "green")
        )
      ),
      f7ListItem(
        title = f7Icon("home", f7Badge("1", color = "red"))
      ),
      f7ListItem(
        title = f7Icon("envelope", lib = "md"),
        "This will not appear since only for material design"
      )
     )
    )
  ),
  server = function(input, output) {}
 )
}

Description

Similar to f7Tab but for the f7SplitLayout.

Usage

f7Item(..., tabName)

Arguments

Author(s)

David Granjon, [email protected]

Description

Build a Framework7 wrapper for f7Item

Usage

f7Items(...)

Arguments

Author(s)

David Granjon, [email protected]

Description

Link to point toward external content.

Usage

f7Link(label = NULL, href, icon = NULL)

Arguments

Author(s)

David Granjon, [email protected]

Examples

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

 shinyApp(
   ui = f7Page(
    title = "Links",
    f7SingleLayout(
     navbar = f7Navbar(title = "f7Link"),
     f7Link(label = "Google", href = "https://www.google.com"),
     f7Link(href = "https://www.twitter.com", icon = f7Icon("bolt_fill"))
    )
   ),
   server = function(input, output) {}
 )
}

Description

Create a framework 7 contact list

Usage

f7List(..., mode = NULL, inset = FALSE)

Arguments

Examples

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

shinyApp(
  ui = f7Page(
    title = "My app",
    f7SingleLayout(
      navbar = f7Navbar(title = "f7List"),

      # simple list
      f7List(
        lapply(1:3, function(j) f7ListItem(letters[j]))
      ),

      # list with complex items
      f7List(
        lapply(1:3, function(j) {
          f7ListItem(
            letters[j],
            media = f7Icon("alarm_fill"),
            right = "Right Text",
            header = "Header",
            footer = "Footer"
          )
        })
      ),

      # list with complex items
      f7List(
        mode = "media",
        lapply(1:3, function(j) {
          f7ListItem(
            title = letters[j],
            subtitle = "subtitle",
            "Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            Nulla sagittis tellus ut turpis condimentum, ut dignissim
            lacus tincidunt. Cras dolor metus, ultrices condimentum sodales
            sit amet, pharetra sodales eros. Phasellus vel felis tellus.
            Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet,
            commodo augue id, pulvinar lacus.",
            media = tags$img(
             src = paste0(
             "https://cdn.framework7.io/placeholder/people-160x160-", j, ".jpg"
             )
            ),
            right = "Right Text"
          )
        })
      ),

      # list with links
      f7List(
        lapply(1:3, function(j) {
          f7ListItem(url = "https://google.com", letters[j])
        })
      ),

      # grouped lists
      f7List(
        mode = "contacts",
        lapply(1:3, function(i) {
          f7ListGroup(
            title = LETTERS[i],
            lapply(1:3, function(j) f7ListItem(letters[j]))
          )
        })
      )
    )
  ),
  server = function(input, output) {}
 )
}

Description

Create a framework 7 group of contacts

Usage

f7ListGroup(..., title)

Arguments

Description

Create a Framework 7 list index

Usage

f7ListIndex(..., id)

Arguments

Note

For some reason, unable to get more than 1 list index working. See example below. The second list does not work.

Examples

if (interactive()) {
 library(shiny)
 library(shinyMobile)
 shinyApp(
   ui = f7Page(
     title = "List Index",
     f7TabLayout(
       navbar = f7Navbar(
         title = "f7ListIndex",
         hairline = FALSE,
         shadow = TRUE
       ),
       f7Tabs(
         f7Tab(
           tabName = "List 1",
           f7ListIndex(
             id = "listIndex1",
             lapply(seq_along(LETTERS), function(i) {
               f7ListGroup(
                 title = LETTERS[i],
                 lapply(1:3, function(j) {
                   f7ListIndexItem(letters[j])
                 })
               )
             })
           )
         ),
         f7Tab(
           tabName = "List 2",
           f7ListIndex(
             id = "listIndex2",
             lapply(seq_along(LETTERS), function(i) {
               f7ListGroup(
                 title = LETTERS[i],
                 lapply(1:3, function(j) {
                   f7ListIndexItem(letters[j])
                 })
               )
             })
           )
         )
       )
     )
   ),
   server = function(input, output) {}
 )
}

Description

Create a Framework 7 list index item

Usage

f7ListIndexItem(..., .noWS = NULL)

Arguments

Description

Create a Framework 7 contact item

Usage

f7ListItem(
  ...,
  title = NULL,
  subtitle = NULL,
  header = NULL,
  footer = NULL,
  href = NULL,
  media = NULL,
  right = NULL
)

Arguments

Description

Provide a template for authentication

f7LoginServer is a useful server elements to fine tune the f7Login page.

updateF7Login toggles a login page.

Usage

f7Login(..., id, title, label = "Sign In", footer = NULL, startOpen = TRUE)

f7LoginServer(input, output, session, ignoreInit = FALSE, trigger = NULL)

updateF7Login(
  id,
  user = NULL,
  password = NULL,
  session = shiny::getDefaultReactiveDomain()
)

Arguments

Details

This function does not provide the backend features. You would need to store credentials in a database for instance.

Note

There is an input associated with the login status, namely input$login. It is linked to an action button, which is 0 when the application starts. As soon as the button is pressed, its value is incremented which might fire a observeEvent listening to it (See example below). Importantly, the login page is closed only if the text and password inputs are filled. The f7LoginServer contains a piece of server logic that does this work for you.

Examples

if (interactive()) {
 # global authentication
 library(shiny)
 library(shinyMobile)
 shinyApp(
   ui = f7Page(
     title = "Login module",
     f7SingleLayout(
       navbar = f7Navbar(
         title = "Login Example",
         hairline = FALSE,
         shadow = TRUE
       ),
       toolbar = f7Toolbar(
         position = "bottom",
         f7Link(label = "Link 1", href = "https://www.google.com"),
         f7Link(label = "Link 2", href = "https://www.google.com")
       ),
       f7Login(id = "loginPage", title = "Welcome"),
       # main content
       f7BlockTitle(
         title = HTML(paste("Welcome", textOutput("user"))),
         size = "large"
       ) %>% f7Align("center")
     )
   ),
   server = function(input, output, session) {

     loginData <- callModule(f7LoginServer, id = "loginPage")

     output$user <- renderText({
      req(loginData$user)
      loginData$user()
     })
   }
 )

 # section specific authentication
 library(shiny)
 library(shinyMobile)
 shinyApp(
   ui = f7Page(
     title = "Local access restriction",
     f7TabLayout(
       navbar = f7Navbar(
         title = "Login Example for Specific Section",
         hairline = FALSE,
         shadow = TRUE
       ),
       f7Tabs(
         id = "tabs",
         f7Tab(
           tabName = "Tab 1",
           "Without authentication"
         ),
         f7Tab(
           tabName = "Restricted",
           # main content
           f7BlockTitle(
             title = HTML(paste("Welcome", textOutput("user"))),
             size = "large"
           ) %>% f7Align("center")
         )
       ),
       f7Login(id = "loginPage", title = "Welcome", startOpen = FALSE)
     )
   ),
   server = function(input, output, session) {

     # trigger
     trigger <- reactive({
      req(input$tabs)
     })

     # do not run first since the login page is not yet visible
     loginData <- callModule(
      f7LoginServer,
      id = "loginPage",
      ignoreInit = TRUE,
      trigger = trigger
     )

     output$user <- renderText({
      req(loginData$user)
      loginData$user()
     })

   }
 )

 # with 2 different protected sections
 library(shiny)
 library(shinyMobile)
 shinyApp(
   ui = f7Page(
     title = "Multiple restricted areas",
     f7TabLayout(
       navbar = f7Navbar(
         title = "Login Example for 2 Specific Section",
         hairline = FALSE,
         shadow = TRUE
       ),
       f7Tabs(
         id = "tabs",
         f7Tab(
           tabName = "Tab 1",
           "Without authentication"
         ),
         f7Tab(
           tabName = "Restricted",
           # main content
           f7BlockTitle(
             title = "1st restricted area",
             size = "large"
           ) %>% f7Align("center")
         ),
         f7Tab(
           tabName = "Restricted 2",
           # main content
           f7BlockTitle(
             title = "2nd restricted area",
             size = "large"
           ) %>% f7Align("center")
         )
       ),
       f7Login(id = "loginPage", title = "Welcome", startOpen = FALSE),
       f7Login(id = "loginPage2", title = "Welcome", startOpen = FALSE)
     )
   ),
   server = function(input, output, session) {

     trigger1 <- reactive({
       req(input$tabs == "Restricted")
     })

     trigger2 <- reactive({
       req(input$tabs == "Restricted 2")
     })

     # do not run first since the login page is not yet visible
     callModule(
       f7LoginServer,
       id = "loginPage",
       ignoreInit = TRUE,
       trigger = trigger1
     )

     callModule(
       f7LoginServer,
       id = "loginPage2",
       ignoreInit = TRUE,
       trigger = trigger2
     )

   }
 )
}

Description

f7Margin adds a margin to the given tag.

Usage

f7Margin(tag, side = NULL)

Arguments

Author(s)

David Granjon, [email protected]

Examples

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

 cardTag <- 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")
  )
 )

 shinyApp(
   ui = f7Page(
    title = "Margins",
    f7SingleLayout(
     navbar = f7Navbar(title = "f7Margin"),
     f7Margin(cardTag),
     cardTag
    )
   ),
   server = function(input, output) {}
 )
}