Widget Tricks - ods-simple-tabs

The ods-simple-tabs widget can be used to have a tabbed interface that allows you to switch between different views. It has a simplified CSS making it easy to modify the style or layout. Below are a few different styles that can be applied to the widget in order to fit different use cases.

Default Look

<ods-dataset-context context="velib" 
                     velib-dataset="velib-disponibilite-en-temps-reel"
                     velib-domain="parisdata">
    <ods-simple-tabs>
        <ods-simple-tab label="Velib" 
                        fontawesome-class="bicycle"
                        keep-content="true">
            <p>
                L’objectif du service Vélib’ Métropole est de faciliter le développement de nouvelles mobilités sur le territoire francilien, en complément de l’offre de transport existante.
            </p>
            <ods-table context="velib"></ods-table>
        </ods-simple-tab>
        <ods-simple-tab label="Stations">
            <ods-map no-refit="true" 
                     scroll-wheel-zoom="false" 
                     display-control="true" 
                     search-box="true" 
                     toolbar-fullscreen="true"
                     toolbar-geolocation="true" 
                     basemap="jawg.sunny" 
                     location="12,48.85593,2.35192">
                <ods-map-layer-group>
                    <ods-map-layer context="velib" 
                                   color="#C32D1C" 
                                   picto="ods-bicycle" 
                                   show-marker="true" 
                                   display="auto" 
                                   shape-opacity="0.5" 
                                   point-opacity="1" 
                                   border-color="#FFFFFF"
                                   border-opacity="1" 
                                   border-size="1" 
                                   border-pattern="solid" 
                                   caption="true" 
                                   title="Vélib - Vélos et bornes - Disponibilité temps réel" 
                                   description="Jeu de données présentant la disponibilité des bornettes, vélos
                                                mécaniques et électriques des stations Vélib’ Métropole." 
                                   size="4" 
                                   size-min="3" 
                                   size-max="5" 
                                   size-function="linear"></ods-map-layer>
                </ods-map-layer-group>
            </ods-map>
        </ods-simple-tab>
        <ods-simple-tab label="Top 10 disponibilité"
                        fontawesome-class="line-chart">
                <ods-chart single-y-axis="true" 
                           align-month="true">
                    <ods-chart-query context="velib" 
                                     field-x="name" 
                                     maxpoints="10" 
                                     sort="serie1-1">
                        <ods-chart-serie expression-y="numbikesavailable" 
                                         chart-type="column" 
                                         function-y="SUM" 
                                         color="#142E7B" 
                                         scientific-display="true">
                        </ods-chart-serie>
                    </ods-chart-query>
                </ods-chart>
        </ods-simple-tab>
    </ods-simple-tabs>
</ods-dataset-context>
      

Tab Pills

A different style for the tab navigation.

<ods-dataset-context context="velib" 
                     velib-dataset="velib-disponibilite-en-temps-reel"
                     velib-domain="parisdata">
    <ods-simple-tabs class="tab-pills">
        <ods-simple-tab label="Velib" 
                        fontawesome-class="bicycle"
                        keep-content="true">
            <p>
                L’objectif du service Vélib’ Métropole est de faciliter le développement de nouvelles mobilités sur le territoire francilien, en complément de l’offre de transport existante.
            </p>
            <ods-table context="velib"></ods-table>
        </ods-simple-tab>
        <ods-simple-tab label="Stations">
            <ods-map no-refit="true" 
                     scroll-wheel-zoom="false" 
                     display-control="true" 
                     search-box="true" 
                     toolbar-fullscreen="true"
                     toolbar-geolocation="true" 
                     basemap="jawg.sunny" 
                     location="12,48.85593,2.35192">
                <ods-map-layer-group>
                    <ods-map-layer context="velib" 
                                   color="#C32D1C" 
                                   picto="ods-bicycle" 
                                   show-marker="true" 
                                   display="auto" 
                                   shape-opacity="0.5" 
                                   point-opacity="1" 
                                   border-color="#FFFFFF"
                                   border-opacity="1" 
                                   border-size="1" 
                                   border-pattern="solid" 
                                   caption="true" 
                                   title="Vélib - Vélos et bornes - Disponibilité temps réel" 
                                   description="Jeu de données présentant la disponibilité des bornettes, vélos
                                                mécaniques et électriques des stations Vélib’ Métropole." 
                                   size="4" 
                                   size-min="3" 
                                   size-max="5" 
                                   size-function="linear"></ods-map-layer>
                </ods-map-layer-group>
            </ods-map>
        </ods-simple-tab>
        <ods-simple-tab label="Top 10 disponibilité">
            <ods-chart single-y-axis="true" 
                       align-month="true">
                <ods-chart-query context="velib" 
                                 field-x="name" 
                                 maxpoints="10" 
                                 sort="serie1-1">
                    <ods-chart-serie expression-y="numbikesavailable" 
                                     chart-type="column" 
                                     function-y="SUM" 
                                     color="#142E7B" 
                                     scientific-display="true">
                    </ods-chart-serie>
                </ods-chart-query>
            </ods-chart>
        </ods-simple-tab>
    </ods-simple-tabs>
