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

Pulldown demo: make long selected-state test interactive

Browse Source
This commit is contained in:
Mathias Gläser
2026-05-29 14:48:05 +02:00
parent bc137d4206
commit f9520658c8
1 changed files with 19 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/interactive-elements.html
+19 -3
View File
@@ -191,9 +191,25 @@
<div class="sg-labeled-input-row">
<span class="sg-label">Label</span>
<button class="sg-interaction-element sg-pulldown sg-pulldown--selected sg-pulldown-demo__trigger" type="button" aria-expanded="false" aria-label="Pulldown mit aktiver Auswahl" data-component="pulldown" data-component-state="active" data-component-part="pulldown-trigger">
Sehr langer ausgewählter Wert mit bewusst überlanger Bezeichnung für die Ellipsis-Verifikation im geschlossenen Trigger
</button>
<div class="sg-pulldown-demo" data-open="false" data-align="left" data-selection-mode="single" data-component="pulldown" data-component-state="active">
<button class="sg-interaction-element sg-pulldown sg-pulldown--selected sg-pulldown-demo__trigger" type="button" aria-expanded="false" aria-label="Pulldown mit aktiver Auswahl" data-component-part="pulldown-trigger">
Sehr langer ausgewählter Wert mit bewusst überlanger Bezeichnung für die Ellipsis-Verifikation im geschlossenen Trigger
</button>
<div class="sg-pulldown-panel" aria-label="Geöffnetes Pulldown mit langem Wert" data-component-part="pulldown-panel">
<ul class="sg-pulldown-option-list" aria-label="Verfügbare Optionen mit langen Texten">
<li class="sg-pulldown-option sg-pulldown-option--selected" role="checkbox" aria-checked="true" data-pulldown-option>
<span>Sehr langer ausgewählter Wert mit bewusst überlanger Bezeichnung für die Ellipsis-Verifikation im geschlossenen Trigger</span>
</li>
<li class="sg-pulldown-option" role="checkbox" aria-checked="false" data-pulldown-option>
<span>Lange Alternative mit mehreren Worten zur Prüfung von Umbruch, Lesbarkeit und stabiler Triggerbreite</span>
</li>
<li class="sg-pulldown-option" role="checkbox" aria-checked="false" data-pulldown-option>
<span>Kurz</span>
</li>
</ul>
</div>
</div>
</div>
</div>