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

Add Multiselektionspulldown pattern based on form sections structure

Browse Source
This commit is contained in:
Mathias Gläser
2026-05-19 13:31:26 +02:00
parent ce249c2730
commit ba31de8870
4 changed files with 293 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+1
View File
@@ -45,6 +45,7 @@
<li><a href="./patterns/object-group-card.html">Object Group Card</a></li>
<li><a href="./patterns/navigation-card.html">Navigation Card</a></li>
<li><a href="./patterns/content-cards-group.html">Content Cards Group</a></li>
<li><a href="./patterns/multiselektionspulldown.html">Multiselektionspulldown</a></li>
<li><a href="./patterns/card-gruppe-mit-tastennavigation.html">Card Gruppe mit Tastennavigation</a></li>
<li><a href="./patterns/formular-mit-abschnitten.html">Formular mit Abschnitten</a></li>
</ul>
patterns/multiselektionspulldown.html
+140
View File
@@ -0,0 +1,140 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Styleguide – Pattern Multiselektionspulldown</title>
<link rel="stylesheet" href="../styleguide.css">
</head>
<body>
<h1 class="sg-main-heading">Pattern – Multiselektionspulldown</h1>
<section id="pattern-multiselektionspulldown">
<p class="sg-preview-label">Pattern: Multiselektionspulldown</p>
<div class="sg-multiselect-pulldown-demo" data-pattern="multiselektionspulldown" aria-label="Multiselektionspulldown Kennzahlen">
<div class="sg-multiselect-pulldown-demo__controls" aria-hidden="true">
<button class="sg-interaction-element sg-pulldown sg-pulldown--selected" type="button">Kennzahlen (1)</button>
<span class="sg-input-single-line-wrap sg-multiselect-pulldown-demo__search-wrap" data-has-value="false">
<input class="sg-interaction-element sg-input-single-line" type="text" placeholder="suchen" aria-label="suchen" disabled>
</span>
<span class="sg-table-label sg-multiselect-pulldown-demo__results">236 Treffer</span>
</div>
<div class="sg-pulldown-demo sg-multiselect-pulldown" data-open="true" data-align="left" data-selection-mode="multiple" data-component="pulldown" data-component-context="multiselektionspulldown" data-component-state="selected">
<button
class="sg-interaction-element sg-pulldown sg-pulldown-demo__trigger sg-pulldown--selected"
type="button"
aria-expanded="true"
aria-label="Pulldown Kennzahlen mit aktiver Auswahl"
data-component-part="pulldown-trigger"
data-label-base="Kennzahlen"
>
Kennzahlen (1)
</button>
<div class="sg-pulldown-panel" aria-label="Geöffnetes Pulldown Kennzahlen" data-component-part="pulldown-panel">
<div class="sg-form-sections-card-wrapper sg-multiselect-pulldown__form-wrapper" data-pattern-part="multiselect-form-wrapper">
<form class="sg-form-sections-card sg-multiselect-pulldown__form" action="#" method="post">
<div class="sg-form-sections-card__body sg-multiselect-pulldown__form-body" data-pattern-part="multiselect-form-body">
<div class="sg-multiselect-pulldown__section" aria-labelledby="kennzahlen-score-minimum">
<h2 id="kennzahlen-score-minimum" class="sg-sub-heading sg-multiselect-pulldown__section-title">Scores Minimum</h2>
<label class="sg-checkbox-field-option sg-body sg-multiselect-pulldown__row-label" data-component="checkbox-field" data-component-state="inactive-selectable">
<button class="sg-checkbox-field sg-form-active" type="button" role="checkbox" aria-checked="true" aria-label="Nur Score attraktiv">
<span class="sg-checkbox-field__mark" aria-hidden="true">✓</span>
</button>
<span>Nur Score "attraktiv"</span>
</label>
<div class="sg-slider-row sg-slider-row--inactive-selectable" data-activatable="true" aria-disabled="true">
<span class="sg-label">Aktienbewertung</span>
<input class="sg-slider" type="range" min="0" max="10" step="0.1" value="6.5" disabled>
<span class="sg-slider-value">6.5</span>
<button class="sg-activatable-remove" type="button" aria-label="Aktienbewertung entfernen" hidden>&times;</button>
</div>
<div class="sg-slider-row sg-slider-row--inactive-selectable" data-activatable="true" aria-disabled="true">
<span class="sg-label">Wachstum</span>
<input class="sg-slider" type="range" min="0" max="10" step="0.1" value="9.5" disabled>
<span class="sg-slider-value">9.5</span>
<button class="sg-activatable-remove" type="button" aria-label="Wachstum entfernen" hidden>&times;</button>
</div>
<div class="sg-slider-row sg-slider-row--inactive-selectable" data-activatable="true" aria-disabled="true">
<span class="sg-label">Profitabilität</span>
<input class="sg-slider" type="range" min="0" max="10" step="0.1" value="5.0" disabled>
<span class="sg-slider-value">5.0</span>
<button class="sg-activatable-remove" type="button" aria-label="Profitabilität entfernen" hidden>&times;</button>
</div>
<div class="sg-slider-row sg-slider-row--inactive-selectable" data-activatable="true" aria-disabled="true">
<span class="sg-label">Stabilität</span>
<input class="sg-slider" type="range" min="0" max="10" step="0.1" value="6.5" disabled>
<span class="sg-slider-value">6.5</span>
<button class="sg-activatable-remove" type="button" aria-label="Stabilität entfernen" hidden>&times;</button>
</div>
</div>
<div class="sg-multiselect-pulldown__section" aria-labelledby="kennzahlen-marktbewertung-max">
<h2 id="kennzahlen-marktbewertung-max" class="sg-sub-heading sg-multiselect-pulldown__section-title">Marktbewertung Maximum</h2>
<div class="sg-slider-row sg-slider-row--inactive-selectable" data-activatable="true" aria-disabled="true">
<span class="sg-label">PE</span>
<input class="sg-slider" type="range" min="0" max="60" step="1" value="30" disabled>
<span class="sg-slider-value">30</span>
<button class="sg-activatable-remove" type="button" aria-label="PE entfernen" hidden>&times;</button>
</div>
<div class="sg-slider-row sg-slider-row--inactive-selectable" data-activatable="true" aria-disabled="true">
<span class="sg-label">PE forw.</span>
<input class="sg-slider" type="range" min="0" max="50" step="1" value="25" disabled>
<span class="sg-slider-value">25</span>
<button class="sg-activatable-remove" type="button" aria-label="PE forw. entfernen" hidden>&times;</button>
</div>
<div class="sg-slider-row" data-activatable="true">
<span class="sg-label">PEG</span>
<input class="sg-slider" type="range" min="0" max="4" step="0.1" value="1.6">
<span class="sg-slider-value">1.6</span>
<button class="sg-activatable-remove" type="button" aria-label="PEG entfernen">&times;</button>
</div>
</div>
<div class="sg-multiselect-pulldown__section" aria-labelledby="kennzahlen-weitere-filter">
<h2 id="kennzahlen-weitere-filter" class="sg-sub-heading sg-multiselect-pulldown__section-title">Weitere Filter</h2>
<div class="sg-multiselect-pulldown__radio-row" role="radiogroup" aria-label="Zyklus-Empfehlung">
<span class="sg-label">Zyklus-Empfehlung</span>
<label class="sg-radio-activatable-group__choice sg-body" data-component="radio-field" data-component-state="inactive-selectable">
<button class="sg-radio-field sg-radio-field--inactive-selectable" type="button" role="radio" aria-checked="false" aria-label="kaufen">
<span class="sg-radio-field__mark" aria-hidden="true"></span>
</button>
<span>kaufen</span>
</label>
<label class="sg-radio-activatable-group__choice sg-body" data-component="radio-field" data-component-state="active">
<button class="sg-radio-field" type="button" role="radio" aria-checked="true" aria-label="nicht kaufen">
<span class="sg-radio-field__mark" aria-hidden="true"></span>
</button>
<span>nicht kaufen</span>
</label>
</div>
<div class="sg-multiselect-pulldown__row-label">
<span class="sg-label">Moat mindestens</span>
<button class="sg-interaction-element sg-pulldown sg-multiselect-pulldown__compact-pulldown" type="button" aria-label="Moat mindestens Maessig">Maessig</button>
</div>
</div>
</div>
<footer class="sg-form-sections-card__actions-segment sg-multiselect-pulldown__actions-segment" data-pattern-part="multiselect-actions-segment">
<div class="sg-form-sections-card__actions"></div>
</footer>
</form>
</div>
</div>
</div>
</div>
</section>
</body>
</html>
semantic-tokens-patterns.html
+12
View File
@@ -47,6 +47,18 @@
<tr><td>surface-object-card-lower-segment</td><td>color-white</td><td>Hintergrundfläche der unteren zwei Segmente der Object Card.</td></tr>
</tbody></table>
<h3 class="sg-sub-heading sg-section-h3">Multiselektionspulldown</h3>
<table class="sg-foundation-table sg-table-label"><thead><tr><th>Semantischer Token</th><th>Verwendeter Foundation-Token</th><th>Beschreibung Verwendungszweck im Pattern</th></tr></thead><tbody>
<tr><td>surface-multiselect-pulldown</td><td>color-light-grey</td><td>Grundfläche des geöffneten Kennzahlen-Panels.</td></tr>
<tr><td>surface-multiselect-pulldown-shell</td><td>color-light-grey</td><td>Grundfläche der oberen Trigger-/Suche-Zeile.</td></tr>
<tr><td>surface-multiselect-pulldown-control</td><td>surface-control-default</td><td>Alias auf Standard-Control-Fläche innerhalb des Patterns.</td></tr>
<tr><td>surface-multiselect-pulldown-control-selected</td><td>surface-control-active</td><td>Alias auf aktive Control-Fläche innerhalb des Patterns.</td></tr>
<tr><td>text-multiselect-pulldown-default</td><td>text-control-default</td><td>Alias auf Standard-Textfarbe im Pattern.</td></tr>
<tr><td>text-multiselect-pulldown-muted</td><td>text-control-disabled</td><td>Alias auf reduzierte Textfarbe für deaktivierte Zeilen.</td></tr>
<tr><td>layout-multiselect-pulldown-width</td><td>dimension-multiselect-pulldown-width</td><td>Fixe Panelbreite für die geöffnete Desktop-Darstellung.</td></tr>
<tr><td>layout-multiselect-pulldown-row-label-width</td><td>dimension-multiselect-pulldown-row-label-width</td><td>Breite der linken Label-Spalte im Panel.</td></tr>
</tbody></table>
<h3 class="sg-sub-heading sg-section-h3">Navigation Card</h3>
<table class="sg-foundation-table sg-table-label"><thead><tr><th>Semantischer Token</th><th>Verwendeter Foundation-Token</th><th>Beschreibung Verwendungszweck im Pattern</th></tr></thead><tbody>
<tr><td>surface-navigation-card</td><td>color-white</td><td>Grundfläche der Navigation Card.</td></tr>
styleguide.css
+140
View File
@@ -150,6 +150,14 @@
--layout-options-row-group-gap: var(--spacing-small);
--layout-options-row-mode-toggle-width: var(--dimension-options-row-mode-toggle-width);
--layout-options-row-help-panel-width: var(--dimension-options-row-help-panel-width);
--surface-multiselect-pulldown: var(--color-light-grey);
--surface-multiselect-pulldown-shell: var(--color-light-grey);
--surface-multiselect-pulldown-control: var(--surface-control-default);
--surface-multiselect-pulldown-control-selected: var(--surface-control-active);
--text-multiselect-pulldown-default: var(--text-control-default);
--text-multiselect-pulldown-muted: var(--text-control-disabled);
--layout-multiselect-pulldown-width: var(--dimension-multiselect-pulldown-width);
--layout-multiselect-pulldown-row-label-width: var(--dimension-multiselect-pulldown-row-label-width);
--layout-object-card-min-width: var(--dimension-object-card-min-width);
--layout-object-card-max-width: var(--dimension-object-card-max-width);
--layout-object-card-height: var(--dimension-object-card-height);
@@ -222,6 +230,8 @@
--dimension-search-field-width: 15.3rem;
--dimension-options-row-mode-toggle-width: 7rem;
--dimension-options-row-help-panel-width: 16rem;
--dimension-multiselect-pulldown-width: 48rem;
--dimension-multiselect-pulldown-row-label-width: 15rem;
--dimension-card-list-drawer-width: 40%;
--dimension-slider-track-height: 6px;
--dimension-slider-thumb-size: 22px;
@@ -1616,6 +1626,136 @@ section + section {
}
}
/* ========================================================= */
/* Patterns: Multiselektionspulldown */
/* ========================================================= */
.sg-multiselect-pulldown-demo {
width: var(--layout-multiselect-pulldown-width);
max-width: 100%;
}
.sg-multiselect-pulldown-demo__controls {
display: inline-flex;
align-items: center;
gap: var(--spacing-small);
width: 100%;
margin-bottom: var(--spacing-small);
padding: var(--spacing-small);
border-radius: var(--radius-card);
background: var(--surface-multiselect-pulldown-shell);
}
.sg-multiselect-pulldown-demo__search-wrap {
flex: 0 1 15rem;
}
.sg-multiselect-pulldown-demo__results {
color: var(--text-multiselect-pulldown-default);
}
.sg-multiselect-pulldown {
--surface-pulldown-panel: var(--surface-multiselect-pulldown);
--surface-control-default: var(--surface-multiselect-pulldown-control);
--surface-control-active: var(--surface-multiselect-pulldown-control-selected);
--text-control-default: var(--text-multiselect-pulldown-default);
--text-control-disabled: var(--text-multiselect-pulldown-muted);
}
.sg-multiselect-pulldown > .sg-pulldown-demo__trigger {
display: none;
}
.sg-multiselect-pulldown > .sg-pulldown-panel {
position: static;
display: flex;
min-width: 0;
width: 100%;
max-width: 100%;
padding: var(--spacing-large);
}
.sg-multiselect-pulldown__form-wrapper,
.sg-multiselect-pulldown__form {
width: 100%;
min-width: 0;
max-width: 100%;
}
.sg-multiselect-pulldown__form {
box-shadow: none;
}
.sg-multiselect-pulldown__form-body {
display: flex;
flex-direction: column;
gap: var(--spacing-large);
padding: 0;
background: var(--surface-multiselect-pulldown);
}
.sg-multiselect-pulldown__actions-segment {
display: none;
}
.sg-multiselect-pulldown__section {
display: flex;
flex-direction: column;
gap: var(--spacing-small);
}
.sg-multiselect-pulldown__section-title {
margin: 0;
}
.sg-multiselect-pulldown__section .sg-slider-row,
.sg-multiselect-pulldown__row-label,
.sg-multiselect-pulldown__radio-row {
display: grid;
grid-template-columns: var(--layout-multiselect-pulldown-row-label-width) minmax(0, 1fr) auto auto;
align-items: center;
column-gap: var(--spacing-small);
}
.sg-multiselect-pulldown__section .sg-slider-row .sg-label,
.sg-multiselect-pulldown__row-label .sg-label,
.sg-multiselect-pulldown__radio-row > .sg-label {
min-width: 0;
margin: 0;
}
.sg-multiselect-pulldown__section .sg-slider-row .sg-slider {
min-width: 0;
width: 100%;
}
.sg-multiselect-pulldown__section .sg-slider-row .sg-slider-value {
min-width: calc(var(--interaction-height) * 1.25);
text-align: right;
}
.sg-multiselect-pulldown__radio-row {
grid-template-columns: var(--layout-multiselect-pulldown-row-label-width) auto auto;
}
.sg-multiselect-pulldown__compact-pulldown {
width: max-content;
min-width: 7.5rem;
}
@media (max-width: 48rem) {
.sg-multiselect-pulldown-demo {
width: 100%;
}
.sg-multiselect-pulldown__section .sg-slider-row,
.sg-multiselect-pulldown__row-label,
.sg-multiselect-pulldown__radio-row {
grid-template-columns: 1fr;
row-gap: var(--spacing-small);
}
}
/* ========================================================= */
/* Patterns: Object Card */
/* ========================================================= */