BetterUi Components

Previews

No matching results.

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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<div class="p-4">
  <h3 class="text-lg font-semibold mb-4">Playground</h3>
  <div id="dialog-93064" data-controller="better-ui--dialog--dialog" data-better-ui--dialog--dialog-open-value="false" data-better-ui--dialog--dialog-close-on-backdrop-value="true" data-better-ui--dialog--dialog-close-on-escape-value="true">
    <div data-action="click->better-ui--dialog--dialog#open">
      <button type="button" data-controller="better-ui--button" data-action="click->better-ui--button#handleClick" class="inline-flex items-center justify-center font-medium rounded-lg transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-info-500 bg-info-600 hover:bg-info-700 active:bg-info-800 text-grayscale-50 px-4 py-2 text-base gap-2 cursor-pointer">
        <span data-better-ui--button-target="spinner" class="hidden">
          <svg class="animate-spin w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true">
            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
          </svg>
          <span class="sr-only">Loading...</span>
        </span>
        <span data-better-ui--button-target="content" class=" inline-flex items-center gap-2">
          Show Alert
        </span>
      </button>
    </div>
    <div data-dialog-overlay
       role="dialog"
       aria-modal="true"
       class="fixed inset-0 z-[1000]"
       hidden>
      <div data-better-ui--dialog--dialog-target="backdrop"
         data-action="click->better-ui--dialog--dialog#backdropClick"
        class="fixed inset-0 bg-black/50 transition-opacity duration-200 opacity-0">
      </div>
      <div class="fixed inset-0 overflow-y-auto">
        <div class="flex min-h-full items-center justify-center p-4 text-center sm:p-0"
           data-action="click->better-ui--dialog--dialog#backdropClick">
          <div data-better-ui--dialog--dialog-target="panel"
             class="relative w-full text-left transition-all duration-200 opacity-0 scale-95 translate-y-4 sm:translate-y-0 sm:scale-95 sm:max-w-sm"
             role="document">
            <div class="flex flex-col rounded-lg text-base bg-white border border-grayscale-300 text-grayscale-900 shadow-sm" >
              <div class="p-6">
                <div class="text-center">
                </div>
              </div>
              <div class="p-6 border-t border-grayscale-200">
                <div class="flex flex-col-reverse sm:flex-row sm:justify-end gap-3">
                  <button type="button" data-action="click->better-ui--dialog--dialog#close" class="inline-flex items-center justify-center font-medium rounded-lg transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-info-500 bg-info-600 hover:bg-info-700 active:bg-info-800 text-grayscale-50 px-4 py-2 text-base gap-2 cursor-pointer w-full">
                    <span data-better-ui--button-target="spinner" class="hidden">
                      <svg class="animate-spin w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true">
                        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                      </svg>
                      <span class="sr-only">Loading...</span>
                    </span>
                    <span data-better-ui--button-target="content" class=" inline-flex items-center gap-2">
                    </span>
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div class="p-4">
  <h3 class="text-lg font-semibold mb-4">Playground</h3>
  <%= render BetterUi::Dialog::AlertComponent.new(
    variant: @variant,
    title: @title,
    text: @text,
    icon: @icon,
    button_label: @button_label,
    size: @size
  ) do |a| %>
    <% a.with_trigger do %>
      <%= render(BetterUi::ButtonComponent.new(variant: @variant.presence || :info)) do %>Show Alert<% end %>
    <% end %>
  <% end %>
</div>

No notes provided.

Param Description Input

—

—

—

—

—

—