Step card — kit_step_card • kitDesign

One card: on top is kit_step_head() (usually rendered by the server based on the state, in a uiOutput()), below is the content of this step (kit_step_body(), usually wrapped in conditionalPanel() so only the current step is open). The card's border and shadow follow the header's state: the current step has a border and shadow; finished steps and steps not yet available have no shadow and a gray border.

Usage

kit_step_card(head, ..., title_id = NULL)

Arguments

head: The header: kit_step_head(), or the uiOutput() that holds it.
...: The card content (kit_step_body()).
title_id: The id of the header title (the title_id of kit_step_head()), used by screen readers as the card name.

Value

<section class="kit-stepcard">.

Details

If you do not want to manage which step is open yourself, use the module kit_stepcards_ui() / kit_stepcards_server().

Examples

kit_step_card(
  kit_step_head(1, "每個檔案是哪個世代、哪個波次", "current", title_id = "steptitle1"),
  kit_step_body(shiny::p("已經照欄名猜好了，請看一遍。"),
                shiny::actionButton("ok1", "對，下一步")),
  title_id = "steptitle1"
)
#> <section class="kit-stepcard" aria-labelledby="steptitle1">
#>   <div class="kit-stephead is-current" aria-current="step">
#>     <span class="kit-stepnum" aria-hidden="true">1</span>
#>     <span class="visually-hidden">第 1 步，現在這一步：</span>
#>     <span class="kit-steptitle" id="steptitle1">每個檔案是哪個世代、哪個波次</span>
#>   </div>
#>   <div class="kit-stepbody">
#>     <p>已經照欄名猜好了，請看一遍。</p>
#>     <button id="ok1" type="button" class="btn btn-default action-button"><span class="action-label">對，下一步</span></button>
#>   </div>
#> </section>