shinyMobile

https://rinterface.github.io/shinyMobile/
Admin
shinyMobile is an R package that builds outstanding Shiny apps for iOS and Android and beautiful...
Tokens:173,923
Snippets:1,147
Trust Score:9.7
Update:4 hours ago
Show doc for...
Tokens:
Raw
### Complete f7Treeview example with multiple configurations

Source: https://rinterface.github.io/shinyMobile/reference/f7Treeview.html

A full Shiny app demonstrating various treeview setups: simple, with icons, groups, selectable items, checkboxes, and links. Includes server logic to observe selections.

```r
library(shiny)
library(shinyMobile)

app <- shinyApp(
  ui = f7Page(
    title = "My app",
    f7SingleLayout(
      navbar = f7Navbar(title = "f7Treeview"),

      # simple treeview
      f7BlockTitle("Simple"),
      f7Block(
        f7Treeview(
          id = "simple",
          lapply(1:3, function(i) f7TreeviewItem(label = paste0("Item ", letters[i])))
        )
      ),

      # simple treeview with icons
      f7BlockTitle("Icons"),
      f7Block(
        f7Treeview(
          id = "icons",
          lapply(1:3, function(i) f7TreeviewItem(label = paste0("Item ", letters[i]),
                                                 icon = f7Icon("folder_fill")))
        )
      ),

      # group treeview with icons
      f7BlockTitle("Group"),
      f7Block(
        f7Treeview(
          id = "group",
          startExpanded = TRUE,
          f7TreeviewGroup(
            title = "Images",
            icon = f7Icon("folder_fill"),
            toggleButton = TRUE,
            lapply(1:3, function(i) f7TreeviewItem(label = paste0("image", i, ".png"),
                                                   icon = f7Icon("photo_fill")))
          )
        )
      ),

      # group treeview with selectable items
      f7BlockTitle("Selectable items"),
      f7Block(
        f7Treeview(
          id = "selectable",
          selectable = TRUE,
          f7TreeviewGroup(
            title = "Selected images",
            icon = f7Icon("folder_fill"),
            itemToggle = TRUE,
            lapply(1:3, function(i) f7TreeviewItem(label = paste0("image", i, ".png"),
                                                   icon = f7Icon("photo_fill")))
          )
        )
      ),

      # group treeview with checkbox items
      f7BlockTitle("Checkbox"),
      f7Block(
        f7Treeview(
          id = "checkbox",
          withCheckbox = TRUE,
          f7TreeviewGroup(
            title = "Selected images",
            icon = f7Icon("folder_fill"),
            itemToggle = TRUE,
            lapply(1:3, function(i) f7TreeviewItem(label = paste0("image", i, ".png"),
                                                   icon = f7Icon("photo_fill")))
          )
        )
      ),

      # group treeview with checkbox items
      f7BlockTitle("With links"),
      f7Block(
        f7Treeview(
          id = "links",
          f7TreeviewGroup(
            title = "Links",
            icon = f7Icon("link"),
            itemToggle = TRUE,
            f7TreeviewItem(label = "GitHub",
                           icon = f7Icon("logo_github"),
                           href = "https://github.com/"),
            f7TreeviewItem(label = "CRAN",
                           icon = f7Icon("link"),
                           href = "https://cran.r-project.org/")),
        )
      )
    )
  ),
  server = function(input, output) {

    observe({
      req(input$selectable)
      print(input$selectable)
    })

    observe({
      req(input$checkbox)
      print(input$checkbox)
    })

  }
)

if (interactive() || identical(Sys.getenv("TESTTHAT"), "true")) app
```

--------------------------------

### f7Page options example

Source: https://rinterface.github.io/shinyMobile/articles/shinyMobile.html

Example of setting app options in f7Page, including dark, filled, and theme.

```r
f7Page(
  options = list(
    dark = FALSE,
    filled = FALSE,
    theme = "md"
  ),
  ...
)
```

--------------------------------

### Interactive example of f7Block with various styles

Source: https://rinterface.github.io/shinyMobile/reference/block.html

