Difference between revisions of "Template:Segmented control"

From Co-Optitude Wiki
Jump to navigation Jump to search
Line 10: Line 10:
 
</noinclude>
 
</noinclude>
 
<includeonly>
 
<includeonly>
<div class="rsToggleContainer" style="text-align: center;">
+
  <div class="rsToggleContainer" style="text-align: center;">
{{#vardefine:segmentCount|0}}
+
    {{#vardefine:segmentCount|0}}
{{#vardefine:i|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: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 {{#if:{{#var:segmentLink}}|rsSegmentSelected}}}}
+
      {{#vardefine:segmentClasses|rsSegment {{#if:{{#var:segmentLink}}|rsSegmentSelected}}}}
  {{#vardefine:segmentIconHTML|{{#if:{{#var:segmentImage}}|[[File:{{#var:segmentImage}}|20px|none|middle|link={{#var:segmentLink}}|{{#var:segmentTitle}}]]}}
+
      {{#vardefine:segmentIconHTML|
  {{#vardefine:segmentFillHTML|<div class="rsSegmentFill"><span class="rsSegmentTitle">{{#var:segmentIconHTML}}}}<span class="rsSegmentTitleText">{{#var:segmentTitle}}</span></span></div>}}
+
        {{#if:{{#var:segmentImage}}
<div class="{{#var:segmentClasses}}">{{#if:{{#var:segmentLink}}|[[{{#var:segmentLink}}|{{#var:segmentFillHTML}}]]|{{#var:segmentFillHTML}}}}</div>
+
          |[[File:{{#var:segmentImage}}|20px|none|middle|link={{#var:segmentLink}}|{{#var:segmentTitle}}]]
{{#if:{{#var:segmentLink}}|
+
        }}
[[{{#var:segmentLink|{{#var:segmentFillHTML}}]]|{{#segmentFillHTML}}}}
+
      }}
  {{#vardefine:i|{{#expr:{{#var:i}}+1}}}}
+
      {{#vardefine:segmentFillHTML|
}}
+
        <div class="rsSegmentFill">
</div>
+
          <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>
 +
      {{#if:{{#var:segmentLink}}|
 +
        [[{{#var:segmentLink}}|{{#var:segmentFillHTML}}]]|
 +
        {{#segmentFillHTML}}
 +
      }}
 +
      {{#vardefine:i|{{#expr:{{#var:i}}+1}}}}
 +
    }}
 +
  </div>
 
</includeonly>
 
</includeonly>

Revision as of 19:18, 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.