Tab Group(ui_tab_group)Bootstrap Logo

UiBibz::Ui::Core::Navigations::TabGroup

Navigation by tabs.

Usage

This component is an extension of component element. A Ui Bibz component consists of 3 arguments:
  • content[value/block]
  • html_options[hash]<default: {}>
  • options[hash]<default: {}>

ui_tab_group options, html_options do |n|
  # by variable
  n.tab content, options, html_options
  # or by block
  n.tab options, html_options do
    content
  end

  n.dropdown name, options, html_options do |d|
    d.link content, options, html_options
  end
end

Options

The specific options for this component are:
  • action[string](use component stimulus-options method)
  • cache[string](use to cache your component)
  • controller[string](use component stimulus-options method)
  • position[symbol](:left, :center, :right)
  • tag_type[symbol](:a, :span)
  • target[string](use component stimulus-options method)
  • turbo[string](use component turbo method)

Items

The allowed items for this component are:
  • dropdown(inherit of dropdown)
  • html[html/string]Insert html as a component
  • tab(inherit of link)

Examples

Some examples explain how to use the options present in the component.

Tab group

ui_tab_group do |n|
  n.tab "Active", url: "#active", state: :active
  n.tab url: "#link", class: "my-link" do
    Link
  end
  n.tab "Disabled", url: "#disabled", state: :disabled
  n.dropdown "Dropdown" do |d|
    d.link "Action 1", url: "#action"
    d.link url: "#another-action" do
      "Action 2"
    end
    d.link({ url: "#separate-link"}, { class: "my-link"}) do
      "Action 3"
    end
  end
end

<ul class="nav nav-tabs">
  <li class="active nav-item">
    <a class="nav-link" href="#active">Active</a>
  </li>
  <li class="my-link nav-item">
    <a class="my-link nav-link" href="#link">Link</a>
  </li>
  <li class="disabled nav-item">
    <a class="disabled nav-link" href="#disabled">Disabled</a>
  </li>
  <li class="dropdown nav-item">
    <a class="dropdown-toggle nav-link active" data-bs-toggle="dropdown" aria-expanded="false" href="#">Dropdown <span class="caret"></span></a>
    <div class="dropdown-menu" arial-labelledby="dropdown-108193369083803761755352021749111359676" x-placement="bottom-start" style="position: absolute; transform: translate3d(0px, 42px, 0px); top: 0px; left: 0px; will-change: transform;">
      <a class="dropdown-item" href="#action">Action 1</a>
      <a class="dropdown-item" href="#another-action">Action 2</a>
      <a class="my-link dropdown-item" href="#separate-link">Action 3</a>
    </div>
  </li>
</ul>

Position




ui_tab_group position: :left do |n|
  n.tab "Active", url: "#active", state: :active
  n.tab "Another link", url: "#another-link"
  n.tab "Disabled", url: "#disabled", state: :disabled
end

ui_tab_group position: :center do |n|
  n.tab "Active", url: "#active", state: :active
  n.tab "Another link", url: "#another-link"
  n.tab "Disabled", url: "#disabled", state: :disabled
end

ui_tab_group position: :right do |n|
  n.tab "Active", url: "#active", state: :active
  n.tab "Another link", url: "#another-link"
  n.tab "Disabled", url: "#disabled", state: :disabled
end


<nav class="nav nav-links justify-content-end">
  <a class="active nav-link" href="#active">Active</a>
  <a class="nav-link" href="#another-link">Another link</a>
  <a class="disabled nav-link" href="#disabled">Disabled</a>
</nav>

<nav class="nav nav-links justify-content-center">
  <a class="active nav-link" href="#active">Active</a>
  <a class="nav-link" href="#another-link">Another link</a>
  <a class="disabled nav-link" href="#disabled">Disabled</a>
</nav>

<nav class="nav nav-links">
  <a class="active nav-link" href="#active">Active</a>
  <a class="nav-link" href="#another-link">Another link</a>
  <a class="disabled nav-link" href="#disabled">Disabled</a>
