data-tabpanels. Those IDs will be used in the URL to link to the specific tabpanel.manual: false in the config object.data-* attributes in the markup are always there.
<section class="ps ps-tabs--text ps-tabs-text--horizontal">
<div class="ps__wrap">
<div class="ps__head">
<header class="ps__header">
<span class="ps__kicker">Lorem Ipsum</span>
<h2 class="ps__title" aria-level="">It's more than a budget manager</h2>
</header>
<div class="ps__desc">
<p>
Learn about Prismic by reading questions and answers. It’s almost like talking to a human – and maybe even better.
</p>
</div>
</div>
<div class="ps__main grid grid--12">
<div class="span-1-12">
<div class="c-tabs" data-tabs data-tabs-orientation="horizontal">
<div class="c-tabs__tablist span-1-12" data-tablist hidden>
<button class="c-tabs__tab" data-tab>Tab 1 but long</button>
<button class="c-tabs__tab" data-tab>Tab 2</button>
<button class="c-tabs__tab" data-tab>Tab 3</button>
<button class="c-tabs__tab" data-tab>Tab 4</button>
<button class="c-tabs__tab" data-tab>Tab 5</button>
<button class="c-tabs__tab" data-tab>Tab 6</button>
</div>
<!-- make sure to provide a readable label for each section to be used in the URL hash -->
<section id="PROVIDE_LABEL_1" class="c-tabs__tabpanel span-1-12" data-tabpanel>
<h3 class="c-tabs__tabpanel__title">Panel 1</h3>
<div class="c-tabs__tabpanel__modules">
<div class="c-tabs__tabpanel__module">
<img class="c-tabs__tabpanel__module__img" src=" ../../img/features-icon.svg" alt="" width="" height="" />
<div class="c-tabs__tabpanel__module__content">
<h3 class="c-tabs__tabpanel__module__title text--xl">1. Background audio</h3>
<p>
The app doesn't block your music player. You can open your financial reports while listening. Moreover, you can even pick a soundtrack for each <a href="#">folder</a>.
</p>
</div>
</div>
<div class="c-tabs__tabpanel__module">
<img class="c-tabs__tabpanel__module__img" src=" ../../img/features-icon.svg" alt="" width="" height="" />
<div class="c-tabs__tabpanel__module__content">
<h3 class="c-tabs__tabpanel__module__title text--xl">1. Background audio</h3>
<p>
The app doesn't block your music player. You can open your financial reports while listening. Moreover, you can even pick a soundtrack for each <a href="#">folder</a>.
</p>
</div>
</div>
<div class="c-tabs__tabpanel__module">
<img class="c-tabs__tabpanel__module__img" src=" ../../img/features-icon.svg" alt="" width="" height="" />
<div class="c-tabs__tabpanel__module__content">
<h3 class="c-tabs__tabpanel__module__title text--xl">1. Background audio</h3>
<p>
The app doesn't block your music player. You can open your financial reports while listening. Moreover, you can even pick a soundtrack for each <a href="#">folder</a>.
</p>
</div>
</div>
<div class="c-tabs__tabpanel__module">
<img class="c-tabs__tabpanel__module__img" src=" ../../img/features-icon.svg" alt="" width="" height="" />
<div class="c-tabs__tabpanel__module__content">
<h3 class="c-tabs__tabpanel__module__title text--xl">1. Background audio</h3>
<p>
The app doesn't block your music player. You can open your financial reports while listening. Moreover, you can even pick a soundtrack for each <a href="#">folder</a>.
</p>
</div>
</div>
</div>
</section>
<section id="PROVIDE_LABEL_2" class="c-tabs__tabpanel span-1-12" data-tabpanel>
<h3 class="c-tabs__tabpanel__title">Panel 2</h3>
<div class="c-tabs__tabpanel__modules">
<div class="c-tabs__tabpanel__module">
<img class="c-tabs__tabpanel__module__img" src=" ../../img/features-icon.svg" alt="" width="" height="" />
<div class="c-tabs__tabpanel__module__content">
<h3 class="c-tabs__tabpanel__module__title text--xl">2. Background audio</h3>
<p>
The app doesn't block your music player. You can open your financial reports while listening. Moreover, you can even pick a soundtrack for each <a href="#">folder</a>.
</p>
</div>
</div>
<div class="c-tabs__tabpanel__module">
<img class="c-tabs__tabpanel__module__img" src=" ../../img/features-icon.svg" alt="" width="" height="" />
<div class="c-tabs__tabpanel__module__content">
<h3 class="c-tabs__tabpanel__module__title text--xl">2. Background audio</h3>
<p>
The app doesn't block your music player. You can open your financial reports while listening. Moreover, you can even pick a soundtrack for each <a href="#">folder</a>.
</p>
</div>
</div>
<div class="c-tabs__tabpanel__module">
<img class="c-tabs__tabpanel__module__img" src=" ../../img/features-icon.svg" alt="" width="" height="" />
<div class="c-tabs__tabpanel__module__content">
<h3 class="c-tabs__tabpanel__module__title text--xl">2. Background audio</h3>
<p>
The app doesn't block your music player. You can open your financial reports while listening. Moreover, you can even pick a soundtrack for each <a href="#">folder</a>.
</p>
</div>
</div>
<div class="c-tabs__tabpanel__module">
<img class="c-tabs__tabpanel__module__img" src=" ../../img/features-icon.svg" alt="" width="" height="" />
<div class="c-tabs__tabpanel__module__content">
<h3 class="c-tabs__tabpanel__module__title text--xl">2. Background audio</h3>
<p>
The app doesn't block your music player. You can open your financial reports while listening. Moreover, you can even pick a soundtrack for each <a href="#">folder</a>.
</p>
</div>
</div>
</div>
</section>
<section id="PROVIDE_LABEL_3" class="c-tabs__tabpanel span-1-12" data-tabpanel>
<h3 class="c-tabs__tabpanel__title">Panel 3</h3>
<div class="c-tabs__tabpanel__modules">
<div class="c-tabs__tabpanel__module">
<img class="c-tabs__tabpanel__module__img" src=" ../../img/features-icon.svg" alt="" width="" height="" />
<div class="c-tabs__tabpanel__module__content">
<h3 class="c-tabs__tabpanel__module__title text--xl">3. Background audio</h3>
<p>
The app doesn't block your music player. You can open your financial reports while listening. Moreover, you can even pick a soundtrack for each <a href="#">folder</a>.
</p>
</div>
</div>
<div class="c-tabs__tabpanel__module">
<img class="c-tabs__tabpanel__module__img" src=" ../../img/features-icon.svg" alt="" width="" height="" />
<div class="c-tabs__tabpanel__module__content">
<h3 class="c-tabs__tabpanel__module__title text--xl">3. Background audio</h3>
<p>
The app doesn't block your music player. You can open your financial reports while listening. Moreover, you can even pick a soundtrack for each <a href="#">folder</a>.
</p>
</div>
</div>
<div class="c-tabs__tabpanel__module">
<img class="c-tabs__tabpanel__module__img" src=" ../../img/features-icon.svg" alt="" width="" height="" />
<div class="c-tabs__tabpanel__module__content">
<h3 class="c-tabs__tabpanel__module__title text--xl">3. Background audio</h3>
<p>
The app doesn't block your music player. You can open your financial reports while listening. Moreover, you can even pick a soundtrack for each <a href="#">folder</a>.
</p>
</div>
</div>
<div class="c-tabs__tabpanel__module">
<img class="c-tabs__tabpanel__module__img" src=" ../../img/features-icon.svg" alt="" width="" height="" />
<div class="c-tabs__tabpanel__module__content">
<h3 class="c-tabs__tabpanel__module__title text--xl">3. Background audio</h3>
<p>
The app doesn't block your music player. You can open your financial reports while listening. Moreover, you can even pick a soundtrack for each <a href="#">folder</a>.
</p>
</div>
</div>
</div>
</section>
<section id="PROVIDE_LABEL_4" class="c-tabs__tabpanel span-1-12" data-tabpanel>
<h3 class="c-tabs__tabpanel__title">Panel 4</h3>
<div class="c-tabs__tabpanel__modules">
<div class="c-tabs__tabpanel__module">
<img class="c-tabs__tabpanel__module__img" src=" ../../img/features-icon.svg" alt="" width="" height="" />
<div class="c-tabs__tabpanel__module__content">
<h3 class="c-tabs__tabpanel__module__title text--xl">4. Background audio</h3>
<p>
The app doesn't block your music player. You can open your financial reports while listening. Moreover, you can even pick a soundtrack for each <a href="#">folder</a>.
</p>
</div>
</div>
<div class="c-tabs__tabpanel__module">
<img class="c-tabs__tabpanel__module__img" src=" ../../img/features-icon.svg" alt="" width="" height="" />
<div class="c-tabs__tabpanel__module__content">
<h3 class="c-tabs__tabpanel__module__title text--xl">4. Background audio</h3>
<p>
The app doesn't block your music player. You can open your financial reports while listening. Moreover, you can even pick a soundtrack for each <a href="#">folder</a>.
</p>
</div>
</div>
<div class="c-tabs__tabpanel__module">
<img class="c-tabs__tabpanel__module__img" src=" ../../img/features-icon.svg" alt="" width="" height="" />
<div class="c-tabs__tabpanel__module__content">
<h3 class="c-tabs__tabpanel__module__title text--xl">4. Background audio</h3>
<p>
The app doesn't block your music player. You can open your financial reports while listening. Moreover, you can even pick a soundtrack for each <a href="#">folder</a>.
</p>
</div>
</div>
<div class="c-tabs__tabpanel__module">
<img class="c-tabs__tabpanel__module__img" src=" ../../img/features-icon.svg" alt="" width="" height="" />
<div class="c-tabs__tabpanel__module__content">
<h3 class="c-tabs__tabpanel__module__title text--xl">4. Background audio</h3>
<p>
The app doesn't block your music player. You can open your financial reports while listening. Moreover, you can even pick a soundtrack for each <a href="#">folder</a>.
</p>
</div>
</div>
</div>
</section>
<section id="PROVIDE_LABEL_5" class="c-tabs__tabpanel span-1-12" data-tabpanel>
<h3 class="c-tabs__tabpanel__title">Panel 5</h3>
<div class="c-tabs__tabpanel__modules">
<div class="c-tabs__tabpanel__module">
<img class="c-tabs__tabpanel__module__img" src=" ../../img/features-icon.svg" alt="" width="" height="" />
<div class="c-tabs__tabpanel__module__content">
<h3 class="c-tabs__tabpanel__module__title text--xl">5. Background audio</h3>
<p>
The app doesn't block your music player. You can open your financial reports while listening. Moreover, you can even pick a soundtrack for each <a href="#">folder</a>.
</p>
</div>
</div>
<div class="c-tabs__tabpanel__module">
<img class="c-tabs__tabpanel__module__img" src=" ../../img/features-icon.svg" alt="" width="" height="" />
<div class="c-tabs__tabpanel__module__content">
<h3 class="c-tabs__tabpanel__module__title text--xl">5. Background audio</h3>
<p>
The app doesn't block your music player. You can open your financial reports while listening. Moreover, you can even pick a soundtrack for each <a href="#">folder</a>.
</p>
</div>
</div>
<div class="c-tabs__tabpanel__module">
<img class="c-tabs__tabpanel__module__img" src=" ../../img/features-icon.svg" alt="" width="" height="" />
<div class="c-tabs__tabpanel__module__content">
<h3 class="c-tabs__tabpanel__module__title text--xl">5. Background audio</h3>
<p>
The app doesn't block your music player. You can open your financial reports while listening. Moreover, you can even pick a soundtrack for each <a href="#">folder</a>.
</p>
</div>
</div>
<div class="c-tabs__tabpanel__module">
<img class="c-tabs__tabpanel__module__img" src=" ../../img/features-icon.svg" alt="" width="" height="" />
<div class="c-tabs__tabpanel__module__content">
<h3 class="c-tabs__tabpanel__module__title text--xl">5. Background audio</h3>
<p>
The app doesn't block your music player. You can open your financial reports while listening. Moreover, you can even pick a soundtrack for each <a href="#">folder</a>.
</p>
</div>
</div>
</div>
</section>
<section id="PROVIDE_LABEL_6" class="c-tabs__tabpanel span-1-12" data-tabpanel>
<h3 class="c-tabs__tabpanel__title">Panel 6</h3>
<div class="c-tabs__tabpanel__modules">
<div class="c-tabs__tabpanel__module">
<img class="c-tabs__tabpanel__module__img" src=" ../../img/features-icon.svg" alt="" width="" height="" />
<div class="c-tabs__tabpanel__module__content">
<h3 class="c-tabs__tabpanel__module__title text--xl">6. Background audio</h3>
<p>
The app doesn't block your music player. You can open your financial reports while listening. Moreover, you can even pick a soundtrack for each <a href="#">folder</a>.
</p>
</div>
</div>
<div class="c-tabs__tabpanel__module">
<img class="c-tabs__tabpanel__module__img" src=" ../../img/features-icon.svg" alt="" width="" height="" />
<div class="c-tabs__tabpanel__module__content">
<h3 class="c-tabs__tabpanel__module__title text--xl">6. Background audio</h3>
<p>
The app doesn't block your music player. You can open your financial reports while listening. Moreover, you can even pick a soundtrack for each <a href="#">folder</a>.
</p>
</div>
</div>
<div class="c-tabs__tabpanel__module">
<img class="c-tabs__tabpanel__module__img" src=" ../../img/features-icon.svg" alt="" width="" height="" />
<div class="c-tabs__tabpanel__module__content">
<h3 class="c-tabs__tabpanel__module__title text--xl">6. Background audio</h3>
<p>
The app doesn't block your music player. You can open your financial reports while listening. Moreover, you can even pick a soundtrack for each <a href="#">folder</a>.
</p>
</div>
</div>
<div class="c-tabs__tabpanel__module">
<img class="c-tabs__tabpanel__module__img" src=" ../../img/features-icon.svg" alt="" width="" height="" />
<div class="c-tabs__tabpanel__module__content">
<h3 class="c-tabs__tabpanel__module__title text--xl">6. Background audio</h3>
<p>
The app doesn't block your music player. You can open your financial reports while listening. Moreover, you can even pick a soundtrack for each <a href="#">folder</a>.
</p>
</div>
</div>
</div>
</section>
</div>
</div>
</div>
</div>
</section>
"use strict";
if (typeof Object.assign != "function") {
// Must be writable: true, enumerable: false, configurable: true
Object.defineProperty(Object, "assign", {
value: function assign(target, varArgs) {
// .length of function is 2
if (target == null) {
// TypeError if undefined or null
throw new TypeError(
"Cannot convert undefined or null to object"
);
}
var to = Object(target);
for (var index = 1; index < arguments.length; index++) {
var nextSource = arguments[index];
if (nextSource != null) {
// Skip over if undefined or null
for (var nextKey in nextSource) {
// Avoid bugs when hasOwnProperty is shadowed
if (
Object.prototype.hasOwnProperty.call(
nextSource,
nextKey
)
) {
to[nextKey] = nextSource[nextKey];
}
}
}
}
return to;
},
writable: true,
configurable: true
});
}
// add utilities; borrowed from: https://scottaohara.github.io/a11y_tab_widget/
var util = {
keyCodes: {
UP: 38,
DOWN: 40,
LEFT: 37,
RIGHT: 39,
HOME: 36,
END: 35,
ENTER: 13,
SPACE: 32,
DELETE: 46,
TAB: 9
},
generateID: function (base) {
return base + Math.floor(Math.random() * 999);
},
getUrlHash: function () {
return window.location.hash.replace('#', '');
},
/**
* Use history.replaceState so clicking through Tabs
* does not create dozens of new history entries.
* Browser back should navigate to the previous page
* regardless of how many Tabs were activated.
*
* @param {string} hash
*/
setUrlHash: function (hash) {
if (history.replaceState) {
history.replaceState(null, '', '#' + hash);
} else {
location.hash = hash;
}
}
};
(function (w, doc, undefined) {
var ARIAaccOptions = {
manual: true,
open: 0
}
var ARIAtabs = function (inst, options) {
var _options = Object.assign(ARIAaccOptions, options);
var el = inst;
var tablist = el.querySelector("[data-tablist]");
var tabs = Array.from(el.querySelectorAll("[data-tab]"));
var tabpanels = Array.from(el.querySelectorAll("[data-tabpanel]"));
var tabsID = util.generateID('ps__tabs-');
var orientation = el.getAttribute('data-tabs-orientation');
var currentIndex = _options.open;
var selectedTab = currentIndex;
var manual = _options.manual;
el.setAttribute('id', tabsID);
var init = function () {
el.classList.add('js-tabs');
tablist.removeAttribute('hidden');
setupTabList();
setupTabs();
setupTabPanels();
};
var setupTabList = function () {
tablist.setAttribute("role", "tablist");
if (orientation == 'vertical') tablist.setAttribute("aria-orientation", "vertical");
}
var setupTabs = function () {
tabs.forEach((tab, index) => {
tab.setAttribute('role', 'tab');
// each tab needs an ID that will be used to label its corresponding panel
tab.setAttribute('id', tabsID + '__tab-' + index);
tab.setAttribute('data-controls', tabpanels[index].getAttribute('id'));
// first tab is initially active
if (index === currentIndex) {
selectTab(tab);
// updateUrlHash();
}
if (tab.getAttribute('data-controls') === util.getUrlHash()) {
currentIndex = index;
selectedTab = index;
selectTab(tab);
}
tab.addEventListener('click', (e) => {
e.preventDefault();
currentIndex = index;
selectedTab = index;
focusCurrentTab();
selectTab(tab);
updateUrlHash();
}, false);
tab.addEventListener('keydown', (e) => {
tabKeyboardRespond(e, tab);
}, false);
});
}
var focusCurrentTab = function () {
tabs[currentIndex].focus();
}
var updateUrlHash = function () {
var active = tabs[selectedTab];
util.setUrlHash(active.getAttribute('data-controls'));
};
var selectTab = function (tab) {
// unactivate all other tabs
tabs.forEach(tab => {
tab.setAttribute('aria-selected', 'false');
tab.setAttribute('tabindex', '-1');
});
//activate current tab
tab.setAttribute('aria-selected', 'true');
tab.setAttribute('tabindex', '0');
// activate corresponding panel
showTabpanel(tab);
}
var setupTabPanels = function () {
tabpanels.forEach((tabpanel, index) => {
tabpanel.setAttribute('role', 'tabpanel');
tabpanel.setAttribute('tabindex', '-1');
tabpanel.setAttribute('hidden', '');
if (index == currentIndex) {
tabpanel.removeAttribute('hidden');
}
tabpanel.addEventListener('keydown', (e) => {
panelKeyboardRespond(e);
}, false);
tabpanel.addEventListener("blur", () => {
tabpanel.setAttribute('tabindex', '-1');
}, false);
});
}
var panelKeyboardRespond = function (e) {
var keyCode = e.keyCode || e.which;
switch (keyCode) {
case util.keyCodes.TAB:
tabpanels[currentIndex].setAttribute('tabindex', '-1');
break;
default:
break;
}
}
var showTabpanel = function (tab) {
tabpanels.forEach((tabpanel, index) => {
tabpanel.setAttribute('hidden', '');
tabpanel.removeAttribute('tabindex');
if (index == currentIndex) {
tabpanel.removeAttribute('hidden');
tabpanel.setAttribute('aria-labelledby', tabs[currentIndex].getAttribute('id'));
tabpanel.setAttribute('tabindex', '0');
}
});
}
var incrementcurrentIndex = function () {
if (currentIndex < tabs.length - 1) {
return ++currentIndex;
}
else {
currentIndex = 0;
return currentIndex;
}
};
var decrementcurrentIndex = function () {
if (currentIndex > 0) {
return --currentIndex;
}
else {
currentIndex = tabs.length - 1;
return currentIndex;
}
};
var tabKeyboardRespond = function (e, tab) {
var firstTab = tabs[0];
var lastTab = tabs[tabs.length - 1];
var keyCode = e.keyCode || e.which;
switch (keyCode) {
case util.keyCodes.UP:
case util.keyCodes.LEFT:
e.preventDefault();
decrementcurrentIndex();
focusCurrentTab();
if (!manual) {
selectedTab = currentIndex;
selectTab(tabs[selectedTab]);
updateUrlHash();
}
break;
case util.keyCodes.DOWN:
case util.keyCodes.RIGHT:
e.preventDefault();
incrementcurrentIndex();
focusCurrentTab();
if (!manual) {
selectedTab = currentIndex;
selectTab(tabs[selectedTab]);
updateUrlHash();
}
break;
case util.keyCodes.ENTER:
case util.keyCodes.SPACE:
e.preventDefault();
selectedTab = currentIndex;
selectTab(tabs[selectedTab]);
updateUrlHash();
break;
case util.keyCodes.TAB:
tabpanels[selectedTab].setAttribute('tabindex', '0');
currentIndex = selectedTab;
break;
case util.keyCodes.HOME:
e.preventDefault();
firstTab.focus();
updateUrlHash();
break;
case util.keyCodes.END:
e.preventDefault();
lastTab.focus();
updateUrlHash();
break;
}
}
init.call(this);
return this;
}; // ARIAtabs()
w.ARIAtabs = ARIAtabs;
})(window, document);
var tabsInstance = "[data-tabs]";
var els = document.querySelectorAll(tabsInstance);
var allTabs = [];
// Generate all tabs instances
for (var i = 0; i < els.length; i++) {
var nTabs = new ARIAtabs(els[i], { manual: true }); // if manual is set to false, the tabs open on focus without needing an ENTER or SPACE press
allTabs.push(nTabs);
}
{
"status": "ready"
}
/**************************************************\
* Tabs | Text component-specific styles.
* Main general styles are in the _tabs.scss file
***************************************************/
.c-tabs__tablist--text .c-tabs__tab {
padding: 1rem;
color: #000;
font-weight: bold;
text-transform: uppercase;
border: 2px dotted transparent;
&[aria-selected="true"] {
color: var(--color--primary);
}
&:focus,
&.focus-visible {
outline: none;
border-color: currentColor;
outline-offset: -4px;
}
&:focus:not(:focus-visible) {
outline: none;
border-color: transparent;
}
.js-focus-visible &:focus:not(.focus-visible) {
outline: none;
border-color: transparent;
}
}
.ps-tabs--text .c-tabs__tablist {
background: linear-gradient(to bottom, var(--color-grey-90), var(--color-grey-90)),
linear-gradient(90deg, #fff 30%, rgba(255, 255, 255, 0)),
linear-gradient(90deg, rgba(255, 255, 255, 0), #fff 70%) 0 100%,
radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, .25), transparent),
radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, .25), transparent) 0 100%;
background-size: 100% 4px, 20px 100%, 20px 100%, 10px 100%, 10px 100%;
background-position: left bottom, 0 0, 100%, 0 0, 100%;
background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
background-attachment: local, local, local, scroll, scroll;
padding: 0;
position: relative;
&[aria-orientation="vertical"] {
@media all and (min-width: 50em) {
flex-direction: column;
align-items: flex-start;
background-size: 4px 100%;
background-position: left top;
background-repeat: no-repeat;
}
}
}
.ps-tabs--text [aria-orientation="vertical"] .c-tabs__tab {
@media all and (min-width: 50em) {
padding: 1.5rem;
border-left: 4px solid transparent;
border-bottom: none;
}
}
.ps-tabs--text [aria-orientation="vertical"] .c-tabs__tab[aria-selected="true"] {
@media all and (min-width: 50em) {
border-bottom: none;
border-left: 4px solid currentColor;
}
}
.ps-tabs--text .c-tabs__tab {
font-weight: normal;
padding: 1.5rem;
border-bottom: 4px solid transparent;
border-left: none;
&[aria-selected="true"] {
color: var(--color--primary);
font-weight: bold;
border-bottom: 4px solid currentColor;
}
&:hover {
color: var(--color--primary);
}
&:focus,
&.focus-visible {
background-color: var(--color-grey-90);
font-weight: bold;
outline: none;
}
}
/* tabs content specific styles */
.c-tabs__tabpanel__modules {
@supports(display: grid) {
@media all and (min-width: 50em) {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
grid-column-gap: var(--h-padding);
grid-row-gap: var(--v-margin);
}
.c-tabs__tabpanel__module__img {
margin-bottom: 1rem;
}
}
}
title: Tabs | Text
# notes: "You can have a note here; it will override the README.md notes"
context:
text: