Skip to contents

Generates a set of card panels

Source: R/card-tabset.R
card_tabset.Rd

To insert, remove, or active card panels, see card_tabset_operate.

Usage

card_tabset(
  ...,
  inputId = rand_string(prefix = "tabset-"),
  title = NULL,
  names = NULL,
  active = NULL,
  tools = NULL,
  footer = NULL,
  class = "",
  class_header = "",
  class_body = "",
  class_foot = ""
)

Arguments

...

'HTML' tags; each tag will be placed into a card

inputId

the id of the card-set, must start with letters

title

the title of the card-set

names

title of the tabs

active

the title that will be active on load

tools

a list of tools or badges generated by card_tool or as_badge

footer

the footer element of the card-set

class

the 'HTML' class the of card-set

class_header, class_body, class_foot

additional 'HTML' class the of card header, body, and footer accordingly

Value

'HTML' tags

See also

card_tabset_operate

Examples


library(shiny)
library(shidashi)

# Fake session to operate on card_tabset without shiny
session <- MockShinySession$new()

card_tabset(
  inputId = "card_set",
  title = "Cardset with Tools",
  `Tab 1` = p("Tab content 1"),
  class_body = "height-500",
  tools = list(
    as_badge(
      "New|badge-success"
    ),
    card_tool(
      widget = "collapse"
    ),
    card_tool(
      widget = "maximize"
    )
  )
)
#> <div class="card card-tabs " data-title="Cardset with Tools">
#>   <div class="card-header p-0 pt-1 ">
#>     <ul class="nav nav-tabs" id="card_set" role="tablist">
#>       <li class="pt-2 px-3">
#>         <h4 class="card-title">Cardset with Tools</h4>
#>       </li>
#>       <li class="nav-item nav-tab-header">
#>         <a class="nav-link active" id="card_set-1-tab" data-toggle="tab" href="#card_set-1" role="tab" aria-controls="card_set-1" aria-selected="true">Tab 1</a>
#>       </li>
#>       <li class="nav-item ml-auto">
#>         <div class="card-tools">
#>           <span class="right badge badge-success">New</span>
#>           <a type="button" href="#" target="_self" class="btn btn-tool" data-card-widget="collapse">
#>             <i class="fas fa-minus" role="presentation" aria-label="minus icon"></i>
#>           </a>
#>           <a type="button" href="#" target="_self" class="btn btn-tool" data-card-widget="maximize">
#>             <i class="fas fa-expand" role="presentation" aria-label="expand icon"></i>
#>           </a>
#>         </div>
#>       </li>
#>     </ul>
#>   </div>
#>   <div class="card-body height-500">
#>     <div class="tab-content" id="card_setContent">
#>       <div class="tab-pane fade active fill-min-height show position-relative" id="card_set-1" role="tabpanel" aria-labelledby="card_set-1-tab">
#>         <p>Tab content 1</p>
#>       </div>
#>     </div>
#>   </div>
#> </div>

card_tabset_insert(
  inputId = "card_set",
  title = "Tab 2",
  p("New content"),
  session = session
)

card_tabset_activate(
  inputId = "card_set",
  title = "Tab 1",
  session = session
)

card_tabset_remove(
  inputId = "card_set",
  title = "Tab 2",
  session = session
)