Lookbook
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
<div class='tabs-container outline-tabs' data-controller='tabs-container' id=''>
  <div class='justify-content-center'>
    <div class='tab-items nav'>
      <div class=' nav-item' data-action='click->tabs-container#selectTab' data-tab-id='section 1' data-tab-title='section 1path' data-target='#section_1_content' data-toggle='tab'>
        <a id="section_1_tab" class=" tab-link" href="section 1path">section 1</a>
        <hr />
      </div>
      <div class='active show nav-item' data-action='click->tabs-container#selectTab' data-tab-id='section 2' data-tab-title='section 2path' data-target='#section_2_content' data-toggle='tab'>
        <a id="section_2_tab" class="active show tab-link" href="section 2path">section 2</a>
        <hr />
      </div>
      <div class=' nav-item' data-action='click->tabs-container#selectTab' data-tab-id='section 3' data-tab-title='section 3path' data-target='#section_3_content' data-toggle='tab'>
        <a id="section_3_tab" class=" tab-link" href="section 3path">section 3</a>
        <hr />
      </div>
      <div class=' nav-item' data-action='click->tabs-container#selectTab' data-tab-id='section 4' data-tab-title='section 4path' data-target='#section_4_content' data-toggle='tab'>
        <a id="section_4_tab" class=" tab-link" href="section 4path">section 4</a>
        <hr />
      </div>
    </div>
  </div>
</div>
<div class='tab-content'>
  <div class='tab-pane' id='section_1_content'>
    section 1
  </div>
  <div class='tab-pane active show' id='section_2_content'>
    section 2
  </div>
  <div class='tab-pane' id='section_3_content'>
    section 3
  </div>
  <div class='tab-pane' id='section_4_content'>
    section 4
  </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
render TabsContainerComponent.new(type: 'outline') do |c|
  sections = ['section 1', 'section 2', 'section 3', 'section 4']
  sections.each do |section_title|
    c.item(title: section_title,
           path: "#{section_title}path",
           selected: section_title.eql?('section 2'),
           page_name: "#{section_title}path")
    c.item_content do
      section_title
    end
  end
end

No notes provided.

No params configured.