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

hiplot/bs4Dash2 documentation built on Dec. 20, 2021, 3:51 p.m.