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 the custom header and footer code of our Tadabase app.

Copy and paste the following in the Custom Header Code Section
<style>
.tab-col {
    margin: 0 15px;
}
.tabs {
    position: relative;
    overflow-x: auto;
    overflow-y: hidden;
    height: 48px;
    width: 100%;
    background-color: #fff;
    margin: 25px auto 0 auto;
    white-space: nowrap;
    text-align: center;
    border: none;
    border-radius: 10px;
    box-shadow: 0 0 20px rgb(8 21 66 / 5%);
    z-index: 99;
}

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

.tabs .tab a {
    color: #8b8b8b;
    display: block;
    width: 100%;
    height: 100%;
    padding: 0 24px;
    font-size: 14px;
    text-overflow: ellipsis;
    overflow: hidden;
}

.tabs .tab a:focus,
.tabs .tab a.active {
    background-color: none !important;
    outline: none;
    color: #0128FF;
    font-weight: 700;
    text-decoration: none;
}

.tabs .tab a:hover {
    background-color: transparent;
    color: #0128FF;
    text-decoration: none;
}


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

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

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

    .tabs .tab a {
        padding: 0;
    }

    ul {
        padding-inline-start: 0;
    }
}
</style>

Copy and paste the following into the Custom Footer Code section

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

Snag_963afcf.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 tab-col">
        <ul class="tabs">
            <li class="tab col s3"><a class="active" href="#test1">Test 1</a></li>
            <li class="tab col s3"><a href="#test2">Test 2</a></li>
            <li class="tab col s3"><a href="#test3">Test 3</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>

8C07351D-2C30-424D-8600-F3719C4D577E.GIF

 

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

To do this, we'll need to add a CSS Class to each of the rows the tables are in.

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

Snag_96cd5da.png

 

To add a CSS class to each row, click on Edit

Then select "Design" and then "CSS" and add a CSS Class

Repeat that process until you've defined a unique CSS Class for each row.

 

Next, we'll add the following JavaScript to the page

JavaScript
$(document).ready(function(){
    $('.tabs').tabs();
    $('.row-1').appendTo('#test1');
    $('.row-2').appendTo('#test2');
    $('.row-3').appendTo('#test4');
});
Remember to replace the Classes shown in this example with the CSS Classes you added to each row.