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

Add public portal header pattern

Browse Source
This commit is contained in:
Mathias Gläser
2026-06-18 10:20:27 +02:00
parent 94a1ac9b33
commit f4632f6543
1 changed files with 50 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
patterns/portal-header.html
+50 -1
View File
@@ -59,6 +59,55 @@
</p>
</article>
<section id="pattern-public-portal-header">
<h1 class="sg-main-heading">Pattern – Public Portal Header</h1>
<p class="sg-preview-label">Pattern: Public Portal Header</p>
<p class="sg-table-label sg-text-on-dark">
Desktop/Tablet: Header skaliert über die verfügbare Breite.
</p>
<p class="sg-table-label sg-text-on-dark">
Mobile: Login/Registrieren und Portaltitel in der ersten Zeile; Navigationstasten in einer eigenen Zeile darunter.
</p>
<article class="sg-portal-header-pattern-variant" aria-label="Public Portal Header ohne Options Row">
<p class="sg-table-label sg-portal-header-pattern-variant__label sg-text-on-dark">
Variante: Public Portal Header ohne Options Row
</p>
<header class="sg-portal-header" aria-label="Public Portal Header" data-pattern="portal-header">
<div class="sg-portal-header__main" data-pattern-part="portal-header-main">
<p class="sg-portal-header__brand sg-brand-title" data-pattern-part="portal-header-brand">Portalname</p>
<div class="sg-portal-header__menu-wrap" data-pattern-part="portal-header-action">
<div class="sg-tab-button-group" role="tablist" aria-label="Anmeldung" data-component="tab-navigation" data-component-size="large" data-component-context="portal-header">
<button class="sg-interaction-element sg-button sg-tab-button" type="button" role="tab" aria-selected="false" data-component-part="tab-button" data-component-state="inactive">
Login
</button>
<button class="sg-interaction-element sg-button sg-tab-button" type="button" role="tab" aria-selected="false" data-component-part="tab-button" data-component-state="inactive">
Registrieren
</button>
</div>
</div>
<nav class="sg-portal-header__tabs sg-tab-button-group" aria-label="Hauptnavigation" data-component="tab-navigation" data-component-size="large" data-component-context="portal-header" data-pattern-part="portal-header-navigation">
<button class="sg-interaction-element sg-button sg-tab-button" type="button" aria-selected="true" data-component-part="tab-button" data-component-state="active">Inhalt 1</button>
<button class="sg-interaction-element sg-button sg-tab-button" type="button" aria-selected="false" data-component-part="tab-button" data-component-state="inactive">Inhalt 2</button>
<button class="sg-interaction-element sg-button sg-tab-button" type="button" aria-selected="false" data-component-part="tab-button" data-component-state="inactive">Inhalt 3</button>
<button class="sg-interaction-element sg-button sg-tab-button" type="button" aria-selected="false" data-component-part="tab-button" data-component-state="inactive">Inhalt 4</button>
</nav>
</div>
</header>
<p class="sg-table-label sg-portal-header-pattern-variant__next-element sg-text-on-dark">
Nächstes Element (Abstand nach unten: spacing-large)
</p>
</article>
</section>
<article class="sg-portal-header-pattern-variant" aria-label="Portal Header mit Options Row">
<p class="sg-table-label sg-portal-header-pattern-variant__label sg-text-on-dark">
Variante: Portal Header mit Options Row
@@ -197,7 +246,7 @@
<script src="../scripts/help-icon-overlays.js"></script>
<script>
document.querySelectorAll('.sg-portal-header__tabs').forEach((group) => {
document.querySelectorAll('.sg-portal-header__tabs, .sg-portal-header__menu-wrap .sg-tab-button-group').forEach((group) => {
group.querySelectorAll('.sg-tab-button').forEach((button) => {
button.addEventListener('click', () => {
group.querySelectorAll('.sg-tab-button').forEach((otherButton) => {