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">Underline Style (Default)</h3>
  <div class="bui-tabs" id="tabs-e47502a2" 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-e47502a2-tab-profile" 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-e47502a2-panel-profile" tabindex="0" data-better-ui--tabs--container-target="tab" data-tab-id="profile" 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-label">Profile</span>
      </button>
      <button id="tabs-e47502a2-tab-account" 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-e47502a2-panel-account" tabindex="-1" data-better-ui--tabs--container-target="tab" data-tab-id="account" 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-label">Account</span>
      </button>
      <button id="tabs-e47502a2-tab-notifications" 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-e47502a2-panel-notifications" tabindex="-1" data-better-ui--tabs--container-target="tab" data-tab-id="notifications" 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-label">Notifications</span>
      </button>
    </div>
    <div class="bui-tabs__panels flex-1 ">
      <div id="tabs-e47502a2-panel-profile" class="bui-tabs__panel" role="tabpanel" aria-labelledby="tabs-e47502a2-tab-profile" tabindex="0" data-better-ui--tabs--container-target="panel" data-panel-id="profile">
        <div class="p-4">
          <h4 class="font-medium mb-2">Profile Settings</h4>
          <p class="text-grayscale-600">Manage your profile information and preferences.</p>
        </div>
      </div>
      <div id="tabs-e47502a2-panel-account" class="bui-tabs__panel hidden" role="tabpanel" aria-labelledby="tabs-e47502a2-tab-account" tabindex="0" data-better-ui--tabs--container-target="panel" data-panel-id="account">
        <div class="p-4">
          <h4 class="font-medium mb-2">Account Settings</h4>
          <p class="text-grayscale-600">Update your account details and security settings.</p>
        </div>
      </div>
      <div id="tabs-e47502a2-panel-notifications" class="bui-tabs__panel hidden" role="tabpanel" aria-labelledby="tabs-e47502a2-tab-notifications" tabindex="0" data-better-ui--tabs--container-target="panel" data-panel-id="notifications">
        <div class="p-4">
          <h4 class="font-medium mb-2">Notification Preferences</h4>
          <p class="text-grayscale-600">Choose how you want to receive notifications.</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">Underline Style (Default)</h3>
  <%= render BetterUi::Tabs::ContainerComponent.new(mode: :js, style: :underline) do |tabs| %>
    <% tabs.with_tab(id: "profile", label: "Profile", active: true) %>
    <% tabs.with_tab(id: "account", label: "Account") %>
    <% tabs.with_tab(id: "notifications", label: "Notifications") %>
    <% tabs.with_panel(id: "profile", active: true) do %>
      <div class="p-4">
        <h4 class="font-medium mb-2">Profile Settings</h4>
        <p class="text-grayscale-600">Manage your profile information and preferences.</p>
      </div>
    <% end %>
    <% tabs.with_panel(id: "account") do %>
      <div class="p-4">
        <h4 class="font-medium mb-2">Account Settings</h4>
        <p class="text-grayscale-600">Update your account details and security settings.</p>
      </div>
    <% end %>
    <% tabs.with_panel(id: "notifications") do %>
      <div class="p-4">
        <h4 class="font-medium mb-2">Notification Preferences</h4>
        <p class="text-grayscale-600">Choose how you want to receive notifications.</p>
      </div>
    <% end %>
  <% end %>
</div>

No notes provided.

No params configured.