A complete shinyApp example demonstrating f7Block with different combinations of strong, inset, tablet, and outline options, along with f7BlockTitle, f7BlockHeader, and f7BlockFooter. The example is wrapped in an interactive() check.

```r
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,
          outline = 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(
          inset = TRUE,
          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,
          outline = 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")
        )
      )
    ),
    server = function(input, output) {}
  )
}
```

--------------------------------

### Example: Create badges with f7Badge in a Shiny app

Source: https://rinterface.github.io/shinyMobile/reference/f7Badge.html

Interactive example that creates a Shiny app with a default badge and badges for each color from getF7Colors().

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

  colors <- getF7Colors()

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

--------------------------------

### Example: Shiny app using f7SingleLayout

Source: https://rinterface.github.io/shinyMobile/reference/f7SingleLayout.html

Interactive example demonstrating f7SingleLayout with a navbar, toolbar, and main content card containing a slider and plot output. Requires shiny and shinyMobile packages.

```r
if (interactive()) {
  library(shiny)
  library(shinyMobile)
  shinyApp(
    ui = f7Page(
      title = "Single layout",
      f7SingleLayout(
        navbar = f7Navbar(
          title = "Single Layout"
        ),
        toolbar = f7Toolbar(
          position = "bottom",
          f7Link(label = "Link 1", href = "https://www.google.com"),
          f7Link(label = "Link 2", href = "https://www.google.com")
        ),
        # main content
        f7Card(
          title = "Card header",
          f7Slider("obs", "Number of observations", 0, 1000, 500),
          plotOutput("distPlot"),
          footer = tagList(
            f7Button(
              color = "blue",
              label = "My button",
              href = "https://www.google.com"
            ),
            f7Badge("Badge", color = "green")
          )
        )
      )
    ),
    server = function(input, output) {
      output$distPlot <- renderPlot({
        dist <- rnorm(input$obs)
        hist(dist)
      })
    }
  )
}
```

--------------------------------

### f7Segment and f7Button usage example

Source: https://rinterface.github.io/shinyMobile/reference/button.html

Example demonstrating how to create button segments with f7Segment and f7Button, including various styling options.

```APIDOC
## f7Segment and f7Button

### Description
Example showing how to create button segments using f7Segment and f7Button with different styles (simple, tonal, filled, outline, strong).

### Usage
```r
if (interactive()) {
  library(shiny)
  library(shinyMobile)

  shinyApp(
    ui = f7Page(
      options = list(dark = FALSE),
      title = "Button Segments",
      f7SingleLayout(
        navbar = f7Navbar(title = "f7Segment, f7Button"),
        f7BlockTitle(title = "Simple Buttons in a segment"),
        f7Segment(
          f7Button(color = "blue", label = "My button", fill = FALSE),
          f7Button(color = "green", label = "My button", fill = FALSE),
          f7Button(color = "yellow", label = "My button", fill = FALSE)
        ),
        f7BlockTitle(title = "Tonal buttons"),
        f7Segment(
          f7Button(color = "blue", label = "My button", tonal = TRUE),
          f7Button(color = "green", label = "My button", tonal = TRUE),
          f7Button(color = "yellow", label = "My button", tonal = TRUE)
        ),
        f7BlockTitle(title = "Filled Buttons in a segment/rounded container"),
        f7Segment(
          rounded = TRUE,
          f7Button(color = "black", label = "My button"),
          f7Button(color = "green", label = "My button"),
          f7Button(color = "yellow", label = "My button")
        ),
        f7BlockTitle(title = "Outline Buttons in a segment/shadow container"),
        f7Segment(
          shadow = TRUE,
          f7Button(label = "My button", outline = TRUE, fill = FALSE),
          f7Button(label = "My button", outline = TRUE, fill = FALSE),
          f7Button(label = "My button", outline = TRUE, fill = FALSE)
        ),
        f7BlockTitle(title = "Buttons in a segment/strong container"),
        f7Segment(
          strong = TRUE,
          f7Button(label = "My button", fill = FALSE),
          f7Button(label = "My button", fill = FALSE),
          f7Button(label = "My button", fill = FALSE, active = TRUE)
        )
      )
    ),
    server = function(input, output) {}
  )
}
```

### Parameters
#### f7Segment
- **rounded** (logical) - Optional - Whether the segment container is rounded.
- **shadow** (logical) - Optional - Whether the segment container has a shadow.
- **strong** (logical) - Optional - Whether the segment container uses strong style.

#### f7Button
- **color** (character) - Optional - The color of the button.
- **label** (character) - Required - The label of the button.
- **fill** (logical) - Optional - Whether the button is filled.
- **tonal** (logical) - Optional - Whether the button uses tonal style.
- **outline** (logical) - Optional - Whether the button is outlined.
- **active** (logical) - Optional - Whether the button is active.

### Example
See the code above.
```

