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" id="tab-sample-id-contoller" aria-controls="tab-sample-id" role="tab" aria-selected="false" aria-disabled="true">
<span class="tab-label">Dritte 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": {
"is-disabled": true,
"label": "Dritte Option"
}
}
]
}
$tabBar_gutter: $tab_gap !default;
@import "_tabBar.settings";
@import "_tabBar.styles";
$tabBar_gutter: 1rem !default;
%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;
}
}