infoBox: Boostrap 4 info box

In bs4Dash: A 'Bootstrap 4' Version of 'shinydashboard'

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, [e-mail]

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 Sept. 11, 2024, 8:46 p.m.