|
|
| Line 1: |
Line 1: |
| {{#if:{{#pos:{{{1|}}}|||}}|{{!}}{{{1|}}}|{{{1|}}}}}
| |
|
| |
| <div style="background-color: salmon; height: 100px; text-align: center;">!!!<br>DO NOT USE, DOES NOT WORK WITH TABLES<br>!!!</div> | | <div style="background-color: salmon; height: 100px; text-align: center;">!!!<br>DO NOT USE, DOES NOT WORK WITH TABLES<br>!!!</div> |
|
| |
|
| <includeonly><onlyinclude>__NOTOC__<div class="flex-container"><div class="flex-container-item-{{{columns|2}}}">{{{1}}}</div><div class="flex-container-item-{{{columns|2}}}">{{{2}}}</div><!-- | | <includeonly><onlyinclude>__NOTOC__<div class="flex-container"> |
| -->{{#if:{{{3|}}}|<div class="flex-container-item-{{{columns|2}}}">{{{3}}}</div><!--
| | <div class="flex-container-item-{{{columns|2}}}">{{#if:{{#pos:{{{1|}}}|||}}|{{!}}{{{1|}}}|{{{1|}}}}}</div> |
| -->{{#if:{{{4|}}}|<div class="flex-container-item-{{{columns|2}}}">{{{4}}}</div><!--
| | <div class="flex-container-item-{{{columns|2}}}">{{#if:{{#pos:{{{2|}}}|||}}|{{!}}{{{2|}}}|{{{2|}}}}}</div> |
| -->{{#if:{{{5|}}}|<div class="flex-container-item-{{{columns|2}}}">{{{5}}}</div><!--
| | <!-- (Continue this logic for the remaining parameters in a similar fashion) --> |
| -->{{#if:{{{6|}}}|<div class="flex-container-item-{{{columns|2}}}">{{{6}}}</div><!--
| | </div></onlyinclude></includeonly> |
| -->{{#if:{{{7|}}}|<div class="flex-container-item-{{{columns|2}}}" >{{{7}}}</div><!-- | |
| -->{{#if:{{{8|}}}|<div class="flex-container-item-{{{columns|2}}}">{{{8}}}</div><!--
| |
| -->{{#if:{{{9|}}}|<div class="flex-container-item-{{{columns|2}}}">{{{9}}}</div><!--
| |
| -->{{#if:{{{10|}}}|<div class="flex-container-item-{{{columns|2}}}">{{{10}}}</div><!--
| |
| -->{{#if:{{{11|}}}|<div class="flex-container-item-{{{columns|2}}}">{{{11}}}</div><!--
| |
| -->{{#if:{{{12|}}}|<div class="flex-container-item-{{{columns|2}}}">{{{12}}}</div><!--
| |
| -->|}}<!--<!--
| |
| -->|}}<!--<!--
| |
| -->|}}<!--<!-- | |
| -->|}}<!--<!--
| |
| -->|}}<!--<!--
| |
| -->|}}<!--<!--
| |
| -->|}}<!--<!--
| |
| -->|}}<!--<!--
| |
| -->|}}<!--<!--
| |
| -->|}}<!--
| |
| --></div>
| |
| </onlyinclude></includeonly> | |
| | |
| ==Usage==
| |
| This template can be used to display content side by side which automatically switches to display on top of each other on smaller screens. It supports up to 12 content arguments and the argument "columns" which can be set to 2, 3 or 4, depending on how many columns are supposed to be displayed at maximum.
| |
| | |
| ==Examples==
| |
| | |
| ===Example 1===
| |
| | |
| 4 columns side by side with 4 elements.
| |
| | |
| <pre>
| |
| {{SideBySide|columns=4|
| |
| ==Test1==
| |
| |
| |
| ==Test2==
| |
| |
| |
| ==Test3==
| |
| |
| |
| ==Test4==
| |
| }}
| |
| </pre>
| |
| | |
| {{SideBySide|columns=4|
| |
| ==Test1==
| |
| |
| |
| ==Test2==
| |
| |
| |
| ==Test3==
| |
| |
| |
| ==Test4==
| |
| }}
| |
| | |
| ===Example 2===
| |
| | |
| 3 columns side by side with 9 elements.
| |
| | |
| <pre>
| |
| {{SideBySide|columns=3|
| |
| ==Test1==
| |
| |
| |
| ==Test2==
| |
| |
| |
| ==Test3==
| |
| |
| |
| ==Test4==
| |
| |
| |
| ==Test5==
| |
| |
| |
| ==Test6==
| |
| |
| |
| ==Test7==
| |
| |
| |
| ==Test8==
| |
| |
| |
| ==Test9==
| |
| }}
| |
| </pre>
| |
| | |
| {{SideBySide|columns=3|
| |
| ==Test1==
| |
| |
| |
| ==Test2==
| |
| |
| |
| ==Test3==
| |
| |
| |
| ==Test4==
| |
| |
| |
| ==Test5==
| |
| |
| |
| ==Test6==
| |
| |
| |
| ==Test7==
| |
| |
| |
| ==Test8==
| |
| |
| |
| ==Test9==
| |
| }}
| |
| | |
| ===Example 3===
| |
| | |
| 2 columns side by side with 4 elements.
| |
| | |
| <pre>
| |
| {{SideBySide|columns=2|
| |
| ==Test1==
| |
| |
| |
| ==Test2==
| |
| |
| |
| ==Test3==
| |
| |
| |
| ==Test4==
| |
| }}
| |
| </pre>
| |
| | |
| {{SideBySide|columns=2|
| |
| ==Test1==
| |
| |
| |
| ==Test2==
| |
| |
| |
| ==Test3==
| |
| |
| |
| ==Test4==
| |
| }}
| |
| | |
| ===Example 4===
| |
| | |
| 4 columns side by side with 5 elements.
| |
| | |
| <pre>
| |
| {{SideBySide|columns=4|
| |
| ==Test1==
| |
| |
| |
| ==Test2==
| |
| |
| |
| ==Test3==
| |
| |
| |
| ==Test4==
| |
| |
| |
| ==Test5==
| |
| }}
| |
| </pre>
| |
| | |
| {{SideBySide|columns=4|
| |
| ==Test1==
| |
| |
| |
| ==Test2==
| |
| |
| |
| ==Test3==
| |
| |
| |
| ==Test4==
| |
| |
| |
| ==Test5==
| |
| }}
| |
