No notes defined.
<!-- Default -->
<ul class="nav list-unstyled sds-segmentedButtons" role="tablist">
<li class="nav-item" role="presentation">
<button type="button" class="sds-btn -btnSecondary sds-segmentedButtons__btn active" data-toggle="tab" data-target="#target-1" role="tab" aria-controls="target-1" aria-selected="true">
<span class="sds-btn__text">
Lorem ipsum dolor sit amet
</span>
</button>
</li>
<li class="nav-item" role="presentation">
<button type="button" class="sds-btn -btnSecondary sds-segmentedButtons__btn" data-toggle="tab" data-target="#target-2" role="tab" aria-controls="target-2" aria-selected="false">
<span class="sds-btn__text">
Consectetur adipisicing elit
</span>
</button>
</li>
</ul>
<!-- Full Width -->
<ul class="nav list-unstyled sds-segmentedButtons -segmentedButtonsFullWidth" role="tablist">
<li class="nav-item" role="presentation">
<button type="button" class="sds-btn -btnSecondary sds-segmentedButtons__btn active" data-toggle="tab" data-target="#target-1" role="tab" aria-controls="target-1" aria-selected="true">
<span class="sds-btn__text">
Lorem ipsum dolor sit amet
</span>
</button>
</li>
<li class="nav-item" role="presentation">
<button type="button" class="sds-btn -btnSecondary sds-segmentedButtons__btn" data-toggle="tab" data-target="#target-2" role="tab" aria-controls="target-2" aria-selected="false">
<span class="sds-btn__text">
Consectetur adipisicing elit
</span>
</button>
</li>
</ul>
<!-- Inverted -->
<ul class="nav list-unstyled sds-segmentedButtons -inverted" role="tablist">
<li class="nav-item" role="presentation">
<button type="button" class="sds-btn -btnSecondary sds-segmentedButtons__btn active" data-toggle="tab" data-target="#target-1" role="tab" aria-controls="target-1" aria-selected="true">
<span class="sds-btn__text">
Lorem ipsum dolor sit amet
</span>
</button>
</li>
<li class="nav-item" role="presentation">
<button type="button" class="sds-btn -btnSecondary sds-segmentedButtons__btn" data-toggle="tab" data-target="#target-2" role="tab" aria-controls="target-2" aria-selected="false">
<span class="sds-btn__text">
Consectetur adipisicing elit
</span>
</button>
</li>
</ul>
<!-- Input -->
<ul class="nav list-unstyled sds-segmentedButtons" role="tablist">
<li class="nav-item" role="presentation">
<input type="radio" class="sr-only" name="inputGroup" id="input-1" checked />
<label class="sds-btn -btnSecondary sds-segmentedButtons__btn active" for="input-1">
<span class="sds-btn__text">
Lorem ipsum dolor sit amet
</span>
</label>
</li>
<li class="nav-item" role="presentation">
<input type="radio" class="sr-only" name="inputGroup" id="input-2" />
<label class="sds-btn -btnSecondary sds-segmentedButtons__btn" for="input-2">
<span class="sds-btn__text">
Consectetur adipisicing elit
</span>
</label>
</li>
<li class="nav-item" role="presentation">
<input type="radio" class="sr-only" name="inputGroup" id="input-3" />
<label class="sds-btn -btnSecondary sds-segmentedButtons__btn" for="input-3">
<span class="sds-btn__text">
Natus soluta vitae
</span>
</label>
</li>
</ul>
<!-- Default -->
<ul class="nav list-unstyled {{ namespace }}segmentedButtons{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}" role="tablist">
{% for key, item in toggleTabItems %}
{% if item.active %}
{% set btnClasses = [namespace+"segmentedButtons__btn", "active"] %}
{% else %}
{% set btnClasses = [namespace+"segmentedButtons__btn"] %}
{% endif %}
<li class="nav-item" role="presentation">
{% render "@btn-secondary", {
text: item.text,
id: item.id,
classes: btnClasses,
attrs: {
"data-toggle": "tab",
"data-target": "#"+item.target,
"role": "tab",
"aria-controls": item.target,
"aria-selected": item.active
},
badge: item.badge
}, true %}
</li>
{% endfor %}
</ul>
<!-- Full Width -->
<ul class="nav list-unstyled {{ namespace }}segmentedButtons{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}" role="tablist">
{% for key, item in toggleTabItems %}
{% if item.active %}
{% set btnClasses = [namespace+"segmentedButtons__btn", "active"] %}
{% else %}
{% set btnClasses = [namespace+"segmentedButtons__btn"] %}
{% endif %}
<li class="nav-item" role="presentation">
{% render "@btn-secondary", {
text: item.text,
id: item.id,
classes: btnClasses,
attrs: {
"data-toggle": "tab",
"data-target": "#"+item.target,
"role": "tab",
"aria-controls": item.target,
"aria-selected": item.active
},
badge: item.badge
}, true %}
</li>
{% endfor %}
</ul>
<!-- Inverted -->
<ul class="nav list-unstyled {{ namespace }}segmentedButtons{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}" role="tablist">
{% for key, item in toggleTabItems %}
{% if item.active %}
{% set btnClasses = [namespace+"segmentedButtons__btn", "active"] %}
{% else %}
{% set btnClasses = [namespace+"segmentedButtons__btn"] %}
{% endif %}
<li class="nav-item" role="presentation">
{% render "@btn-secondary", {
text: item.text,
id: item.id,
classes: btnClasses,
attrs: {
"data-toggle": "tab",
"data-target": "#"+item.target,
"role": "tab",
"aria-controls": item.target,
"aria-selected": item.active
},
badge: item.badge
}, true %}
</li>
{% endfor %}
</ul>
<!-- Input -->
<ul class="nav list-unstyled {{ namespace }}segmentedButtons{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}" role="tablist">
{% for key, item in toggleTabItems %}
<li class="nav-item" role="presentation">
{% if item.active %}
{% set btnClasses = [namespace+"segmentedButtons__btn", "active"] %}
{% else %}
{% set btnClasses = [namespace+"segmentedButtons__btn"] %}
{% endif %}
<input type="radio" class="sr-only" name="inputGroup" id="{{ item.id }}" {% if item.active %}checked{% endif %} />
{% render "@btn-secondary", {
eltType: "label",
text: item.text,
classes: btnClasses,
attrs: {
"for": item.id
}
}, true %}
</li>
{% endfor %}
</ul>
/*
* This content is licensed according to the W3C Software License at
* https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document
*
* File: tabs-manual.js
*
* Desc: Tablist widget that implements ARIA Authoring Practices
*/
'use strict';
export default class SegmentedButtons {
constructor(groupNode) {
this.tablistNode = groupNode;
this.tabs = [];
this.firstTab = null;
this.lastTab = null;
this.tabs = Array.from(this.tablistNode.querySelectorAll('[role=tab]'));
this.tabpanels = [];
for (let i = 0; i < this.tabs.length; i += 1) {
let tab = this.tabs[i];
let tabpanel = document.getElementById(tab.getAttribute('aria-controls'));
tab.tabIndex = -1;
tab.setAttribute('aria-selected', 'false');
this.tabpanels.push(tabpanel);
tab.addEventListener('keydown', this.onKeydown.bind(this));
tab.addEventListener('click', this.onClick.bind(this));
if (!this.firstTab) {
this.firstTab = tab;
}
this.lastTab = tab;
}
this.setSelectedTab(this.firstTab);
}
setSelectedTab(currentTab) {
for (let i = 0; i < this.tabs.length; i += 1) {
let tab = this.tabs[i];
if (currentTab === tab) {
tab.setAttribute('aria-selected', 'true');
tab.removeAttribute('tabindex');
} else {
tab.setAttribute('aria-selected', 'false');
tab.tabIndex = -1;
}
}
}
moveFocusToTab(currentTab) {
currentTab.focus();
}
moveFocusToPreviousTab(currentTab) {
let index;
if (currentTab === this.firstTab) {
this.moveFocusToTab(this.lastTab);
} else {
index = this.tabs.indexOf(currentTab);
this.moveFocusToTab(this.tabs[index - 1]);
}
}
moveFocusToNextTab(currentTab) {
let index;
if (currentTab === this.lastTab) {
this.moveFocusToTab(this.firstTab);
} else {
index = this.tabs.indexOf(currentTab);
this.moveFocusToTab(this.tabs[index + 1]);
}
}
/* EVENT HANDLERS */
onKeydown(event) {
let tgt = event.currentTarget,
flag = false;
switch (event.key) {
case 'ArrowLeft':
this.moveFocusToPreviousTab(tgt);
flag = true;
break;
case 'ArrowRight':
this.moveFocusToNextTab(tgt);
flag = true;
break;
case 'Home':
this.moveFocusToTab(this.firstTab);
flag = true;
break;
case 'End':
this.moveFocusToTab(this.lastTab);
flag = true;
break;
default:
break;
}
if (flag) {
event.stopPropagation();
event.preventDefault();
}
}
// Since this example uses buttons for the tabs, the click onr also is activated
// with the space and enter keys
onClick(event) {
this.setSelectedTab(event.currentTarget);
}
// gets called like so in main.js:
// let tablists = document.querySelectorAll('.sds-segmentedButtons[role="tablist"]');
// for (let i = 0; i < tablists.length; i++) {
// new SegmentedButtons(tablists[i])
// }
}
/* variables specific to current element */
$element-specific-variables: "";
.#{$namespace}segmentedButtons {
/* Save root element context for easy access if nesting is needed */
$self: &;
/* properties of current element + media queries */
display: inline-flex;
flex-wrap: nowrap;
gap: map-deep-get($design-tokens, "comp-segmented-button-inline");
padding-block: map-deep-get($design-tokens, "comp-segmented-button-inset-v");
padding-inline: map-deep-get($design-tokens, "comp-segmented-button-inset-h");
@include custom-prop-fallback("background-color","comp-segmented-button-background-color");
border-radius: map-deep-get($design-tokens, "comp-segmented-button-border-radius");
max-width: 100%;
overflow-x: auto;
scrollbar-width: thin;
scrollbar-color: rgba(0,0,0,0.3) transparent;
/* Pseudo Elements */
&::before {
}
&::after {
}
/*
Include elements that are linked to the current element but have to reside at the root level of the stylesheet
(e.g: keyframes)
*/
@at-root {
}
/* children - write selector in full in comments in order to facilitate search */
// .segmentedButtons__btn
&__btn#{$self}__btn {
@include custom-prop-fallback("background-color","comp-segmented-button-enabled-button-background-color");
white-space: nowrap;
&.active {
@include custom-prop-fallback-override("comp-segmented-button-enabled-button-background-color","comp-segmented-button-inverted-enabled-button-background-color");
}
&:focus-visible {
outline-offset: 0 !important;
}
}
INPUT:focus-visible {
& + #{$self}__btn {
@include btn-interaction-base-outline();
outline-offset: 0 !important;
}
}
/* modifiers */
// segmentedButtons.-fullWidth
&.-segmentedButtonsFullWidth {
width: 100%;
& > * {
flex: 1;
}
#{$self}__btn {
width: 100%;
}
}
&.-segmentedButtonsInverted {
@include custom-prop-fallback-override("comp-segmented-button-background-color","comp-segmented-button-inverted-background-color");
#{$self}__btn {
@include custom-prop-fallback-override("comp-segmented-button-enabled-button-background-color","comp-segmented-button-inverted-enabled-button-background-color");
&.active {
@include custom-prop-fallback-override("comp-segmented-button-inverted-enabled-button-background-color","comp-segmented-button-inverted-selected-button-background-color");
}
}
}
/* random parent element */
/*
*
* Syntax : .randomParentElt & {}
*
*/
/* Pseudo Classes */
&:hover {
@media (hover: hover) {
}
}
&:focus {
}
&:active {
}
&:focus,
&:active {
}
}