yonder (version 0.2.0)

modal: Modal dialogs

Description

Modals are a flexible alert window, which disable interaction with the page behind them. Modals may include inputs, buttons, or simply text. Each modal may be assigned an id. By default hideModal() will hide all modals, but you may instead specify a modal's id in which case only that modal is closed. Additionally, when id is not NULL observers and reactives may watch for the modal's close event.

Usage

modal(
  id,
  ...,
  header = NULL,
  footer = NULL,
  center = FALSE,
  size = "md",
  fade = TRUE
)
showModal(modal, session = getDefaultReactiveDomain())
closeModal(id = NULL, session = getDefaultReactiveDomain())

Arguments

id

A character string specifying the id of the modal, when closed input[[id]] is set to TRUE.

...

Unnamed values passed as tag elements to the body of the modal. or named values passed as HTML attributes to the body element of the modal.

header

A character string or tag element specifying the header of the modal.

footer

A character string or tag element specifying the footer of the modal.

center

One of TRUE or FALSE specifying whether the modal is vertically centered on the page, defaults to FALSE.

size

One of "sm" (small), "md" (medium), "lg" (large), or "xl" (extra large) specifying the relative width of the modal, defaults to "md".

fade

One of TRUE or FALSE specifying if the modal fades in when shown and fades out when closed, defaults to TRUE.

modal

A modal tag element created using modal().

session

A reactive context, defaults to getDefaultReactiveDomain().

Example application

ui <- container(
  buttonInput(
    id = "open",
    "Open modal",
    icon("plus")
  )
)
server <- function(input, output) {
  modal1 <- modal(
    title = "A simple modal",
    p(
      "Cras mattis consectetur purus sit amet fermentum.",
      "Cras justo odio, dapibus ac facilisis in, egestas",
      "eget quam. Morbi leo risus, porta ac consectetur",
      "ac, vestibulum at eros."
    )
  )
observeEvent(input$open, ignoreInit = TRUE, {
    showModal(modal1)
  })
}
shinyApp(ui, server)

See Also

Other components: alert(), badge(), blockquote(), card(), collapsePane(), d1(), dropdown(), img(), jumbotron(), navContent(), popover(), pre(), toast()

Examples

# NOT RUN {
### Simple modal

modal(
  id = "simple",
  header = h5("Title"),
  p("Cras placerat accumsan nulla.")
)

### Modal with container body

modal(
  id = "more_complex",
  size = "lg",
  header = h5("More complex"),
  container(
    columns(
      column("Cras placerat accumsan nulla."),
      column("Curabitur lacinia pulvinar nibh."),
      column(
        "Aliquam posuere.",
        "Praesent fermentum tempor tellus."
      )
    )
  )
)

# }