accordion: Bootstrap 4 accordion container

Description Usage Arguments Author(s) Examples

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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
bs4Accordion(..., id, width = 12)

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

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

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

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

Arguments

...

slot for accordionItem.

id

Accordion to target.

width

The width of the accordion.

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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
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!"
        )
      )
    ),
    title = "Accordion"
  ),
  server = function(input, output) { }
 )
}


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

Example output

Attaching package:bs4DashThe following object is masked frompackage:graphics:

    box

bs4Dash documentation built on July 23, 2021, 5:06 p.m.