1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
|
% Generated by roxygen2: do not edit by hand
% Please edit documentation in R/value-box.R
\name{value_box}
\alias{value_box}
\alias{showcase_left_center}
\alias{showcase_top_right}
\title{Value box}
\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{
\item{title, value}{a \code{\link[htmltools:builder]{htmltools::tag()}} child to display above \code{value}. If a
string a provided, it's automatically wrapped in a header tag.}
\item{...}{Unnamed arguments may be any \code{\link[htmltools:builder]{htmltools::tag()}} children to
display below \code{value}.. Named arguments become attributes on the containing
element.}
\item{showcase}{a \code{\link[htmltools:builder]{htmltools::tag()}} child to showcase (e.g., a
\code{\link[bsicons:bs_icon]{bsicons::bs_icon()}}, a \code{\link[plotly:plotlyOutput]{plotly::plotlyOutput()}}, etc).}
\item{showcase_layout}{either \code{showcase_left_center()} or
\code{showcase_top_right()}.}
\item{full_screen}{If \code{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 with \code{\link[=card_body_fill]{card_body_fill()}} to get output that responds to
changes in the size of the card.}
\item{theme_color}{a theme color to use for the background color. Should
match a name in the Bootstrap Sass variable \verb{$theme-colors} (e.g.,
\code{"secondary"}, \code{"success"}, \code{"danger"}, etc)}
\item{height}{Any valid \link[htmltools:validateCssUnit]{CSS unit} (e.g.,
\code{height="200px"}).}
\item{class}{utility classes for customizing the appearance of the summary
card. Use \verb{bg-*} and \verb{text-*} classes (e.g, \code{"bg-danger"} and
\code{"text-light"}) to customize the background/foreground colors.}
\item{width}{one of the following:
\itemize{
\item A proportion (i.e., a number between 0 and 1) of available width to
allocate to the showcase.
\item A vector of length 2 valid \link[htmltools:validateCssUnit]{CSS unit} defining
the width of each column (for \code{showcase_left_center()} the 1st unit defines
the showcase width and for \code{showcase_top_right} the 2nd unit defines the
showcase width). Note that any units supported by the CSS grid
\code{grid-template-columns} property may be used (e.g., \code{fr} units).
}}
\item{max_height, max_height_full_screen}{A proportion (i.e., a number between
0 and 1) or any valid \link[htmltools:validateCssUnit]{CSS unit} defining the
showcase max_height.}
}
\description{
An opinionated (\code{\link[=card]{card()}}-powered) box, designed for displaying a \code{value} and
\code{title}. Optionally, a \code{showcase} can provide for context for what the
\code{value} represents (for example, it could hold a \code{\link[bsicons:bs_icon]{bsicons::bs_icon()}}, or
even a \code{\link[shiny:plotOutput]{shiny::plotOutput()}}).
}
\examples{
library(htmltools)
if (interactive()) {
value_box(
"KPI Title",
h1(HTML("$1 <i>Billion</i> Dollars")),
span(
bsicons::bs_icon("arrow-up"),
" 30\% VS PREVIOUS 30 DAYS"
),
showcase = bsicons::bs_icon("piggy-bank"),
class = "bg-success"
)
}
}
\seealso{
\code{\link[=card]{card()}}
}
|
