Create a box.

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"
)
#> <div class="eleven wide column">
#>   <div class="ui segment raised blue">
#>     <div id="box_645358447164415312856458594103" class="ui accordion">
#>       <div id="title_645358447164415312856458594103" 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_645358447164415312856458594103').accordion({
#>   selector: { trigger: '#title_645358447164415312856458594103 > .label > .icon' },
#>   onOpening: function() { $('#title_645358447164415312856458594103 > .label > .icon').removeClass('plus').addClass('minus'); },
#>   onClosing: function() { $('#title_645358447164415312856458594103 > .label > .icon').removeClass('minus').addClass('plus'); }
#> }); })</script>
#> </div>