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

Rebuild multiselect pulldown sliders from current slider component markup

Browse Source
This commit is contained in:
Mathias Gläser
2026-05-19 15:52:36 +02:00
parent 36e1682e64
commit 5f29ce4641
1 changed files with 70 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
patterns/multiselektions-pulldown.html
+70 -14
View File
@@ -39,29 +39,61 @@
<label class="sg-slider-row sg-slider-row--inactive-selectable" data-component="slider" data-component-state="inactive-selectable" data-activatable="true"> <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 1</span> <span class="sg-label">Slider 1</span>
<input class="sg-interaction-element sg-slider sg-form-inactive-selectable" type="range" min="1" max="10" step="0.1" value="6.5" aria-label="Slider 1 von 1 bis 10"> <input
<output class="sg-slider-value sg-body" for="slider-1">6.5</output> class="sg-interaction-element sg-slider sg-form-inactive-selectable"
type="range"
min="1"
max="10"
step="0.1"
value="6.5"
aria-label="Slider 1 von 1 bis 10"
>
<output class="sg-slider-value sg-body" for="slider">6.5</output>
<button class="sg-activatable-remove" type="button" aria-label="Slider 1 entfernen" data-slider-activate-remove hidden>×</button> <button class="sg-activatable-remove" type="button" aria-label="Slider 1 entfernen" data-slider-activate-remove hidden>×</button>
</label> </label>
<label class="sg-slider-row sg-slider-row--inactive-selectable" data-component="slider" data-component-state="inactive-selectable" data-activatable="true"> <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 2</span> <span class="sg-label">Slider 2</span>
<input class="sg-interaction-element sg-slider sg-form-inactive-selectable" type="range" min="1" max="10" step="0.1" value="9.5" aria-label="Slider 2 von 1 bis 10"> <input
<output class="sg-slider-value sg-body" for="slider-2">9.5</output> class="sg-interaction-element sg-slider sg-form-inactive-selectable"
type="range"
min="1"
max="10"
step="0.1"
value="9.5"
aria-label="Slider 2 von 1 bis 10"
>
<output class="sg-slider-value sg-body" for="slider">9.5</output>
<button class="sg-activatable-remove" type="button" aria-label="Slider 2 entfernen" data-slider-activate-remove hidden>×</button> <button class="sg-activatable-remove" type="button" aria-label="Slider 2 entfernen" data-slider-activate-remove hidden>×</button>
</label> </label>
<label class="sg-slider-row sg-slider-row--inactive-selectable" data-component="slider" data-component-state="inactive-selectable" data-activatable="true"> <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 3</span> <span class="sg-label">Slider 3</span>
<input class="sg-interaction-element sg-slider sg-form-inactive-selectable" type="range" min="1" max="10" step="0.1" value="5.0" aria-label="Slider 3 von 1 bis 10"> <input
<output class="sg-slider-value sg-body" for="slider-3">5.0</output> class="sg-interaction-element sg-slider sg-form-inactive-selectable"
type="range"
min="1"
max="10"
step="0.1"
value="5.0"
aria-label="Slider 3 von 1 bis 10"
>
<output class="sg-slider-value sg-body" for="slider">5.0</output>
<button class="sg-activatable-remove" type="button" aria-label="Slider 3 entfernen" data-slider-activate-remove hidden>×</button> <button class="sg-activatable-remove" type="button" aria-label="Slider 3 entfernen" data-slider-activate-remove hidden>×</button>
</label> </label>
<label class="sg-slider-row sg-slider-row--inactive-selectable" data-component="slider" data-component-state="inactive-selectable" data-activatable="true"> <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 4</span> <span class="sg-label">Slider 4</span>
<input class="sg-interaction-element sg-slider sg-form-inactive-selectable" type="range" min="1" max="10" step="0.1" value="6.5" aria-label="Slider 4 von 1 bis 10"> <input
<output class="sg-slider-value sg-body" for="slider-4">6.5</output> class="sg-interaction-element sg-slider sg-form-inactive-selectable"
type="range"
min="1"
max="10"
step="0.1"
value="6.5"
aria-label="Slider 4 von 1 bis 10"
>
<output class="sg-slider-value sg-body" for="slider">6.5</output>
<button class="sg-activatable-remove" type="button" aria-label="Slider 4 entfernen" data-slider-activate-remove hidden>×</button> <button class="sg-activatable-remove" type="button" aria-label="Slider 4 entfernen" data-slider-activate-remove hidden>×</button>
</label> </label>
</section> </section>
@@ -71,22 +103,46 @@
<label class="sg-slider-row sg-slider-row--inactive-selectable" data-component="slider" data-component-state="inactive-selectable" data-activatable="true"> <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 5</span> <span class="sg-label">Slider 5</span>
<input class="sg-interaction-element sg-slider sg-form-inactive-selectable" type="range" min="1" max="10" step="0.1" value="3.0" aria-label="Slider 5 von 1 bis 10"> <input
<output class="sg-slider-value sg-body" for="slider-5">3.0</output> class="sg-interaction-element sg-slider sg-form-inactive-selectable"
type="range"
min="1"
max="10"
step="0.1"
value="3.0"
aria-label="Slider 5 von 1 bis 10"
>
<output class="sg-slider-value sg-body" for="slider">3.0</output>
<button class="sg-activatable-remove" type="button" aria-label="Slider 5 entfernen" data-slider-activate-remove hidden>×</button> <button class="sg-activatable-remove" type="button" aria-label="Slider 5 entfernen" data-slider-activate-remove hidden>×</button>
</label> </label>
<label class="sg-slider-row sg-slider-row--inactive-selectable" data-component="slider" data-component-state="inactive-selectable" data-activatable="true"> <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 6</span> <span class="sg-label">Slider 6</span>
<input class="sg-interaction-element sg-slider sg-form-inactive-selectable" type="range" min="1" max="10" step="0.1" value="2.5" aria-label="Slider 6 von 1 bis 10"> <input
<output class="sg-slider-value sg-body" for="slider-6">2.5</output> class="sg-interaction-element sg-slider sg-form-inactive-selectable"
type="range"
min="1"
max="10"
step="0.1"
value="2.5"
aria-label="Slider 6 von 1 bis 10"
>
<output class="sg-slider-value sg-body" for="slider">2.5</output>
<button class="sg-activatable-remove" type="button" aria-label="Slider 6 entfernen" data-slider-activate-remove hidden>×</button> <button class="sg-activatable-remove" type="button" aria-label="Slider 6 entfernen" data-slider-activate-remove hidden>×</button>
</label> </label>
<label class="sg-slider-row sg-slider-row--inactive-selectable" data-component="slider" data-component-state="inactive-selectable" data-activatable="true"> <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 7</span> <span class="sg-label">Slider 7</span>
<input class="sg-interaction-element sg-slider sg-form-inactive-selectable" type="range" min="1" max="10" step="0.1" value="1.6" aria-label="Slider 7 von 1 bis 10"> <input
<output class="sg-slider-value sg-body" for="slider-7">1.6</output> class="sg-interaction-element sg-slider sg-form-inactive-selectable"
type="range"
min="1"
max="10"
step="0.1"
value="1.6"
aria-label="Slider 7 von 1 bis 10"
>
<output class="sg-slider-value sg-body" for="slider">1.6</output>
<button class="sg-activatable-remove" type="button" aria-label="Slider 7 entfernen" data-slider-activate-remove hidden>×</button> <button class="sg-activatable-remove" type="button" aria-label="Slider 7 entfernen" data-slider-activate-remove hidden>×</button>
</label> </label>
</section> </section>