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

Fix pulldown activatable inactive variant to start inactive and be clickable

Browse Source
This commit is contained in:
Mathias Gläser
2026-05-19 10:58:57 +02:00
parent 5ad616871d
commit 981de5e058
1 changed files with 7 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/interactive-elements.html
+7 -7
View File
@@ -120,14 +120,14 @@
<div class="sg-state-example"> <div class="sg-state-example">
<p class="sg-state-example__label sg-table-label">Variante aktivierbar: inaktiv</p> <p class="sg-state-example__label sg-table-label">Variante aktivierbar: inaktiv</p>
<div class="sg-pulldown-demo" data-open="false" data-align="left" data-selection-mode="multiple" data-component="pulldown" data-component-state="selected"> <div class="sg-pulldown-demo" data-open="false" data-align="left" data-selection-mode="multiple" data-component="pulldown" data-component-state="inactive-selectable">
<!-- <!--
The number in brackets shows the count of currently selected options inside this pulldown. The number in brackets shows the count of currently selected options inside this pulldown.
Initial state: one option is selected, therefore the trigger label shows Auswahl (1). Initial state: no option is selected, therefore the trigger starts as inactive selectable.
If no option is selected, the trigger returns to Auswahl and uses form-inactive-selectable. Clicking an option activates the pulldown and shows the selected count in brackets.
--> -->
<button class="sg-interaction-element sg-pulldown sg-pulldown--selected sg-form-active sg-pulldown-demo__trigger" type="button" aria-expanded="false" aria-label="Pulldown mit aktiver Auswahl" data-label-base="Auswahl" data-component-part="pulldown-trigger"> <button class="sg-interaction-element sg-pulldown sg-pulldown--inactive-selectable sg-pulldown-demo__trigger" type="button" aria-expanded="false" aria-label="Pulldown ohne aktive Auswahl" data-label-base="Auswahl" data-component-part="pulldown-trigger">
Auswahl (1) Auswahl
</button> </button>
<div class="sg-pulldown-panel" aria-label="Geöffnetes Pulldown" data-component-part="pulldown-panel"> <div class="sg-pulldown-panel" aria-label="Geöffnetes Pulldown" data-component-part="pulldown-panel">
@@ -176,8 +176,8 @@
</div> </div>
<div class="sg-checkbox-field-list sg-pulldown-panel__checkbox-list" aria-label="Checkboxen im Pulldown"> <div class="sg-checkbox-field-list sg-pulldown-panel__checkbox-list" aria-label="Checkboxen im Pulldown">
<label class="sg-checkbox-field-option sg-body" data-component="checkbox-field" data-component-state="active"> <label class="sg-checkbox-field-option sg-body" data-component="checkbox-field" data-component-state="inactive-selectable">
<button class="sg-checkbox-field sg-checkbox-field--on-grey sg-form-active" type="button" role="checkbox" aria-checked="true" aria-label="Checkbox 1" data-pulldown-option> <button class="sg-checkbox-field sg-checkbox-field--on-grey sg-checkbox-field--inactive-selectable" type="button" role="checkbox" aria-checked="false" aria-label="Checkbox 1" data-pulldown-option>
<span class="sg-checkbox-field__mark" aria-hidden="true">✓</span> <span class="sg-checkbox-field__mark" aria-hidden="true">✓</span>
</button> </button>
<span>Checkbox 1</span> <span>Checkbox 1</span>