Add Multiselektionspulldown pattern based on form sections structure
This commit is contained in:
@@ -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>×</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>×</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>×</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>×</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>×</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>×</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">×</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>
|
||||
Reference in New Issue
Block a user