soc-core/src/html/elements/components_tabs.html

Core sass framework based on Bootstrap

<a name="soctabs"></a>
<div class="container-fluid">
    <div class="row">
        <div class="col-xs-12">
            <div class="page-header">
                <h1>Soc Tabs <small>Switching content in style
                    <a href="#infolabels"><span class="label label-success">Continue grid</span></a>
                    <a href="#infolabels"><span class="label label-default">Wrap</span></a>
                    <a href="#infolabels"><span class="label label-primary">No container</span></a>
                    <a href="#infolabels"><span class="label label-warning">JS</span></a>
                </small></h1>
            </div>
        </div>

        <div class="col-xs-12">

            <p>Tabs will generally be the first item on a content page providing a switch between different sections of the
                content provided. Tabs are by default positioned on the left side but can also be set on top by using the
                'top' class. The tab control consists of multiple elements which must be placed correctly to make them work.
            </p>
            <p>Make sure you follow the guidelines below:</p>
            <ul>
                <li>Place the entire component inside a div with a 'soc-tabs' class</li>
                <li>First, set an unordered list ul'nav nav-tabs'</li>
                <ul>
                    <li>Inside, use list items li with an optional class 'active' if they are selected</li>
                    <li>For the links use an anchor element which contains a reference to the id of the tab you want to toggle
                        a[href="#tab1"] </li>
                    <li>Links should have the data-toggle="tab" attribute</li>
                </ul>
                <li>Follow the tabs section with a div with the 'tab-content' class</li>
                <li>Inside, create a 'tab-pane' div for each of tabs required, give this div an id matching the link in the tabs
                    section
                </li>
                <li>Within the tab-panes it is recommended to continue with creating a default container-fluid grid (.container-fluid>.row>.col-xs-12)</li>
            </ul>
            <p>If the tabs are placed immediately after a soc-header, the 'follow-header' class can also be used to create
                the same consistent effect.</p>
            <p>If you want to fill the height within an absolute positioned container, you can add the 'full-height' class to
                the 'soc-tabs' div.</p>
        </div>

        <div class="col-xs-12">
            <h3>Regular tab element</h3>
        </div>
    </div>
</div>

