Modèle:FiltreModule : Différence entre versions

[version non vérifiée][version vérifiée]
(Page créée avec « {{#switch: {{{1|}}} |Bouton= <div data-element="button" data-type="button" data-aria-controls="{{{Nom|}}}-range" data-aria-haspopup="true" data-aria-expanded="false" data-... »)
 
 
(60 révisions intermédiaires par 2 utilisateurs non affichées)
Ligne 1 : Ligne 1 :
{{#switch: {{{1|}}}
+
{{#switch:{{{Type|}}}
|Bouton=
+
|Text=
<div data-element="button" data-type="button" data-aria-controls="{{{Nom|}}}-range" data-aria-haspopup="true" data-aria-expanded="false" data-style="padding: 10px 20px; background-color: #fff; border: 1px solid #ccc; border-radius: 5px; font-size: 16px; cursor: pointer; user-select: none; display: inline-block;">Filtrer par {{{Nom|}}}</div>
+
{{Input|id=filter-name|name=filterName|style=grid-area: 1 / -1; width: 100%; height: 100%; padding: 3px 20px 3px 46px; margin: 0; border-radius: 999px 0 0 999px;|labelStyle=height: 100%; flex-grow: 1; padding: 0; margin: 0; display: grid; align-items: center;|placeholder={{{placeholder|}}}|text={{Svg|style=grid-area: 1 / -1; z-index: 10; padding-left: 12px;|height=24|viewBox=0 -960 960 960|width=24|data=search}}}}
 +
|Range=
 +
<div style="font-weight: bold;">{{{name}}}</div>
 +
<div style="display: flex; align-items: center; gap: 3px 0;">
 +
{{Input|id={{{id}}}-min|name={{{id}}}Min|type=number|min=1|max={{{maxLevel|135}}}|value=1|style=appearance: none; padding: 2px; height: 20px; margin-right: 0; width: 70px; border-radius: 8px;|labelStyle=display: block; padding-left: 0;|data=filter+{{{id}}}|data2=value+min}}
 +
<div style="font-family: system-ui; padding: 0 10px;">&mdash;</div>
 +
{{Input|id={{{id}}}-max|name={{{id}}}Max|type=number|min=1|max={{{maxLevel|135}}}|value={{{maxLevel|135}}}|style=appearance: none; padding: 2px; height: 20px; margin-right: 0; width: 70px; border-radius: 8px;|labelStyle=display: block; padding-left: 0;|data=filter+{{{id}}}|data2=value+max}}
 +
</div>
 +
|Checkbox=
 +
<div style="font-weight: bold;">{{{name}}}</div>
 +
<div class="label-hover" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));">
 +
{{#if:{{{text1|}}}|
 +
{{FiltreÉlément
 +
|Élément=checkbox
 +
|id={{{id}}}
 +
|value={{{value1}}}
 +
|textAfter={{{text1}}}{{#if:{{{span|}}}|{{{span}}}}}
 
}}
 
}}
 +
}} {{#if:{{{text2|}}}|
 +
{{FiltreÉlément
 +
|Élément=checkbox
 +
|id={{{id}}}
 +
|value={{{value2}}}
 +
|textAfter={{{text2}}}{{#if:{{{span|}}}|{{{span}}}}}
 +
}}
 +
}} {{#if:{{{text3|}}}|
 +
{{FiltreÉlément
 +
|Élément=checkbox
 +
|id={{{id}}}
 +
|value={{{value3}}}
 +
|textAfter={{{text3}}}{{#if:{{{span|}}}|{{{span}}}}}
 +
}}
 +
}} {{#if:{{{text4|}}}|
 +
{{FiltreÉlément
 +
|Élément=checkbox
 +
|id={{{id}}}
 +
|value={{{value4}}}
 +
|textAfter={{{text4}}}{{#if:{{{span|}}}|{{{span}}}}}
 +
}}
 +
}} {{#if:{{{text5|}}}|
 +
{{FiltreÉlément
 +
|Élément=checkbox
 +
|id={{{id}}}
 +
|value={{{value5}}}
 +
|textAfter={{{text5}}}{{#if:{{{span|}}}|{{{span}}}}}
 +
}}
 +
}} {{#if:{{{text6|}}}|
 +
{{FiltreÉlément
 +
|Élément=checkbox
 +
|id={{{id}}}
 +
|value={{{value6}}}
 +
|textAfter={{{text6}}}{{#if:{{{span|}}}|{{{span}}}}}
 +
}}
 +
}} {{#if:{{{text7|}}}|
 +
{{FiltreÉlément
 +
|Élément=checkbox
 +
|id={{{id}}}
 +
|value={{{value7}}}
 +
|textAfter={{{text7}}}{{#if:{{{span|}}}|{{{span}}}}}
 +
}}
 +
}} {{#if:{{{text8|}}}|
 +
{{FiltreÉlément
 +
|Élément=checkbox
 +
|id={{{id}}}
 +
|value={{{value8}}}
 +
|textAfter={{{text8}}}{{#if:{{{span|}}}|{{{span}}}}}
 +
}}
 +
}} {{#if:{{{text9|}}}|
 +
{{FiltreÉlément
 +
|Élément=checkbox
 +
|id={{{id}}}
 +
|value={{{value9}}}
 +
|textAfter={{{text9}}}{{#if:{{{span|}}}|{{{span}}}}}
 +
}}
 +
}} {{#if:{{{text10|}}}|
 +
{{FiltreÉlément
 +
|Élément=checkbox
 +
|id={{{id}}}
 +
|value={{{value10}}}
 +
|textAfter={{{text10}}}{{#if:{{{span|}}}|{{{span}}}}}
 +
}}
 +
}}
 +
</div>
 +
}}
 +
<noinclude>[[Catégorie:Nouveaux modèles]]</noinclude>

Version actuelle datée du 24 février 2025 à 19:28