194 lines
10 KiB
HTML
194 lines
10 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>
|
||
</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>
|
||
</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 mobileBreakpoint = window.matchMedia('(max-width: 767px)');
|
||
|
||
const applyMobileTabWidthBounds = () => {
|
||
tabs.forEach((tab) => {
|
||
tab.style.removeProperty('width');
|
||
tab.style.removeProperty('flex');
|
||
tab.style.removeProperty('min-width');
|
||
tab.style.removeProperty('max-width');
|
||
tab.removeAttribute('data-tab-min-width');
|
||
tab.removeAttribute('data-tab-max-width');
|
||
});
|
||
|
||
if (!mobileBreakpoint.matches) {
|
||
return;
|
||
}
|
||
|
||
tabs.forEach((tab) => {
|
||
const currentWidth = Math.ceil(tab.getBoundingClientRect().width);
|
||
const maxWidth = Math.ceil(currentWidth * 1.4);
|
||
tab.style.flex = '0 1 auto';
|
||
tab.style.minWidth = `${currentWidth}px`;
|
||
tab.style.maxWidth = `${maxWidth}px`;
|
||
tab.setAttribute('data-tab-min-width', `${currentWidth}px`);
|
||
tab.setAttribute('data-tab-max-width', `${maxWidth}px`);
|
||
});
|
||
};
|
||
|
||
const activateTab = (targetTab) => {
|
||
tabs.forEach((tab) => {
|
||
tab.setAttribute('aria-selected', String(tab === targetTab));
|
||
if (mobileBreakpoint.matches) {
|
||
const minWidth = tab.getAttribute('data-tab-min-width');
|
||
const maxWidth = tab.getAttribute('data-tab-max-width');
|
||
tab.style.width = tab === targetTab ? maxWidth : minWidth;
|
||
} else {
|
||
tab.style.removeProperty('width');
|
||
}
|
||
});
|
||
|
||
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);
|
||
});
|
||
});
|
||
|
||
applyMobileTabWidthBounds();
|
||
const activeTab = tabs.find((tab) => tab.getAttribute('aria-selected') === 'true') || tabs[0];
|
||
if (activeTab) {
|
||
activateTab(activeTab);
|
||
}
|
||
mobileBreakpoint.addEventListener('change', applyMobileTabWidthBounds);
|
||
window.addEventListener('resize', applyMobileTabWidthBounds);
|
||
}
|
||
</script>
|
||
|
||
</body>
|
||
</html>
|