Skip to contents

f7Timeline is a static timeline container.

f7TimelineItem goes inside f7Timeline.

Usage

f7Timeline(
  ...,
  sides = FALSE,
  horizontal = FALSE,
  calendar = FALSE,
  year = NULL,
  month = NULL
)

f7TimelineItem(
  ...,
  date = NULL,
  card = FALSE,
  time = NULL,
  title = NULL,
  subtitle = NULL,
  side = NULL
)

Arguments

...

Item content, text for instance.

sides

Enable side-by-side timeline mode.

horizontal

Whether to use the horizontal layout. Not compatible with sides.

calendar

Special type of horizontal layout with current year and month.

year

Current year, only if calendar is TRUE.

month

Current month, only if calendar is TRUE.

date

Timeline item date. Required.

card

Whether to wrap the content in a card. FALSE by default.

time

Timeline item time. Optional.

title

Timeline item title. Optional.

subtitle

Timeline item subtitle. Optional.

side

Force element to required side: "right" or "left". Only if sides os TRUE in f7Timeline

Author

David Granjon dgranjon@ymail.com

Examples

library(shiny)
library(shinyMobile)

items <- tagList(
  lapply(1:5,
         function(i) {
           f7TimelineItem(
             paste0("Another text ", i),
             date = paste0(i, " Dec"),
             card = i %% 2 == 0,
             time = paste0(10 + i, ":30"),
             title = paste0("Title", i),
             subtitle = paste0("Subtitle", i),
             side = ifelse(i %% 2 == 0, "left", "right")
           )
         }
  )
)

app <- shinyApp(
  ui = f7Page(
    title = "Timelines",
    f7SingleLayout(
      navbar = f7Navbar(title = "Timelines"),
      f7BlockTitle(title = "Horizontal timeline", size = "large") %>%
        f7Align(side = "center"),
      f7Timeline(
        sides = FALSE,
        horizontal = TRUE,
        items
      ),
      f7BlockTitle(title = "Vertical side by side timeline", size = "large") %>%
        f7Align(side = "center"),
      f7Timeline(
        sides = TRUE,
        items
      ),
      f7BlockTitle(title = "Vertical timeline", size = "large") %>%
        f7Align(side = "center"),
      f7Timeline(items),
      f7BlockTitle(title = "Calendar timeline", size = "large") %>%
        f7Align(side = "center"),
      f7Timeline(items, calendar = TRUE, year = "2019", month = "December")
    )
  ),
  server = function(input, output) {}
)

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