Skip to contents

Create a tab box.

Source: R/tab_box.R
tab_box.Rd

Create a tab box with additional UI elements.

Usage

tab_box(
  tabs,
  title = NULL,
  color = "",
  ribbon = TRUE,
  title_side = "top right",
  collapsible = TRUE,
  width = 8,
  id = NULL,
  ...
)

tabBox(
  tabs,
  title = NULL,
  color = "",
  ribbon = TRUE,
  title_side = "top right",
  collapsible = TRUE,
  width = 8,
  id = NULL,
  ...
)

Arguments

tabs

Tabs 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.

...

other elements of the box.

Value

A box that can be passed to dashboardBody

Functions

  • tabBox(): Create a tab box (alias for tab_box for compatibility with shinydashboard)

Examples

tabBox(title = "Sample tab box", color = "blue", width = 5,
       tabs = list(
         list(menu = "First Tab", content = "This is first tab"),
         list(menu = "Second Tab", content = "This is second tab")
       ))
#> <div class="five wide column">
#>   <div class="ui segment raised blue">
#>     <div id="box_750512081470292169253906552817" class="ui accordion">
#>       <div id="title_750512081470292169253906552817" class="title" style="cursor: auto">
#>         <div class="ui top right ribbon label blue">
#>           <i class="minus icon" style="cursor: pointer;"></i>
#>           Sample tab box
#>         </div>
#>       </div>
#>       <div class="content active">
#>         <div>
#>           <div id="menu-fmmyucmrwtkdbirslsqj" class="ui menu sem top attached tabular">
#>             <a class="item active" data-tab="tab-aaglvijbfglzvnegslqe">First Tab</a>
#>             <a class="item " data-tab="tab-qmfaamrewkadgwxbhisi">Second Tab</a>
#>           </div>
#>           <div class="ui tab bottom attached grid segment active" data-tab="tab-aaglvijbfglzvnegslqe">This is first tab</div>
#>           <div class="ui tab bottom attached grid segment " data-tab="tab-qmfaamrewkadgwxbhisi">This is second tab</div>
#>         </div>
#>       </div>
#>     </div>
#>   </div>
#>   <script>$(document).ready(function() {$('#box_750512081470292169253906552817').accordion({
#>   selector: { trigger: '#title_750512081470292169253906552817 > .label > .icon' },
#>   onOpening: function() { $('#title_750512081470292169253906552817 > .label > .icon').removeClass('plus').addClass('minus'); },
#>   onClosing: function() { $('#title_750512081470292169253906552817 > .label > .icon').removeClass('minus').addClass('plus'); }
#> }); })</script>
#> </div>