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
<div class="p-4">
  <h3 class="text-lg font-semibold mb-4">Turbo Mode Example</h3>
  <div class="mb-4 p-4 bg-info-50 border border-info-200 rounded-lg">
    <p class="text-sm text-info-800">
      <strong>Note:</strong> Turbo mode tabs use anchor tags that navigate via Turbo Frames.
      This example shows the HTML structure. In a real application, clicking tabs would
      load content from the server into the turbo-frame.
    </p>
  </div>
  <div class="bui-tabs" id="tabs-bef5d9eb" data-controller="better-ui--tabs--container" data-better-ui--tabs--container-mode-value="turbo" data-better-ui--tabs--container-persist-value="false" data-better-ui--tabs--container-frame-id-value="tab-content" data-better-ui--tabs--container-show-loading-value="true" 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 ">
      <a id="tabs-bef5d9eb-tab-dashboard" 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-bef5d9eb-panel-dashboard" tabindex="0" data-better-ui--tabs--container-target="tab" data-tab-id="dashboard" 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" href="#dashboard" data-turbo-frame="tab-content">
        <span class="bui-tabs__tab-label">Dashboard</span>
      </a>
      <a id="tabs-bef5d9eb-tab-users" 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-bef5d9eb-panel-users" tabindex="-1" data-better-ui--tabs--container-target="tab" data-tab-id="users" 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" href="#users" data-turbo-frame="tab-content">
        <span class="bui-tabs__tab-label">Users</span>
      </a>
      <a id="tabs-bef5d9eb-tab-settings" 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-bef5d9eb-panel-settings" tabindex="-1" data-better-ui--tabs--container-target="tab" data-tab-id="settings" 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" href="#settings" data-turbo-frame="tab-content">
        <span class="bui-tabs__tab-label">Settings</span>
      </a>
    </div>
    <div data-better-ui--tabs--container-target="loader"
         class="hidden fixed inset-0 z-50 pointer-events-none"
         aria-hidden="true"
         aria-live="polite">
      <div class="absolute bg-white/80 dark:bg-grayscale-900/80 flex items-center justify-center"
             data-better-ui--tabs--container-target="loaderOverlay">
        <svg class="animate-spin h-8 w-8 text-primary-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
          <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">Caricamento...</span>
      </div>
    </div>
  </div>
  <turbo-frame id="tab-content" class="block p-4 border border-grayscale-200 rounded-b-lg mt-0">
    <div class="text-grayscale-600">
      <p>This is a <code class="bg-grayscale-100 px-1 rounded">turbo-frame</code> element.</p>
      <p class="mt-2">In Turbo mode, clicking a tab navigates to the href and the response is rendered inside this frame.</p>
    </div>
  </turbo-frame>
  <div class="mt-8">
    <h4 class="text-md font-semibold mb-4">Pills Style Turbo Mode</h4>
    <div class="bui-tabs" id="tabs-05d5f609" data-controller="better-ui--tabs--container" data-better-ui--tabs--container-mode-value="turbo" data-better-ui--tabs--container-persist-value="false" data-better-ui--tabs--container-frame-id-value="pills-content" data-better-ui--tabs--container-show-loading-value="true" data-better-ui--tabs--container-loader-delay-value="1000">
      <div role="tablist"
       aria-label="Tabs"
       class="bui-tabs__list flex flex-row justify-start gap-1 ">
        <a id="tabs-05d5f609-tab-overview" 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 rounded-lg bg-accent-600 text-white cursor-pointer" role="tab" aria-selected="true" aria-controls="tabs-05d5f609-panel-overview" tabindex="0" data-better-ui--tabs--container-target="tab" data-tab-id="overview" data-active-classes="rounded-lg bg-accent-600 text-white" data-inactive-classes="rounded-lg text-grayscale-600 hover:text-grayscale-900 hover:bg-grayscale-100" data-action="click->better-ui--tabs--container#selectTab keydown->better-ui--tabs--container#handleKeydown" href="#overview" data-turbo-frame="pills-content">
          <span class="bui-tabs__tab-label">Overview</span>
        </a>
        <a id="tabs-05d5f609-tab-analytics" 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 rounded-lg text-grayscale-600 hover:text-grayscale-900 hover:bg-grayscale-100 cursor-pointer" role="tab" aria-selected="false" aria-controls="tabs-05d5f609-panel-analytics" tabindex="-1" data-better-ui--tabs--container-target="tab" data-tab-id="analytics" data-active-classes="rounded-lg bg-accent-600 text-white" data-inactive-classes="rounded-lg text-grayscale-600 hover:text-grayscale-900 hover:bg-grayscale-100" data-action="click->better-ui--tabs--container#selectTab keydown->better-ui--tabs--container#handleKeydown" href="#analytics" data-turbo-frame="pills-content">
          <span class="bui-tabs__tab-label">Analytics</span>
        </a>
        <a id="tabs-05d5f609-tab-reports" 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 rounded-lg text-grayscale-600 hover:text-grayscale-900 hover:bg-grayscale-100 cursor-pointer" role="tab" aria-selected="false" aria-controls="tabs-05d5f609-panel-reports" tabindex="-1" data-better-ui--tabs--container-target="tab" data-tab-id="reports" data-active-classes="rounded-lg bg-accent-600 text-white" data-inactive-classes="rounded-lg text-grayscale-600 hover:text-grayscale-900 hover:bg-grayscale-100" data-action="click->better-ui--tabs--container#selectTab keydown->better-ui--tabs--container#handleKeydown" href="#reports" data-turbo-frame="pills-content">
          <span class="bui-tabs__tab-label">Reports</span>
        </a>
      </div>
      <div data-better-ui--tabs--container-target="loader"
         class="hidden fixed inset-0 z-50 pointer-events-none"
         aria-hidden="true"
         aria-live="polite">
        <div class="absolute bg-white/80 dark:bg-grayscale-900/80 flex items-center justify-center"
             data-better-ui--tabs--container-target="loaderOverlay">
          <svg class="animate-spin h-8 w-8 text-accent-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
            <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">Caricamento...</span>
        </div>
      </div>
    </div>
    <turbo-frame id="pills-content" class="block p-4 mt-4">
      <div class="text-grayscale-600">
        <p>Content loaded via Turbo Frame.</p>
      </div>
    </turbo-frame>
  </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
