tab_box: Create a tab box.

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

Description

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")
       ))

Example output

Attaching package: ‘semantic.dashboard’

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

    box

<div class="five wide column">
  <div class="ui segment raised blue">
    <div id="box_342886687973579576557868529731" 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 tab box
        </div>
      </div>
      <div class="content active">
        <div>
          <div id="menu-ocanwrqgdneilyhnhmxt" class="ui menu top attached tabular">
            <a class="item active" data-tab="tab-fmdniiqlfctcwymdmxct">First Tab</a>
            <a class="item " data-tab="tab-mvuofywggloqzozqlfmn">Second Tab</a>
          </div>
          <div class="ui tab bottom attached segment active" data-tab="tab-fmdniiqlfctcwymdmxct">This is first tab</div>
          <div class="ui tab bottom attached segment " data-tab="tab-mvuofywggloqzozqlfmn">This is second tab</div>
          <script> $(document).on('shiny:sessioninitialized', function(event) {
        Shiny.onInputChange('menu-ocanwrqgdneilyhnhmxt_tab', 'tab-fmdniiqlfctcwymdmxct');
      });
      // Code below is needed to trigger visibility on reactive Shiny outputs.
      // Thanks to that users do not have to set suspendWhenHidden to FALSE.
      var previous_tab;
      $('#menu-ocanwrqgdneilyhnhmxt.menu .item').tab({
        onVisible: function(target) {
          if (previous_tab) {
            $(this).trigger('hidden');
          }
          $(window).resize();
          $(this).trigger('shown');
          previous_tab = this;
          Shiny.onInputChange('menu-ocanwrqgdneilyhnhmxt_tab', $(this).attr('data-tab'))
        }
      });</script>
        </div>
      </div>
    </div>
  </div>
  <script>$(document).ready(function() { $('#box_342886687973579576557868529731').accordion({
  selector: { trigger: '.title .icon' },
  onOpening: function() { $('#box_342886687973579576557868529731').find('.label .icon').removeClass('plus').addClass('minus'); },
  onClosing: function() { $('#box_342886687973579576557868529731').find('.label .icon').removeClass('minus').addClass('plus'); }
}); })</script>
</div>

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