README.md in katalyst-kpop-3.1.2 vs README.md in katalyst-kpop-3.1.3

- old
+ new

@@ -51,13 +51,32 @@ ``` ### Show a modal To show a modal you need to add content to the kpop turbo frame. You can do this in several ways: -1. Use `content_for :kpop` in an HTML response to inject content into the kpop frame (see `yield :kpop` above) -2. Respond to a turbo frame request from the kpop frame component. +1. Injection +2. Navigation +### Injection +Use `content_for :kpop` in an HTML response to inject content into the kpop frame (see `yield :kpop` above). + +This allows you to pre open modals when rendering a page without the need for user interaction. + +```html +<!-- app/views/homepage/index.html.erb --> +<h1>Site name</h1> +... more html content that will be rendered behind the scrim ... + +<% content_for :kpop do %> + <%= render Kpop::ModalComponent.new(title: "Welcome") do %> + Thanks for visiting our site! + <% end %> +``` + +### Navigation +Respond to a turbo frame request from the kpop frame component. + You can generate a link that will cause a modal to show using the `kpop_link_to` helper. `kpop_link_to`'s are similar to a `link_to` in rails, but it will navigate to the given URL within the modal turbo frame. The targeted action will need to generate content in a `Kpop::FrameComponent`, e.g. by responding to a turbo frame request with the ID `kpop`. @@ -67,10 +86,10 @@ <%= kpop_link_to "click to open modal", modal_path("example") %> ``` ```html <!-- app/views/modals/show.html.erb --> -<%= Kpop::Modal(title: "Modal title") do %> +<%= render Kpop::ModalComponent.new(title: "Modal title") do %> Modal content <% end %> ``` ### Turbo Frame Layout