shiny.semantic (version 0.3.0)

modal: Create Semantic UI modal

Description

This creates a modal using Semantic UI styles.

Usage

modal(
  ...,
  id = "",
  class = "",
  header = "",
  content = NULL,
  footer = NULL,
  target = NULL,
  settings = NULL,
  modal_tags = NULL
)

Arguments

...

Content elements to be added to the modal body. To change attributes of the container please check the `content` argument.

id

ID to be added to the modal div. Default "".

class

Classes except "ui modal" to be added to the modal. Semantic UI classes can be used. Default "".

header

Content to be displayed in the modal header. If given in form of a list, HTML attributes for the container can also be changed. Default "".

content

Content to be displayed in the modal body. If given in form of a list, HTML attributes for the container can also be changed. Default NULL.

footer

Content to be displayed in the modal footer. Usually for buttons. If given in form of a list, HTML attributes for the container can also be changed. Default NULL.

target

Javascript selector for the element that will open the modal. Default NULL.

settings

List of vectors of Semantic UI settings to be added to the modal. Default NULL.

modal_tags

Other modal elements. Default NULL.

Examples

# NOT RUN {
## Create a simple server modal
library(shiny)
library(shiny.semantic)

ui <- function() {
  shinyUI(
    semanticPage(
      actionButton("show", "Show modal dialog")
    )
  )
}

server = function(input, output) {
  observeEvent(input$show, {
    create_modal(modal(
      id = "simple-modal",
      title = "Important message",
      "This is an important message!"
    ))
  })
}

## Create a simple UI modal
library(shiny)
library(shiny.semantic)
ui <- function() {
  shinyUI(
    semanticPage(
      title = "Modal example - Static UI modal",
      div(id = "modal-open-button", class = "ui button", "Open Modal"),
      modal(
        div("Example content"),
        id = "example-modal",
        target = "modal-open-button"
      )
    )
  )
}

## Observe server side actions
library(shiny)
library(shiny.semantic)
ui <- function() {
  shinyUI(
    semanticPage(
      title = "Modal example - Server side actions",
      uiOutput("modalAction"),
      actionButton("show", "Show by calling show_modal")
    )
  )
}

server <- shinyServer(function(input, output) {
  observeEvent(input$show, {
    show_modal('action-example-modal')
  })
  observeEvent(input$hide, {
    hide_modal('action-example-modal')
  })

  output$modalAction <- renderUI({
    modal(
      actionButton("hide", "Hide by calling hide_modal"),
      id = "action-example-modal",
      header = "Modal example",
      footer = "",
      class = "tiny"
    )
  })
})

## Changing attributes of header and content.
library(shiny)
library(shiny.semantic)

ui <- function() {
  shinyUI(
    semanticPage(
      actionButton("show", "Show modal dialog")
    )
  )
}

server = function(input, output) {
  observeEvent(input$show, {
    create_modal(modal(
      id = "simple-modal",
      title = "Important message",
      header = list(style = "background: lightcoral"),
      content = list(style = "background: lightblue",
                     `data-custom` = "value", "This is an important message!"),
      p("This is also part of the content!")
    ))
  })
}

# }