Framework7 timeline — f7Timeline • shinyMobile

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