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}}|<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}}|[[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:segmentLink}}|[[{{#var:segmentLink}}|{{#var:segmentFillHTML}}]]|{{#var:segmentFillHTML}}}}</div>{{#vardefine:i|{{#expr:{{#var:i}}+1}}}}}}</div></includeonly>
  <div class="rsToggleContainer" style="text-align: center;">
 
    {{#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}}
 
          |[[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:segmentLink}}|
 
          [[{{#var:segmentLink}}|{{#var:segmentFillHTML}}]]|
 
          {{#var:segmentFillHTML}}
 
        }}
 
      </div>
 
* i: {{#var:i}}
 
* Segment title: {{#var:segmentTitle}}
 
* Segment image: {{#var:segmentImage}}
 
* Segment link: {{#var:segmentLink}}
 
* Segment classes: {{#var:segmentClasses}}
 
      {{#vardefine:i|{{#expr:{{#var:i}}+1}}}}
 
    }}
 
  </div>
 
</includeonly>
 

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