Difference between revisions of "Template:Segmented control"

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

@@ Line 17: / Line 17: @@
      {{#vardefine:segmentLink|{{#explode:{{{Links|}}}|;|{{#var:i}} }} }}
      {{#vardefine:segmentClasses|rsSegment {{#if:{{#var:segmentLink}}|rsSegmentSelected}}}}
-     {{#vardefine:segmentIconHTML|{{#if:{{#var:segmentImage}}|<img src="{{filepath:{{#var:segmentImage}}}}" width="20" height="20" border="0"/>}}}}
+     {{#vardefine:segmentIconHTML|{{#if:{{#var:segmentImage}}|<span class="rsSegmentIcon {{#var:segmentImage}}"></span>}}}}
-     {{#vardefine:segmentFillHTML|(fill: {{#var:segmentIconHTML}} (title: {{#var:segmentTitle}} :title) :fill)}}
+     {{#vardefine:segmentFillHTML|<div class="rsSegmentFill"><span class="rsSegmentTitle">{{#var:segmentIconHTML}} <span class="rsSegmentTitleText">{{#var:segmentTitle}}</span></span></div>}}
-     (segment classes="{{#var:segmentClasses}}": {{#if:{{#var:segmentLink}}|[[{{#var:segmentLink}}|{{#var:segmentFillHTML}}]]|{{#var:segmentFillHTML}}}} :segment)
+     <div class="{{#var:segmentClasses}}">{{#if:{{#var:segmentLink}}|[[{{#var:segmentLink}}|{{#var:segmentFillHTML}}]]|{{#var:segmentFillHTML}}}}</div>
      {{#vardefine:i|{{#expr:{{#var:i}}+1}}}}
    }}
 </div>
 </includeonly>