gitea_admin/Styleguide
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit: add styleguide project

Browse Source
This commit is contained in:
Mathias Gläser
2026-05-18 16:00:56 +02:00
commit 5abea83034
20 changed files with 6537 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
patterns/card-gruppe-mit-tastennavigation.html
+98
View File
@@ -0,0 +1,98 @@
<!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">
<article class="sg-card sg-content-block-card-group__card" data-component="card">
<div class="sg-card-segment sg-card-segment--body sg-content-block-card-group__title" data-pattern-part="content-block-card-title">
<div class="sg-strong">Card 1</div>
</div>
<div class="sg-card-segment sg-card-segment--body sg-content-block-card-group__content" data-pattern-part="content-block-card-content">
<p class="sg-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Nunc sed velit dignissim sodales ut eu sem integer. Vitae congue mauris rhoncus aenean vel elit scelerisque mauris pellentesque pulvinar.</p>
</div>
</article>
</div>
<div class="sg-content-block-card-group__panel" id="content-block-card-2" role="tabpanel" aria-labelledby="content-block-tab-2" hidden>
<article class="sg-card sg-content-block-card-group__card" data-component="card">
<div class="sg-card-segment sg-card-segment--body sg-content-block-card-group__title" data-pattern-part="content-block-card-title">
<div class="sg-strong">Card 2</div>
</div>
<div class="sg-card-segment sg-card-segment--body sg-content-block-card-group__content" data-pattern-part="content-block-card-content">
<p class="sg-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis risus sed vulputate odio ut enim blandit volutpat maecenas volutpat blandit aliquam etiam erat velit scelerisque in dictum non consectetur. Amet cursus sit amet dictum sit amet justo donec enim diam vulputate ut pharetra sit amet aliquam id diam maecenas ultricies mi eget mauris. Magna eget est lorem ipsum dolor sit amet consectetur adipiscing elit ut aliquam purus sit amet luctus venenatis lectus magna fringilla urna porttitor rhoncus dolor purus non enim.</p>
</div>
</article>
</div>
<div class="sg-content-block-card-group__panel" id="content-block-card-3" role="tabpanel" aria-labelledby="content-block-tab-3" hidden>
<article class="sg-card sg-content-block-card-group__card" data-component="card">
<div class="sg-card-segment sg-card-segment--body sg-content-block-card-group__title" data-pattern-part="content-block-card-title">
<div class="sg-strong">Card 3</div>
</div>
<div class="sg-card-segment sg-card-segment--body sg-content-block-card-group__content" data-pattern-part="content-block-card-content">
<p class="sg-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur excepteur sint occaecat cupidatat non proident sunt in culpa qui officia deserunt mollit anim id est laborum etiam sit amet nisl purus in mollis nunc sed id semper risus in hendrerit gravida rutrum quisque non tellus orci ac auctor augue mauris augue neque gravida in fermentum et sollicitudin.</p>
</div>
</article>
</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 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);
});
});
}
</script>
</body>
</html>