infoBox: Boostrap 4 info box

renderbs4InfoBoxR Documentation

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: \Sexpr[results=rd, stage=render]{bs4Dash:::rd_color_tag("#007bff")}.

  • secondary: \Sexpr[results=rd, stage=render]{bs4Dash:::rd_color_tag("#6c757d")}.

  • info: \Sexpr[results=rd, stage=render]{bs4Dash:::rd_color_tag("#17a2b8")}.

  • success: \Sexpr[results=rd, stage=render]{bs4Dash:::rd_color_tag("#28a745")}.

  • warning: \Sexpr[results=rd, stage=render]{bs4Dash:::rd_color_tag("#ffc107")}.

  • danger: \Sexpr[results=rd, stage=render]{bs4Dash:::rd_color_tag("#dc3545")}.

  • gray-dark: \Sexpr[results=rd, stage=render]{bs4Dash:::rd_color_tag("#343a40")}.

  • gray: \Sexpr[results=rd, stage=render]{bs4Dash:::rd_color_tag("#adb5bd")}.

  • white: \Sexpr[results=rd, stage=render]{bs4Dash:::rd_color_tag("#fff")}.

  • indigo: \Sexpr[results=rd, stage=render]{bs4Dash:::rd_color_tag("#6610f2")}.

  • lightblue: \Sexpr[results=rd, stage=render]{bs4Dash:::rd_color_tag("#3c8dbc")}.

  • navy: \Sexpr[results=rd, stage=render]{bs4Dash:::rd_color_tag("#001f3f")}.

  • purple: \Sexpr[results=rd, stage=render]{bs4Dash:::rd_color_tag("#605ca8")}.

  • fuchsia: \Sexpr[results=rd, stage=render]{bs4Dash:::rd_color_tag("#f012be")}.

  • pink: \Sexpr[results=rd, stage=render]{bs4Dash:::rd_color_tag("#e83e8c")}.

  • maroon: \Sexpr[results=rd, stage=render]{bs4Dash:::rd_color_tag("#d81b60")}.

  • orange: \Sexpr[results=rd, stage=render]{bs4Dash:::rd_color_tag("#ff851b")}.

  • lime: \Sexpr[results=rd, stage=render]{bs4Dash:::rd_color_tag("#01ff70")}.

  • teal: \Sexpr[results=rd, stage=render]{bs4Dash:::rd_color_tag("#39cccc")}.

  • olive: \Sexpr[results=rd, stage=render]{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(s)

David Granjon, dgranjon@ymail.com

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

bs4Dash documentation built on July 9, 2023, 7:49 p.m.