AdminLTE3 timeline block

timelineBlock creates a timeline block that may be inserted in a box or outside.

timelineLabel creates a timeline label element to highlight an event.

timelineItem creates a timeline item that contains information for a given event like the title, description, date, ...

timelineItemMedia create a specific container for images.

timelineStart indicates a starting point.

timelineEnd indicates an end point.

bs4Timeline(..., reversed = TRUE, width = 6)

bs4TimelineLabel(..., color = NULL)

bs4TimelineItem(
  ...,
  icon = NULL,
  color = NULL,
  time = NULL,
  title = NULL,
  border = TRUE,
  footer = NULL,
  elevation = NULL
)

bs4TimelineItemMedia(image = NULL, height = NULL, width = NULL)

bs4TimelineStart(icon = shiny::icon("clock"), color = NULL)

bs4TimelineEnd(icon = shiny::icon("hourglass-end"), color = NULL)

timelineBlock(..., reversed = TRUE, width = 6)

timelineLabel(..., color = NULL)

timelineItem(
  ...,
  icon = NULL,
  color = NULL,
  time = NULL,
  title = NULL,
  border = TRUE,
  footer = NULL,
  elevation = NULL
)

timelineItemMedia(image = NULL, height = NULL, width = NULL)

timelineStart(icon = shiny::icon("clock"), color = NULL)

timelineEnd(icon = shiny::icon("hourglass-end"), color = NULL)

Arguments

...

Any element such as timelineItemMedia ...

reversed

Whether the timeline is reversed or not.

width

Media width in pixels.

color

Item color. Valid colors are defined as follows:

• primary: #007bff .

• secondary: #6c757d .

• info: #17a2b8 .

• success: #28a745 .

• warning: #ffc107 .

• danger: #dc3545 .

• gray-dark: #343a40 .

• gray: #adb5bd .

• white: #fff .

• indigo: #6610f2 .

• lightblue: #3c8dbc .

• navy: #001f3f .

• purple: #605ca8 .

• fuchsia: #f012be .

• pink: #e83e8c .

• maroon: #d81b60 .

• orange: #ff851b .

• lime: #01ff70 .

• teal: #39cccc .

• olive: #3d9970 .

icon

Item icon such as "clock", "times", ...

time

Item date or time.

title

Item title.

border

Whether to display a border between the header and the body. TRUE by default.

footer

Item footer if any.

elevation

Timeline elevation (numeric). NULL by default.

image

Media url or path.

height

Media height in pixels.

Note

reversed is useful when the user wants to use the timeline inside a box.

See also

Other boxWidgets: attachmentBlock(), bs4CardLabel(), bs4CardSidebar(), bs4Carousel(), bs4SocialCard(), cardDropdown(), cardProfile(), descriptionBlock(), userPost()

Author

David Granjon, dgranjon@ymail.com

Examples

if(interactive()){
 library(shiny)
 library(bs4Dash)

 shinyApp(
   ui = bs4DashPage(
    header = dashboardHeader(),
    sidebar = dashboardSidebar(),
    controlbar = dashboardControlbar(),
    footer = dashboardFooter(),
    title = "test",
    body = dashboardBody(
     box(
      title = "Timeline",
      timelineBlock(
       width = 12,
       reversed = TRUE,
       timelineEnd(color = "danger"),
       timelineLabel("10 Feb. 2014", color = "pink"),
       timelineItem(
        elevation = 4, 
        title = "Item 1",
        icon = icon("gears"),
        color = "olive",
        time = "now",
        footer = "Here is the footer",
        "This is the body"
       ),
       timelineItem(
        title = "Item 2",
        border = FALSE
       ),
       timelineLabel("3 Jan. 2014", color = "lightblue"),
       timelineItem(
        elevation = 2,
        title = "Item 3",
        icon = icon("paint-brush"),
        status = "orange",
        timelineItemMedia(image = "https://via.placeholder.com/150x100"),
        timelineItemMedia(image = "https://via.placeholder.com/150x100")
       ),
       timelineStart(color = "secondary")
      )
     )
    )
   ),
   server = function(input, output) {}
 )
}