--------------------------------

### Interactive f7Chip example

Source: https://rinterface.github.io/shinyMobile/reference/f7Chip.html

Interactive example demonstrating various chip configurations: simple, outline, icon, image, closable, and colored chips. Requires shiny and shinyMobile libraries.

```r
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) {}
 )
}
```

--------------------------------

### Shiny app example using f7File

Source: https://rinterface.github.io/shinyMobile/reference/f7File.html

An interactive example that creates a Shiny app with a file upload control. The app prints the uploaded file data to the console.

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

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

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

  shinyApp(ui, server)
}
```

--------------------------------

### Example: Shiny app with f7Toolbar

Source: https://rinterface.github.io/shinyMobile/reference/f7Toolbar.html

This example creates a Shiny app with a toolbar containing two links with icons. The app runs if interactive or when TESTTHAT is set to 'true'.

```r
library(shiny)
library(shinyMobile)

app <- shinyApp(
  ui = f7Page(
    title = "Toolbar",
    toolbar = f7Toolbar(
      icons = TRUE,
      f7Link(
        label = "Link 1",
        href = "https://www.google.com",
        icon = f7Icon("link_circle_fill")
      ),
      f7Link(
        label = "Link 2",
        href = "https://maps.google.com",
        icon = f7Icon("location_circle_fill")
      )
    )
  ),
  server = function(input, output, session) {
  }
)

if (interactive() || identical(Sys.getenv("TESTTHAT"), "true")) app
```

--------------------------------

### preview_mobile example with galaxyNote8

Source: https://rinterface.github.io/shinyMobile/reference/preview_mobile.html

Example usage of preview_mobile in an interactive session. It loads shiny and shinyMobile, then previews a local app with the galaxyNote8 device wrapper.

```r
if (interactive()) {
 library(shiny)
 library(shinyMobile)
 preview_mobile(appPath = "~/whatever", device = "galaxyNote8")
}
```

--------------------------------

### Launch shinyMobile gallery with f7Gallery()

Source: https://rinterface.github.io/shinyMobile/articles/shinyMobile.html

Run this R command to open the shinyMobile demo gallery, a full-blown example app. No arguments are shown in the source.

```r
f7Gallery()
```

--------------------------------

### Install shinyMobile from CRAN or GitHub

Source: https://rinterface.github.io/shinyMobile/index.html

Install the stable version from CRAN with install.packages, or the latest development version from GitHub using devtools::install_github.

```r
# from CRAN
install.packages("shinyMobile")

# for the latest version
devtools::install_github("RinteRface/shinyMobile")
```

--------------------------------

### Convert an app to a gadget with shiny::runGadget()

Source: https://rinterface.github.io/shinyMobile/articles/shinyMobile.html

Wrap an existing Shiny app in shiny::runGadget() to turn it into a gadget. This example loads the shiny and shinyMobile libraries and runs a built-in example app from the shinyMobile package.

```r
library(shiny)
library(shinyMobile)
runGadget(shinyAppDir(system.file("examples/tab_layout", package = "shinyMobile")))
```

--------------------------------

### f7Button and updateF7Button usage example

Source: https://rinterface.github.io/shinyMobile/reference/button.html

Example demonstrating how to create a button with f7Button and update it dynamically using updateF7Button in a Shiny app.

```APIDOC
## f7Button and updateF7Button

### Description
Example showing how to create a button with f7Button and update its properties using updateF7Button.

