timeline: AdminLTE3 timeline block

In bs4Dash: A 'Bootstrap 4' Version of 'shinydashboard'

AdminLTE3 timeline block

Description

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.

Usage

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: \Sexpr[results=rd, stage=render]{bs4Dash:::rd_color_tag("#007bff")}. secondary: \Sexpr[results=rd, stage=render]{bs4Dash:::rd_color_tag("#6c757d")}. info: \Sexpr[results=rd, stage=render]{bs4Dash:::rd_color_tag("#17a2b8")}. success: \Sexpr[results=rd, stage=render]{bs4Dash:::rd_color_tag("#28a745")}. warning: \Sexpr[results=rd, stage=render]{bs4Dash:::rd_color_tag("#ffc107")}. danger: \Sexpr[results=rd, stage=render]{bs4Dash:::rd_color_tag("#dc3545")}. gray-dark: \Sexpr[results=rd, stage=render]{bs4Dash:::rd_color_tag("#343a40")}. gray: \Sexpr[results=rd, stage=render]{bs4Dash:::rd_color_tag("#adb5bd")}. white: \Sexpr[results=rd, stage=render]{bs4Dash:::rd_color_tag("#fff")}. indigo: \Sexpr[results=rd, stage=render]{bs4Dash:::rd_color_tag("#6610f2")}. lightblue: \Sexpr[results=rd, stage=render]{bs4Dash:::rd_color_tag("#3c8dbc")}. navy: \Sexpr[results=rd, stage=render]{bs4Dash:::rd_color_tag("#001f3f")}. purple: \Sexpr[results=rd, stage=render]{bs4Dash:::rd_color_tag("#605ca8")}. fuchsia: \Sexpr[results=rd, stage=render]{bs4Dash:::rd_color_tag("#f012be")}. pink: \Sexpr[results=rd, stage=render]{bs4Dash:::rd_color_tag("#e83e8c")}. maroon: \Sexpr[results=rd, stage=render]{bs4Dash:::rd_color_tag("#d81b60")}. orange: \Sexpr[results=rd, stage=render]{bs4Dash:::rd_color_tag("#ff851b")}. lime: \Sexpr[results=rd, stage=render]{bs4Dash:::rd_color_tag("#01ff70")}. teal: \Sexpr[results=rd, stage=render]{bs4Dash:::rd_color_tag("#39cccc")}. olive: \Sexpr[results=rd, stage=render]{bs4Dash:::rd_color_tag("#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.

Author(s)

David Granjon, [e-mail]

See Also

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

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

bs4Dash documentation built on Sept. 11, 2024, 8:46 p.m.