An opinionated (card()
-powered) box, designed for displaying a value
and
title
. Optionally, a showcase
can provide for context for what the
value
represents (for example, it could hold a bsicons::bs_icon()
, or
even a shiny::plotOutput()
).
Usage
value_box(
title,
value,
...,
showcase = NULL,
showcase_layout = showcase_left_center(),
full_screen = FALSE,
theme_color = "primary",
height = NULL,
class = NULL
)
showcase_left_center(
width = 0.3,
max_height = "100px",
max_height_full_screen = 0.67
)
showcase_top_right(
width = 0.3,
max_height = "75px",
max_height_full_screen = 0.67
)
Arguments
- title, value
a
htmltools::tag()
child to display abovevalue
. If a string a provided, it's automatically wrapped in a header tag.- ...
Unnamed arguments may be any
htmltools::tag()
children to display belowvalue
.. Named arguments become attributes on the containing element.- showcase
a
htmltools::tag()
child to showcase (e.g., absicons::bs_icon()
, aplotly::plotlyOutput()
, etc).- showcase_layout
either
showcase_left_center()
orshowcase_top_right()
.- full_screen
If
TRUE
, an icon will appear when hovering over the card body. Clicking the icon expands the card to fit viewport size. Consider pairing this feature withcard_body_fill()
to get output that responds to changes in the size of the card.- theme_color
a theme color to use for the background color. Should match a name in the Bootstrap Sass variable
$theme-colors
(e.g.,"secondary"
,"success"
,"danger"
, etc)- height
Any valid CSS unit (e.g.,
height="200px"
).- class
utility classes for customizing the appearance of the summary card. Use
bg-*
andtext-*
classes (e.g,"bg-danger"
and"text-light"
) to customize the background/foreground colors.- width
one of the following:
A proportion (i.e., a number between 0 and 1) of available width to allocate to the showcase.
A vector of length 2 valid CSS unit defining the width of each column (for
showcase_left_center()
the 1st unit defines the showcase width and forshowcase_top_right
the 2nd unit defines the showcase width). Note that any units supported by the CSS gridgrid-template-columns
property may be used (e.g.,fr
units).
- max_height, max_height_full_screen
A proportion (i.e., a number between 0 and 1) or any valid CSS unit defining the showcase max_height.