Actions allow you to display information and functional elements in-page without requiring a full page reload by the user.
They are managed via the Stimulus JS controller lato_action_controller.

To trigger an action, simply add the attribute data-lato-action-target="trigger" to a link in the DOM and define the ID of the turbo-frame to load using the data-turbo-frame="frame_id" attribute.

Example

<%= link_to 'Example',
  main_app.products_path,
  data: {
    lato_action_target: 'trigger',
    turbo_frame: 'lato_index_default_product'
  }
%>

Customizing the Overlay

Set a Custom Title

Example

<%= link_to 'Example',
  main_app.products_path,
  data: {
    lato_action_target: 'trigger',
    turbo_frame: 'lato_index_default_product',
    action_title: 'Custom Title'
  }
%>

Set a Custom Size

Example

<%= link_to 'Example',
  main_app.products_path,
  data: {
    lato_action_target: 'trigger',
    turbo_frame: 'lato_index_default_product',
    action_size: 'xl'
  }
%>

Triggering Actions from Forms

To open an action overlay when a form is submitted (instead of a link click), use the triggerSubmit target instead of trigger.
This is useful for displaying operation results or form submissions inside an overlay.

<%= form_with url: my_action_path, data: {
  lato_action_target: 'triggerSubmit',
  turbo_frame: 'my_turbo_frame',
  controller: 'lato-form'
} do |form| %>
  <!-- form fields -->
  <%= lato_form_submit form, 'Submit' %>
<% end %>