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
: #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.
Item footer if any.
- elevation
Timeline elevation (numeric). NULL by default.
- image
Media url or path.
- height
Media height in pixels.
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) {}
)
}