bs4Dash (version 2.3.3)

renderbs4InfoBox: Boostrap 4 info box

Description

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: bs4Dash:::rd_color_tag("#007bff").

• secondary: bs4Dash:::rd_color_tag("#6c757d").

• info: bs4Dash:::rd_color_tag("#17a2b8").

• success: bs4Dash:::rd_color_tag("#28a745").

• warning: bs4Dash:::rd_color_tag("#ffc107").

• danger: bs4Dash:::rd_color_tag("#dc3545").

• gray-dark: bs4Dash:::rd_color_tag("#343a40").

• gray: bs4Dash:::rd_color_tag("#adb5bd").

• white: bs4Dash:::rd_color_tag("#fff").

• indigo: bs4Dash:::rd_color_tag("#6610f2").

• lightblue: bs4Dash:::rd_color_tag("#3c8dbc").

• navy: bs4Dash:::rd_color_tag("#001f3f").

• purple: bs4Dash:::rd_color_tag("#605ca8").

• fuchsia: bs4Dash:::rd_color_tag("#f012be").

• pink: bs4Dash:::rd_color_tag("#e83e8c").

• maroon: bs4Dash:::rd_color_tag("#d81b60").

• orange: bs4Dash:::rd_color_tag("#ff851b").

• lime: bs4Dash:::rd_color_tag("#01ff70").

• teal: bs4Dash:::rd_color_tag("#39cccc").

• olive: bs4Dash:::rd_color_tag("#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.

Author

David Granjon,

See Also

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

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