Columns – Template

From Bohemia Interactive Community
Jump to navigation Jump to search
(Add shrink parameter)
(Add column width support)
 
(2 intermediate revisions by the same user not shown)
Line 1: Line 1:
<includeonly>{{#if:{{{1|}}}
<includeonly>{{#if:{{{1|}}}
| {{#if:{{{2|}}}
| {{#if:{{{2|}}}
| <div class="columns" style="column-count: {{{1|2}}}{{#if:{{{3|{{{shrink|}}}}}}|; display: inline-block}}">{{{2|}}}</div>
| {{#if:{{{3|{{{expand|}}}}}}||<div>}}<div class="columns" style="columns: {{{1}}}{{#if:{{{3|{{{expand|}}}}}}||; display: inline-block}}">{{{2}}}</div>{{#if:{{{3|{{{expand|}}}}}}||</div>}}
| -no columns content defined-
| -no columns content defined-{{TemplateCase||[[Category:Columns template usage error]]}}
}}
}}
| -no columns count defined-
| -no columns information defined-{{TemplateCase||[[Category:Columns template usage error]]}}
}}</includeonly><noinclude>{{Doc/Template
}}</includeonly><noinclude>{{Doc/Template
|descr= Creates CSS columns.
|descr= Creates CSS columns. It also adds the page to the [[:Category:Columns template usage error|Columns template usage error]] category on usage error.
|param1= cols
 
|descr1= number of columns
|param1= colsInfo
|descr1= {{hl|columns}} CSS attribute's definition - see {{Link|https://developer.mozilla.org/en-US/docs/Web/CSS/columns|columns}}, can be:
** desired columns number, e.g {{hl|4}}
** column width, e.g {{hl|12em}}
** a mix of the two, e.g {{hl|4 12em}} - in this case, columns number is the '''maximum''' columns number
 
|param2= content
|param2= content
|descr2= to be split in columns
|descr2= to be split in columns, usually a list
|param3= shrink
 
|descr3= named parameter. makes the columns take the minimum width
|param3= expand
|example1= <nowiki>{{Columns}}</nowiki>
|descr3= named parameter. makes the columns take the whole width
 
|example1= <syntaxhighlight lang="handlebars">{{Columns}}</syntaxhighlight>
|result1= {{Columns}}
|result1= {{Columns}}
|example2= <nowiki>{{Columns|3}}</nowiki>
 
|example2= <syntaxhighlight lang="handlebars">{{Columns|3}}</syntaxhighlight>
|result2= {{Columns|3}}
|result2= {{Columns|3}}
|example3= <div style="white-space: pre"><nowiki>{{Columns||
 
|example3= <syntaxhighlight lang="handlebars">
{{Columns||
* contentA
* contentA
* contentB
* contentB
* contentC
* contentC
* contentD
* contentD
}}</nowiki></div>
}}
</syntaxhighlight>
|result3= {{Columns||
|result3= {{Columns||
* contentA
* contentA
Line 29: Line 40:
* contentD
* contentD
}}
}}
|example4= <div style="white-space: pre"><nowiki>{{Columns|2|
 
|example4= <syntaxhighlight lang="handlebars">
{{Columns|2|
* contentA
* contentA
* contentB
* contentB
* contentC
* contentC
* contentD
* contentD
}}</nowiki></div>
}}
</syntaxhighlight>
|result4= {{Columns|2|
|result4= {{Columns|2|
* contentA
* contentA
Line 41: Line 55:
* contentD
* contentD
}}
}}
|example5= <div style="white-space: pre"><nowiki>{{Columns|3|
 
|example5= <syntaxhighlight lang="handlebars">
{{Columns|3|
* contentA
* contentA
* contentB
* contentB
* contentC
* contentC
* contentD
* contentD
}}</nowiki></div>
}}
</syntaxhighlight>
|result5= {{Columns|3|
|result5= {{Columns|3|
* contentA
* contentA
Line 53: Line 70:
* contentD
* contentD
}}
}}
|example6= <div style="white-space: pre"><nowiki>{{Columns|4|
 
|example6= <syntaxhighlight lang="handlebars">
{{Columns|4|
* contentA
* contentA
* contentB
* contentB
* contentC
* contentC
* contentD
* contentD
}}</nowiki></div>
}}
</syntaxhighlight>
|result6= {{Columns|4|
|result6= {{Columns|4|
* contentA
* contentA
Line 65: Line 85:
* contentD
* contentD
}}
}}
|example7= <div style="white-space: pre"><nowiki>{{Columns|3|
 
|example7= <syntaxhighlight lang="html+handlebars">
<div style="border: 1px solid red; width: 50em">
Above
{{Columns|3|
* contentA
* contentA
* contentB
* contentB
* contentC
* contentC
* contentD
* contentD
|shrink= y
|expand= y
}}</nowiki></div>
}}
|result7= <div style="min-width: 50em">{{Columns|3|
Below
</div>
</syntaxhighlight>
|result7= <div style="border: 1px solid red; width: 50em">
Above
{{Columns|3|
* contentA
* contentA
* contentB
* contentB
* contentC
* contentC
* contentD
* contentD
|shrink= y
|expand= y
}}</div>
}}
Below
</div>
 
|example8= <syntaxhighlight lang="html+handlebars">
<div style="border: 1px solid red; width: 50em">
{{Columns|3 10em|
* contentA, which can totally do with a lipsum amongst other things, yes
* contentB, which can totally do with a lipsum amongst other things, too
* contentC, which can totally do with a lipsum amongst other things, too
* contentD, which can totally do with a lipsum amongst other things, too
* contentE, which can totally do with a lipsum amongst other things, too
* contentF, which can totally do with a lipsum amongst other things, too
* contentG, which can totally do with a lipsum amongst other things, too
* contentH, which can totally do with a lipsum amongst other things, too
* contentI, which can totally do with a lipsum amongst other things, too
* contentJ, which can totally do with a lipsum amongst other things, too
}}
</div>
</syntaxhighlight>
|result8= <div style="border: 1px solid red; width: 50em">
{{Columns|3 10em|
* contentA, which can totally do with a lipsum amongst other things, yes
* contentB, which can totally do with a lipsum amongst other things, too
* contentC, which can totally do with a lipsum amongst other things, too
* contentD, which can totally do with a lipsum amongst other things, too
* contentE, which can totally do with a lipsum amongst other things, too
* contentF, which can totally do with a lipsum amongst other things, too
* contentG, which can totally do with a lipsum amongst other things, too
* contentH, which can totally do with a lipsum amongst other things, too
* contentI, which can totally do with a lipsum amongst other things, too
* contentJ, which can totally do with a lipsum amongst other things, too
}}
</div>
 
}}</noinclude>
}}</noinclude>

Latest revision as of 00:05, 18 October 2024

Creates CSS columns. It also adds the page to the Columns template usage error category on usage error.

This template is used on these pages.

Usage

{{Columns|colsInfo|content|expand}}

  • colsInfo: columns CSS attribute's definition - see columns, can be:
    • desired columns number, e.g 4
    • column width, e.g 12em
    • a mix of the two, e.g 4 12em - in this case, columns number is the maximum columns number
  • content: to be split in columns, usually a list
  • expand: named parameter. makes the columns take the whole width
Examples
Code Result
{{Columns}}
-no columns information defined-
{{Columns|3}}
-no columns content defined-
{{Columns||
* contentA
* contentB
* contentC
* contentD
}}
-no columns information defined-
{{Columns|2|
* contentA
* contentB
* contentC
* contentD
}}
  • contentA
  • contentB
  • contentC
  • contentD
{{Columns|3|
* contentA
* contentB
* contentC
* contentD
}}
  • contentA
  • contentB
  • contentC
  • contentD
{{Columns|4|
* contentA
* contentB
* contentC
* contentD
}}
  • contentA
  • contentB
  • contentC
  • contentD
<div style="border: 1px solid red; width: 50em">
Above
{{Columns|3|
* contentA
* contentB
* contentC
* contentD
|expand= y
}}
Below
</div>

Above

  • contentA
  • contentB
  • contentC
  • contentD

Below

<div style="border: 1px solid red; width: 50em">
{{Columns|3 10em|
* contentA, which can totally do with a lipsum amongst other things, yes
* contentB, which can totally do with a lipsum amongst other things, too
* contentC, which can totally do with a lipsum amongst other things, too
* contentD, which can totally do with a lipsum amongst other things, too
* contentE, which can totally do with a lipsum amongst other things, too
* contentF, which can totally do with a lipsum amongst other things, too
* contentG, which can totally do with a lipsum amongst other things, too
* contentH, which can totally do with a lipsum amongst other things, too
* contentI, which can totally do with a lipsum amongst other things, too
* contentJ, which can totally do with a lipsum amongst other things, too
}}
</div>
  • contentA, which can totally do with a lipsum amongst other things, yes
  • contentB, which can totally do with a lipsum amongst other things, too
  • contentC, which can totally do with a lipsum amongst other things, too
  • contentD, which can totally do with a lipsum amongst other things, too
  • contentE, which can totally do with a lipsum amongst other things, too
  • contentF, which can totally do with a lipsum amongst other things, too
  • contentG, which can totally do with a lipsum amongst other things, too
  • contentH, which can totally do with a lipsum amongst other things, too
  • contentI, which can totally do with a lipsum amongst other things, too
  • contentJ, which can totally do with a lipsum amongst other things, too