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
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
<div class="p-8">
  <h3 class="text-lg font-semibold mb-4">Placement Options</h3>
  <div class="flex flex-wrap gap-8 items-center justify-center" style="min-height: 300px;">
    <div class="relative inline-block" data-controller="better-ui--dropdown--dropdown" data-better-ui--dropdown--dropdown-auto-close-value="true" data-better-ui--dropdown--dropdown-close-on-item-click-value="true">
      <div aria-haspopup="true"
         aria-expanded="false"
         data-action="click->better-ui--dropdown--dropdown#toggle"
        data-better-ui--dropdown--dropdown-target="trigger">
        <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-transparent border-2 border-info-600 hover:border-info-700 hover:bg-info-50 text-info-600 px-3 py-1.5 text-sm gap-1.5 cursor-pointer">
          <span data-better-ui--button-target="spinner" class="hidden">
            <svg class="animate-spin w-4 h-4" 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-1.5">
            bottom_start
          </span>
        </button>
      </div>
      <div role="menu"
       hidden
       data-better-ui--dropdown--dropdown-target="menu"
       class="absolute z-50 bg-white rounded-md ring-1 ring-grayscale-200 ring-opacity-5 py-1 overflow-hidden focus:outline-none transition-all duration-150 ease-out opacity-0 scale-95 w-56 top-full left-0 mt-1 shadow-lg">
        <a role="menuitem" tabindex="-1" class="flex items-center gap-2 w-full text-left px-3 py-2 text-sm transition-colors duration-150 text-grayscale-700 hover:bg-grayscale-100 hover:text-grayscale-900 cursor-pointer" data-better-ui--dropdown--dropdown-target="item" href="#">
          <span class="flex-1">Action One</span>
        </a>
        <a role="menuitem" tabindex="-1" class="flex items-center gap-2 w-full text-left px-3 py-2 text-sm transition-colors duration-150 text-grayscale-700 hover:bg-grayscale-100 hover:text-grayscale-900 cursor-pointer" data-better-ui--dropdown--dropdown-target="item" href="#">
          <span class="flex-1">Action Two</span>
        </a>
        <a role="menuitem" tabindex="-1" class="flex items-center gap-2 w-full text-left px-3 py-2 text-sm transition-colors duration-150 text-grayscale-700 hover:bg-grayscale-100 hover:text-grayscale-900 cursor-pointer" data-better-ui--dropdown--dropdown-target="item" href="#">
          <span class="flex-1">Action Three</span>
        </a>
      </div>
    </div>
      
    <div class="relative inline-block" data-controller="better-ui--dropdown--dropdown" data-better-ui--dropdown--dropdown-auto-close-value="true" data-better-ui--dropdown--dropdown-close-on-item-click-value="true">
      <div aria-haspopup="true"
         aria-expanded="false"
         data-action="click->better-ui--dropdown--dropdown#toggle"
        data-better-ui--dropdown--dropdown-target="trigger">
        <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-transparent border-2 border-info-600 hover:border-info-700 hover:bg-info-50 text-info-600 px-3 py-1.5 text-sm gap-1.5 cursor-pointer">
          <span data-better-ui--button-target="spinner" class="hidden">
            <svg class="animate-spin w-4 h-4" 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-1.5">
            bottom_end
          </span>
        </button>
      </div>
      <div role="menu"
       hidden
       data-better-ui--dropdown--dropdown-target="menu"
       class="absolute z-50 bg-white rounded-md ring-1 ring-grayscale-200 ring-opacity-5 py-1 overflow-hidden focus:outline-none transition-all duration-150 ease-out opacity-0 scale-95 w-56 top-full right-0 mt-1 shadow-lg">
        <a role="menuitem" tabindex="-1" class="flex items-center gap-2 w-full text-left px-3 py-2 text-sm transition-colors duration-150 text-grayscale-700 hover:bg-grayscale-100 hover:text-grayscale-900 cursor-pointer" data-better-ui--dropdown--dropdown-target="item" href="#">
          <span class="flex-1">Action One</span>
        </a>
        <a role="menuitem" tabindex="-1" class="flex items-center gap-2 w-full text-left px-3 py-2 text-sm transition-colors duration-150 text-grayscale-700 hover:bg-grayscale-100 hover:text-grayscale-900 cursor-pointer" data-better-ui--dropdown--dropdown-target="item" href="#">
          <span class="flex-1">Action Two</span>
        </a>
        <a role="menuitem" tabindex="-1" class="flex items-center gap-2 w-full text-left px-3 py-2 text-sm transition-colors duration-150 text-grayscale-700 hover:bg-grayscale-100 hover:text-grayscale-900 cursor-pointer" data-better-ui--dropdown--dropdown-target="item" href="#">
          <span class="flex-1">Action Three</span>
        </a>
      </div>
    </div>
      
    <div class="relative inline-block" data-controller="better-ui--dropdown--dropdown" data-better-ui--dropdown--dropdown-auto-close-value="true" data-better-ui--dropdown--dropdown-close-on-item-click-value="true">
      <div aria-haspopup="true"
         aria-expanded="false"
         data-action="click->better-ui--dropdown--dropdown#toggle"
        data-better-ui--dropdown--dropdown-target="trigger">
        <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-transparent border-2 border-info-600 hover:border-info-700 hover:bg-info-50 text-info-600 px-3 py-1.5 text-sm gap-1.5 cursor-pointer">
          <span data-better-ui--button-target="spinner" class="hidden">
            <svg class="animate-spin w-4 h-4" 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-1.5">
            top_start
          </span>
        </button>
      </div>
      <div role="menu"
       hidden
       data-better-ui--dropdown--dropdown-target="menu"
       class="absolute z-50 bg-white rounded-md ring-1 ring-grayscale-200 ring-opacity-5 py-1 overflow-hidden focus:outline-none transition-all duration-150 ease-out opacity-0 scale-95 w-56 bottom-full left-0 mb-1 shadow-lg">
        <a role="menuitem" tabindex="-1" class="flex items-center gap-2 w-full text-left px-3 py-2 text-sm transition-colors duration-150 text-grayscale-700 hover:bg-grayscale-100 hover:text-grayscale-900 cursor-pointer" data-better-ui--dropdown--dropdown-target="item" href="#">
          <span class="flex-1">Action One</span>
        </a>
        <a role="menuitem" tabindex="-1" class="flex items-center gap-2 w-full text-left px-3 py-2 text-sm transition-colors duration-150 text-grayscale-700 hover:bg-grayscale-100 hover:text-grayscale-900 cursor-pointer" data-better-ui--dropdown--dropdown-target="item" href="#">
          <span class="flex-1">Action Two</span>
        </a>
        <a role="menuitem" tabindex="-1" class="flex items-center gap-2 w-full text-left px-3 py-2 text-sm transition-colors duration-150 text-grayscale-700 hover:bg-grayscale-100 hover:text-grayscale-900 cursor-pointer" data-better-ui--dropdown--dropdown-target="item" href="#">
          <span class="flex-1">Action Three</span>
        </a>
      </div>
    </div>
      
    <div class="relative inline-block" data-controller="better-ui--dropdown--dropdown" data-better-ui--dropdown--dropdown-auto-close-value="true" data-better-ui--dropdown--dropdown-close-on-item-click-value="true">
      <div aria-haspopup="true"
         aria-expanded="false"
         data-action="click->better-ui--dropdown--dropdown#toggle"
        data-better-ui--dropdown--dropdown-target="trigger">
        <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-transparent border-2 border-info-600 hover:border-info-700 hover:bg-info-50 text-info-600 px-3 py-1.5 text-sm gap-1.5 cursor-pointer">
          <span data-better-ui--button-target="spinner" class="hidden">
            <svg class="animate-spin w-4 h-4" 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-1.5">
            top_end
          </span>
        </button>
      </div>
      <div role="menu"
       hidden
       data-better-ui--dropdown--dropdown-target="menu"
       class="absolute z-50 bg-white rounded-md ring-1 ring-grayscale-200 ring-opacity-5 py-1 overflow-hidden focus:outline-none transition-all duration-150 ease-out opacity-0 scale-95 w-56 bottom-full right-0 mb-1 shadow-lg">
        <a role="menuitem" tabindex="-1" class="flex items-center gap-2 w-full text-left px-3 py-2 text-sm transition-colors duration-150 text-grayscale-700 hover:bg-grayscale-100 hover:text-grayscale-900 cursor-pointer" data-better-ui--dropdown--dropdown-target="item" href="#">
          <span class="flex-1">Action One</span>
        </a>
        <a role="menuitem" tabindex="-1" class="flex items-center gap-2 w-full text-left px-3 py-2 text-sm transition-colors duration-150 text-grayscale-700 hover:bg-grayscale-100 hover:text-grayscale-900 cursor-pointer" data-better-ui--dropdown--dropdown-target="item" href="#">
          <span class="flex-1">Action Two</span>
        </a>
        <a role="menuitem" tabindex="-1" class="flex items-center gap-2 w-full text-left px-3 py-2 text-sm transition-colors duration-150 text-grayscale-700 hover:bg-grayscale-100 hover:text-grayscale-900 cursor-pointer" data-better-ui--dropdown--dropdown-target="item" href="#">
          <span class="flex-1">Action Three</span>
        </a>
      </div>
    </div>
  </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div class="p-8">
  <h3 class="text-lg font-semibold mb-4">Placement Options</h3>
  <div class="flex flex-wrap gap-8 items-center justify-center" style="min-height: 300px;">
    <% [:bottom_start, :bottom_end, :top_start, :top_end].each do |placement| %>
      <%= render BetterUi::Dropdown::DropdownComponent.new(placement: placement) do |d| %>
        <% d.with_trigger do %>
          <%= render(BetterUi::ButtonComponent.new(variant: :info, style: :outline, size: :sm)) do %><%= placement %><% end %>
        <% end %>
        <% d.with_item(href: "#") { "Action One" } %>
        <% d.with_item(href: "#") { "Action Two" } %>
        <% d.with_item(href: "#") { "Action Three" } %>
      <% end %>
    <% end %>
  </div>
</div>

No notes provided.

No params configured.