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'
  }
%>