Card-like 'HTML' element

Usage

card(
  title,
  ...,
  footer = NULL,
  tools = NULL,
  inputId = NULL,
  class = "",
  class_header = "",
  class_body = "",
  class_foot = "",
  style_header = NULL,
  style_body = NULL,
  start_collapsed = FALSE,
  resizable = FALSE,
  root_path = template_root()
)

card2(
  title,
  body_main,
  body_side = NULL,
  footer = NULL,
  tools = NULL,
  inputId = NULL,
  class = "",
  class_header = "",
  class_body = "min-height-400",
  class_foot = "",
  style_header = NULL,
  style_body = NULL,
  start_collapsed = FALSE,
  root_path = template_root()
)

card2_open(inputId, session = shiny::getDefaultReactiveDomain())

card2_close(inputId, session = shiny::getDefaultReactiveDomain())

card2_toggle(inputId, session = shiny::getDefaultReactiveDomain())

card_operate(
  inputId,
  title,
  method,
  session = shiny::getDefaultReactiveDomain()
)

Arguments

title: the title of the card
...: the body content of the card
footer: the footer of the card; will be hidden if footer=NULL
tools: a list of tools or badges to be displayed at top-right corner, generated by as_badge or card_tool
inputId: the id of the card
class: the 'HTML' class of the entire card
class_header: the the 'HTML' class of the card header
class_body: the the 'HTML' class of the card body
class_foot: the the 'HTML' class of the card footer
style_header: 'CSS' style of the header
style_body: 'CSS' style of the body
start_collapsed: whether the card starts as collapsed
resizable: whether the card body can be resized vertically; notice that if true, then the default padding for body will be zero
root_path: see template_root
body_main, body_side: used by card2, the body content of the front and back sides of the card
session: shiny session domain
method: action to expand, minimize, or remove the cards; choices are "collapse", "expand", "remove", "toggle", "maximize", "minimize", and "toggleMaximize"

Value

'HTML' tags

Examples

library(shiny)
library(shidashi)

# Used for example only
ns <- I
session <- MockShinySession$new()

# -------------- Basic usage -------------
card(
  title = "Badges", div(
    class = "padding-20",
    p(
      "Add badges to the top-right corder. ",
      "Use \"|\" to indicate the badge classes; ",
      "for example: \"badge-info\", \"badge-warning\"..."
    ),
    hr(), p(
      "Use `resizable = TRUE` to make card resizable."
    )
  ),
  tools = list(
    as_badge("New|badge-info"),
    as_badge("3|badge-warning")
  ),
  class_body = "height-300",
  resizable = TRUE
)
#> <div class="card card-single  " data-title="Badges">
#>   <div class="card-header " style="">
#>     <h3 class="card-title">Badges</h3>
#>     <!-- Buttons, labels, and many other things can be placed here! -->
#>     <div class="card-tools">
#>   <span class="right badge badge-info">New</span>
#>   <span class="right badge badge-warning">3</span>
#> </div>
#>   </div>
#>   <div class="card-body resize-vertical flex-container no-padding height-300" style=";">
#>     <div style="flex:1" class="fill-height fill-width fill-max-width padding-5">
#>   <div class="padding-20">
#>     <p>
#>       Add badges to the top-right corder. 
#>       Use "|" to indicate the badge classes; 
#>       for example: "badge-info", "badge-warning"...
#>     </p>
#>     <hr/>
#>     <p>Use `resizable = TRUE` to make card resizable.</p>
#>   </div>
#> </div>
#>   </div>
#>   
#> </div>
#> 

# ---------------- With tools -----------------
card(
  title = "Default Tools",
  plotOutput(
    ns("card_defaulttool_plot"),
    height = "100%"
  ),
  tools = list(
    card_tool(
      widget = "link",
      href = "https://github.com/dipterix"
    ),
    card_tool(widget = "collapse"),
    card_tool(widget = "maximize")
  ),
  class_body = "height-300",
  resizable = TRUE
)
#> <div class="card card-single  " data-title="Default Tools">
#>   <div class="card-header " style="">
#>     <h3 class="card-title">Default Tools</h3>
#>     <!-- Buttons, labels, and many other things can be placed here! -->
#>     <div class="card-tools">
#>   <a type="button" href="https://github.com/dipterix" target="_blank" class="btn btn-tool" data-card-widget="link">
#>     <i class="fas fa-up-right-from-square" role="presentation" aria-label="up-right-from-square icon"></i>
#>   </a>
#>   <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>
#>   </div>
#>   <div class="card-body resize-vertical flex-container no-padding height-300" style=";">
#>     <div style="flex:1" class="fill-height fill-width fill-max-width padding-5">
#>   <div class="shiny-plot-output html-fill-item" id="card_defaulttool_plot" style="width:100%;height:100%;"></div>
#> </div>
#>   </div>
#>   
#> </div>
#> 

# -------------- Card2 example --------------
card2(
  title = "Card2 Example", body_main =
    plotOutput(
    outputId = ns("card2_plot"),
    height = "100%"
  ),
  body_side = fluidRow(
    column(
      6L, textInput(
        ns("card2_plot_title"),
        "Plot title"
      )
    ),
    column(
      6L, sliderInput(
        ns("card2_plot_npts"),
        "# of points", min = 1, max = 100,
        value = 10, step = 1, round = TRUE
      )
    )
  ),
  tools = list(
    card_tool(widget = "link",
              href = "https://github.com/dipterix"),
    card_tool(widget = "collapse"),
    card_tool(widget = "maximize")
  ),
  class_body = "height-300"
)
#> <div class="card card-single direct-chat  " data-title="Card2 Example">
#>   <div class="card-header " style="">
#>     <h3 class="card-title">Card2 Example</h3>
#>     <!-- Buttons, labels, and many other things can be placed here! -->
#>     <div class="card-tools">
#>       <a type="button" href="https://github.com/dipterix" target="_blank" class="btn btn-tool" data-card-widget="link">
#>   <i class="fas fa-up-right-from-square" role="presentation" aria-label="up-right-from-square icon"></i>
#> </a>
#> <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>
#>       <button type="button" class="btn btn-tool card2-switch" title="Configurations" data-widget="chat-pane-toggle">
#>         <i class="fas fa-ellipsis-v"></i>
#>       </button>
#>     </div>
#>   </div>
#>   <div class="card-body card2-body height-300" style=";">
#>     <div class="direct-chat-messages fill padding-0">
#>       <div class="shiny-plot-output html-fill-item" id="card2_plot" style="width:100%;height:100%;"></div>
#>     </div>
#>     <div class="direct-chat-contacts fill padding-0">
#>       <div class="row">
#>   <div class="col-sm-6">
#>     <div class="form-group shiny-input-container">
#>       <label class="control-label" id="card2_plot_title-label" for="card2_plot_title">Plot title</label>
#>       <input id="card2_plot_title" type="text" class="shiny-input-text form-control" value=""/>
#>     </div>
#>   </div>
#>   <div class="col-sm-6">
#>     <div class="form-group shiny-input-container">
#>       <label class="control-label" id="card2_plot_npts-label" for="card2_plot_npts"># of points</label>
#>       <input class="js-range-slider" id="card2_plot_npts" data-skin="shiny" data-min="1" data-max="100" data-from="10" data-step="1" data-grid="true" data-grid-num="9.9" data-grid-snap="false" data-prettify-separator="," data-prettify-enabled="true" data-keyboard="true" data-data-type="number"/>
#>     </div>
#>   </div>
#> </div>
#>     </div>
#>   </div>
#>   
#> </div>
#>