material_modal: Place UI content in a modal

In shinymaterial: Implement Material Design in Shiny Applications

Description

Put any UI object inside of a modal. The modal will open when the button is pressed.

Usage

material_modal(
  modal_id,
  button_text,
  title,
  ...,
  button_icon = NULL,
  floating_button = FALSE,
  button_depth = NULL,
  button_color = NULL,
  close_button_label = "Close",
  display_button = TRUE
)

Arguments

modal_id	String. The ID for the modal. Must be unique per application.
button_text	String. The text displayed on the modal trigger button.
title	String. The title of the modal window.
...	The UI elements to place in the modal
button_icon	String. The name of the icon. Visit https://materializecss.com/icons.html for a list of available icons.
floating_button	Boolean. Should the modal trigger button be a floating button?
button_depth	Integer. The amount of depth of the button. The value should be between 0 and 5. Leave empty for the default depth.
button_color	String. The color of the button. Leave empty for the default color. Visit https://materializecss.com/color.html for a list of available colors.
close_button_label	String. The label of the modal close button.
display_button	Boolean. Should the button be displayed in the app? (If FALSE, open_material_modal() may be used to open the modal).

Examples

material_modal(
  modal_id = "example_modal",
  button_text = "Modal",
  title = "Example Modal Title",
  button_color = "red lighten-3",
  shiny::tags$p("Modal Content")
)

Example output

<div class="">
  <button data-target="example_modal" class="waves-effect waves-light shiny-material-modal-trigger red lighten-3 btn" style="">Modal</button>
</div>
<div id="example_modal" class="modal">
  <div class="modal-content">
    <h4>Example Modal Title</h4>
    <p>Modal Content</p>
  </div>
  <div class="modal-footer">
    <a href="javascript:void(0)" class="modal-action modal-close waves-effect waves-green btn-flat">Close</a>
  </div>
</div>

shinymaterial documentation built on Sept. 1, 2020, 1:07 a.m.