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

Add second multiselect pulldown variant with single activatable slider

Browse Source
This commit is contained in:
Mathias Gläser
2026-05-19 19:42:53 +02:00
parent adb4d7fd35
commit 4ace465f32
1 changed files with 36 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
patterns/multiselektions-pulldown.html
+36
View File
@@ -224,6 +224,42 @@
</div>
</div>
</div>
<div class="sg-pulldown-demo" data-open="false" data-align="left" data-selection-mode="multiple" data-component="pulldown" data-component-state="inactive-selectable" data-activatable="true">
<span class="sg-activatable-control">
<button class="sg-interaction-element sg-pulldown sg-pulldown--inactive-selectable sg-pulldown-demo__trigger" type="button" aria-expanded="false" aria-label="Test-Pulldown ohne aktive Auswahl" data-label-base="Test-Pulldown" data-component-part="pulldown-trigger">
Test-Pulldown
</button>
<button class="sg-activatable-remove" type="button" aria-label="Test-Pulldown entfernen" data-pulldown-activate-remove hidden>×</button>
</span>
<div class="sg-pulldown-panel" aria-label="Geöffnetes Test-Pulldown" data-component-part="pulldown-panel">
<div class="sg-form-sections-card-wrapper" data-pattern="form-sections" aria-label="Test-Inhalt">
<form class="sg-form-sections-card" action="#" method="post">
<div class="sg-form-sections-card__body" data-pattern-part="form-body">
<section class="sg-form-sections-card__chapter" aria-labelledby="multiselect-test-block-1">
<h2 id="multiselect-test-block-1" class="sg-strong sg-form-sections-card__chapter-title">Testblock</h2>
<label class="sg-slider-row sg-slider-row--inactive-selectable" data-component="slider" data-component-state="inactive-selectable" data-activatable="true">
<span class="sg-label">Slider Test</span>
<input
class="sg-interaction-element sg-slider sg-form-inactive-selectable"
type="range"
min="1"
max="10"
step="0.1"
value="4.0"
aria-label="Slider Test von 1 bis 10"
>
<output class="sg-slider-value sg-body" for="slider">4.0</output>
<button class="sg-activatable-remove" type="button" aria-label="Slider Test entfernen" data-slider-activate-remove hidden>×</button>
</label>
</section>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</section>