Modèle:FiltreModule : Différence entre versions

[version vérifiée][version vérifiée]
 
(9 révisions intermédiaires par 2 utilisateurs non affichées)
Ligne 1 : Ligne 1 :
 
{{#switch:{{{Type|}}}
 
{{#switch:{{{Type|}}}
 
|Text=
 
|Text=
{{FiltreÉlément
+
{{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}}}}
|Élément=input
 
|id={{{id}}}
 
|type=text
 
|placeholder={{{placeholder|}}}
 
|Nom={{{Nom|}}}
 
}}
 
 
|Range=
 
|Range=
{{FiltreÉlément
+
<div style="font-weight: bold;">{{{name}}}</div>
|Élément=button
+
<div style="display: flex; align-items: center; gap: 3px 0;">
|id={{{id}}}-range
+
{{Input|id={{{id}}}-min|name={{{id}}}Min|type=number|min=1|max={{{maxLevel|135}}}|value=1|style=margin-right: 0; width: 70px;|labelStyle=display: block; padding-left: 0;|data=filter+{{{id}}}|data2=value+min}}
|Nom={{{Nom|}}}
+
<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=width: 70px;|labelStyle=display: block; padding-left: 0;|data=filter+{{{id}}}|data2=value+max}}
<div id="{{{id|{{{Nom|}}}}}}-range" class="container tabber-noactive dropdown-menu" style="position: absolute; z-index: 10; top: 100%; left: 0; min-width: max-content; width: 170px; padding: 5px 0; margin: 0; list-style: none; background-color: #fff; border: 1px solid #ccc; border-radius: 5px; flex-direction: column; gap: 5px; max-height: 180px; overflow-y: auto;" {{#if:{{{param|}}}|data-param="{{{param}}}"}}>
 
{{FiltreÉlément
 
|Élément=number
 
|id={{{id}}}-min
 
|Nom={{ucfirst:{{{Nom|}}}}} min.
 
|min={{{min|}}}
 
|max={{{max|}}}
 
}}
 
{{FiltreÉlément
 
|Élément=number
 
|id={{{id}}}-max
 
|Nom={{ucfirst:{{{Nom|}}}}} max.
 
|value={{{max|}}}
 
|min={{{min|}}}
 
|max={{{max|}}}
 
}}
 
 
</div>
 
</div>
<div class="tabber-noactive" style="position: absolute; top: -10px; right: 0; border: 2px green solid; border-radius: 100%; padding: 0 6px; justify-content: center; font-weight: bold; color: green; background: lightgreen;">0</div>
 
 
|Checkbox=
 
|Checkbox=
{{FiltreÉlément
+
<div style="font-weight: bold;">{{{name}}}</div>
|Élément=button
+
<div class="label-hover" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));">
|id={{{id}}}
+
{{#if:{{{text1|}}}|
|Nom={{{Nom|}}}
 
}}
 
<div id="{{{id}}}" class="container tabber-noactive dropdown-menu" style="position: absolute; z-index: 10; top: 100%; left: 0; min-width: max-content; width: 170px; padding: 5px 0; margin: 0; list-style: none; background-color: #fff; border: 1px solid #ccc; border-radius: 5px; flex-direction: column; gap: 5px; max-height: 180px; overflow-y: auto;" {{#if:{{{param|}}}|data-param="{{{param}}}"}}>
 
{{#if:{{{Checkbox1|}}}|
 
{{FiltreÉlément
 
|Élément=checkbox
 
|id={{{id}}}-{{lcfirst:{{{id1|{{{Checkbox1}}}}}}}}
 
|Nom={{{Checkbox1}}}
 
}}
 
}} {{#if:{{{Checkbox2|}}}|
 
{{FiltreÉlément
 
|Élément=checkbox
 
|id={{{id}}}-{{lcfirst:{{{id2|{{{Checkbox2}}}}}}}}
 
|Nom={{{Checkbox2}}}
 
}}
 
}} {{#if:{{{Checkbox3|}}}|
 
{{FiltreÉlément
 
|Élément=checkbox
 
|id={{{id}}}-{{lcfirst:{{{id3|{{{Checkbox3}}}}}}}}
 
|Nom={{{Checkbox3}}}
 
}}
 
}} {{#if:{{{Checkbox4|}}}|
 
{{FiltreÉlément
 
|Élément=checkbox
 
|id={{{id}}}-{{lcfirst:{{{id4|{{{Checkbox4}}}}}}}}
 
|Nom={{{Checkbox4}}}
 
}}
 
}} {{#if:{{{Checkbox5|}}}|
 
 
{{FiltreÉlément
 
{{FiltreÉlément
 
|Élément=checkbox
 
|Élément=checkbox
|id={{{id}}}-{{lcfirst:{{{id5|{{{Checkbox5}}}}}}}}
 
|Nom={{{Checkbox5}}}
 
}}
 
}} {{#if:{{{Checkbox6|}}}|
 
{{FiltreÉlément
 
|Élément=checkbox
 
|id={{{id}}}-{{lcfirst:{{{id6|{{{Checkbox6}}}}}}}}
 
|Nom={{{Checkbox6}}}
 
}}
 
}} {{#if:{{{Checkbox7|}}}|
 
{{FiltreÉlément
 
|Élément=checkbox
 
|id={{{id}}}-{{lcfirst:{{{id7|{{{Checkbox7}}}}}}}}
 
|Nom={{{Checkbox7}}}
 
}}
 
}} {{#if:{{{Checkbox8|}}}|
 
{{FiltreÉlément
 
|Élément=checkbox
 
|id={{{id}}}-{{lcfirst:{{{id8|{{{Checkbox8}}}}}}}}
 
|Nom={{{Checkbox8}}}
 
}}
 
}} {{#if:{{{Checkbox9|}}}|
 
{{FiltreÉlément
 
|Élément=checkbox
 
|id={{{id}}}-{{lcfirst:{{{id9|{{{Checkbox9}}}}}}}}
 
|Nom={{{Checkbox9}}}
 
}}
 
}} {{#if:{{{Checkbox10|}}}|
 
{{FiltreÉlément
 
|Élément=checkbox
 
|id={{{id}}}-{{lcfirst:{{{id10|{{{Checkbox10}}}}}}}}
 
|Nom={{{Checkbox10}}}
 
}}
 
}}
 
</div>
 
<div class="tabber-noactive" style="position: absolute; top: -10px; right: 0; border: 2px green solid; border-radius: 100%; padding: 0 6px; justify-content: center; font-weight: bold; color: green; background: lightgreen;">0</div>
 
|Checkbox2=
 
{{#if:{{{text1|}}}|
 
{{FiltreÉlément
 
|Élément=checkbox2
 
 
|id={{{id}}}
 
|id={{{id}}}
 
|value={{{value1}}}
 
|value={{{value1}}}
|text={{{text1}}}{{#if:{{{span|}}}|{{{span}}}}}
+
|textAfter={{{text1}}}{{#if:{{{span|}}}|{{{span}}}}}
 
}}
 
}}
 
}} {{#if:{{{text2|}}}|
 
}} {{#if:{{{text2|}}}|
 
{{FiltreÉlément
 
{{FiltreÉlément
|Élément=checkbox2
+
|Élément=checkbox
 
|id={{{id}}}
 
|id={{{id}}}
 
|value={{{value2}}}
 
|value={{{value2}}}
|text={{{text2}}}{{#if:{{{span|}}}|{{{span}}}}}
+
|textAfter={{{text2}}}{{#if:{{{span|}}}|{{{span}}}}}
 
}}
 
}}
 
}} {{#if:{{{text3|}}}|
 
}} {{#if:{{{text3|}}}|
 
{{FiltreÉlément
 
{{FiltreÉlément
|Élément=checkbox2
+
|Élément=checkbox
 
|id={{{id}}}
 
|id={{{id}}}
 
|value={{{value3}}}
 
|value={{{value3}}}
|text={{{text3}}}{{#if:{{{span|}}}|{{{span}}}}}
+
|textAfter={{{text3}}}{{#if:{{{span|}}}|{{{span}}}}}
 
}}
 
}}
 
}} {{#if:{{{text4|}}}|
 
}} {{#if:{{{text4|}}}|
 
{{FiltreÉlément
 
{{FiltreÉlément
|Élément=checkbox2
+
|Élément=checkbox
 
|id={{{id}}}
 
|id={{{id}}}
 
|value={{{value4}}}
 
|value={{{value4}}}
|text={{{text4}}}{{#if:{{{span|}}}|{{{span}}}}}
+
|textAfter={{{text4}}}{{#if:{{{span|}}}|{{{span}}}}}
 
}}
 
}}
 
}} {{#if:{{{text5|}}}|
 
}} {{#if:{{{text5|}}}|
 
{{FiltreÉlément
 
{{FiltreÉlément
|Élément=checkbox2
+
|Élément=checkbox
 
|id={{{id}}}
 
|id={{{id}}}
 
|value={{{value5}}}
 
|value={{{value5}}}
|text={{{text5}}}{{#if:{{{span|}}}|{{{span}}}}}
+
|textAfter={{{text5}}}{{#if:{{{span|}}}|{{{span}}}}}
 
}}
 
}}
 
}} {{#if:{{{text6|}}}|
 
}} {{#if:{{{text6|}}}|
 
{{FiltreÉlément
 
{{FiltreÉlément
|Élément=checkbox2
+
|Élément=checkbox
 
|id={{{id}}}
 
|id={{{id}}}
 
|value={{{value6}}}
 
|value={{{value6}}}
|text={{{text6}}}{{#if:{{{span|}}}|{{{span}}}}}
+
|textAfter={{{text6}}}{{#if:{{{span|}}}|{{{span}}}}}
 
}}
 
}}
 
}} {{#if:{{{text7|}}}|
 
}} {{#if:{{{text7|}}}|
 
{{FiltreÉlément
 
{{FiltreÉlément
|Élément=checkbox2
+
|Élément=checkbox
 
|id={{{id}}}
 
|id={{{id}}}
 
|value={{{value7}}}
 
|value={{{value7}}}
|text={{{text7}}}{{#if:{{{span|}}}|{{{span}}}}}
+
|textAfter={{{text7}}}{{#if:{{{span|}}}|{{{span}}}}}
 
}}
 
}}
 
}} {{#if:{{{text8|}}}|
 
}} {{#if:{{{text8|}}}|
 
{{FiltreÉlément
 
{{FiltreÉlément
|Élément=checkbox2
+
|Élément=checkbox
 
|id={{{id}}}
 
|id={{{id}}}
 
|value={{{value8}}}
 
|value={{{value8}}}
|text={{{text8}}}{{#if:{{{span|}}}|{{{span}}}}}
+
|textAfter={{{text8}}}{{#if:{{{span|}}}|{{{span}}}}}
 
}}
 
}}
 
}} {{#if:{{{text9|}}}|
 
}} {{#if:{{{text9|}}}|
 
{{FiltreÉlément
 
{{FiltreÉlément
|Élément=checkbox2
+
|Élément=checkbox
 
|id={{{id}}}
 
|id={{{id}}}
 
|value={{{value9}}}
 
|value={{{value9}}}
|text={{{text9}}}{{#if:{{{span|}}}|{{{span}}}}}
+
|textAfter={{{text9}}}{{#if:{{{span|}}}|{{{span}}}}}
 
}}
 
}}
 
}} {{#if:{{{text10|}}}|
 
}} {{#if:{{{text10|}}}|
 
{{FiltreÉlément
 
{{FiltreÉlément
|Élément=checkbox2
+
|Élément=checkbox
 
|id={{{id}}}
 
|id={{{id}}}
 
|value={{{value10}}}
 
|value={{{value10}}}
|text={{{text10}}}{{#if:{{{span|}}}|{{{span}}}}}
+
|textAfter={{{text10}}}{{#if:{{{span|}}}|{{{span}}}}}
 
}}
 
}}
 
}}
 
}}
 +
</div>
 
}}
 
}}
 
<noinclude>[[Catégorie:Nouveaux modèles]]</noinclude>
 
<noinclude>[[Catégorie:Nouveaux modèles]]</noinclude>

Version actuelle datée du 22 décembre 2024 à 15:55