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

Move test pulldown below multiselect options row as separate element

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