Add "Tabs" to your app

In this article, we'll be going over how to create tabs for your web application using a front-end framework called Materializecss (https://materializecss.com/tabs.html)

 

This is how our end result will look.

 

gzAgICgqiT1q23YT8ytMVetNS9Cn88abNA.gif

 

To start we'll need to include the framework in custom header code of our Tadabase app.

HTML
<style>
    .tabs {
        position: relative;
        overflow-x: auto;
        overflow-y: hidden;
        height: 48px;
        width: 100%;
        background-color: #fff;
        margin: 0 auto;
        white-space: nowrap;
    }

    .tabs.tabs-transparent {
        background-color: transparent;
    }

    .tabs.tabs-transparent .tab a,
    .tabs.tabs-transparent .tab.disabled a,
    .tabs.tabs-transparent .tab.disabled a:hover {
        color: rgba(255, 255, 255, 0.7);
    }

    .tabs.tabs-transparent .tab a:hover,
    .tabs.tabs-transparent .tab a.active {
        color: #fff;
    }

    .tabs.tabs-transparent .indicator {
        background-color: #fff;
    }

    .tabs.tabs-fixed-width {
        display: flex;
    }

    .tabs.tabs-fixed-width .tab {
        flex-grow: 1;
    }

    .tabs .tab {
        display: inline-block;
        text-align: center;
        line-height: 48px;
        height: 48px;
        padding: 0;
        margin: 0;
        text-transform: uppercase;
    }

    .tabs .tab a {
        color: rgba(238, 110, 115, 0.7);
        display: block;
        width: 100%;
        height: 100%;
        padding: 0 24px;
        font-size: 14px;
        text-overflow: ellipsis;
        overflow: hidden;
        transition: color 0.28s ease, background-color 0.28s ease;
    }

    .tabs .tab a:focus,
    .tabs .tab a:focus.active {
        background-color: rgba(246, 178, 181, 0.2);
        outline: none;
    }

    .tabs .tab a:hover,
    .tabs .tab a.active {
        background-color: transparent;
        color: #ee6e73;
    }

    .tabs .tab.disabled a,
    .tabs .tab.disabled a:hover {
        color: rgba(238, 110, 115, 0.4);
        cursor: default;
    }

    .tabs .indicator {
        position: absolute;
        bottom: 0;
        height: 2px;
        background-color: #f6b2b5;
        will-change: left, right;
    }

    @media only screen and (max-width : 992px) {
        .tabs {
            display: flex;
        }

        .tabs .tab {
            flex-grow: 1;
        }

        .tabs .tab a {
            padding: 0 12px;
        }
    }
</style>

<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

7ypWh2Vs2FNGnXMRF1W9Sf10mW6ub4um8Q.png

Next, we'll need to add the following to the source code of an HTML component on the page builder

HTML
<div class="row">
    <div class="col s12">
        <ul class="tabs">
            <li class="tab col s3"><a href="#test1">Test 1</a></li>
            <li class="tab col s3"><a class="active" href="#test2">Test 2</a></li>
            <li class="tab col s3 disabled"><a href="#test3">Disabled Tab</a></li>
            <li class="tab col s3"><a href="#test4">Test 4</a></li>
        </ul>
    </div>
    <div id="test1" class="col s12">&nbsp;</div>
    <div id="test2" class="col s12">&nbsp;</div>
    <div id="test3" class="col s12">&nbsp;</div>
    <div id="test4" class="col s12">&nbsp;</div>
</div>

58fefl33hKo3eo7fUO1B3TDeYSs6-6WyFQ.png

 

For this example, we'll be placing three tables into each three of the tabs.

To do this, we'll need to find the ID of each row the tables are in.

 

As you can see in the image below, we have three rows that each contains a Data Table

cBGg4jPhk7q4mnT8VkYrOVL8fX_qsLCsuQ.png

 

To find the ID for each of these rows preview your page and then right-click on one of the tables and click "Inspect"

p_ErCepOs_yUwKdOSRkNpaYLyfreweYyVg.png

 

You should find a line of code that has a class of "row" or looks similar to this

<div class="row x-type-row  x-container-" id="x_element_page_4_20">

In our case the ID of this row is x_element_page_4_20 as shown in the image below

MI1ufFrqwSgGNKDR3574ky81sx5VOLYQ_g.png

 

Repeat that process until you've found all the ID's for each row. Once you've taken note of each row we can add the following JavaScript to the page builder

JavaScript
$(document).ready(function(){
    $('.tabs').tabs();
    $('#x_element_page_4_20').appendTo('#test1');
    $('#x_element_page_4_24').appendTo('#test2');
    $('#x_element_page_4_27').appendTo('#test4');
});
Remember to replace the ID's shown in this example with your ID's

3qjIvFb8IwVSmn9GDHqWNZd0lkhe2wgHhA.png