</ods-dataset-context>
      
/* Tab Pills
   ========================================================================== */
.tab-pills .ods-simple-tabs-nav-link {
    padding: 0.5rem 1.5rem;
    border-bottom: 0;
    border-radius: 30px;
    background-color: transparent;
}
.tab-pills .ods-simple-tabs-nav-link:hover {
    color: var(--links);
}
.tab-pills .ods-simple-tabs-nav-link-active {
    background-color: var(--links);
}
.tab-pills .ods-simple-tabs-nav-link-active,
.tab-pills .ods-simple-tabs-nav-link-active:hover {
    color: #FFFFFF;
}
      

Horizontal Layout

Display the tab navigation bar horizontally, next to the tab content. The responsive design has been taken into account and while on a small screen the tab navigation bar is above of the content.

<ods-dataset-context context="velib" 
                     velib-dataset="velib-disponibilite-en-temps-reel"
                     velib-domain="parisdata">
    <ods-simple-tabs class="tab-horizontal">
        <ods-simple-tab label="Velib" 
                        fontawesome-class="bicycle"
                        keep-content="true">
            <p>
                L’objectif du service Vélib’ Métropole est de faciliter le développement de nouvelles mobilités sur le territoire francilien, en complément de l’offre de transport existante.
            </p>
            <ods-table context="velib"></ods-table>
        </ods-simple-tab>
        <ods-simple-tab label="Stations">
            <ods-map no-refit="true" 
                     scroll-wheel-zoom="false" 
                     display-control="true" 
                     search-box="true" 
                     toolbar-fullscreen="true"
                     toolbar-geolocation="true" 
                     basemap="jawg.sunny" 
                     location="12,48.85593,2.35192">
                <ods-map-layer-group>
                    <ods-map-layer context="velib" 
                                   color="#C32D1C" 
                                   picto="ods-bicycle" 
                                   show-marker="true" 
                                   display="auto" 
                                   shape-opacity="0.5" 
                                   point-opacity="1" 
                                   border-color="#FFFFFF"
                                   border-opacity="1" 
                                   border-size="1" 
                                   border-pattern="solid" 
                                   caption="true" 
                                   title="Vélib - Vélos et bornes - Disponibilité temps réel" 
                                   description="Jeu de données présentant la disponibilité des bornettes, vélos
                                                mécaniques et électriques des stations Vélib’ Métropole." 
                                   size="4" 
                                   size-min="3" 
                                   size-max="5" 
                                   size-function="linear"></ods-map-layer>
                </ods-map-layer-group>
            </ods-map>
        </ods-simple-tab>
        <ods-simple-tab label="Top 10 disponibilité">
            <ods-chart single-y-axis="true" 
                       align-month="true">
                <ods-chart-query context="velib" 
                                 field-x="name" 
                                 maxpoints="10" 
                                 sort="serie1-1">
                    <ods-chart-serie expression-y="numbikesavailable" 
                                     chart-type="column" 
                                     function-y="SUM" 
                                     color="#142E7B" 
                                     scientific-display="true">
                    </ods-chart-serie>
                </ods-chart-query>
            </ods-chart>
        </ods-simple-tab>
    </ods-simple-tabs>
