box: Create a box.

In semantic.dashboard: Dashboard with Fomantic UI Support for Shiny

Description

Create a box with additional UI elements.

Usage

box(
  ...,
  title = NULL,
  color = "",
  ribbon = TRUE,
  title_side = "top right",
  collapsible = TRUE,
  width = 8,
  id = NULL,
  collapse_icon = "minus",
  expand_icon = "plus"
)

Arguments

...	UI elements to include within the box.
title	Label of the box.
color	Color of the box. One of c("", "red", "orange", "yellow", "olive", "green", "teal", "blue", "violet", "purple", "pink", "brown", "grey", "black")
ribbon	Should label be presented as ribbon.
title_side	Side of a label. One of c("top", "bottom", "top left", "top right", "bottom left", "bottom right") if ribbon = FALSE, or one of c("top left", "top right") if ribbon = TRUE
collapsible	Should minimize button be added to label.
width	Width of the box.
id	ID of the box.
collapse_icon	Icon class to be used for collapsing (when collapsible = TRUE).
expand_icon	Icon class to be used for expanding (when collapsible = TRUE).

Value

A box that can be passed to dashboardBody

Examples

box(title = "Sample box", color = "blue", width = 11,
    "This is a box content"
)

Example output

Attaching package: ‘semantic.dashboard’

The following object is masked from ‘package:graphics’:

    box

<div class="eleven wide column">
  <div class="ui segment raised blue">
    <div id="box_085289473087098947043618984223" class="ui accordion">
      <div class="title" style="cursor: auto">
        <div class="ui top right ribbon label blue">
          <i class="minus icon" style="cursor: pointer;"></i>
          Sample box
        </div>
      </div>
      <div class="content active">
        <div>This is a box content</div>
      </div>
    </div>
  </div>
  <script>$(document).ready(function() { $('#box_085289473087098947043618984223').accordion({
  selector: { trigger: '.title .icon' },
  onOpening: function() { $('#box_085289473087098947043618984223').find('.label .icon').removeClass('plus').addClass('minus'); },
  onClosing: function() { $('#box_085289473087098947043618984223').find('.label .icon').removeClass('minus').addClass('plus'); }
}); })</script>
</div>

semantic.dashboard documentation built on Nov. 10, 2021, 1:06 a.m.