Learn R Programming

shinyChakraUI (version 1.1.1)

chakraModal: Modal widget

Description

A modal widget.

Usage

chakraModal(
  inputId,
  options = chakraModalOptions(),
  openButton,
  isOpen = FALSE,
  header,
  body,
  footer
)

Arguments

inputId

widget id

options

named list of options created with chakraModalOptions

openButton

a Chakra button to open the modal

isOpen

whether the modal is initially open

header

a ModalHeader element

body

a ModalBody element

footer

a ModalFooter element; usually it contains some Chakra buttons (that you can group with Tag$ButtonGroup(...))

Value

A widget that can be used in chakraComponent.

Details

You can use an action attribute and a value attribute to the Chakra buttons you put in the widget. For example, if you include the Chakra button Tag$Button("Close", action = "close", value = "CLOSE"), clicking this button will close the modal and will set the Shiny value "CLOSE". Other possible action attributes are "cancel" to cancel, "disable" to disable the modal, and "remove" to entirely remove the modal.

Examples

Run this code
# NOT RUN {
library(shiny)
library(shinyChakraUI)

ui <- chakraPage(

  br(),

  chakraComponent(
    "mycomponent",

    chakraModal(
      inputId = "modal",
      openButton = Tag$Button(
        colorScheme = "orange",
        "Open Modal"
      ),
      header = Tag$ModalHeader(
        fontSize = "lg",
        fontWeight = "bold",
        "Modal title"
      ),
      body = Tag$ModalBody(
        "Sit nulla est ex deserunt exercitation anim occaecat."
      ),
      footer = Tag$ModalFooter(
        Tag$ButtonGroup(
          spacing = "3",
          Tag$Button(
            action = "close",
            value = "CLOSE",
            "Close"
          ),
          Tag$Button(
            action = "cancel",
            colorScheme = "red",
            "Cancel"
          )
        )
      )
    )

  )

)

server <- function(input, output, session){

  observe({
    print(input[["modal"]])
  })

}

if(interactive()){
  shinyApp(ui, server)
}
# }

Run the code above in your browser using DataLab