Columns – Template
| Lou Montana (talk | contribs) m (Fix alignment) | Lou Montana (talk | contribs)   (Add noresize wrapping) | ||
| (2 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
| <includeonly>{{#if:{{{1|}}} | <includeonly>{{#if:{{{1|}}} | ||
| | {{#if:{{{2|}}} | | {{#if:{{{2|}}} | ||
| 	| {{#if:{{{3|{{{ | 	| <div class="noresize">{{#if:{{{3|{{{expand|}}}}}}||<div>}}<div class="columns" style="columns: {{{1}}}{{#if:{{{3|{{{expand|}}}}}}||; display: inline-block}}">{{{2}}}</div>{{#if:{{{3|{{{expand|}}}}}}||</div>}}</div> | ||
| 	| -no columns content defined- | 	| -no columns content defined-{{TemplateCase||[[Category:Columns template usage error]]}} | ||
| }} | }} | ||
| | -no columns  | | -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=  | |||
| |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=  | |||
| |descr3= named parameter. makes the columns take the  | |param3= expand | ||
| |example1= < | |descr3= named parameter. makes the columns take the whole width | ||
| |example1= <syntaxhighlight lang="handlebars">{{Columns}}</syntaxhighlight> | |||
| |result1= {{Columns}} | |result1= {{Columns}} | ||
| |example2= < | |||
| |example2= <syntaxhighlight lang="handlebars">{{Columns|3}}</syntaxhighlight> | |||
| |result2= {{Columns|3}} | |result2= {{Columns|3}} | ||
| |example3= < | |||
| |example3= <syntaxhighlight lang="handlebars"> | |||
| {{Columns|| | |||
| * contentA | * contentA | ||
| * contentB | * contentB | ||
| * contentC | * contentC | ||
| * contentD | * contentD | ||
| }}</ | }} | ||
| </syntaxhighlight> | |||
| |result3= {{Columns|| | |result3= {{Columns|| | ||
| * contentA | * contentA | ||
| Line 29: | Line 40: | ||
| * contentD | * contentD | ||
| }} | }} | ||
| |example4= < | |||
| |example4= <syntaxhighlight lang="handlebars"> | |||
| {{Columns|2| | |||
| * contentA | * contentA | ||
| * contentB | * contentB | ||
| * contentC | * contentC | ||
| * contentD | * contentD | ||
| }}</ | }} | ||
| </syntaxhighlight> | |||
| |result4= {{Columns|2| | |result4= {{Columns|2| | ||
| * contentA | * contentA | ||
| Line 41: | Line 55: | ||
| * contentD | * contentD | ||
| }} | }} | ||
| |example5= < | |||
| |example5= <syntaxhighlight lang="handlebars"> | |||
| {{Columns|3| | |||
| * contentA | * contentA | ||
| * contentB | * contentB | ||
| * contentC | * contentC | ||
| * contentD | * contentD | ||
| }}</ | }} | ||
| </syntaxhighlight> | |||
| |result5= {{Columns|3| | |result5= {{Columns|3| | ||
| * contentA | * contentA | ||
| Line 53: | Line 70: | ||
| * contentD | * contentD | ||
| }} | }} | ||
| |example6= < | |||
| |example6= <syntaxhighlight lang="handlebars"> | |||
| {{Columns|4| | |||
| * contentA | * contentA | ||
| * contentB | * contentB | ||
| * contentC | * contentC | ||
| * contentD | * contentD | ||
| }}</ | }} | ||
| </syntaxhighlight> | |||
| |result6= {{Columns|4| | |result6= {{Columns|4| | ||
| * contentA | * contentA | ||
| Line 65: | Line 85: | ||
| * contentD | * contentD | ||
| }} | }} | ||
| |example7= <div style=" | |||
| |example7= <syntaxhighlight lang="html+handlebars"> | |||
| <div style="border: 1px solid red; width: 50em"> | |||
| Above | |||
| {{Columns|3| | |||
| * contentA | * contentA | ||
| * contentB | * contentB | ||
| * contentC | * contentC | ||
| * contentD | * contentD | ||
| | | |expand= y | ||
| }}Below</ | }} | ||
| |result7= <div style=" | Below | ||
| </div> | |||
| </syntaxhighlight> | |||
| |result7= <div style="border: 1px solid red; width: 50em"> | |||
| Above | |||
| {{Columns|3| | |||
| * contentA | * contentA | ||
| * contentB | * contentB | ||
| * contentC | * contentC | ||
| * contentD | * contentD | ||
| | | |expand= y | ||
| }}Below</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 19:03, 12 April 2025
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
| Code | Result | 
|---|---|
| -no columns information defined- | |
| -no columns content defined- | |
| -no columns information defined- | |
| 
 | |
| 
 | |
| 
 | |
| Above 
 Below | |
| 
 | 