### Usage
```r
library(shiny)
library(shinyMobile)

app <- shiny::shinyApp(
  ui = f7Page(
    title = "Update f7Button",
    f7SingleLayout(
      navbar = f7Navbar(title = "Update f7Button"),
      f7Block(f7Button("update", "Update Button")),
      f7Block(
        f7Button(
          "button",
          "My button",
          color = "orange",
          outline = FALSE,
          fill = TRUE,
          shadow = FALSE,
          rounded = FALSE,
          icon = f7Icon("speedometer")
        )
      )
    )
  ),
  server = function(input, output, session) {
    observeEvent(input$update, {
      updateF7Button(
        inputId = "button",
        label = "Updated label",
        color = "purple",
        shadow = TRUE,
        rounded = TRUE,
        outline = TRUE,
        fill = FALSE,
        tonal = TRUE,
        size = "large",
        icon = f7Icon("speaker_zzz")
      )
    })
  }
)

if (interactive() || identical(Sys.getenv("TESTTHAT"), "true")) app
```

### Parameters
#### f7Button
- **inputId** (character) - Required - The input id of the button.
- **label** (character) - Required - The label of the button.
- **color** (character) - Optional - The color of the button (e.g., "orange", "purple").
- **outline** (logical) - Optional - Whether the button is outlined.
- **fill** (logical) - Optional - Whether the button is filled.
- **shadow** (logical) - Optional - Whether the button has a shadow.
- **rounded** (logical) - Optional - Whether the button is rounded.
- **icon** (f7Icon) - Optional - An icon for the button.

#### updateF7Button
- **inputId** (character) - Required - The id of the button to update.
- **label** (character) - Optional - The new label.
- **color** (character) - Optional - The new color.
- **shadow** (logical) - Optional - Whether to add a shadow.
- **rounded** (logical) - Optional - Whether to round the button.
- **outline** (logical) - Optional - Whether to outline the button.
- **fill** (logical) - Optional - Whether to fill the button.
- **tonal** (logical) - Optional - Whether to use tonal style.
- **size** (character) - Optional - The size of the button (e.g., "large").
- **icon** (f7Icon) - Optional - The new icon.

### Example
See the code above.
```

--------------------------------

### Complete f7List example with multiple list modes

Source: https://rinterface.github.io/shinyMobile/reference/f7List.html

A full Shiny app example showing how to use f7List with simple, media, links, and contacts modes, including f7ListGroup and f7ListIndex.

```r
library(shiny)
library(shinyMobile)

