Renuo_Full_Lockup Rails Bootstrap Ui
x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<h4 class="my-3">Modal with lazy-loaded content</h4>
<div class="alert alert-info" role="alert">
  This modal uses a Turbo Frame to lazy-load its content. This is very helpful if loading the content is expensive and you don't always need it.
  With this approach, the content is only loaded when the modal is opened and is cached for future use.
</div>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#lazy-modal">
  Launch lazy modal
</button>
<div class="modal fade" id="lazy-modal" tabindex="-1" aria-labelledby="lazy-modal-label" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title fs-5" id="lazy-modal-label">Modal title</h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <turbo-frame lazy="true" id="modal_content" src="/lazy_modal_content">
          <p>Loading...</p>
        </turbo-frame>      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div class="modal fade" id="lazy-modal" tabindex="-1" aria-labelledby="lazy-modal-label" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title fs-5" id="lazy-modal-label">Modal title</h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <%= turbo_frame_tag 'modal_content', src: main_app.lazy_modal_content_path, lazy: true do %>
          <p>Loading...</p>
        <% end %>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

No notes provided.

No params configured.

_modal.scss

No assets to display.