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
<div class="bui-tabs" id="tabs-b911f2fc" 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-b911f2fc-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 border-b-2 border-primary-600 text-primary-600 cursor-pointer" role="tab" aria-selected="true" aria-controls="tabs-b911f2fc-panel-overview" tabindex="0" data-better-ui--tabs--container-target="tab" data-tab-id="overview" 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">Overview</span>
    </button>
    <button id="tabs-b911f2fc-tab-features" 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-b911f2fc-panel-features" tabindex="-1" data-better-ui--tabs--container-target="tab" data-tab-id="features" 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">Features</span>
    </button>
    <button id="tabs-b911f2fc-tab-pricing" 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-b911f2fc-panel-pricing" tabindex="-1" data-better-ui--tabs--container-target="tab" data-tab-id="pricing" 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">Pricing</span>
    </button>
  </div>
  <div class="bui-tabs__panels flex-1 ">
    <div id="tabs-b911f2fc-panel-overview" class="bui-tabs__panel" role="tabpanel" aria-labelledby="tabs-b911f2fc-tab-overview" tabindex="0" data-better-ui--tabs--container-target="panel" data-panel-id="overview">
      <div class='p-4'>
        <h3 class='text-lg font-semibold mb-2'>Overview</h3>
        <p class='text-grayscale-600'>This is the overview panel content. Customize the tabs using the controls above.</p>
      </div>
    </div>
    <div id="tabs-b911f2fc-panel-features" class="bui-tabs__panel hidden" role="tabpanel" aria-labelledby="tabs-b911f2fc-tab-features" tabindex="0" data-better-ui--tabs--container-target="panel" data-panel-id="features">
      <div class='p-4'>
        <h3 class='text-lg font-semibold mb-2'>Features</h3>
        <ul class='list-disc list-inside text-grayscale-600'>
          <li>Multiple styles: underline, pills, bordered</li>
          <li>9 color variants</li>
          <li>5 size options</li>
          <li>Vertical and horizontal layouts</li>
        </ul>
      </div>
    </div>
    <div id="tabs-b911f2fc-panel-pricing" class="bui-tabs__panel hidden" role="tabpanel" aria-labelledby="tabs-b911f2fc-tab-pricing" tabindex="0" data-better-ui--tabs--container-target="panel" data-panel-id="pricing">
      <div class='p-4'>
        <h3 class='text-lg font-semibold mb-2'>Pricing</h3>
        <p class='text-grayscale-600'>Contact us for pricing information.</p>
      </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
render BetterUi::Tabs::ContainerComponent.new(
  mode: mode.to_sym,
  style: style.to_sym,
  variant: variant.to_sym,
  size: size.to_sym,
  alignment: alignment.to_sym,
  position: position.to_sym
) do |tabs|
  tabs.with_tab(id: "overview", label: "Overview", active: true)
  tabs.with_tab(id: "features", label: "Features")
  tabs.with_tab(id: "pricing", label: "Pricing")
  tabs.with_panel(id: "overview", active: true) do
    "<div class='p-4'>
      <h3 class='text-lg font-semibold mb-2'>Overview</h3>
      <p class='text-grayscale-600'>This is the overview panel content. Customize the tabs using the controls above.</p>
    </div>".html_safe
  end
  tabs.with_panel(id: "features") do
    "<div class='p-4'>
      <h3 class='text-lg font-semibold mb-2'>Features</h3>
      <ul class='list-disc list-inside text-grayscale-600'>
        <li>Multiple styles: underline, pills, bordered</li>
        <li>9 color variants</li>
        <li>5 size options</li>
        <li>Vertical and horizontal layouts</li>
      </ul>
    </div>".html_safe
  end
  tabs.with_panel(id: "pricing") do
    "<div class='p-4'>
      <h3 class='text-lg font-semibold mb-2'>Pricing</h3>
      <p class='text-grayscale-600'>Contact us for pricing information.</p>
    </div>".html_safe
  end
end

No notes provided.

Param Description Input

—

—

—

—

—

—