Date: 2024-10-04

# 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:

- inset: to make list block inset, which will make the list block appear indented. If used in combination with strong, it will also have rounded corners.
- outline: to add outline (borders) around the list block
- dividers: to add dividers (borders) between list items
- strong: to add extra highlighting to list block

### Available mode options

There are 4 different modes available for lists:

- simple: to create a simple list
- links: to create a list with links
- media: to create a list with media elements
- contacts: to create a grouped list

## 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:

Code

    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:

Code

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

### Simple link list

When setting `mode` to `"links"`, the list items will be displayed as links:

Code

    library(shiny)
    library(shinyMobile)

    shinyApp(
      ui = f7Page(
        title = "My app",
        options = list(dark = FALSE, theme = "ios"),
        f7SingleLayout(
          navbar = f7Navbar(title = "f7List"),
          f7List(
            mode = "links",
            outline = TRUE,
            dividers = TRUE,
            strong = TRUE,
            lapply(1:5, function(j) {
              tags$li(
                f7Link(label = paste("Item", j), href = "https://www.google.com")
              )
            })
          )
        )
      ),
      server = function(input, output) {
      }
    )

In the example above, we’re using `f7Link()` to create the links. This will automatically make sure that the links are opened in a new tab.

### Link list with header and footer

To add some complexity to the link list, we can add a header and footer. In this case, we will use `f7ListItem()` to create the list items. It is important to set `mode` to `NULL` in `f7List()`:

Code

    library(shiny)
    library(shinyMobile)

    shinyApp(
      ui = f7Page(
        title = "My app",
        options = list(dark = FALSE, theme = "ios"),
        f7SingleLayout(
          navbar = f7Navbar(title = "f7List"),
          f7List(
            mode = NULL,
            outline = TRUE,
            dividers = TRUE,
            strong = TRUE,
            lapply(1:5, function(j) {
              f7ListItem(
                title = paste("Item", j),
                header = paste("Header", j),
                footer = paste("Footer", j),
                href = "https://www.google.com"
              )
            })
          )
        )
      ),
      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()`:

Code

    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()`:

Code

    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.

Code

    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:

- To create a virtual list with `f7VirtualList()` for displaying a list with a large number of items.
- To create an inputs layout, where inputs can be nicely grouped and styled together inside an `f7List()`. You can read more about this in the Inputs Layout vignette.
- Swipeout is an extension of the list view that allows you to swipe over list elements to reveal a hidden menu with available actions. You can use `f7Swipeout()` and `f7SwipeOutItem()` for this.