Difference between revisions of "Template:Segmented control"

From Co-Optitude Wiki
Jump to navigation Jump to search
 
(13 intermediate revisions by 2 users not shown)
Line 2: Line 2:
 
Usage example:
 
Usage example:
 
<pre>
 
<pre>
{{SegmentedControl
+
{{Segmented control
 
   |Titles=Title 1;Title 2;Title 3
 
   |Titles=Title 1;Title 2;Title 3
   |Icons=Icon-name.png;;Icon-name.png
+
   |Icons=rsIconCSSClassName;;rsIconCSSClassName
 
   |Links=Name of page;Name of page;}}
 
   |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.
+
Segments without links will be assumed to be selected. Missing icon classes will show segments without icons.
 
</noinclude>
 
</noinclude>
<includeonly>
+
<includeonly><div class="rsToggleContainer">{{#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}}
 
          |[[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>
 

Latest revision as of 07:01, 25 April 2020

Usage example:

{{Segmented control
  |Titles=Title 1;Title 2;Title 3
  |Icons=rsIconCSSClassName;;rsIconCSSClassName
  |Links=Name of page;Name of page;}}

Segments without links will be assumed to be selected. Missing icon classes will show segments without icons.