Template:Dots: Difference between revisions
Created page with "<includeonly> {{#css: .dotcontainer { display: flex; flex-flow: row nowrap; align-items: flex-start; } .dot { border-radius: 50%; width: 15px; height: 15px; border: 1px solid {{{color|black}}}; margin: 0px 2px; background-color: transparent; } .dot.filled { background-color: {{{color|black}}}; } }} <div class="dotcontainer"> <div class="dot {{#ifexpr: {{{value|0}}} > 0 | filled | }}"></div> <div class="dot {{#ifexpr: {{{value|0}}} > 1 | filled | }..." |
No edit summary |
||
| (4 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
<includeonly> | <includeonly>{{#css: | ||
{{#css: | |||
.dotcontainer { | .dotcontainer { | ||
| Line 10: | Line 9: | ||
.dot { | .dot { | ||
border-radius: 50%; | border-radius: 50%; | ||
width: | width: {{{size|15}}}px; | ||
height: | height: {{{size|15}}}px; | ||
border: 1px solid {{{color|black}}}; | border: 1px solid {{{color|black}}}; | ||
margin: 0px 2px; | margin: 0px 2px; | ||
| Line 19: | Line 18: | ||
.dot.filled { | .dot.filled { | ||
background-color: {{{color|black}}}; | background-color: {{{color|black}}}; | ||
} | |||
.dot.hidden { | |||
display: none; | |||
} | } | ||
| Line 32: | Line 35: | ||
<div class="dot {{#ifexpr: {{{value|0}}} > 7 | filled | }} {{#ifexpr: {{{number|5}}} < 8 | hidden | }}"></div> | <div class="dot {{#ifexpr: {{{value|0}}} > 7 | filled | }} {{#ifexpr: {{{number|5}}} < 8 | hidden | }}"></div> | ||
<div class="dot {{#ifexpr: {{{value|0}}} > 8 | filled | }} {{#ifexpr: {{{number|5}}} < 9 | hidden | }}"></div> | <div class="dot {{#ifexpr: {{{value|0}}} > 8 | filled | }} {{#ifexpr: {{{number|5}}} < 9 | hidden | }}"></div> | ||
<div class="dot {{#ifexpr: {{{value|0}}} > 9 | filled | }} {{#ifexpr: {{{number|5}}} < 10 | hidden | }}"></div> | <div class="dot {{#ifexpr: {{{value|0}}} > 9 | filled | }} {{#ifexpr: {{{number|5}}} < 10 | hidden | }}"></div></div></includeonly> | ||
</div> | |||
</includeonly> | |||
<noinclude> | <noinclude> | ||
usage: | usage: | ||
<pre>{{Dots number=5 | value = 3 | color = red }} | <pre>{{Dots | number=5 | value = 3 | color = red | size = 12}} | ||
number = how many dots to show, defaults to 5 | number = how many dots to show, defaults to 5, max of 10 | ||
value = number of dots to fill in, defaults to 0 | value = number of dots to fill in, defaults to 0, max of 10 | ||
color = color of the dots, defaults to black | color = color of the dots, defaults to black (RGB values allowed) | ||
size = size in pixels of the height and width of the dots, defaults to 15 | |||
</pre> | </pre> | ||
Latest revision as of 17:21, 4 December 2025
usage:
{{Dots | number=5 | value = 3 | color = red | size = 12}}
number = how many dots to show, defaults to 5, max of 10
value = number of dots to fill in, defaults to 0, max of 10
color = color of the dots, defaults to black (RGB values allowed)
size = size in pixels of the height and width of the dots, defaults to 15