</ods-dataset-context>
      
/* Horizontal Tabs
   ========================================================================== */
.tab-horizontal {
    display: flex;
    flex-direction: column;
}
@media (min-width: 767px) {
    .tab-horizontal {
        flex-direction: row;
    }
}
@media (min-width: 767px) {
    .tab-horizontal .ods-simple-tabs-nav {
        flex: 0 0 15%;
        margin-right: 10px;
        flex-direction: column;
        overflow-x: inherit;
    }    
}
.tab-horizontal .ods-simple-tabs-nav-link {
    border-radius: 4px;
    border-bottom: none;
}
.tab-horizontal .ods-simple-tabs-nav-link:hover {
    color: var(--links);
}
.tab-horizontal .ods-simple-tabs-nav-link-active {
    background-color: var(--links);
}
.tab-horizontal .ods-simple-tabs-nav-link-active,
.tab-horizontal .ods-simple-tabs-nav-link-active:hover {
    color: #FFFFFF;
}
@media (min-width: 767px) {
    .tab-horizontal .ods-simple-tabs-content {
        flex: 1 1 auto;
        overflow: auto;
    }    
}
      

Dot Tabs

The tabs navigation is presented using dots on the bottom of the tabbed content.

<div class="kpi-card">
    <ods-simple-tabs class="tab-dots">
        <ods-simple-tab keep-content="true">
            <i class="kpi-icon fa fa-gitlab" aria-hidden="true"></i>
            <h2 class="kpi-title">
                5,983
            </h2>
            <p class="kpi-description">
                Dignissim suspendisse in est ante in nibh nisl tincidunt eget
            </p>
        </ods-simple-tab>
        <ods-simple-tab keep-content="true">
            <i class="kpi-icon fa fa-houzz" aria-hidden="true"></i>
            <h2 class="kpi-title">
                18.3k
            </h2>
            <p class="kpi-description">
                Quam vulputate dignissim suspendisse in est ante in nibh. Faucibus nisl tincidunt eget nullam non nisi est sit amet
            </p>
        </ods-simple-tab>
        <ods-simple-tab keep-content="true">
            <i class="kpi-icon fa fa-houzz" aria-hidden="true"></i>
            <h2 class="kpi-title">
                8.3k
            </h2>
            <p class="kpi-description">
                Quam vulputate
            </p>
        </ods-simple-tab>
    </ods-simple-tabs>
</div>
      
/* Tab dots
   ========================================================================== */
.tab-dots {
    display: flex;
    flex-direction: column-reverse;
    margin-bottom: 0;
}
.tab-dots .ods-simple-tabs-nav {
    margin-top: 20px;
    margin-bottom: 0;
    justify-content: center;    
}
.tab-dots .ods-simple-tabs-nav-link {
    border: none;
    padding: 0;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background-color: rgba(0,0,0,.2);
    margin: 0 4px;
}
.tab-dots .ods-simple-tabs-nav-link:hover,
.tab-dots .ods-simple-tabs-nav-link-active {
    background-color: var(--links);
}
/* KPI Card
========================================================================== */
.kpi-card {
    background-color: var(--boxes-background);
    height: 100%;
    padding: 39px;
    border-radius: 4px;
    margin-bottom: 20px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    text-align: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    text-align: center;
}
.kpi-icon {
    color: var(--highlight);
    color: var(--secondary-color);
    font-size: 4rem;
    margin-top: 0;
    margin-bottom: 13px;	
    max-width: 100%;
}
.kpi-title {
    font-weight: normal;
    color: var(--highlight);
    font-size: 3.2rem;
    margin-top: 0;
    margin-bottom: 13px;
    max-width: 100%;
}
.kpi-description { 
    color: var(--text);
    font-size: 1rem;
    line-height: 1.5;
    font-weight: normal;
    margin-top: 0;
    margin-bottom: 0;
    max-width: 100%;
}