Dialog Edit

A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.



rails generate shadcn-ui dialog


<%= render_dialog do %>
  <%= dialog_trigger do %>

  <% end %>
  <%= dialog_content do %>

  <% end %>
<% end %>

The Dialog component introduces:

  • app/helpers/components/dialog_helper.rb
  • app/views/components/ui/_dialog.html.erb
  • app/javascript/controllers/ui/dialog_controller.js

The method render_dialog defined in app/helpers/components/dialog_helper.rb accepts a blog for the inner components of the dialog.It renders the partial app/views/components/ui/_dialog.html.erb which contains the model structure and a close button.

The modal is composed of two components with corresponding helper methods, dialog_trigger, which accepts a block for the element that will trigger the modal, and dialog_content, which accepts a block for the body of the modal.

dialog_trigger and dialog_content must be called nested within render_dialog

app/javascript/controllers/ui/dialog_controller.js is a stimulus controller that provides the functionality of the modal.