Javascript Tabs

• Tab 1
• Tab 2
• Tab 3

= ui.nfg :nav, tabs: true do
  = ui.nfg :nav_item, :active, tab: '#test_tabs1', body: 'Tab 1'
  = ui.nfg :nav_item, tab: '#test_tabs2', body: 'Tab 2'
  = ui.nfg :nav_item, tab: '#test_tabs3', body: 'Tab 3'
= ui.nfg :tab_content, class: 'p-4' do
  = ui.nfg :tab_pane, :active, tab: '#test_tabs1' do
    %h3.h5 Tab Pane #1
    %p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nibh ex, consectetur ultricies consectetur eu, efficitur ac odio. Cras venenatis elit a volutpat sagittis

  = ui.nfg :tab_pane, tab: '#test_tabs2' do
    %h3.h5 Tab Pane #2
    %p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nibh ex, consectetur ultricies consectetur eu, efficitur ac odio. Cras venenatis elit a volutpat sagittis

  = ui.nfg :tab_pane, tab: '#test_tabs3' do
    %h3.h5 Tab Pane #3
    %p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nibh ex, consectetur ultricies consectetur eu, efficitur ac odio. Cras venenatis elit a volutpat sagittis

<ul class="nav nav-tabs" role="tablist">
  <li class="nav-item" role="tab"><a class="nav-link active" data-toggle="tab" href="#test_tabs1" aria-controls="test_tabs1" aria-selected="true">Tab 1</a></li>
  <li class="nav-item" role="tab"><a class="nav-link" data-toggle="tab" href="#test_tabs2" aria-controls="test_tabs2" aria-selected="false">Tab 2</a></li>
  <li class="nav-item" role="tab"><a class="nav-link" data-toggle="tab" href="#test_tabs3" aria-controls="test_tabs3" aria-selected="false">Tab 3</a></li>
</ul>
<div class="tab-content p-4">
  <div class="tab-pane active fade show" id="test_tabs1" role="tabpanel">
    <h3 class='h5'>Tab Pane #1</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nibh ex, consectetur ultricies consectetur eu, efficitur ac odio. Cras venenatis elit a volutpat sagittis</p>
  </div>
  <div class="tab-pane fade" id="test_tabs2" role="tabpanel">
    <h3 class='h5'>Tab Pane #2</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nibh ex, consectetur ultricies consectetur eu, efficitur ac odio. Cras venenatis elit a volutpat sagittis</p>
  </div>
  <div class="tab-pane fade" id="test_tabs3" role="tabpanel">
    <h3 class='h5'>Tab Pane #3</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nibh ex, consectetur ultricies consectetur eu, efficitur ac odio. Cras venenatis elit a volutpat sagittis</p>
  </div>
</div>

• Pill Tab 1
• Pill Tab 2
• Pill Tab 3

= ui.nfg :nav, pill: true do
  = ui.nfg :nav_item, :active, tab: '#test_pill1', body: 'Pill Tab 1'
  = ui.nfg :nav_item, tab: '#test_pill2', body: 'Pill Tab 2'
  = ui.nfg :nav_item, tab: '#test_pill3', body: 'Pill Tab 3'

= ui.nfg :tab_content, class: 'p-4' do
  = ui.nfg :tab_pane, :active, tab: '#test_pill1' do
    %h3.h5 Tab Pane #1
    %p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nibh ex, consectetur ultricies consectetur eu, efficitur ac odio. Cras venenatis elit a volutpat sagittis

  = ui.nfg :tab_pane, tab: '#test_pill2' do
    %h3.h5 Tab Pane #2
    %p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nibh ex, consectetur ultricies consectetur eu, efficitur ac odio. Cras venenatis elit a volutpat sagittis

  = ui.nfg :tab_pane, tab: '#test_pill3' do
    %h3.h5 Tab Pane #3
    %p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nibh ex, consectetur ultricies consectetur eu, efficitur ac odio. Cras venenatis elit a volutpat sagittis