app <- shinyApp(
  ui = f7Page(
    title = "My app",
    f7TabLayout(
      navbar = f7Navbar(title = "f7List"),

      f7Tabs(
        f7Tab(
          title = "Lists",
          tabName = "list",

          # simple list
          f7List(
            mode = "simple",
            lapply(1:3, function(j) tags$li(letters[j]))
          ),

          # list with complex items
          f7List(
            strong = TRUE,
            outline = TRUE,
            inset = TRUE,
            lapply(1:3, function(j) {
              f7ListItem(
                letters[j],
                media = f7Icon("alarm_fill"),
                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(
            mode = "links",
            lapply(1:3, function(j) {
              tags$li(
                f7Link(label = letters[j], href = "https://google.com")
              )
            })
          )
        ),
        f7Tab(
          title = "Group",
          tabName = "groupedlists",

          # grouped lists
          f7List(
            id = "mycontacts",
            mode = "contacts",
            lapply(1:3, function(i) {
              f7ListGroup(
                title = LETTERS[i],
                lapply(1:10, function(j) f7ListItem(letters[j]))
              )
            })
          )
        ),
        f7Tab(
          title = "Other group",
          tabName = "groupedlists2",

          # grouped lists
          f7List(
            id = "myothercontacts",
            mode = "contacts",
            lapply(4:6, function(i) {
              f7ListGroup(
                title = LETTERS[i],
                lapply(10:20, function(j) f7ListItem(letters[j]))
              )
            })
          )
        )
      )

    )
  ),
  server = function(input, output) {
    f7ListIndex(id = "contacts", target = "#mycontacts", label = TRUE)
    f7ListIndex(id = "othercontacts", target = "#myothercontacts", label = TRUE)

  }
)

if (interactive() || identical(Sys.getenv("TESTTHAT"), "true")) app
```

--------------------------------

### f7Card and f7ExpandableCard usage examples

Source: https://rinterface.github.io/shinyMobile/reference/card.html

Examples showing how to create simple cards, cards with headers/footers/images, and expandable cards in Shiny apps using shinyMobile.

```APIDOC
## f7Card and f7ExpandableCard

### Description
These functions create Framework7 cards for Shiny applications. f7Card creates a standard card, while f7ExpandableCard creates an expandable card that can be toggled.

### Usage
f7Card(..., title = NULL, footer = NULL, image = NULL, raised = FALSE, outline = FALSE, divider = FALSE)
f7ExpandableCard(id, title, image = NULL, fullBackground = FALSE, ...)

### Arguments
- `...` (any) - Content of the card, can include text, HTML, or other Shiny elements.
- `title` (character) - Optional card header title.
- `footer` (character or tagList) - Optional card footer content.
- `image` (character) - URL of an image to display in the card.
- `raised` (logical) - Whether the card should have a raised appearance.
- `outline` (logical) - Whether the card should have an outline.
- `divider` (logical) - Whether to show a divider between header and content.
- `id` (character) - Unique identifier for the expandable card, used for updates.
- `fullBackground` (logical) - Whether the image should cover the full background of the expandable card.

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

### Author
David Granjon, dgranjon@ymail.com

### Examples
```r
# Simple card
if (interactive()) {
  library(shiny)
  library(shinyMobile)

  shinyApp(
    ui = f7Page(
      title = "Cards",
      options = list(dark = FALSE),
      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",
          raised = TRUE,
          outline = TRUE,
          divider = TRUE,
          div(class = "date", "March 16, 2024"),
          "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 = "Card footer"
        ),
        f7Card(
          title = "Card header",
          image = "https://cdn.framework7.io/placeholder/nature-1000x600-3.jpg",
          "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(
            f7Link("Link 1", href = "https://google.com"),
            f7Badge("Badge", color = "green")
          )
        )
      )
    ),
    server = function(input, output) {}
  )
}

library(shiny)
library(shinyMobile)

app <- shinyApp(
  ui = f7Page(
    title = "Expandable Cards",
    f7SingleLayout(
      navbar = f7Navbar(title = "Expandable Cards"),
      f7ExpandableCard(
        id = "card1",
        title = "Expandable Card 1",
        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."
      ),
      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 = "https://cdn.pixabay.com/photo/2017/10/03/18/55/mountain-2813667_960_720.png",
        "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")
    })
  }
)

if (interactive() || identical(Sys.getenv("TESTTHAT"), "true")) app
```
```

--------------------------------

### f7Slider and updateF7Slider Example

Source: https://rinterface.github.io/shinyMobile/reference/slider.html

A complete Shiny application example showing how to create a simple slider and a range slider using f7Slider, and how to update them dynamically with updateF7Slider.

```APIDOC
## f7Slider and updateF7Slider Example

### Description
This example demonstrates the usage of the `f7Slider` function to create both a simple slider and a range slider in a shinyMobile app. It also shows how to use `updateF7Slider` to update the slider values, ranges, and appearance dynamically.

### Functions
- `f7Slider(inputId, label, max, min, value, scaleSteps, scaleSubSteps, scale, color, labels, style)`
- `updateF7Slider(inputId, value, min, max, scale, step, color)`

### Parameters
#### f7Slider
- `inputId` (character) - Required - The input ID for the slider.
- `label` (character) - Required - The label displayed above the slider.
- `max` (numeric) - Required - The maximum value of the slider.
- `min` (numeric) - Required - The minimum value of the slider.
- `value` (numeric or numeric vector) - Required - The initial value(s) of the slider. For a range slider, provide a vector of two values.
- `scaleSteps` (numeric) - Optional - Number of scale steps.
- `scaleSubSteps` (numeric) - Optional - Number of scale sub-steps.
- `scale` (logical) - Optional - Whether to show the scale.
- `color` (character) - Optional - The color of the slider.
- `labels` (tagList) - Optional - Custom labels for the slider ends.
- `style` (list) - Optional - A list of style options (e.g., `inset`, `strong`, `outline`).

#### updateF7Slider
- `inputId` (character) - Required - The ID of the slider to update.
- `value` (numeric or numeric vector) - Optional - The new value(s) for the slider.
- `min` (numeric) - Optional - The new minimum value.
- `max` (numeric) - Optional - The new maximum value.
- `scale` (logical) - Optional - Whether to show the scale.
- `step` (numeric) - Optional - The new step size.
- `color` (character) - Optional - The new color.

### Notes
- The `labels` option only works when `vertical` is `FALSE`.
- You cannot transform a range slider into a simple slider and inversely.

### Example Code
```r
library(shiny)
library(shinyMobile)

app <- shinyApp(
  ui = f7Page(
    title = "My app",
    f7SingleLayout(
      navbar = f7Navbar(title = "updateF7Slider"),
      f7Block(
        f7BlockTitle("Simple slider with custom style", size = "large"),
        f7Button(inputId = "update_slider", label = "Update slider"),
        f7Slider(
          inputId = "slider",
          label = "Number of observations",
          max = 1000,
          min = 0,
          value = 100,
          scaleSteps = 5,
          scaleSubSteps = 3,
          scale = TRUE,
          color = "orange",
          labels = tagList(
            f7Icon("circle"),
            f7Icon("circle_fill")
          ),
          style = list(inset = TRUE, strong = TRUE, outline = TRUE)
        ),
        textOutput("slider_res")
      ),
      f7Block(
        f7BlockTitle("Range slider", size = "large"),
        f7Button(inputId = "update_range", label = "Update slider"),
        f7Slider(
          inputId = "range",
          label = "Range values",
          max = 500,
          min = 0,
          step = 0.01,
          color = "deeppurple",
          value = c(50, 100)
        ),
        textOutput("range_res")
      )
    )
  ),
  server = function(input, output, session) {
    output$slider_res <- renderText({
      input$slider
    })

    observeEvent(input$update_slider, {
      updateF7Slider(
        inputId = "slider",
        value = 0.05,
        min = 0,
        max = 0.01,
        scale = FALSE,
        step = 0.001,
        color = "pink"
      )
    })

    output$range_res <- renderText({
      input$range
    })

    observeEvent(input$update_range, {
      updateF7Slider(
        inputId = "range",
        value = c(1, 5),
        min = 0,
        scale = TRUE,
        step = 0.01,
        max = 10,
        color = "teal"
      )
    })
  }
)

if (interactive() || identical(Sys.getenv("TESTTHAT"), "true")) app
```
```

--------------------------------

### Interactive example of f7Padding with f7Card

Source: https://rinterface.github.io/shinyMobile/reference/f7Padding.html

Demonstrates using f7Padding inside an f7Card within a shiny app. The example is wrapped in if(interactive()) and includes a button and badge in the card footer.

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

 cardTag <- f7Card(
  title = "Card header",
  f7Padding(
   p("The padding is applied here.")
  ),
  footer = tagList(
    f7Button(color = "blue", label = "My button", href = "https://www.google.com"),
    f7Badge("Badge", color = "green")
  )
 )

 shinyApp(
   ui = f7Page(
    title = "Padding",
    f7SingleLayout(navbar = f7Navbar(title = "f7Padding"), cardTag)
   ),
   server = function(input, output) {}
 )
}
```

--------------------------------

### Interactive f7Gallery() example

Source: https://rinterface.github.io/shinyMobile/reference/f7Gallery.html

Runs the gallery only in interactive sessions, preventing errors when the script is sourced non-interactively.

```r
if (interactive()) {

 f7Gallery()

}
```

--------------------------------

### Shiny app with f7Login and f7LoginServer

Source: https://rinterface.github.io/shinyMobile/reference/authentication.html

Complete example of a Shiny app using the f7Login UI component and f7LoginServer server function. The app includes a login dialog with a cancellable option, and the server captures login status, user, password, and authentication state. The example is runnable in interactive sessions or when the TESTTHAT environment variable is set to 'true'.

```R
library(shiny)
library(shinyMobile)

app <- shinyApp(
  ui = f7Page(
    title = "Login module",
    f7SingleLayout(
      navbar = f7Navbar(
        title = "Login Example"
      ),
      toolbar = f7Toolbar(
        position = "bottom",
        f7Link(label = "Link 1", href = "https://www.google.com"),
        f7Link(label = "Link 2", href = "https://www.google.com")
      ),
      f7Login(id = "login", title = "Welcome", cancellable = TRUE),
      # main content
      f7BlockTitle(
        title = HTML(paste("Welcome", textOutput("user"))),
        size = "large"
      )
    )
  ),
  server = function(input, output, session) {
    loginData <- f7LoginServer(id = "login")

    exportTestValues(
      status = loginData$status(),
      user = loginData$user(),
      password = loginData$password(),
      authenticated = loginData$authenticated(),
      cancelled = loginData$cancelled()
    )

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

if (interactive() || identical(Sys.getenv("TESTTHAT"), "true")) app
```

--------------------------------

### Interactive f7Align example

Source: https://rinterface.github.io/shinyMobile/reference/f7Align.html

Example of using f7Align within a shinyMobile app. It creates a page with a single layout and a row of aligned headings. The example is wrapped in an interactive check.

```R
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) {}
 )
}
```

--------------------------------

### f7Margin example with Shiny app

Source: https://rinterface.github.io/shinyMobile/reference/f7Margin.html

Example of using f7Margin in a Shiny app. It creates a card and applies a margin to it, then displays both the margined and unmargined cards. The example is wrapped in an interactive check.

```r
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) {}
 )
}
```

--------------------------------

### Create simple and expandable cards with f7Card and f7ExpandableCard

Source: https://rinterface.github.io/shinyMobile/reference/card.html

This example shows how to create simple cards with f7Card, including options for title, raised, outline, divider, image, footer, and badges. It also demonstrates f7ExpandableCard with images and a button that triggers updateF7Card to expand a card. The app runs interactively or when TESTTHAT is true.

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

  shinyApp(
    ui = f7Page(
      title = "Cards",
      options = list(dark = FALSE),
      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",
          raised = TRUE,
          outline = TRUE,
          divider = TRUE,
          div(class = "date", "March 16, 2024"),
          "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 = "Card footer"
        ),
        f7Card(
          title = "Card header",
          image = "https://cdn.framework7.io/placeholder/nature-1000x600-3.jpg",
          "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(
            f7Link("Link 1", href = "https://google.com"),
            f7Badge("Badge", color = "green")
          )
        )
      )
    ),
    server = function(input, output) {}
  )
}

library(shiny)
library(shinyMobile)

app <- shinyApp(
  ui = f7Page(
    title = "Expandable Cards",
    f7SingleLayout(
      navbar = f7Navbar(title = "Expandable Cards"),
      f7ExpandableCard(
        id = "card1",
        title = "Expandable Card 1",
        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."
      ),
      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 = "https://cdn.pixabay.com/photo/2017/10/03/18/55/mountain-2813667_960_720.png",
        "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")
    })
  }
)

if (interactive() || identical(Sys.getenv("TESTTHAT"), "true")) app
```

--------------------------------

### f7Link example with shiny app

Source: https://rinterface.github.io/shinyMobile/reference/f7Link.html

Example usage of f7Link within a shiny app. It creates a page with two links: one with a label and one with an icon. The example is wrapped in an interactive check.

```r
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) {}
  )
}
```

--------------------------------

### Interactive example of f7Float in a shiny app

Source: https://rinterface.github.io/shinyMobile/reference/f7Float.html

Example of using f7Float inside a shinyApp with f7Page and f7SingleLayout. It floats an h1 element to the left and another to the right. The example is wrapped in if(interactive()) so it runs only in interactive sessions.

```r
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) {}
 )
}
```
Tokens:
Raw