Boostrap 4 info box

A beautiful AdminLTE3 info box.

Usage

renderbs4InfoBox(expr, env = parent.frame(), quoted = FALSE)

bs4InfoBoxOutput(outputId, width = 4)

bs4InfoBox(
  title,
  value = NULL,
  subtitle = NULL,
  icon = shiny::icon("chart-bar"),
  color = NULL,
  width = 4,
  href = NULL,
  fill = FALSE,
  gradient = FALSE,
  elevation = NULL,
  iconElevation = NULL,
  tabName = NULL
)

infoBox(
  title,
  value = NULL,
  subtitle = NULL,
  icon = shiny::icon("chart-bar"),
  color = NULL,
  width = 4,
  href = NULL,
  fill = FALSE,
  gradient = FALSE,
  elevation = NULL,
  iconElevation = NULL,
  tabName = NULL
)

infoBoxOutput(outputId, width = 4)

renderInfoBox(expr, env = parent.frame(), quoted = FALSE)

Arguments

expr

An expression that returns a Shiny tag object, HTML(), or a list of such objects.

env

The parent environment for the reactive expression. By default, this is the calling environment, the same as when defining an ordinary non-reactive expression. If expr is a quosure and quoted is TRUE, then env is ignored.

quoted

If it is TRUE, then the quote()ed value of expr will be used when expr is evaluated. If expr is a quosure and you would like to use its expression as a value for expr, then you must set quoted to TRUE.

outputId

Output variable name.

width

The width of the box, using the Bootstrap grid system. This is used for row-based layouts. The overall width of a region is 12, so the default width of 4 occupies 1/3 of that width. For column-based layouts, use NULL for the width; the width is set by the column that contains the box.

title

Info box title.

value

The value to display in the box. Usually a number or short text.

subtitle

Any extra UI element.

icon

An icon tag, created by icon.

color

A color for the box. 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 .

href

An optional URL to link to.

fill

If FALSE (the default), use a white background for the content, and the color argument for the background of the icon. If TRUE, use the color argument for the background of the content; the icon will use the same color with a slightly darkened background.

gradient

Whether to use gradient style for background color. Default to FALSE.

elevation

Box elevation.

iconElevation

Icon elevation compared to the main content (relief). 3 by default.

tabName

Optional: infoBox behaves like menuItem and may be used to navigate between multiple tabItem.

See also

Other cards: bs4CardLayout(), bs4SocialCard(), bs4TabCard(), bs4UserCard(), descriptionBlock(), renderbs4ValueBox()

Author

David Granjon, dgranjon@ymail.com

Examples

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

  shinyApp(
    ui = dashboardPage(
      header = dashboardHeader(),
      sidebar = dashboardSidebar(
        sidebarMenu(
          menuItem(
            text = "Item 1",
            tabName = "tab1"
          ),
          menuItem(
            text = "Item 2",
            tabName = "tab2"
          )
        )
      ),
      controlbar = dashboardControlbar(),
      footer = dashboardFooter(),
      title = "test",
      body = dashboardBody(
        tabItems(
          tabItem(
            tabName = "tab1",
            fluidRow(
              infoBox(
                title = "Messages",
                value = 1410,
                icon = icon("envelope"),
                color = "orange",
                fill = TRUE,
              ),
              infoBox(
                title = "Bookmarks",
                color = "info",
                value = 240,
                icon = icon("bookmark"),
                tabName = "tab2"
              )
            )
          ),
          tabItem(
            tabName = "tab2",
            infoBox(
              title = "Comments",
              color = "indigo",
              gradient = TRUE,
              value = 41410,
              subtitle = "A subtitle",
              icon = icon("comments"),
              tabName = "tab1"
            )
          )
        )
      )
    ),
    server = function(input, output) {}
  )
}