<ul class="nav nav-pills">
  <li class="nav-item" role="tab"><a class="nav-link active" data-toggle="tab" href="#test_pill1" aria-controls="test_pill1" aria-selected="true">Pill Tab 1</a></li>
  <li class="nav-item" role="tab"><a class="nav-link" data-toggle="tab" href="#test_pill2" aria-controls="test_pill2" aria-selected="false">Pill Tab 2</a></li>
  <li class="nav-item" role="tab"><a class="nav-link" data-toggle="tab" href="#test_pill3" aria-controls="test_pill3" aria-selected="false">Pill Tab 3</a></li>
</ul>
<div class="tab-content p-4">
  <div class="tab-pane active fade show" id="test_pill1" role="tabpanel">
    <h3 class='h5'>Tab Pane #1</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nibh ex, consectetur ultricies consectetur eu, efficitur ac odio. Cras venenatis elit a volutpat sagittis</p>
  </div>
  <div class="tab-pane fade" id="test_pill2" role="tabpanel">
    <h3 class='h5'>Tab Pane #2</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nibh ex, consectetur ultricies consectetur eu, efficitur ac odio. Cras venenatis elit a volutpat sagittis</p>
  </div>
  <div class="tab-pane fade" id="test_pill3" role="tabpanel">
    <h3 class='h5'>Tab Pane #3</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nibh ex, consectetur ultricies consectetur eu, efficitur ac odio. Cras venenatis elit a volutpat sagittis</p>
  </div>
</div>

• Pill Tab 1
• Pill Tab 2
• Pill Tab 3

= ui.nfg :nav, pill: true, vertical: true do
  = ui.nfg :nav_item, :active, tab: '#test_vertical_pill1', body: 'Pill Tab 1'
  = ui.nfg :nav_item, tab: '#test_vertical_pill2', body: 'Pill Tab 2'
  = ui.nfg :nav_item, tab: '#test_vertical_pill3', body: 'Pill Tab 3'
= ui.nfg :tab_content, class: 'p-4' do
  = ui.nfg :tab_pane, :active, tab: '#test_vertical_pill1' do
    %h3.h5 Tab Pane #1
    %p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nibh ex, consectetur ultricies consectetur eu, efficitur ac odio. Cras venenatis elit a volutpat sagittis

  = ui.nfg :tab_pane, tab: '#test_vertical_pill2' do
    %h3.h5 Tab Pane #2
    %p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nibh ex, consectetur ultricies consectetur eu, efficitur ac odio. Cras venenatis elit a volutpat sagittis

  = ui.nfg :tab_pane, tab: '#test_vertical_pill3' do
    %h3.h5 Tab Pane #3
    %p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nibh ex, consectetur ultricies consectetur eu, efficitur ac odio. Cras venenatis elit a volutpat sagittis

<ul class="nav nav-pills flex-column">
  <li class="nav-item" role="tab"><a class="nav-link active" data-toggle="tab" href="#test_vertical_pill1" aria-controls="test_vertical_pill1" aria-selected="true">Pill Tab 1</a></li>
  <li class="nav-item" role="tab"><a class="nav-link" data-toggle="tab" href="#test_vertical_pill2" aria-controls="test_vertical_pill2" aria-selected="false">Pill Tab 2</a></li>
  <li class="nav-item" role="tab"><a class="nav-link" data-toggle="tab" href="#test_vertical_pill3" aria-controls="test_vertical_pill3" aria-selected="false">Pill Tab 3</a></li>
</ul>
<div class="tab-content p-4">
  <div class="tab-pane active fade show" id="test_vertical_pill1" role="tabpanel">
    <h3 class='h5'>Tab Pane #1</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nibh ex, consectetur ultricies consectetur eu, efficitur ac odio. Cras venenatis elit a volutpat sagittis</p>
  </div>
  <div class="tab-pane fade" id="test_vertical_pill2" role="tabpanel">
    <h3 class='h5'>Tab Pane #2</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nibh ex, consectetur ultricies consectetur eu, efficitur ac odio. Cras venenatis elit a volutpat sagittis</p>
  </div>
  <div class="tab-pane fade" id="test_vertical_pill3" role="tabpanel">
    <h3 class='h5'>Tab Pane #3</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nibh ex, consectetur ultricies consectetur eu, efficitur ac odio. Cras venenatis elit a volutpat sagittis</p>
  </div>
</div>