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
<div class="p-4">
  <h3 class="text-lg font-semibold mb-4">Tabs with Icons and Badges</h3>
  <div class="bui-tabs" id="tabs-8f4f1225" data-controller="better-ui--tabs--container" data-better-ui--tabs--container-mode-value="js" data-better-ui--tabs--container-persist-value="false" data-better-ui--tabs--container-show-loading-value="false" data-better-ui--tabs--container-loader-delay-value="1000">
    <div role="tablist"
       aria-label="Tabs"
       class="bui-tabs__list flex flex-row justify-start border-b border-grayscale-200 ">
      <button id="tabs-8f4f1225-tab-inbox" class="bui-tabs__tab inline-flex items-center gap-2 font-medium transition-colors duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 px-4 py-2 text-sm border-b-2 border-primary-600 text-primary-600 cursor-pointer" role="tab" aria-selected="true" aria-controls="tabs-8f4f1225-panel-inbox" tabindex="0" data-better-ui--tabs--container-target="tab" data-tab-id="inbox" data-active-classes="border-b-2 border-primary-600 text-primary-600" data-inactive-classes="border-b-2 border-transparent text-grayscale-600 hover:text-grayscale-900 hover:border-grayscale-300" data-action="click->better-ui--tabs--container#selectTab keydown->better-ui--tabs--container#handleKeydown" type="button">
        <span class="bui-tabs__tab-icon">        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4"></path>
          </svg>
        </span>
        <span class="bui-tabs__tab-label">Inbox</span>
        <span class="bui-tabs__tab-badge">        <span class="inline-flex items-center justify-center px-2 py-0.5 text-xs font-medium bg-primary-100 text-primary-800 rounded-full">12</span>
        </span>
      </button>
      <button id="tabs-8f4f1225-tab-sent" class="bui-tabs__tab inline-flex items-center gap-2 font-medium transition-colors duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 px-4 py-2 text-sm border-b-2 border-transparent text-grayscale-600 hover:text-grayscale-900 hover:border-grayscale-300 cursor-pointer" role="tab" aria-selected="false" aria-controls="tabs-8f4f1225-panel-sent" tabindex="-1" data-better-ui--tabs--container-target="tab" data-tab-id="sent" data-active-classes="border-b-2 border-primary-600 text-primary-600" data-inactive-classes="border-b-2 border-transparent text-grayscale-600 hover:text-grayscale-900 hover:border-grayscale-300" data-action="click->better-ui--tabs--container#selectTab keydown->better-ui--tabs--container#handleKeydown" type="button">
        <span class="bui-tabs__tab-icon">        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"></path>
          </svg>
        </span>
        <span class="bui-tabs__tab-label">Sent</span>
      </button>
      <button id="tabs-8f4f1225-tab-drafts" class="bui-tabs__tab inline-flex items-center gap-2 font-medium transition-colors duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 px-4 py-2 text-sm border-b-2 border-transparent text-grayscale-600 hover:text-grayscale-900 hover:border-grayscale-300 cursor-pointer" role="tab" aria-selected="false" aria-controls="tabs-8f4f1225-panel-drafts" tabindex="-1" data-better-ui--tabs--container-target="tab" data-tab-id="drafts" data-active-classes="border-b-2 border-primary-600 text-primary-600" data-inactive-classes="border-b-2 border-transparent text-grayscale-600 hover:text-grayscale-900 hover:border-grayscale-300" data-action="click->better-ui--tabs--container#selectTab keydown->better-ui--tabs--container#handleKeydown" type="button">
        <span class="bui-tabs__tab-icon">        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path>
          </svg>
        </span>
        <span class="bui-tabs__tab-label">Drafts</span>
        <span class="bui-tabs__tab-badge">        <span class="inline-flex items-center justify-center px-2 py-0.5 text-xs font-medium bg-warning-100 text-warning-800 rounded-full">3</span>
        </span>
      </button>
      <button id="tabs-8f4f1225-tab-trash" class="bui-tabs__tab inline-flex items-center gap-2 font-medium transition-colors duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 px-4 py-2 text-sm border-b-2 border-transparent text-grayscale-600 hover:text-grayscale-900 hover:border-grayscale-300 cursor-pointer" role="tab" aria-selected="false" aria-controls="tabs-8f4f1225-panel-trash" tabindex="-1" data-better-ui--tabs--container-target="tab" data-tab-id="trash" data-active-classes="border-b-2 border-primary-600 text-primary-600" data-inactive-classes="border-b-2 border-transparent text-grayscale-600 hover:text-grayscale-900 hover:border-grayscale-300" data-action="click->better-ui--tabs--container#selectTab keydown->better-ui--tabs--container#handleKeydown" type="button">
        <span class="bui-tabs__tab-icon">        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path>
          </svg>
        </span>
        <span class="bui-tabs__tab-label">Trash</span>
      </button>
    </div>
    <div class="bui-tabs__panels flex-1 ">
      <div id="tabs-8f4f1225-panel-inbox" class="bui-tabs__panel" role="tabpanel" aria-labelledby="tabs-8f4f1225-tab-inbox" tabindex="0" data-better-ui--tabs--container-target="panel" data-panel-id="inbox">
        <div class="p-4">
          <h4 class="font-medium mb-2">Inbox</h4>
          <p class="text-grayscale-600">You have 12 unread messages.</p>
        </div>
      </div>
      <div id="tabs-8f4f1225-panel-sent" class="bui-tabs__panel hidden" role="tabpanel" aria-labelledby="tabs-8f4f1225-tab-sent" tabindex="0" data-better-ui--tabs--container-target="panel" data-panel-id="sent">
        <div class="p-4">
          <h4 class="font-medium mb-2">Sent Messages</h4>
          <p class="text-grayscale-600">View your sent messages.</p>
        </div>
      </div>
      <div id="tabs-8f4f1225-panel-drafts" class="bui-tabs__panel hidden" role="tabpanel" aria-labelledby="tabs-8f4f1225-tab-drafts" tabindex="0" data-better-ui--tabs--container-target="panel" data-panel-id="drafts">
        <div class="p-4">
          <h4 class="font-medium mb-2">Drafts</h4>
          <p class="text-grayscale-600">You have 3 draft messages.</p>
        </div>
      </div>
      <div id="tabs-8f4f1225-panel-trash" class="bui-tabs__panel hidden" role="tabpanel" aria-labelledby="tabs-8f4f1225-tab-trash" tabindex="0" data-better-ui--tabs--container-target="panel" data-panel-id="trash">
        <div class="p-4">
          <h4 class="font-medium mb-2">Trash</h4>
          <p class="text-grayscale-600">Deleted messages appear here.</p>
        </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
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
<div class="p-4">
  <h3 class="text-lg font-semibold mb-4">Tabs with Icons and Badges</h3>
  <%= render BetterUi::Tabs::ContainerComponent.new(mode: :js, style: :underline) do |tabs| %>
    <% tabs.with_tab(id: "inbox", label: "Inbox", active: true) do |tab| %>
      <% tab.with_icon do %>
        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4"></path>
        </svg>
      <% end %>
      <% tab.with_badge do %>
        <span class="inline-flex items-center justify-center px-2 py-0.5 text-xs font-medium bg-primary-100 text-primary-800 rounded-full">12</span>
      <% end %>
    <% end %>
    <% tabs.with_tab(id: "sent", label: "Sent") do |tab| %>
      <% tab.with_icon do %>
        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"></path>
        </svg>
      <% end %>
    <% end %>
    <% tabs.with_tab(id: "drafts", label: "Drafts") do |tab| %>
      <% tab.with_icon do %>
        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path>
        </svg>
      <% end %>
      <% tab.with_badge do %>
        <span class="inline-flex items-center justify-center px-2 py-0.5 text-xs font-medium bg-warning-100 text-warning-800 rounded-full">3</span>
      <% end %>
    <% end %>
    <% tabs.with_tab(id: "trash", label: "Trash") do |tab| %>
      <% tab.with_icon do %>
        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path>
        </svg>
      <% end %>
    <% end %>
    <% tabs.with_panel(id: "inbox", active: true) do %>
      <div class="p-4">
        <h4 class="font-medium mb-2">Inbox</h4>
        <p class="text-grayscale-600">You have 12 unread messages.</p>
      </div>
    <% end %>
    <% tabs.with_panel(id: "sent") do %>
      <div class="p-4">
        <h4 class="font-medium mb-2">Sent Messages</h4>
        <p class="text-grayscale-600">View your sent messages.</p>
      </div>
    <% end %>
    <% tabs.with_panel(id: "drafts") do %>
      <div class="p-4">
        <h4 class="font-medium mb-2">Drafts</h4>
        <p class="text-grayscale-600">You have 3 draft messages.</p>
      </div>
    <% end %>
    <% tabs.with_panel(id: "trash") do %>
      <div class="p-4">
        <h4 class="font-medium mb-2">Trash</h4>
        <p class="text-grayscale-600">Deleted messages appear here.</p>
      </div>
    <% end %>
  <% end %>
</div>

No notes provided.

No params configured.