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
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
<div class="p-4"> <h3 class="text-lg font-semibold mb-4">Playground</h3> <div id="dialog-115624" data-controller="better-ui--dialog--dialog" data-better-ui--dialog--dialog-open-value="false"> <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-primary-500 bg-primary-600 hover:bg-primary-700 active:bg-primary-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"> Open Dialog </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-md" 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 border-b border-grayscale-200"> <h3 class="text-lg font-semibold text-grayscale-900">Dialog Title</h3> </div> <div class="p-6"> <p class="text-grayscale-600">This is the dialog body content. You can put any content here.</p> </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-secondary-500 bg-transparent border-2 border-secondary-600 hover:border-secondary-700 hover:bg-secondary-50 text-secondary-600 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"> Cancel </span> </button> <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-primary-500 bg-primary-600 hover:bg-primary-700 active:bg-primary-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"> Save Changes </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
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<div class="p-4"> <h3 class="text-lg font-semibold mb-4">Playground</h3> <%= render BetterUi::Dialog::DialogComponent.new( size: @size, close_on_backdrop: @close_on_backdrop, close_on_escape: @close_on_escape, show_close_button: @show_close_button ) do |d| %> <% d.with_trigger do %> <%= render(BetterUi::ButtonComponent.new(variant: :primary)) do %>Open Dialog<% end %> <% end %> <%= render BetterUi::CardComponent.new(style: :bordered, shadow: true, size: :md) do |card| %> <% card.with_header do %> <h3 class="text-lg font-semibold text-grayscale-900">Dialog Title</h3> <% end %> <% card.with_body do %> <p class="text-grayscale-600">This is the dialog body content. You can put any content here.</p> <% end %> <% card.with_footer do %> <div class="flex flex-col-reverse sm:flex-row sm:justify-end gap-3"> <%= render(BetterUi::ButtonComponent.new( variant: :secondary, style: :outline, data: { action: "click->better-ui--dialog--dialog#close" } )) do %>Cancel<% end %> <%= render(BetterUi::ButtonComponent.new( variant: :primary, style: :solid, data: { action: "click->better-ui--dialog--dialog#close" } )) do %>Save Changes<% end %> </div> <% end %> <% end %> <% end %></div>No notes provided.
| Param | Description | Input |
|---|---|---|
|
— |
|
|
|
— |
|
|
|
— |
|
|
|
— |
|