Columns – Template
Jump to navigation
Jump to search
Lou Montana (talk | contribs) m (Fix alignment) |
Lou Montana (talk | contribs) (Add column width support) |
||
(One intermediate revision by the same user not shown) | |||
Line 1: | Line 1: | ||
<includeonly>{{#if:{{{1|}}} | <includeonly>{{#if:{{{1|}}} | ||
| {{#if:{{{2|}}} | | {{#if:{{{2|}}} | ||
| {{#if:{{{3|{{{ | | {{#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 | | -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 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
Code | Result |
---|---|
-no columns information defined- | |
-no columns content defined- | |
-no columns information defined- | |
| |
| |
| |
Above
Below | |
|