<div class="p-4">
  <h3 class="text-lg font-semibold mb-4">Turbo Mode Example</h3>
  <div class="mb-4 p-4 bg-info-50 border border-info-200 rounded-lg">
    <p class="text-sm text-info-800">
      <strong>Note:</strong> Turbo mode tabs use anchor tags that navigate via Turbo Frames.
      This example shows the HTML structure. In a real application, clicking tabs would
      load content from the server into the turbo-frame.
    </p>
  </div>
  <%= render BetterUi::Tabs::ContainerComponent.new(mode: :turbo, frame_id: "tab-content", style: :underline) do |tabs| %>
    <% tabs.with_tab(id: "dashboard", label: "Dashboard", href: "#dashboard", active: true) %>
    <% tabs.with_tab(id: "users", label: "Users", href: "#users") %>
    <% tabs.with_tab(id: "settings", label: "Settings", href: "#settings") %>
  <% end %>
  <turbo-frame id="tab-content" class="block p-4 border border-grayscale-200 rounded-b-lg mt-0">
    <div class="text-grayscale-600">
      <p>This is a <code class="bg-grayscale-100 px-1 rounded">turbo-frame</code> element.</p>
      <p class="mt-2">In Turbo mode, clicking a tab navigates to the href and the response is rendered inside this frame.</p>
    </div>
  </turbo-frame>
  <div class="mt-8">
    <h4 class="text-md font-semibold mb-4">Pills Style Turbo Mode</h4>
    <%= render BetterUi::Tabs::ContainerComponent.new(mode: :turbo, frame_id: "pills-content", style: :pills, variant: :accent) do |tabs| %>
      <% tabs.with_tab(id: "overview", label: "Overview", href: "#overview", active: true) %>
      <% tabs.with_tab(id: "analytics", label: "Analytics", href: "#analytics") %>
      <% tabs.with_tab(id: "reports", label: "Reports", href: "#reports") %>
    <% end %>
    <turbo-frame id="pills-content" class="block p-4 mt-4">
      <div class="text-grayscale-600">
        <p>Content loaded via Turbo Frame.</p>
      </div>
    </turbo-frame>
  </div>
</div>

No notes provided.

No params configured.