---
title: "List View"
date: "`r Sys.Date()`"
output: rmarkdown::html_vignette
vignette: >
%\VignetteIndexEntry{List View}
%\VignetteEngine{knitr::rmarkdown}
%\VignetteEncoding{UTF-8}
---
```{r setup, echo=FALSE, message=FALSE}
library(bslib)
```
## 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:
```{r eval = FALSE}
f7List(
mode = "simple",
lapply(1:5, function(j) {
tags$li(
paste("Item", j)
)
})
)
```
<br>
Using the second method, the code would look like:
```{r eval = FALSE}
f7List(
mode = "simple",
lapply(1:5, function(j) {
f7ListItem(
title = paste("Item", j)
)
})
)
```
<br>
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:
```{r, eval=TRUE, echo=FALSE}
card(
shinyMobile:::create_app_link(
"NobwRAdghgtgpmAXGKAHVA6ASmANGAYwHsIAXOMpMAdzgCMAnRRAVwhiLdIAoAdMAPQsAzgwEAbAJZ0BWCdIZQGATwHCAFpIjKAskTqTxcfgEpeEWo2ZbhpKOPF8IAAmf8NW3fsPG851wxwqETCzgC8zgR8YOqkpKjCiAICDFrkDABmUARwGADmkqTqLHQYkkQpaXCZ2XAAtNRQwjB1BIoQAqbmZhDmUoxKytwe2j39iirDmtp6BkY95iPKAILoTq4skuHOGQDsAApQeXDrrs6khUbb-DrKzmio-Lj+Z0SoFyShEVK23AAmSgA1tsAGLLAAyAGUAKK4c7qODwa5gcrCUzPFxnPaQrR5IzgqDKTg8F5nZzQABudCU2z2ADkoFSlNwLqQrhF+HtwZJbOjSVjdtzfvyyRw-nBkcJJDBUEYniKzuIHuIhgBGRAAVjhGTYBA+EG4ACsTM4QAqyVyeaQAJLkGCnMmO86XCURVBNcjRW2Ip7OY3ms49J2uAC+Qcd4dc4ZMGNcwmqFOqtN1+u4WlQLFIcOJGdIJrNmJD3TAIYAukA", # nolint
"app",
header = FALSE
),
full_screen = TRUE,
style = "width: 393px; margin: 0 auto; float: none;"
)
```
<div class="text-center mt-4">
<a class="btn btn-primary" data-bs-toggle="collapse" href="#simpleList" role="button" aria-expanded="false" aria-controls="singleLayout">
Code
</a>
</div>
<div class="collapse" id="simpleList">
```{r, eval=FALSE}
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) {
}
)
```
</div>
<br>
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"`.
<br>
Using the styling options, you can already drastically change the appearance of the list:
```{r, eval=TRUE, echo=FALSE}
card(
shinyMobile:::create_app_link(
"NobwRAdghgtgpmAXGKAHVA6ASmANGAYwHsIAXOMpMAdzgCMAnRRAVwhiLdIAoAdMAPQsAzgwEAbAJZ0BWCdIZQGATwHCAFpIjKAskTqTxcfgEpeEWo2ZbhpKOPF8IAAmf8NW3fsPG851wxwqETCzgC8zgR8YOqkpKjCiAICDFrkDABmUARwGADmkqTqLHQYkkQpaXCZ2XAAtNRQwjB1BIoQAqbmZhDmUoxKytwe2j39iirDmtp6BkY95iPKAILoTq4skuHOGQDsAApQeXDrrs6khUbb-DrKzmio-Lj+Z0SoFyShEVK23AAmSgA1tsAGLLAAyAGUAKK4c7qODwa5gcrCUzPFxnPaQrR5IzgqDKTg8F5nZzQABudCU2z2ADkoFSlNwLqQrhF+HtwZJbOjSVjdtzfvyyRw-nBkcJJDBUEYniLXiw2VoJREACpYACqsIVrj+kgpknFDC+zg12oxZLJtgYJDy23NOsxVuc4ge4iGAEZEABWOEZNgED4QbgAKxMzhAuoFQtIAElyDBTi6yaz2c5UE1yNEE4ins5w9HXD0U84AL4lq2V4svEyW5zCaoU6q0wPB7haVBKuHErukCNRzFl7pgMsAXSAA", # nolint
"app",
header = FALSE
),
full_screen = TRUE,
style = "width: 393px; margin: 0 auto; float: none;"
)
```
<div class="text-center mt-4">
<a class="btn btn-primary" data-bs-toggle="collapse" href="#simpleListStyling" role="button" aria-expanded="false" aria-controls="singleLayout">
Code
</a>
</div>
<div class="collapse" id="simpleListStyling">
```{r, eval=FALSE}
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) {
}
)
```
</div>
### Simple link list
When setting `mode` to `"links"`, the list items will be displayed as links:
```{r, eval=TRUE, echo=FALSE}
card(
shinyMobile:::create_app_link(
"NobwRAdghgtgpmAXGKAHVA6ASmANGAYwHsIAXOMpMAdzgCMAnRRAVwhiLdIAoAdMAPQsAzgwEAbAJZ0BWCdIZQGATwHCAFpIjKAskTqTxcfgEpeEWo2ZbhpKOPF8IAAmf8NW3fsPG851wxwqETCzgC8zgR8YOqkpKjCiAICDFrkDABmUARwGADmkqTqLHQYkkQpaXCZ2XAAtNRQwjB1BIoQAqbmZhDmUoxKytwe2j39iirDmtp6BkY95iPKAILoTq4skuHOGQDsAApQeXDrrs6khUbb-DrKzmio-Lj+Z0SoFyShEVK23AAmSgA1tsAGLLAAyAGUAKK4c7qODwa5gcrCUzPFxnPaQrR5IzgqDKTg8F5nZzQABudCU2z2ADkoFSlNwLqQrhF+HtwZJbOjSVjdtzfvyyRw-nBkVIIIC0X5MWTXMSpRKIgAVLAAVVhIrOf0kFMk4oYX2c6q1GIVZ1sDBIeW2Zu18oV4ge4iGAEZEABWOEZNgED4QbgAKxMzhAOrJdjywgAJFJTpayVytIDuC66HBxNtUE1yNEAJLkGBPZyhuHqQIZZGxeKJZLURv5IhEPG5YglsA9JNnbtJgC+fbJQ+cfZMFucwmqFOqtP9ge4WlQLFIcOJy9IYYjmP73TA-YAukA", # nolint
"app",
header = FALSE
),
full_screen = TRUE,
style = "width: 393px; margin: 0 auto; float: none;"
)
```
<div class="text-center mt-4">
<a class="btn btn-primary" data-bs-toggle="collapse" href="#simpleLinkList" role="button" aria-expanded="false" aria-controls="singleLayout">
Code
</a>
</div>
<div class="collapse" id="simpleLinkList">
```{r, eval=FALSE}
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) {
}
)
```
</div>
<br>
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()`:
```{r, eval=TRUE, echo=FALSE}
card(
shinyMobile:::create_app_link(
"NobwRAdghgtgpmAXGKAHVA6ASmANGAYwHsIAXOMpMAdzgCMAnRRAVwhiLdIAoAdMAPQsAzgwEAbAJZ0BWCdIZQGATwHCAFpIjKAskTqTxcfgEpeEWo2ZbhpKOPF8IAAmf8NW3fsPG851wxwqETCzgC8zgR8YOqkpKjCiAICDFrkDABmUARwGADmkqTqLHQYkkQpaXCZ2XAAtNRQwjB1BIoQAqbmZhDmUoxKytwe2j39iirDmtp6BkY95iPKAILoTq4skuHOGQDsAApQeXDrrs6khUbb-DrKzmio-Lj+Z0SoFyShEVK23AAmSgA1tsAGLLAAyAGUAKK4c7qODwa5gcrCUzPFxnPaQrR5IzgqDKTg8F5nZzQABudCU2z2ADkoFSlNwLqQrhF+HtwZJbOjSVjdtzfvyyRw-nBtnSAKrg8EYslk4lSCASiIAFSwUthIrOf0kFMk4oYX2cGq18oVrlsDBIeW2Zu1mMt4ge4iGAEZEABWOEZNgED4QbgAKxMzhAOrJXJ5pAAkuQYKdLWTWeznKgmuRovHEU9nKGLcmzgioEbthnbCd+AAJOCl6p5guRhUZIhEdLlzNVsAgtvpRsmQtF5zqQIZZGxeKJZLUWf5Nt43LEGD8ZuuHpFgC+G4VO-XL0HL2E1Qp1Vp-sD3C0qBYpDhxJvpDDEcxm+6YE3AF0gA", # nolint
"app",
header = FALSE
),
full_screen = TRUE,
style = "width: 393px; margin: 0 auto; float: none;"
)
```
<div class="text-center mt-4">
<a class="btn btn-primary" data-bs-toggle="collapse" href="#linkedListHF" role="button" aria-expanded="false" aria-controls="singleLayout">
Code
</a>
</div>
<div class="collapse" id="linkedListHF">
```{r, eval=FALSE}
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) {
}
)
```
</div>
### Grouped list
A grouped list can be generated by using `f7ListGroup()`. The `mode` argument should be set to `"contacts"` in `f7List()`:
```{r, eval=TRUE, echo=FALSE}
card(
shinyMobile:::create_app_link(
"NobwRAdghgtgpmAXGKAHVA6ASmANGAYwHsIAXOMpMAdzgCMAnRRAVwhiLdIAoAdMAPQsAzgwEAbAJZ0BWCdIZQGATwHCAFpIjKAskTqTxcfgEpeEWo2ZbhpKOPF8IAAmf8NW3fsPG851wxwqETCzgC8zgR8YOqkpKjCiAICDFrkDABmUARwGADmkqTqLHQYkkQpaXCZ2XAAtNRQwjB1BIoQAqbmZhDmUoxKytwe2j39iirDmtp6BkY95iPKAILoTq4skuHOGQDsAApQeXDrrs6khUbb-DrKzmio-Lj+Z0SoFyShEVK23AAmSgA1tsAGLLAAyAGUAKK4c7qODwa5gcrCUzPFxnPaQrR5IzgqDKTg8F5nZzQABudCU2z2ADkoFSlNwLqQrhF+HtwZJbOjSVjdtzfvyyRw-nBkcQyNlSGi-Jiya5iVIIBKIgAVLAAVVhIrOf0kFMk4oYX2cmp1GMVZ1sDBIeW2Ft1CsV4ge4iGABZEAA2OEZNgED4QbiSEzOEB6slcnmkADidpYqFO1rJrPZznB0PV6uhWEhwEkAF0ramyW70B7uABGRDVgAM-sDwe4ACtw5GXWXXDHbABJcgwFmXNXOVBNcjRfbVYQkJ7Odul7vL0VwA1QbZ2PLCAAkkhgeRTK5XogI23Htjg9eisXiiWSBD+EAwGUU8GoRAYgN2ZQqqDdOTqEQ4gmgIqBwG8Rh1NWPr1gAHjB9Z1POrZwvwGCtqgeRdF2x5liYS54d2ADEzhYFAEB-EQMBjkBqrkiwMB0NU9yhOQcGkFGRFkhe5DXvwADUnoAEzOD6bh4M4wiwP+JwNvWCmKYgACcqlqapcLViYPTccuOkrgAvvp+FcUZerGc4+kES8wjVBSLERAGEBBuUIZaKgLCkHCxIeaQHYvAZ3RgAZRZAA", # nolint
"app",
header = FALSE
),
full_screen = TRUE,
style = "width: 393px; margin: 0 auto; float: none;"
)
```
<div class="text-center mt-4">
<a class="btn btn-primary" data-bs-toggle="collapse" href="#groupedList" role="button" aria-expanded="false" aria-controls="singleLayout">
Code
</a>
</div>
<div class="collapse" id="groupedList">
```{r, eval=FALSE}
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) {
}
)
```
</div>
By adding `media` to the `f7ListItem()`, you can display an image next to the list item, thereby making a pretty fancy contact list!
<br>
If desired, you can also use `f7Icon()`:
```{r, eval=TRUE, echo=FALSE}
card(
shinyMobile:::create_app_link(
"NobwRAdghgtgpmAXGKAHVA6ASmANGAYwHsIAXOMpMAdzgCMAnRRAVwhiLdIAoAdMAPQsAzgwEAbAJZ0BWCdIZQGATwHCAFpIjKAskTqTxcfgEpeEWo2ZbhpKOPF8IAAmf8NW3fsPG851wxwqETCzgC8zgR8YOqkpKjCiAICDFrkDABmUARwGADmkqTqLHQYkkQpaXCZ2XAAtNRQwjB1BIoQAqbmZhDmUoxKytwe2j39iirDmtp6BkY95iPKAILoTq4skuHOGQDsAApQeXDrrs6khUbb-DrKzmio-Lj+Z0SoFyShEVK23AAmSgA1tsAGLLAAyAGUAKK4c7qODwa5gcrCUzPFxnPaQrR5IzgqDKTg8F5nZzQABudCU2z2ADkoFSlNwLqQrhF+HtwZJbOjSVjdtzfvyyRw-nBkcQyNlSGi-Jiya5iVIIBKIgAVLAAVVhIrOf0kFMk4oYX2cmp1GMVZ1sDBIeW2Ft1CsV4ge4iGABZEAA2OEZNgED4QbiSEzOEB6slcnmkADidpYqFO1rJrPZznB0PV6uhWEhwEkAF0ramyW70B7uABGRDVgAM-sDwe4ACtw5GXWXXDHbABJcgwFmXNXOVBNcjRfbVYQkJ7Odul7vL0VwA1QWm7PtS6KoGckAD6GUM4j5XZX3YAxM4sFAIH8iDAx+oSBKICwYHRqvdQuQAB6kFGF7WuOthwPW0QANQAMzVs4PpuHgzjCLAqBGDW9aYVh9aIAAnPhBH4XC1YmD0wEXmRK4AL6UWWtGKjRer0ZRJilsI1QUt+EQBhAQblCGWioCwpBwsSQmkB2LxUd0YBUUWQA", # nolint
"app",
header = FALSE
),
full_screen = TRUE,
style = "width: 393px; margin: 0 auto; float: none;"
)
```
<div class="text-center mt-4">
<a class="btn btn-primary" data-bs-toggle="collapse" href="#groupedListIcon" role="button" aria-expanded="false" aria-controls="singleLayout">
Code
</a>
</div>
<div class="collapse" id="groupedListIcon">
```{r, eval=FALSE}
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) {
}
)
```
</div>
### 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.
```{r, eval=TRUE, echo=FALSE}
card(
shinyMobile:::create_app_link(
"NobwRAdghgtgpmAXGKAHVA6ASmANGAYwHsIAXOMpMAdzgCMAnRRAVwhiLdIAoAdMAPQsAzgwEAbAJZ0BWCdIZQGATwHCAFpIjKAskTqTxcfgEpeEWo2ZbhpKOPF8IAAmf8NW3fsPG851wxwqETCzgC8zgR8YOqkpKjCiAICDFrkDABmUARwGADmkqTqLHQYkkQpaXCZ2XAAtNRQwjB1BIoQAqbmZhDmUoxKytwe2j39iirDmtp6BkY95iPKAILoTq4skuHOGQDsAApQeXDrrs6khUbb-DrKzmio-Lj+Z0SoFyShEVK23AAmSgA1tsAGLLAAyAGUAKK4c7qODwa5gcrCUzPFxnPaQrR5IzgqDKTg8F5nZzQABudCU2z2ADkoFSlNwLqQrhF+HtwZJbOjSVjdtzfvyyRw-nBkfA-pIoE8Ra8WGytBKIgAVLAAVVh8tc0opknFDC+znVWoxZLJtgYJDy21N2sxFuc4ge4iGAEZEO6AAxwjJsAgfCDcSQmZwgHUCoWkACS5BgpydZNZ7OcqCa5GiqsuvjhofNSctJRTKrTGZO-EhxZzT2c+cjorg0qg2zseWEABJJDA8onC2dbMpU-w6EQGIa6oppSJEM4AByoAAeAG45Y7+65RARtunbHBvdFYvFEskCH8IBgMop4NQx4DdmUKqgXTl1ERxIaBKg4G8jHV3QAbN6i6Ad6dS1pIcL8BgABWqB5Hy64btQBpFMiuzevwDZnCYBYbqkeSxDu5bRFgkiEaQEG4dhri7pmlZEEi4g2tU5xwIupD3KOirwjyZYMBcBAsC6DB1vG8JQJx6hNPCEowEckgEPY5IsDAdDVFReH9uogQZMiADEWFIRaPSFgAvqZJn8pZ1GYsI1QUqxET+hAgblMGWioIqcLEl5pBhhGmJmd0YBmQAukAA", # nolint
"app",
header = FALSE
),
full_screen = TRUE,
style = "width: 393px; margin: 0 auto; float: none;"
)
```
<div class="text-center mt-4">
<a class="btn btn-primary" data-bs-toggle="collapse" href="#mediaList" role="button" aria-expanded="false" aria-controls="singleLayout">
Code
</a>
</div>
<div class="collapse" id="mediaList">
```{r, eval=FALSE}
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) {
}
)
```
</div>
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](inputs-layout.html) 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.