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
<div class="p-4">
  <h3 class="text-lg font-semibold mb-4">Vertical Tabs (Right Position)</h3>
  <div class="bui-tabs flex" id="tabs-96a766ab" 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-col justify-start gap-1 order-2">
      <button id="tabs-96a766ab-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-96a766ab-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" type="button">
        <span class="bui-tabs__tab-label">Overview</span>
      </button>
      <button id="tabs-96a766ab-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-96a766ab-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" type="button">
        <span class="bui-tabs__tab-label">Analytics</span>
      </button>
      <button id="tabs-96a766ab-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-96a766ab-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" type="button">
        <span class="bui-tabs__tab-label">Reports</span>
      </button>
    </div>
    <div class="bui-tabs__panels flex-1 order-1">
      <div id="tabs-96a766ab-panel-overview" class="bui-tabs__panel" role="tabpanel" aria-labelledby="tabs-96a766ab-tab-overview" tabindex="0" data-better-ui--tabs--container-target="panel" data-panel-id="overview">
        <div class="p-4">
          <h4 class="font-medium mb-2">Dashboard Overview</h4>
          <p class="text-grayscale-600">View your dashboard metrics and key performance indicators.</p>
        </div>
      </div>
      <div id="tabs-96a766ab-panel-analytics" class="bui-tabs__panel hidden" role="tabpanel" aria-labelledby="tabs-96a766ab-tab-analytics" tabindex="0" data-better-ui--tabs--container-target="panel" data-panel-id="analytics">
        <div class="p-4">
          <h4 class="font-medium mb-2">Analytics Dashboard</h4>
          <p class="text-grayscale-600">Dive deep into your analytics data and trends.</p>
        </div>
      </div>
      <div id="tabs-96a766ab-panel-reports" class="bui-tabs__panel hidden" role="tabpanel" aria-labelledby="tabs-96a766ab-tab-reports" tabindex="0" data-better-ui--tabs--container-target="panel" data-panel-id="reports">
        <div class="p-4">
          <h4 class="font-medium mb-2">Reports</h4>
          <p class="text-grayscale-600">Generate and download custom reports.</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
<div class="p-4">
  <h3 class="text-lg font-semibold mb-4">Vertical Tabs (Right Position)</h3>
  <%= render BetterUi::Tabs::ContainerComponent.new(mode: :js, style: :pills, position: :right, variant: :accent) do |tabs| %>
    <% tabs.with_tab(id: "overview", label: "Overview", active: true) %>
    <% tabs.with_tab(id: "analytics", label: "Analytics") %>
    <% tabs.with_tab(id: "reports", label: "Reports") %>
    <% tabs.with_panel(id: "overview", active: true) do %>
      <div class="p-4">
        <h4 class="font-medium mb-2">Dashboard Overview</h4>
        <p class="text-grayscale-600">View your dashboard metrics and key performance indicators.</p>
      </div>
    <% end %>
    <% tabs.with_panel(id: "analytics") do %>
      <div class="p-4">
        <h4 class="font-medium mb-2">Analytics Dashboard</h4>
        <p class="text-grayscale-600">Dive deep into your analytics data and trends.</p>
      </div>
    <% end %>
    <% tabs.with_panel(id: "reports") do %>
      <div class="p-4">
        <h4 class="font-medium mb-2">Reports</h4>
        <p class="text-grayscale-600">Generate and download custom reports.</p>
      </div>
    <% end %>
  <% end %>
</div>

No notes provided.

No params configured.