Difference between revisions of "Template:Segmented control"

From Co-Optitude Wiki
Jump to navigation Jump to search
Line 9: Line 9:
 
Segments without links will be assumed to be selected. Missing icons will show segments without icons.
 
Segments without links will be assumed to be selected. Missing icons will show segments without icons.
 
</noinclude>
 
</noinclude>
<includeonly>
+
<includeonly><div class="rsToggleContainer" style="text-align: center;">{{#vardefine:i|0}}{{#while:|{{#vardefine:segmentTitle|{{#explode:{{{Titles|}}}|;|{{#var:i}} }} }}{{#var:segmentTitle}}
<div class="rsToggleContainer" style="text-align: center;">
+
     |<nowiki/>{{#vardefine:segmentImage|{{#explode:{{{Icons|}}}|;|{{#var:i}} }} }}{{#vardefine:segmentLink|{{#explode:{{{Links|}}}|;|{{#var:i}} }} }}{{#vardefine:segmentClasses|rsSegment {{#if:{{#var:segmentLink}}||rsSegmentSelected}}}}{{#vardefine:segmentIconHTML|{{#if:{{#var:segmentImage}}|<span class="rsSegmentIcon {{#var:segmentImage}}"></span>}}}}{{#vardefine:segmentFillHTML|<div class="rsSegmentFill"><span class="rsSegmentTitle">{{#var:segmentIconHTML}} <span class="rsSegmentTitleText">{{#var:segmentTitle}}</span></span></div>}}<div class="{{#var:segmentClasses}}">{{#if:{{#var:segmentLink}}|[[{{#var:segmentLink}}|{{#var:segmentFillHTML}}]]|{{#var:segmentFillHTML}}}}</div>{{#vardefine:i|{{#expr:{{#var:i}}+1}}}}}}</div></includeonly>
  {{#vardefine:i|0}}
 
  {{#while:|{{#vardefine:segmentTitle|{{#explode:{{{Titles|}}}|;|{{#var:i}} }} }}{{#var:segmentTitle}}
 
     |<nowiki/>
 
    {{#vardefine:segmentImage|{{#explode:{{{Icons|}}}|;|{{#var:i}} }} }}
 
    {{#vardefine:segmentLink|{{#explode:{{{Links|}}}|;|{{#var:i}} }} }}
 
    {{#vardefine:segmentClasses|rsSegment {{#if:{{#var:segmentLink}}||rsSegmentSelected}}}}
 
    {{#vardefine:segmentIconHTML|{{#if:{{#var:segmentImage}}|<span class="rsSegmentIcon {{#var:segmentImage}}"></span>}}}}
 
    {{#vardefine:segmentFillHTML|<div class="rsSegmentFill"><span class="rsSegmentTitle">{{#var:segmentIconHTML}} <span class="rsSegmentTitleText">{{#var:segmentTitle}}</span></span></div>}}
 
    <div class="{{#var:segmentClasses}}">{{#if:{{#var:segmentLink}}|[[{{#var:segmentLink}}|{{#var:segmentFillHTML}}]]|{{#var:segmentFillHTML}}}}</div>
 
    {{#vardefine:i|{{#expr:{{#var:i}}+1}}}}
 
  }}
 
</div>
 
</includeonly>
 

Revision as of 20:26, 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.