modal.Rd
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.
modal( id, ..., header = NULL, footer = NULL, center = FALSE, size = "md", fade = TRUE ) showModal(modal, session = getDefaultReactiveDomain()) closeModal(id = NULL, session = getDefaultReactiveDomain())
id | A character string specifying the id of the modal, when closed
|
---|---|
... | 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 |
size | One of |
fade | One of |
modal | A modal tag element created using |
session | A reactive context, defaults to |
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)
Other components:
alert()
,
badge()
,
blockquote()
,
card()
,
collapsePane()
,
d1()
,
dropdown()
,
img()
,
jumbotron()
,
navContent()
,
popover()
,
pre()
,
toast()
### Simple modal modal( id = "simple", header = h5("Title"), p("Cras placerat accumsan nulla.") )#> <div class="yonder-modal modal fade" id="simple" tabindex="-1" role="dialog"> #> <div class="modal-dialog" role="document"> #> <div class="modal-content"> #> <div class="modal-header"> #> <h5 class="modal-title">Title</h5> #> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> #> <span aria-hidden="true">×</span> #> </button> #> </div> #> <div class="modal-body"> #> <p>Cras placerat accumsan nulla.</p> #> </div> #> </div> #> </div> #> </div>### 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." ) ) ) )#> <div class="yonder-modal modal fade" id="more_complex" tabindex="-1" role="dialog"> #> <div class="modal-dialog modal-lg" role="document"> #> <div class="modal-content"> #> <div class="modal-header"> #> <h5 class="modal-title">More complex</h5> #> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> #> <span aria-hidden="true">×</span> #> </button> #> </div> #> <div class="modal-body"> #> <div class="container-fluid"> #> <div class="row"> #> <div class="col">Cras placerat accumsan nulla.</div> #> <div class="col">Curabitur lacinia pulvinar nibh.</div> #> <div class="col"> #> Aliquam posuere. #> Praesent fermentum tempor tellus. #> </div> #> </div> #> </div> #> </div> #> </div> #> </div> #> </div>