accordion: Bootstrap 4 accordion container

In DivadNojnarg/bs4Dash: A 'Bootstrap 4' Version of 'shinydashboard'

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, [e-mail]

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

DivadNojnarg/bs4Dash documentation built on Feb. 5, 2024, 9:02 a.m.