244 lines
14 KiB
HTML
244 lines
14 KiB
HTML
<!doctype html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Styleguide – Pattern Card Gruppe mit Tastennavigation</title>
|
||
<link rel="stylesheet" href="../styleguide.css">
|
||
</head>
|
||
<body>
|
||
|
||
<h1 class="sg-main-heading">Pattern – Card Gruppe mit Tastennavigation</h1>
|
||
<section id="pattern-card-gruppe-mit-tastennavigation">
|
||
<p class="sg-preview-label">Pattern: Card Gruppe mit Tastennavigation</p>
|
||
|
||
<div class="sg-content-block-card-group" data-pattern="card-gruppe-mit-tastennavigation">
|
||
<div class="sg-tab-button-group sg-content-block-card-group__tabs" role="tablist" aria-label="Tasten Navigation" data-component="tab-navigation" data-component-size="large">
|
||
<button class="sg-interaction-element sg-button sg-tab-button" type="button" role="tab" aria-selected="true" aria-controls="content-block-card-1" id="content-block-tab-1" data-component-part="tab-button">Taste 1</button>
|
||
<button class="sg-interaction-element sg-button sg-tab-button" type="button" role="tab" aria-selected="false" aria-controls="content-block-card-2" id="content-block-tab-2" data-component-part="tab-button">Taste 2</button>
|
||
<button class="sg-interaction-element sg-button sg-tab-button" type="button" role="tab" aria-selected="false" aria-controls="content-block-card-3" id="content-block-tab-3" data-component-part="tab-button">Taste 3</button>
|
||
<button class="sg-interaction-element sg-button sg-tab-button" type="button" role="tab" aria-selected="false" aria-controls="content-block-card-4" id="content-block-tab-4" data-component-part="tab-button">Taste 4</button>
|
||
<button class="sg-interaction-element sg-button sg-tab-button" type="button" role="tab" aria-selected="false" aria-controls="content-block-card-5" id="content-block-tab-5" data-component-part="tab-button">Taste 5</button>
|
||
<button class="sg-interaction-element sg-button sg-tab-button" type="button" role="tab" aria-selected="false" aria-controls="content-block-card-6" id="content-block-tab-6" data-component-part="tab-button">Taste 6</button>
|
||
<button class="sg-interaction-element sg-button sg-tab-button" type="button" role="tab" aria-selected="false" aria-controls="content-block-card-7" id="content-block-tab-7" data-component-part="tab-button">Taste 7</button>
|
||
</div>
|
||
|
||
<div class="sg-content-block-card-group__panels">
|
||
<div class="sg-content-block-card-group__panel" id="content-block-card-1" role="tabpanel" aria-labelledby="content-block-tab-1">
|
||
<div class="sg-content-cards-group" data-pattern="content-cards-group" aria-label="Card Gruppe Taste 1">
|
||
<article class="sg-card sg-card--content-card" data-component="content-card" aria-label="Card 1.1">
|
||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue" data-component-part="card-header">
|
||
<div class="sg-strong">Card 1.1</div>
|
||
</div>
|
||
<div class="sg-card-segment sg-card-segment--body" data-component-part="card-body">
|
||
<p class="sg-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
||
</div>
|
||
</article>
|
||
<article class="sg-card sg-card--content-card" data-component="content-card" aria-label="Card 1.2">
|
||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue" data-component-part="card-header">
|
||
<div class="sg-strong">Card 1.2</div>
|
||
</div>
|
||
<div class="sg-card-segment sg-card-segment--body" data-component-part="card-body">
|
||
<p class="sg-body">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
|
||
</div>
|
||
</article>
|
||
<article class="sg-card sg-card--content-card" data-component="content-card" aria-label="Card 1.3">
|
||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue" data-component-part="card-header">
|
||
<div class="sg-strong">Card 1.3</div>
|
||
</div>
|
||
<div class="sg-card-segment sg-card-segment--body" data-component-part="card-body">
|
||
<p class="sg-body">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="sg-content-block-card-group__panel" id="content-block-card-2" role="tabpanel" aria-labelledby="content-block-tab-2" hidden>
|
||
<div class="sg-content-cards-group" data-pattern="content-cards-group" aria-label="Card Gruppe Taste 2">
|
||
<article class="sg-card sg-card--content-card" data-component="content-card" aria-label="Card 2.1">
|
||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue" data-component-part="card-header">
|
||
<div class="sg-strong">Card 2.1</div>
|
||
</div>
|
||
<div class="sg-card-segment sg-card-segment--body" data-component-part="card-body">
|
||
<p class="sg-body">Quis risus sed vulputate odio ut enim blandit volutpat maecenas volutpat blandit aliquam etiam erat velit.</p>
|
||
</div>
|
||
</article>
|
||
<article class="sg-card sg-card--content-card" data-component="content-card" aria-label="Card 2.2">
|
||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue" data-component-part="card-header">
|
||
<div class="sg-strong">Card 2.2</div>
|
||
</div>
|
||
<div class="sg-card-segment sg-card-segment--body" data-component-part="card-body">
|
||
<p class="sg-body">Amet cursus sit amet dictum sit amet justo donec enim diam vulputate ut pharetra sit amet aliquam id diam.</p>
|
||
</div>
|
||
</article>
|
||
<article class="sg-card sg-card--content-card" data-component="content-card" aria-label="Card 2.3">
|
||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue" data-component-part="card-header">
|
||
<div class="sg-strong">Card 2.3</div>
|
||
</div>
|
||
<div class="sg-card-segment sg-card-segment--body" data-component-part="card-body">
|
||
<p class="sg-body">Magna eget est lorem ipsum dolor sit amet consectetur adipiscing elit ut aliquam purus sit amet luctus.</p>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="sg-content-block-card-group__panel" id="content-block-card-3" role="tabpanel" aria-labelledby="content-block-tab-3" hidden>
|
||
<div class="sg-content-cards-group" data-pattern="content-cards-group" aria-label="Card Gruppe Taste 3">
|
||
<article class="sg-card sg-card--content-card" data-component="content-card" aria-label="Card 3.1">
|
||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue" data-component-part="card-header">
|
||
<div class="sg-strong">Card 3.1</div>
|
||
</div>
|
||
<div class="sg-card-segment sg-card-segment--body" data-component-part="card-body">
|
||
<p class="sg-body">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||
</div>
|
||
</article>
|
||
<article class="sg-card sg-card--content-card" data-component="content-card" aria-label="Card 3.2">
|
||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue" data-component-part="card-header">
|
||
<div class="sg-strong">Card 3.2</div>
|
||
</div>
|
||
<div class="sg-card-segment sg-card-segment--body" data-component-part="card-body">
|
||
<p class="sg-body">Etiam sit amet nisl purus in mollis nunc sed id semper risus in hendrerit gravida rutrum quisque.</p>
|
||
</div>
|
||
</article>
|
||
<article class="sg-card sg-card--content-card" data-component="content-card" aria-label="Card 3.3">
|
||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue" data-component-part="card-header">
|
||
<div class="sg-strong">Card 3.3</div>
|
||
</div>
|
||
<div class="sg-card-segment sg-card-segment--body" data-component-part="card-body">
|
||
<p class="sg-body">Non tellus orci ac auctor augue mauris augue neque gravida in fermentum et sollicitudin ac orci phasellus.</p>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="sg-content-block-card-group__panel" id="content-block-card-4" role="tabpanel" aria-labelledby="content-block-tab-4" hidden>
|
||
<div class="sg-content-cards-group" data-pattern="content-cards-group" aria-label="Card Gruppe Taste 4">
|
||
<article class="sg-card sg-card--content-card" data-component="content-card" aria-label="Card 4.1">
|
||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue" data-component-part="card-header">
|
||
<div class="sg-strong">Card 4.1</div>
|
||
</div>
|
||
<div class="sg-card-segment sg-card-segment--body" data-component-part="card-body">
|
||
<p class="sg-body">Inhalt für Taste 4.</p>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="sg-content-block-card-group__panel" id="content-block-card-5" role="tabpanel" aria-labelledby="content-block-tab-5" hidden>
|
||
<div class="sg-content-cards-group" data-pattern="content-cards-group" aria-label="Card Gruppe Taste 5">
|
||
<article class="sg-card sg-card--content-card" data-component="content-card" aria-label="Card 5.1">
|
||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue" data-component-part="card-header">
|
||
<div class="sg-strong">Card 5.1</div>
|
||
</div>
|
||
<div class="sg-card-segment sg-card-segment--body" data-component-part="card-body">
|
||
<p class="sg-body">Inhalt für Taste 5.</p>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="sg-content-block-card-group__panel" id="content-block-card-6" role="tabpanel" aria-labelledby="content-block-tab-6" hidden>
|
||
<div class="sg-content-cards-group" data-pattern="content-cards-group" aria-label="Card Gruppe Taste 6">
|
||
<article class="sg-card sg-card--content-card" data-component="content-card" aria-label="Card 6.1">
|
||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue" data-component-part="card-header">
|
||
<div class="sg-strong">Card 6.1</div>
|
||
</div>
|
||
<div class="sg-card-segment sg-card-segment--body" data-component-part="card-body">
|
||
<p class="sg-body">Inhalt für Taste 6.</p>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="sg-content-block-card-group__panel" id="content-block-card-7" role="tabpanel" aria-labelledby="content-block-tab-7" hidden>
|
||
<div class="sg-content-cards-group" data-pattern="content-cards-group" aria-label="Card Gruppe Taste 7">
|
||
<article class="sg-card sg-card--content-card" data-component="content-card" aria-label="Card 7.1">
|
||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue" data-component-part="card-header">
|
||
<div class="sg-strong">Card 7.1</div>
|
||
</div>
|
||
<div class="sg-card-segment sg-card-segment--body" data-component-part="card-body">
|
||
<p class="sg-body">Inhalt für Taste 7.</p>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<script>
|
||
const tabGroup = document.querySelector('[data-pattern="card-gruppe-mit-tastennavigation"]');
|
||
|
||
if (tabGroup) {
|
||
const tabs = Array.from(tabGroup.querySelectorAll('[role="tab"]'));
|
||
const panels = Array.from(tabGroup.querySelectorAll('[role="tabpanel"]'));
|
||
const tabList = tabGroup.querySelector('[role="tablist"]');
|
||
|
||
const applyMobileBalancedTabRows = () => {
|
||
if (!tabList) {
|
||
return;
|
||
}
|
||
|
||
tabs.forEach((tab) => {
|
||
tab.style.removeProperty('--sg-tab-mobile-row-slots');
|
||
});
|
||
|
||
if (window.matchMedia('(min-width: 768px)').matches || tabs.length <= 3) {
|
||
return;
|
||
}
|
||
|
||
const maxItemsPerRow = 3;
|
||
const rowCount = Math.ceil(tabs.length / maxItemsPerRow);
|
||
const baseRowSize = Math.floor(tabs.length / rowCount);
|
||
const rowRemainder = tabs.length % rowCount;
|
||
let tabStartIndex = 0;
|
||
|
||
for (let rowIndex = 0; rowIndex < rowCount; rowIndex += 1) {
|
||
const rowSize = baseRowSize + (rowIndex < rowRemainder ? 1 : 0);
|
||
for (let itemOffset = 0; itemOffset < rowSize; itemOffset += 1) {
|
||
const tab = tabs[tabStartIndex + itemOffset];
|
||
if (tab) {
|
||
tab.style.setProperty('--sg-tab-mobile-row-slots', String(rowSize));
|
||
}
|
||
}
|
||
tabStartIndex += rowSize;
|
||
}
|
||
};
|
||
|
||
const activateTab = (targetTab) => {
|
||
tabs.forEach((tab) => {
|
||
tab.setAttribute('aria-selected', String(tab === targetTab));
|
||
});
|
||
|
||
panels.forEach((panel) => {
|
||
panel.hidden = panel.id !== targetTab.getAttribute('aria-controls');
|
||
});
|
||
};
|
||
|
||
tabs.forEach((tab, index) => {
|
||
tab.addEventListener('click', () => {
|
||
activateTab(tab);
|
||
});
|
||
|
||
tab.addEventListener('keydown', (event) => {
|
||
if (event.key !== 'ArrowRight' && event.key !== 'ArrowLeft') {
|
||
return;
|
||
}
|
||
|
||
event.preventDefault();
|
||
const direction = event.key === 'ArrowRight' ? 1 : -1;
|
||
const nextIndex = (index + direction + tabs.length) % tabs.length;
|
||
const nextTab = tabs[nextIndex];
|
||
nextTab.focus();
|
||
activateTab(nextTab);
|
||
});
|
||
});
|
||
|
||
applyMobileBalancedTabRows();
|
||
window.addEventListener('resize', applyMobileBalancedTabRows);
|
||
}
|
||
</script>
|
||
|
||
</body>
|
||
</html>
|