</nav>

Span

You can replace link items by span items.
  • Active
  • Another link
  • Disabled

ui_tab_group tag_type: :span do |n|
  n.tab "Active", url: "#active", state: :active
  n.tab "Another link", url: "#another-link"
  n.tab "Disabled", url: "#disabled", state: :disabled
end

<ul class="nav nav-tabs">
  <li class="nav-item">
    <span class="nav-link" data-bs-toggle="tab" role="tab" aria-selected="true">Active</span>
  </li>
  <li class="nav-item">
    <span class="nav-link active show" data-bs-toggle="tab" role="tab">Another link</span>
  </li>
  <li class="nav-item">
    <span class="disabled nav-link" data-bs-toggle="tab" role="tab">Disabled</span>
  </li>
</ul>

Card navigation

ui_card do |c|
  c.header do |h|
    h.tab_group do |n|
      n.tab 'Active', url: '#active', state: :active
      n.tab 'Another link', url: '#active'
      n.tab 'Disabled', url: '#disabled', state: :disabled
      n.spacer
      n.dropdown 'Dropdown' do |d|
        d.link "Action 1", url: '#action'
        d.link url: '#another-action' do
          "Action 2"
        end
        d.link({ url: '#separate-link'}, { class: 'my-link'}) do
          "Action 3"
        end
      end
    end
  end
  c.body ''
end

<div class="card">
  <div class="card-header">
    <ul class="nav nav-tabs card-header-tabs">
      <li class="active nav-item">
        <a class="nav-link" href="#active">Active</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#active">Another link</a>
      </li>
      <li class="disabled  me-auto nav-item">
        <a class="disabled nav-link" href="#disabled">Disabled</a>
      </li>
      <li class="dropdown nav-item">
        <a class="dropdown-toggle nav-link active" data-bs-toggle="dropdown" aria-expanded="false" href="#">Dropdown <span class="caret"></span></a>
        <div class="dropdown-menu" arial-labelledby="dropdown-215166184182764420015994202772620281414" x-placement="bottom-start" style="position: absolute; transform: translate3d(0px, 42px, 0px); top: 0px; left: 0px; will-change: transform;">
          <a class="dropdown-item" href="#action">Action 1</a>
          <a class="dropdown-item" href="#another-action">Action 2</a>
          <a class="my-link dropdown-item" href="#separate-link">Action 3</a>
        </div>
      </li>
    </ul>
  </div>
  <div class="card-body"></div>
</div>

Connection

For more information see: Boostrap nav


Content 1
Content 2
Content 3
Content 4
ui_tab_group do |n|
  n.tab "Active", url: "#content1", state: :active
  n.tab "Link", url: "#content2"
  n.tab "Another link", url: "#content3"
  n.tab "Disabled", url: "#content4", state: :disabled
end
 
<div class='tab-content'>
  ui_card "Content 1", { tab: true, state: :active }, { id: "content1" }
  ui_card "Content 2", { tab: true, effect: :fade }, { id: "content2" }
  ui_card({ tab: true, effect: :fade }, { id: "content3" }) do
     Content 3
  end
  ui_card "Content 4", { tab: true }, { id: "content4" }
</div>

<ul class="nav nav-tabs">
  <li class="nav-item"><a class="active nav-link" data-bs-toggle="tab" role="tab" href="#ucontent1">Active</a></li>
  <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" role="tab" href="#ucontent2">Link</a></li>
  <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" role="tab" href="#ucontent3">Another link</a></li>
  <li class="nav-item"><a class="disabled nav-link" data-bs-toggle="tab" role="tab" href="#ucontent4">Disabled</a></li>
</ul>
<br>
<div class="tab-content">
  <div id="ucontent1" class="active card card-block tab-pane">Content 1</div>
  <div id="ucontent2" class="fade card card-block tab-pane">Content 2</div>
  <div id="ucontent3" class="fade card card-block tab-pane">Content 3</div>
  <div id="ucontent4" class="card card-block tab-pane">Content 4</div>
</div>