Learn R Programming

shinyMobile (version 0.7.0)

f7Timeline: Create a Framework7 timeline

Description

Build a Framework7 timeline

Usage

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

Arguments

...

Slot for f7TimelineItem.

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.

Examples

Run this code
# NOT RUN {
if(interactive()){
 library(shiny)
 library(shinyMobile)

 items <- tagList(
   f7TimelineItem(
     "Another text",
     date = "01 Dec",
     card = FALSE,
     time = "12:30",
     title = "Title",
     subtitle = "Subtitle",
     side = "left"
   ),
   f7TimelineItem(
     "Another text",
     date = "02 Dec",
     card = TRUE,
     time = "13:00",
     title = "Title",
     subtitle = "Subtitle"
   ),
   f7TimelineItem(
     "Another text",
     date = "03 Dec",
     card = FALSE,
     time = "14:45",
     title = "Title",
     subtitle = "Subtitle"
   )
 )

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

# }

Run the code above in your browser using DataLab