twModalDialog: Creates a Modal Dialog

In shiny.tailwind: 'TailwindCSS' for Shiny Apps

Creates a Modal Dialog

Description

Creates a Modal Dialog

Usage

twModalDialog(
  ui,
  close_id = "close",
  close_label = "Close",
  close_class = NA,
  submit_id = "submit",
  submit_label = "Submit",
  submit_class = NA,
  title = "Title of Modal",
  modal_id = "shiny-modal",
  modal_width = "max-w-lg"
)

Arguments

ui	UI of the modal
close_id	ID for the close button
close_label	Label for the close button, can be a tagList of an icon and the label
close_class	classes for the close button, if NA default values will be used
submit_id	ID for the submit button
submit_label	Label for the submit button, can be a tagList of an icon and the label
submit_class	classes for the submit button, if NA default values will be used
title	title of the modal
modal_id	id of the modal, make sure the ID is identical to the one used in twBtnOpenModal
modal_width	optional class to define the modal width, eg max-w-4xl for a wider modal

Value

a list with a shiny.tag class

Examples

ui <- div(
  use_tailwind(),
  class = "h-screen bg-stone-100 p-10",
  twBtnOpenModal(
    "open_modal", "Show Modal",
    btn_class = "px-5 py-2 bg-rose-500 hover:bg-rose-700 text-white cursor-pointer rounded-md"
  ),
  twModalDialog(p("Hello World"))
)

server <- function(input, output, session) {
  observeEvent(input$open_modal, {
    print("Modal Opened")
  })
  observeEvent(input$submit, {
    print("Modal Closed - Submitted")
  })
  observeEvent(input$close, {
    print("Modal Closed - Closed")
  })
}
if (interactive() == TRUE) shinyApp(ui, server)

shiny.tailwind documentation built on Oct. 13, 2022, 9:06 a.m.