Difference between revisions of "Template:Segmented control"
Jump to navigation
Jump to search
| Line 3: | Line 3: | ||
<pre> | <pre> | ||
{{SegmentedControl | {{SegmentedControl | ||
| − | |Titles=Title 1;Title 2;Title 3}} | + | |Titles=Title 1;Title 2;Title 3 |
| + | |Icons=Icon-name.png;;Icon-name.png | ||
| + | |Links=Name of page;Name of page;}} | ||
</pre> | </pre> | ||
| + | Segments without links will be assumed to be selected. Missing icons will show segments without icons. | ||
</noinclude> | </noinclude> | ||
<includeonly> | <includeonly> | ||
| − | {{#vardefine:segmentCount|0}} | + | <div class="rsToggleContainer" style="text-align: center;"> |
| − | {{#vardefine:i|0}} | + | {{#vardefine:segmentCount|0}}{{#vardefine:i|0}}{{#while:|{{#vardefine:segmentTitle|{{#explode:{{{Titles}}}|;|{{#var:i}} }} }}{{#var:segmentTitle}} |
| − | {{#while:|{{#vardefine:segmentTitle|{{#explode:{{{Titles}}}|;|{{#var:i}} }} }}{{#var:segmentTitle}} | ||
|<nowiki/> | |<nowiki/> | ||
| + | {{#vardefine:orderClass|rsSegmentMiddle }} | ||
| + | {{#ifexpr:{{#var:i}}=1|{{#vardefine:orderClass|rsSegmentFirst}}}} | ||
| + | {{#ifexpr:{{#var:i}}={{#var:segmentCount}}|{{#vardefine:orderClass|rsSegmentLast}}}} | ||
{{#vardefine:segmentImage|{{#explode:{{{Icons}}}|;|{{#var:i}} }} }} | {{#vardefine:segmentImage|{{#explode:{{{Icons}}}|;|{{#var:i}} }} }} | ||
{{#vardefine:segmentLink|{{#explode:{{{Links}}}|;|{{#var:i}} }} }} | {{#vardefine:segmentLink|{{#explode:{{{Links}}}|;|{{#var:i}} }} }} | ||
| + | {{#vardefine:segmentClasses|rsSegment {{#var:orderClass}} {{#if:{{#var:segmentSelected}}|rsSegmentSelected}}}} | ||
| + | {{#vardefine:segmentIconHTML|{{#if:{{#var:segmentImage}}|[[File:{{#var:segmentImage}}|20px|none|middle|link={{#var:segmentLink}}|{{#var:segmentTitle}}]]}} | ||
| + | {{#vardefine:segmentFillHTML|<div class="rsSegmentFill"><span class="rsSegmentTitle">{{#var:segmentIconHTML}}}}<span class="rsSegmentTitleText">{{#var:segmentTitle}}</span></span></div>}} | ||
| + | <div class="{{#var:segmentClasses}}">{{#if:{{#var:segmentSelected}}|{{#var:segmentFillHTML}}|[[{{#var:segmentLink}}|{{#var:segmentFillHTML}}]]}}</div> | ||
{{#if:{{#var:segmentLink}}| | {{#if:{{#var:segmentLink}}| | ||
| − | + | [[{{#segmentLink|{{#var:segmentFillHTML}}]]|{{#segmentFillHTML}}}} | |
| − | |||
{{#vardefine:i|{{#expr:{{#var:i}}+1}}}} | {{#vardefine:i|{{#expr:{{#var:i}}+1}}}} | ||
}} | }} | ||
| + | </div> | ||
</includeonly> | </includeonly> | ||
Revision as of 20:08, 28 March 2020
Usage example:
{{SegmentedControl
|Titles=Title 1;Title 2;Title 3
|Icons=Icon-name.png;;Icon-name.png
|Links=Name of page;Name of page;}}
Segments without links will be assumed to be selected. Missing icons will show segments without icons.