Drawer - Rails UI Components

To use async Drawer component, you need to have a <turbo-frame id='drawer'> in your layout

<%= turbo_frame_tag :drawer %>

And wrap response content with the drawer component:

<%= render Ui::Drawer::Component.new(title: "Title HERE") do %>
  ...
<% end %>

Example

Preview

Code

<div>
  <%= link_to "Async Drawer", terms_path, data: { turbo_frame: :drawer }, class: "btn btn-primary" %></p>
</div>

<div>
  <%= render Ui::Btn::Component.new(variant: :primary, data: { drawers_target: "trigger", action: "click->drawers#show", id: "drawer1" }).with_content "Sync Drawer" %>

  <%= render Ui::Drawer::Component.new(title: "Info", id: "drawer1") do %>
    <div class="drawer__body">
      <% 3.times do %>
        <p class="mb-6">Labore voluptate qui ex nostrud duis. Elit aute sit dolor consectetur minim tempor sunt excepteur tempor et irure. Cupidatat id sint irure amet dolor aute. Ea ullamco aliquip id cillum laboris sunt irure magna eu proident mollit irure voluptate magna. Commodo dolore ex ullamco amet duis nulla minim. Dolore reprehenderit aliqua veniam aute minim magna fugiat. Irure Lorem nisi ex reprehenderit amet quis deserunt mollit anim laborum ut incididunt nisi ut dolor.</p>
      <% end %>
    </div>
    <div class="drawer__footer drawer__footer-end">
      <%= render Ui::Btn::Component.new(href: "#").with_content "Learn more" %>
      <%= render Ui::Btn::Component.new(variant: :primary, href: "#").with_content "Get access" %>
    </div>
  <% end %>
</div>