313 lines
14 KiB
HTML
313 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 – Page Layout Basic</title>
|
||
<link rel="stylesheet" href="../styleguide.css">
|
||
</head>
|
||
<body>
|
||
|
||
<h1 class="sg-main-heading">Layout – Page Layout Basic</h1>
|
||
|
||
<main aria-label="Page Layout Basic">
|
||
<header class="sg-portal-header" aria-label="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">ValueStockFinder</p>
|
||
|
||
<div class="sg-portal-header__menu-wrap sg-sandwich-menu-wrap" data-open="false" data-component="sandwich-menu" data-component-size="default" data-component-context="portal-header" data-pattern-part="portal-header-action">
|
||
<button class="sg-interaction-element sg-sandwich-button" type="button" aria-expanded="false" aria-label="Menü öffnen" data-component-part="sandwich-trigger">
|
||
<span class="sg-sandwich-button__icon" aria-hidden="true">
|
||
<span class="sg-sandwich-button__line"></span>
|
||
<span class="sg-sandwich-button__line"></span>
|
||
<span class="sg-sandwich-button__line"></span>
|
||
</span>
|
||
</button>
|
||
|
||
<div class="sg-sandwich-menu-panel" aria-label="Ausgeklapptes Menü" data-component-part="sandwich-panel">
|
||
<a class="sg-sandwich-menu-link" href="#" data-component-part="sandwich-menu-link">Admin</a>
|
||
<a class="sg-sandwich-menu-link" href="#" data-component-part="sandwich-menu-link">Logout</a>
|
||
</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="false" data-component-part="tab-button" data-component-state="inactive">Updates</button>
|
||
<button class="sg-interaction-element sg-button sg-tab-button" type="button" aria-selected="true" data-component-part="tab-button" data-component-state="active">Titel</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">Gruppen</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">Listen</button>
|
||
</nav>
|
||
</div>
|
||
</header>
|
||
|
||
<div class="sg-options-row" aria-label="Optionszeile" data-pattern="options-row">
|
||
<div class="sg-options-row__left" data-pattern-part="options-row-primary-actions">
|
||
<div class="sg-pulldown-demo" data-open="false" data-align="left" data-selection-mode="single" data-component="pulldown" data-component-context="options-row" data-component-state="inactive-selectable">
|
||
<button class="sg-interaction-element sg-pulldown sg-pulldown-demo__trigger" type="button" aria-expanded="false" aria-label="Pulldown Sortierung" data-component-part="pulldown-trigger" data-label-base="Sortierung">
|
||
Sortierung
|
||
</button>
|
||
|
||
<div class="sg-pulldown-panel" aria-label="Geöffnetes Pulldown Sortierung" data-component-part="pulldown-panel">
|
||
<ul class="sg-pulldown-option-list" aria-label="Sortierungsoptionen">
|
||
<li class="sg-pulldown-option" role="checkbox" aria-checked="false" data-pulldown-option>
|
||
<span>Menüpunkt 1</span>
|
||
</li>
|
||
<li class="sg-pulldown-option" role="checkbox" aria-checked="false" data-pulldown-option>
|
||
<span>Menüpunkt 2</span>
|
||
</li>
|
||
<li class="sg-pulldown-option" role="checkbox" aria-checked="false" data-pulldown-option>
|
||
<span>Menüpunkt 3</span>
|
||
</li>
|
||
<li class="sg-pulldown-option" role="checkbox" aria-checked="false" data-pulldown-option>
|
||
<span>Menüpunkt 4</span>
|
||
</li>
|
||
<li class="sg-pulldown-option sg-pulldown-option--disabled">
|
||
<span>Menüpunkt 5</span>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="sg-pulldown-demo" data-open="false" data-align="left" data-selection-mode="single" data-component="pulldown" data-component-context="options-row" data-component-state="inactive-selectable">
|
||
<button class="sg-interaction-element sg-pulldown sg-pulldown-demo__trigger" type="button" aria-expanded="false" aria-label="Pulldown Region" data-component-part="pulldown-trigger" data-label-base="Region">
|
||
Region
|
||
</button>
|
||
|
||
<div class="sg-pulldown-panel" aria-label="Geöffnetes Pulldown Region" data-component-part="pulldown-panel">
|
||
<ul class="sg-pulldown-option-list" aria-label="Regionsoptionen">
|
||
<li class="sg-pulldown-option" role="checkbox" aria-checked="false" data-pulldown-option>
|
||
<span>Menüpunkt 1</span>
|
||
</li>
|
||
<li class="sg-pulldown-option" role="checkbox" aria-checked="false" data-pulldown-option>
|
||
<span>Menüpunkt 2</span>
|
||
</li>
|
||
<li class="sg-pulldown-option" role="checkbox" aria-checked="false" data-pulldown-option>
|
||
<span>Menüpunkt 3</span>
|
||
</li>
|
||
<li class="sg-pulldown-option" role="checkbox" aria-checked="false" data-pulldown-option>
|
||
<span>Menüpunkt 4</span>
|
||
</li>
|
||
<li class="sg-pulldown-option sg-pulldown-option--disabled">
|
||
<span>Menüpunkt 5</span>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="sg-search-field-row">
|
||
<span class="sg-input-single-line-wrap sg-search-field-input" data-has-value="false" data-component="single-line-input" data-component-context="options-row" data-component-state="inactive-selectable">
|
||
<input
|
||
class="sg-interaction-element sg-input-single-line"
|
||
type="text"
|
||
placeholder="Suche"
|
||
aria-label="Suche"
|
||
>
|
||
<button class="sg-input-clear-button" type="button" aria-label="Eingabe löschen" data-component-part="input-clear-button">×</button>
|
||
</span>
|
||
<span class="sg-search-result-count sg-table-label" aria-live="polite" data-pattern-part="options-row-search-result-count">0 Treffer</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="sg-options-row__right" data-pattern-part="options-row-secondary-actions">
|
||
<button class="sg-mode-toggle" type="button" data-active="relative" aria-label="Modus Schieber global: relativ aktiv" data-component="mode-toggle" data-component-context="options-row">
|
||
<span class="sg-mode-toggle__label" data-component-part="toggle-label">absolut</span>
|
||
|
||
<span class="sg-mode-toggle__switch" aria-hidden="true" data-component-part="toggle-track">
|
||
<span class="sg-mode-toggle__handle" data-component-part="toggle-handle"></span>
|
||
</span>
|
||
|
||
<span class="sg-mode-toggle__label" data-component-part="toggle-label">relativ</span>
|
||
</button>
|
||
|
||
<span class="sg-help-icon-wrap" data-open="false" data-align="left" data-component="help-icon" data-component-context="options-row">
|
||
<button class="sg-help-icon" type="button" aria-expanded="false" aria-label="Hilfetext anzeigen" data-component-part="help-trigger">?</button>
|
||
|
||
<span class="sg-help-icon-panel sg-table-label" role="tooltip" data-component-part="help-panel">
|
||
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt.
|
||
</span>
|
||
</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="sg-transparent-card sg-page-layout-basic__heading-block" aria-label="H1 Bereich" data-component="transparent-card">
|
||
<h1 class="sg-heading-h1 sg-text-on-dark">H1 Überschrift</h1>
|
||
<p class="sg-body">
|
||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer convallis purus sed urna ultricies, id aliquet justo malesuada. Morbi luctus, augue in cursus ultrices, justo lorem posuere mi, at suscipit est turpis vitae ipsum.
|
||
</p>
|
||
</div>
|
||
|
||
<div class="sg-group-card sg-group-card--margin-after-large" data-component="group-card">
|
||
<div class="sg-group-card__header-row">
|
||
<h2 class="sg-heading-h2 sg-text-on-dark sg-group-card__heading">Seiteninhalt</h2>
|
||
</div>
|
||
|
||
<article class="sg-card" data-component="card" data-component-context="group-card">
|
||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue" data-component-part="card-header">
|
||
<div class="sg-strong">Inhalt</div>
|
||
</div>
|
||
|
||
<div class="sg-card-segment sg-card-segment--body" data-component-part="card-body">
|
||
<p class="sg-body">
|
||
Zeile 01<br>
|
||
Zeile 02<br>
|
||
Zeile 03<br>
|
||
Zeile 04<br>
|
||
Zeile 05<br>
|
||
Zeile 06<br>
|
||
Zeile 07<br>
|
||
Zeile 08<br>
|
||
Zeile 09<br>
|
||
Zeile 10<br>
|
||
Zeile 11<br>
|
||
Zeile 12<br>
|
||
Zeile 13<br>
|
||
Zeile 14<br>
|
||
Zeile 15<br>
|
||
Zeile 16<br>
|
||
Zeile 17<br>
|
||
Zeile 18<br>
|
||
Zeile 19<br>
|
||
Zeile 20<br>
|
||
Zeile 21<br>
|
||
Zeile 22<br>
|
||
Zeile 23<br>
|
||
Zeile 24<br>
|
||
Zeile 25<br>
|
||
Zeile 26<br>
|
||
Zeile 27<br>
|
||
Zeile 28<br>
|
||
Zeile 29<br>
|
||
Zeile 30
|
||
</p>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
</main>
|
||
|
||
<script src="../scripts/help-icon-overlays.js"></script>
|
||
<script>
|
||
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) => {
|
||
const isActive = otherButton === button;
|
||
otherButton.setAttribute('aria-selected', String(isActive));
|
||
otherButton.dataset.componentState = isActive ? 'active' : 'inactive';
|
||
});
|
||
});
|
||
});
|
||
});
|
||
|
||
document.querySelectorAll('.sg-sandwich-menu-wrap').forEach((wrap) => {
|
||
const button = wrap.querySelector('.sg-sandwich-button');
|
||
|
||
if (!button) {
|
||
return;
|
||
}
|
||
|
||
button.addEventListener('click', (event) => {
|
||
event.stopPropagation();
|
||
const nextState = wrap.dataset.open !== 'true';
|
||
|
||
document.querySelectorAll('.sg-sandwich-menu-wrap').forEach((otherWrap) => {
|
||
const otherButton = otherWrap.querySelector('.sg-sandwich-button');
|
||
otherWrap.dataset.open = 'false';
|
||
if (otherButton) {
|
||
otherButton.setAttribute('aria-expanded', 'false');
|
||
}
|
||
});
|
||
|
||
wrap.dataset.open = String(nextState);
|
||
button.setAttribute('aria-expanded', String(nextState));
|
||
});
|
||
});
|
||
|
||
const updatePulldownSelectionState = (demo) => {
|
||
const trigger = demo.querySelector('.sg-pulldown-demo__trigger');
|
||
const selectableOptions = demo.querySelectorAll('[data-pulldown-option]');
|
||
|
||
if (!trigger || selectableOptions.length === 0) {
|
||
return;
|
||
}
|
||
|
||
const selectedCount = Array.from(selectableOptions).filter((option) => {
|
||
return option.getAttribute('aria-checked') === 'true';
|
||
}).length;
|
||
|
||
selectableOptions.forEach((option) => {
|
||
const optionRow = option.closest('.sg-pulldown-option');
|
||
if (!optionRow) {
|
||
return;
|
||
}
|
||
|
||
optionRow.classList.toggle(
|
||
'sg-pulldown-option--selected',
|
||
option.getAttribute('aria-checked') === 'true'
|
||
);
|
||
});
|
||
|
||
const labelBase = trigger.dataset.labelBase || 'Auswahl';
|
||
|
||
trigger.textContent = selectedCount > 0 ? `${labelBase} (${selectedCount})` : labelBase;
|
||
trigger.classList.toggle('sg-pulldown--selected', selectedCount > 0);
|
||
trigger.classList.toggle('sg-form-active', selectedCount > 0);
|
||
trigger.dataset.componentState = selectedCount > 0 ? 'selected' : 'inactive-selectable';
|
||
demo.dataset.componentState = selectedCount > 0 ? 'selected' : 'inactive-selectable';
|
||
trigger.setAttribute(
|
||
'aria-label',
|
||
selectedCount > 0 ? `Pulldown ${labelBase} mit aktiver Auswahl` : `Pulldown ${labelBase} ohne aktive Auswahl`
|
||
);
|
||
};
|
||
|
||
document.querySelectorAll('.sg-pulldown-demo').forEach((demo) => {
|
||
const trigger = demo.querySelector('.sg-pulldown-demo__trigger');
|
||
|
||
if (!trigger) {
|
||
return;
|
||
}
|
||
|
||
trigger.addEventListener('click', (event) => {
|
||
event.stopPropagation();
|
||
const nextState = demo.dataset.open !== 'true';
|
||
|
||
document.querySelectorAll('.sg-pulldown-demo').forEach((otherDemo) => {
|
||
const otherTrigger = otherDemo.querySelector('.sg-pulldown-demo__trigger');
|
||
otherDemo.dataset.open = 'false';
|
||
if (otherTrigger) {
|
||
otherTrigger.setAttribute('aria-expanded', 'false');
|
||
}
|
||
});
|
||
|
||
demo.dataset.align = 'left';
|
||
demo.dataset.open = String(nextState);
|
||
trigger.setAttribute('aria-expanded', String(nextState));
|
||
updatePulldownSelectionState(demo);
|
||
});
|
||
|
||
demo.querySelectorAll('[data-pulldown-option]').forEach((option) => {
|
||
option.addEventListener('click', (event) => {
|
||
event.stopPropagation();
|
||
const nextChecked = option.getAttribute('aria-checked') !== 'true';
|
||
option.setAttribute('aria-checked', String(nextChecked));
|
||
updatePulldownSelectionState(demo);
|
||
});
|
||
});
|
||
|
||
updatePulldownSelectionState(demo);
|
||
});
|
||
|
||
document.querySelectorAll('.sg-mode-toggle').forEach((toggle) => {
|
||
toggle.addEventListener('click', () => {
|
||
const nextState = toggle.dataset.active === 'relative' ? 'absolute' : 'relative';
|
||
toggle.dataset.active = nextState;
|
||
toggle.dataset.componentState = nextState;
|
||
toggle.setAttribute(
|
||
'aria-label',
|
||
`Modus Schieber global: ${nextState === 'relative' ? 'relativ' : 'absolut'} aktiv`
|
||
);
|
||
});
|
||
});
|
||
</script>
|
||
|
||
</body>
|
||
</html>
|