Cfa Ui Components
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
26
27
28
<button x-data @click="$dispatch('example-modal')">Open Modal</button>
<div x-id="['example-title', 'example-description', 'example-buttons']" x-transition.opacity class="absolute top-0 left-0 z-index-1000" x-show="open" x-cloak x-data="{open: false, toggle() { this.open = !this.open }}" @example-modal.window="toggle()">
  <div @keyup.esc.window="open && toggle()" class="h-screen w-screen relative flex flex-row justify-center items-center bg-stone-400/50 overflow-y-hidden" x-trap.inert.noscroll="open">
    <dialog role="dialog" aria-modal="true" :aria-labelledby="$id('example')" :aria-describedby="$id('example-description')" x-transition x-show="open" @click.away="toggle()" class="relative flex flex-col min-h-50 max-h-[100vh] md:max-h-[80vh] overflow-auto bg-white rounded-sm border-zinc-400 border-2" :open="open">
      <div class="p-[32px] space-y-4 max-w-[360px]">
        <div class="space-x-7 flex flex-row">
          <h2 :id="$id('example-title')">Snack copy would go here framed as a question?</h2>
          <div class="w-[25px] shrink-0">
            <a href="#" @click="toggle()" class="flex flex-col items-start cursor-pointer"><img width="25px" alt="close icon" aria-label="Close modal" src="/assets/icons/xmark-16180114.svg" /></a>
          </div>
        </div>
        <div :id="$id('example-description')" class="space-y-4">
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
          </p>
          <ul>
            <li>Ut enim ad minim veniam, quis nostrud</li>
            <li>exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</li>
            <li>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</li>
          </ul>
        </div>
        <div :id="$id('example-buttons')" class="mt-8 space-y-4">
          <form class="button_to" method="get" action="#"><button class="btn btn--primary btn--large" @click.prevent="toggle()" type="submit">Button</button></form>
        </div>
      </div>
    </dialog>
  </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<button x-data @click="$dispatch('example-modal')">Open Modal</button>
<%= render(ModalComponent.new(name: 'example')) do |c| %>
  <% c.with_header do %>Snack copy would go here framed as a question?<% end %>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  </p>
  <ul>
    <li>Ut enim ad minim veniam, quis nostrud</li>
    <li>exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</li>
    <li>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</li>
  </ul>
  <% c.with_button do %>
    <%= render(ButtonLinkComponent.new(
      label: "Button",
      url: "#",
      html_attrs: {
        "@click.prevent": "toggle()"
      })) %>
  <% end %>
<% end %>

No notes provided.

No params configured.