List View

2024-10-04

Creating Different Types of Lists

Lists are a great way to organize information in a structured way. And Framework7 provides a number of different list types to choose from, ranging from simple text lists to more complex lists with icons, groups, headers and footers. In {shinyMobile}, all these possibilities are available through the f7List() and f7ListItem() functions.

Styling options

There are 4 styling options available for lists:

Available mode options

There are 4 different modes available for lists:

Examples

As you can imagine, there are a lot of possible combinations of these options. Below we will show some examples of how to create different types of lists.

List items

There are two different ways in which you can create items belonging in f7List():

  1. Using tags$li(), which is the most simple way to create a list item. Within this tag you can add any HTML content you like.
  2. Using f7ListItem(), which gives you plenty of options to configure your list item. This is the recommended method.

For example, the following code creates a simple list with 5 items using the first method:

f7List(
  mode = "simple",
  lapply(1:5, function(j) {
    tags$li(
      paste("Item", j)
    )
  })
)


Using the second method, the code would look like:

f7List(
  mode = "simple",
  lapply(1:5, function(j) {
    f7ListItem(
      title = paste("Item", j)
    )
  })
)


The styling of these two methods might differ slightly, because in the second method some CSS classes are added to the list items. However, in the case of a simple item like above, there’s no difference.

Simple list

The most simple list has mode set to "simple" and no other options set:

library(shiny)
library(shinyMobile)

shinyApp(
  ui = f7Page(
    title = "My app",
    options = list(dark = FALSE, theme = "ios"),
    f7SingleLayout(
      navbar = f7Navbar(title = "f7List"),
      f7List(
        mode = "simple",
        lapply(1:5, function(j) {
          f7ListItem(
            title = paste("Item", j)
          )
        })
      )
    )
  ),
  server = function(input, output) {
  }
)


Note that you need to use title = ... in f7ListItem() when using f7List(mode = "simple", ...). Other arguments in f7ListItem() will be ignored when mode is "simple".


Using the styling options, you can already drastically change the appearance of the list:

library(shiny)
library(shinyMobile)

shinyApp(
  ui = f7Page(
    title = "My app",
    options = list(dark = FALSE, theme = "ios"),
    f7SingleLayout(
      navbar = f7Navbar(title = "f7List"),
      f7List(
        mode = "simple",
        outline = TRUE,
        dividers = TRUE,
        strong = TRUE,
        lapply(1:5, function(j) {
          f7ListItem(
            title = paste("Item", j)
          )
        })
      )
    )
  ),
  server = function(input, output) {
  }
)

Grouped list

A grouped list can be generated by using f7ListGroup(). The mode argument should be set to "contacts" in f7List():

library(shiny)
library(shinyMobile)

shinyApp(
  ui = f7Page(
    title = "My app",
    options = list(dark = FALSE, theme = "ios"),
    f7SingleLayout(
      navbar = f7Navbar(title = "f7List"),
      f7List(
        mode = "contacts",
        outline = TRUE,
        dividers = TRUE,
        strong = TRUE,
        lapply(4:6, function(i) {
          f7ListGroup(
            title = LETTERS[i],
            lapply(1:10, function(j) {
              f7ListItem(title = paste("Person", j),
                         media = tags$img(
                         src = paste0("https://cdn.framework7.io/placeholder/people-160x160-", j, ".jpg")
                         ),
                         # Random phone number as text
                         paste0("+42 6 ", sample(10000000:99999999, 1))
                         )
            })
          )
        })
      )
    )
  ),
  server = function(input, output) {
  }
)

By adding media to the f7ListItem(), you can display an image next to the list item, thereby making a pretty fancy contact list!


If desired, you can also use f7Icon():

library(shiny)
library(shinyMobile)

shinyApp(
  ui = f7Page(
    title = "My app",
    options = list(dark = FALSE, theme = "ios"),
    f7SingleLayout(
      navbar = f7Navbar(title = "f7List"),
      f7List(
        mode = "contacts",
        outline = TRUE,
        dividers = TRUE,
        strong = TRUE,
        lapply(4:6, function(i) {
          f7ListGroup(
            title = LETTERS[i],
            lapply(1:10, function(j) {
              f7ListItem(title = paste("Person", j),
                         media = f7Icon("person_fill"),
                         # Random phone number as text
                         paste0("+31 6 ", sample(10000000:99999999, 1))
                         )
            })
          )
        })
      )
    )
  ),
  server = function(input, output) {
  }
)

Media list

With mode set to "media", you can create a list with media objects, and you have the option to add a subtitle to the list items. Note that header and footer can’t be used in a media list.

library(shiny)
library(shinyMobile)

shinyApp(
  ui = f7Page(
    title = "My app",
    options = list(dark = FALSE, theme = "ios"),
    f7SingleLayout(
      navbar = f7Navbar(title = "f7List"),
      f7List(
        mode = "media",
        outline = TRUE,
        dividers = TRUE,
        strong = TRUE,
        lapply(1:10, function(i) {
          f7ListItem(
            title = paste("Title", i),
            subtitle = paste("Subtitle", i),
            media = tags$img(
              style = "border-radius: 8px;",
              src = paste0("https://cdn.framework7.io/placeholder/people-160x160-", i, ".jpg"),
              width = "70"
            ),
            right = paste("Right", i),
            paste("Some longer text about this particular item that has the magical number", i),
            href = "#"
          )
        })
      )
    )
  ),
  server = function(input, output) {
  }
)

The default media width is 50. If you want to override this, you can add width to the img tag.

Other Types of Lists

The list view can be used in other cases as well: