accordion: Bootstrap 4 accordion container

bs4AccordionR Documentation

Bootstrap 4 accordion container

Description

accordion creates an accordion container. Accordions are part of collapsible elements.

accordionItem is to be inserted in a accordion.

updateAccordion toggles an accordion on the client.

Usage

bs4Accordion(..., id, width = 12, .list = NULL)

bs4AccordionItem(
  ...,
  title,
  status = NULL,
  collapsed = TRUE,
  solidHeader = TRUE
)

updateAccordion(id, selected, session = shiny::getDefaultReactiveDomain())

accordion(..., id, width = 12, .list = NULL)

accordionItem(..., title, status = NULL, collapsed = TRUE, solidHeader = TRUE)

Arguments

...

slot for accordionItem.

id

Accordion to target.

width

The width of the accordion.

.list

To pass accordionItem within a list.

title

Optional title.

status

The status of the item. This determines the item's background color. Valid statuses are defined as follows:

  • primary: \Sexpr[results=rd, stage=render]{bs4Dash:::rd_color_tag("#007bff")}.

  • secondary: \Sexpr[results=rd, stage=render]{bs4Dash:::rd_color_tag("#6c757d")}.

  • info: \Sexpr[results=rd, stage=render]{bs4Dash:::rd_color_tag("#17a2b8")}.

  • success: \Sexpr[results=rd, stage=render]{bs4Dash:::rd_color_tag("#28a745")}.

  • warning: \Sexpr[results=rd, stage=render]{bs4Dash:::rd_color_tag("#ffc107")}.

  • danger: \Sexpr[results=rd, stage=render]{bs4Dash:::rd_color_tag("#dc3545")}.

  • gray-dark: \Sexpr[results=rd, stage=render]{bs4Dash:::rd_color_tag("#343a40")}.

  • gray: \Sexpr[results=rd, stage=render]{bs4Dash:::rd_color_tag("#adb5bd")}.

  • white: \Sexpr[results=rd, stage=render]{bs4Dash:::rd_color_tag("#fff")}.

  • indigo: \Sexpr[results=rd, stage=render]{bs4Dash:::rd_color_tag("#6610f2")}.

  • lightblue: \Sexpr[results=rd, stage=render]{bs4Dash:::rd_color_tag("#3c8dbc")}.

  • navy: \Sexpr[results=rd, stage=render]{bs4Dash:::rd_color_tag("#001f3f")}.

  • purple: \Sexpr[results=rd, stage=render]{bs4Dash:::rd_color_tag("#605ca8")}.

  • fuchsia: \Sexpr[results=rd, stage=render]{bs4Dash:::rd_color_tag("#f012be")}.

  • pink: \Sexpr[results=rd, stage=render]{bs4Dash:::rd_color_tag("#e83e8c")}.

  • maroon: \Sexpr[results=rd, stage=render]{bs4Dash:::rd_color_tag("#d81b60")}.

  • orange: \Sexpr[results=rd, stage=render]{bs4Dash:::rd_color_tag("#ff851b")}.

  • lime: \Sexpr[results=rd, stage=render]{bs4Dash:::rd_color_tag("#01ff70")}.

  • teal: \Sexpr[results=rd, stage=render]{bs4Dash:::rd_color_tag("#39cccc")}.

  • olive: \Sexpr[results=rd, stage=render]{bs4Dash:::rd_color_tag("#3d9970")}.

collapsed

If TRUE, start collapsed. This must be used with collapsible=TRUE.

solidHeader

Should the header be shown with a solid color background?

selected

Index of the newly selected accordionItem.

session

Shiny session object.

Author(s)

David Granjon, dgranjon@ymail.com

Examples

if (interactive()) {
 library(shiny)
 library(bs4Dash)
 
 shinyApp(
  ui = dashboardPage(
    dashboardHeader(),
    dashboardSidebar(),
    dashboardBody(
      accordion(
       id = "accordion1",
        accordionItem(
          title = "Accordion 1 Item 1",
          status = "danger",
          collapsed = TRUE,
          "This is some text!"
        ),
        accordionItem(
          title = "Accordion 1 Item 2",
          status = "indigo",
          collapsed = FALSE,
          "This is some text!"
        )
      ),
      accordion(
       id = "accordion2",
        accordionItem(
          title = "Accordion 2 Item 1",
          status = "info",
          collapsed = TRUE,
          "This is some text!"
        ),
        accordionItem(
          title = "Accordion 2 Item 2",
          status = "success",
          collapsed = FALSE,
          "This is some text!"
        )
      ),
      accordion(
        id = "accordion_dynamic",
        .list = lapply(
          1:2,
          function(i)
            accordionItem(
              title = paste('Accordion 1 Item', i),
              status = "danger",
              collapsed = ifelse (i == 1, TRUE, FALSE),
              "This is some text!"
            )
         )
       )
    ),
    title = "Accordion"
  ),
  server = function(input, output) {
   observe({
     print(input$accordion1)
     print(input$accordion2)
     print(input$accordion_dynamic)
   })
  }
 )
}


# Update accordion
if (interactive()) {
 library(shiny)
 library(bs4Dash)
 
 shinyApp(
  ui = dashboardPage(
    dashboardHeader(),
    dashboardSidebar(),
    dashboardBody(
      radioButtons("controller", "Controller", choices = c(1, 2)),
      br(),
      accordion(
        id = "accordion1",
        accordionItem(
          title = "Accordion 1 Item 1",
          status = "danger",
          collapsed = TRUE,
          "This is some text!"
        ),
        accordionItem(
          title = "Accordion 1 Item 2",
          status = "warning",
          collapsed = TRUE,
          "This is some text!"
        )
      )
    ),
    title = "Update Accordion"
  ),
  server = function(input, output, session) {
    observeEvent(input$controller, {
      updateAccordion(id = "accordion1", selected = input$controller)
    })
    observe(print(input$accordion1))
    observeEvent(input$accordion1, {
      showNotification(sprintf("You selected accordion N° %s", input$accordion1), type = "message")
    })
  }
 )
}

bs4Dash documentation built on Sept. 11, 2024, 8:46 p.m.