<!-- Regular tab -->
<div class="soc-tabs">
    <ul class="nav nav-tabs">
        <li><a href="#tab1" data-toggle="tab">Tab 1</a></li>
        <li><a href="#tab2" data-toggle="tab">Tab 2</a></li>
        <li class="active"><a href="#tab3" data-toggle="tab">Tab 3</a></li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane" id="tab1">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-xs-12">
                        <p>Tab 1 content goes here</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="tab-pane" id="tab2">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-xs-12">
                        <p>Tab 2 content goes here</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="tab-pane active" id="tab3">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-xs-12">
                        <p>Tab 3 content goes here</p>
                        <p>This is also the default active pane</p>
                        <ul>
                            <li>Because this tab-pane has the 'active' class</li>
                            <li>And because the matching list item li has the 'active' class</li>
                            <li>This is only required for drawing the element the first time</li>
                            <li>Once the document is ready, javascript will take over and switch these classes around</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-12">
            <div class="well"><span>emmet:
                <pre><code>.soc-tabs>(ul.nav.nav-tabs>(li>a[href="#tab$" data-toggle="tab"]{Tab $})*3+(li.active>a[href="#tab4" data-toggle="tab"]{Tab 4}))+div.tab-content>(.tab-pane#tab$>.container-fluid>.row>.col-xs-12>p{Tab $ content goes here})*3+(.tab-pane.active#tab4>.container-fluid>.row>.col-xs-12>p{Tab 4 content goes here})</code></pre>
            </span></div>
        </div>
        <div class="col-xs-12">
            <h3>Tab element following states &amp; header</h3>
        </div>
    </div>
</div>


<div class="btn-group btn-group-justified soc-stategroup">
    <div class="soc-state">State 1</div>
    <div class="soc-state">State 2</div>
    <div class="soc-state">State 3</div>
    <div class="soc-state active">State 4</div>
    <div class="soc-state">State 5</div>
</div>

<div class="soc-header">
    <div>
        <span class="soc-header-right">Leuven</span>
        <span class="soc-header-title">
            <span class="soc-typography-name">Janssens</span> Marina
        <i class="fa fa-venus" aria-hidden="true"></i>
        </span>
    </div>
    <div>
        <span>89120125468</span>
        <span class="soc-header-right">304/00000468437</span>
    </div>
</div>

<div class="soc-tabs follow-header">
    <ul class="nav nav-tabs">
        <li class="active">
            <a href="#headtab1" data-toggle="tab">Tab 1</a>
        </li>
        <li>
            <a href="#headtab2" data-toggle="tab">Tab 2</a>
        </li>
        <li>
            <a href="#headtab3" data-toggle="tab">Tab 3</a>
        </li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane active" id="headtab1">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-xs-12">
                        <strong>TAB1 : Lorem ipsum dolor sit amet</strong>
                        <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
                            industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of
                            type and scrambled it to make a type specimen book. It has survived not only five centuries,
                            but also the leap. </p>
                    </div>
                </div>
            </div>
        </div>
        <div class="tab-pane" id="headtab2">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-xs-12">
                        <strong>TAB2 : Lorem ipsum dolor sit amet</strong>
                        <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
                            industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of
                            type and scrambled it to make a type specimen book. It has survived not only five centuries,
                            but also the leap. </p>
                    </div>
                </div>
            </div>
        </div>
        <div class="tab-pane" id="headtab3">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-xs-12">
                        <strong>TAB3 : Lorem ipsum dolor sit amet</strong>
                        <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
                            industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of
                            type and scrambled it to make a type specimen book. It has survived not only five centuries,
                            but also the leap. </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<div class="container-fluid">
    <div class="row">
        <div class="col-sm-12">
            <div class="well"><span>emmet:
                <pre><code>Combine emmets from Soc States and Soc header with the regular tab emmet</code></pre>
            </span></div>
        </div>
        <div class="col-xs-12">
            <h3>Tab element with 'top' class applied</h3>
        </div>
    </div>
</div>

<!-- Top tab -->
<div class="soc-tabs top">
    <ul class="nav nav-tabs">
        <li><a href="#toptab1" data-toggle="tab">Tab 1</a></li>
        <li><a href="#toptab2" data-toggle="tab">Tab 2</a></li>
        <li class="active"><a href="#toptab3" data-toggle="tab">Tab 3</a></li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane" id="toptab1">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-xs-12">
                        <p>Tab 1 content goes here</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="tab-pane" id="toptab2">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-xs-12">
                        <p>Tab 2 content goes here</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="tab-pane active" id="toptab3">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-xs-12">
                        <p>Tab 3 content goes here</p>
                        <p>This is also the default active pane</p>
                        <ul>
                            <li>Because this tab-pane has the 'active' class</li>
                            <li>And because the matching list item li has the 'active' class</li>
                            <li>This is only required for drawing the element the first time</li>
                            <li>Once the document is ready, javascript will take over and switch these classes around</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>



<div class="container-fluid">
    <div class="row">
        <div class="col-sm-12">
            <div class="well"><span>emmet:
                <pre><code>.soc-tabs.top>(ul.nav.nav-tabs>(li>a[href="#tab$" data-toggle="tab"]{Tab $})*3+(li.active>a[href="#tab4" data-toggle="tab"]{Tab 4}))+div.tab-content>(.tab-pane#tab$>.container-fluid>.row>.col-xs-12>p{Tab $ content goes here})*3+(.tab-pane.active#tab4>.container-fluid>.row>.col-xs-12>p{Tab 4 content goes here})</code></pre>
            </span></div>
        </div>
    </div>
</div>