PSI Software SE Design Library

Tab Bar: Demo with Overflow

No notes defined.

<div class="tabBar" role="tablist">

    <div class="tabBar-items">
        <div class="tabBar-item">
            <a class="tab" href="#tab-sample-id" id="tab-sample-id-contoller" aria-controls="tab-sample-id" role="tab" aria-selected="true" tabindex="-1">
                <span class="tab-label">Erste Option</span>
            </a>

        </div>
        <div class="tabBar-item">
            <a class="tab" href="#tab-sample-id" id="tab-sample-id-contoller" aria-controls="tab-sample-id" role="tab" aria-selected="false">
                <span class="tab-label">Zweite Option</span>
            </a>

        </div>
        <div class="tabBar-item">
            <a class="tab" href="#tab-sample-id" id="tab-sample-id-contoller" aria-controls="tab-sample-id" role="tab" aria-selected="false">
                <span class="tab-label">Dritte Option</span>
            </a>

        </div>
        <div class="tabBar-item">
            <a class="tab" href="#tab-sample-id" id="tab-sample-id-contoller" aria-controls="tab-sample-id" role="tab" aria-selected="false">
                <span class="tab-label">Vierte Option</span>
            </a>

        </div>
        <div class="tabBar-item">
            <a class="tab" href="#tab-sample-id" id="tab-sample-id-contoller" aria-controls="tab-sample-id" role="tab" aria-selected="false">
                <span class="tab-label">Fünfte Option</span>
            </a>

        </div>
        <div class="tabBar-item">
            <a class="tab" href="#tab-sample-id" id="tab-sample-id-contoller" aria-controls="tab-sample-id" role="tab" aria-selected="false">
                <span class="tab-label">Sechste Option</span>
            </a>

        </div>
        <div class="tabBar-item">
            <a class="tab" href="#tab-sample-id" id="tab-sample-id-contoller" aria-controls="tab-sample-id" role="tab" aria-selected="false">
                <span class="tab-label">Siebte Option</span>
            </a>

        </div>
    </div>

</div>
 
<div class="tabBar{{#modifier}} {{.}}{{/modifier}}" role="tablist">

    <div class="tabBar-items">
            {{#items}}
        <div class="tabBar-item">
                {{#tab}}
            {{render '@tab' (contextData '@tabbar' this) merge=true}}
                {{/tab}}
        </div>
            {{/items}}
    </div>

</div>
 
{
  "items": [
    {
      "tab": {
        "is-selected": true,
        "label": "Erste Option"
      }
    },
    {
      "tab": {
        "label": "Zweite Option"
      }
    },
    {
      "tab": {
        "label": "Dritte Option"
      }
    },
    {
      "tab": {
        "label": "Vierte Option"
      }
    },
    {
      "tab": {
        "label": "Fünfte Option"
      }
    },
    {
      "tab": {
        "label": "Sechste Option"
      }
    },
    {
      "tab": {
        "label": "Siebte Option"
      }
    }
  ]
}
  • Content: 
    $tabBar_gutter: $tab_gap !default;

@import "_tabBar.settings";
@import "_tabBar.styles";
  • URL: /components/raw/tabbar/_tabBar.scss
  • Filesystem Path: components/03-fragments/tabBar/_tabBar.scss
  • Size: 90 Bytes
  • Content: 
    %tabBar {
    $overlay_width: calc(2 * (2 * $tabBar_gutter + var(--bp)));

    @include stack-spacing(component);

    position: relative;

    &::after { // Overflow cover
        content: "";

        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;

        width: $overlay_width;
        pointer-events: none;

        background: linear-gradient(to left, rgba($_PAGE-COLOR, 1), rgba($_PAGE-COLOR, 0));

        @supports (mask-image: inherit) {
            display: none;
        }

    }

    &-items {
        display: flex;
        column-gap: $tabBar_gutter;

        max-width: 100%;
        max-width: calc(100% + .5 * #{$tabBar_gutter});
        overflow-x: auto;

        @supports (mask-image: inherit) {
            mask-image: linear-gradient(to left, rgba(black, 0), rgba(black, 1) $overlay_width);;
        }

        &::-webkit-scrollbar {
            display: none;
        }

        > * {
            flex: 0 0 auto;

            &:last-child {
                padding-right: $overlay_width;
            }

        }

    }

    .tab {
        margin-top: 0;
    }

}

.tabBar {
    @extend %tabBar;

    &-items {
        @extend %tabBar-items;
    }

}
  • URL: /components/raw/tabbar/_tabBar.styles.scss
  • Filesystem Path: components/03-fragments/tabBar/_tabBar.styles.scss
  • Size: 1.2 KB