10,109
editsTemplate:IconText: Difference between revisions
Jump to navigation
Jump to search
Add some CSS classes.
(add class) |
(Add some CSS classes.) |
||
| (One intermediate revision by the same user not shown) | |||
| Line 7: | Line 7: | ||
{{#lvardef: max-h | {{#if: {{{h|}}} | {{{h}}} | {{#if: {{{size|}}} | {{{size}}} | 40 }} }} }} | {{#lvardef: max-h | {{#if: {{{h|}}} | {{{h}}} | {{#if: {{{size|}}} | {{{size}}} | 40 }} }} }} | ||
}}{{#if: {{{block|}}} | }}{{#if: {{{block|}}} | ||
| <span style="display: inline-flex; align-items: center; {{#if: {{{gap|}}} | gap: {{{gap}}}px; }}"> | | <span class="bg3wiki-icontext-block" style="display: inline-flex; align-items: center; {{#if: {{{gap|}}} | gap: {{{gap}}}px; }}"> | ||
}}<span style=" | }}<span class="bg3wiki-icontext-icon-wrapper" style=" | ||
display: inline-flex; | display: inline-flex; | ||
align-items: center; | align-items: center; | ||
| Line 15: | Line 15: | ||
height: {{#lvar:max-h}}px; | height: {{#lvar:max-h}}px; | ||
{{#if:{{{nowrap|}}}|white-space: nowrap}} | {{#if:{{{nowrap|}}}|white-space: nowrap}} | ||
"><span style="vertical-align: middle;">{{icon | "><span class="bg3wiki-icontext-icon" style="vertical-align: middle;">{{icon | ||
| {{#lvar:icon}} | | {{#lvar:icon}} | ||
| link = {{#lvar:link}} | | link = {{#lvar:link}} | ||
| Line 22: | Line 22: | ||
| h = {{#lvar:max-h}} | | h = {{#lvar:max-h}} | ||
| class = {{{class|}}} | | class = {{{class|}}} | ||
}}</span></span> <span>{{#if: {{#lvar:link}} | }}</span></span> <span class="bg3wiki-icontext-text">{{#if: {{#lvar:link}} | ||
| [[{{#lvar:link}}|{{#lvar:text}}]] | | [[{{#lvar:link}}|{{#lvar:text}}]] | ||
| {{#lvar:text}} | | {{#lvar:text}} | ||
| Line 54: | Line 54: | ||
{{IconText | Missing Icon 123.png | Flourish | size = 30 }} | {{IconText | Missing Icon 123.png | Flourish | size = 30 }} | ||
The width can be set via the {{code|w}} parameter. This could be useful if several elements are supposed to align vertically for design purposes, such as in the following table shown on our main page as of the writing of this documentation. This also uses the {{code|block}} and {{code|gap}} parameters. View the source of this page for usage. | The width can be set via the {{code|w}} parameter. This could be useful if several elements are supposed to align vertically for design purposes, such as in the following table shown on our main page as of the writing of this documentation. This also uses the {{code|block}} and {{code|gap}} parameters. (View the source of this page for usage.) | ||
Setting {{code|block}} to yes ensures that if the text part has to break into multiple lines, the second line doesn't flow under the icon and instead the text is constrained into a rectangular block. The {{code|gap}} parameter can only be provided if block is set to yes, and determines the gap (in px) between the icon and the aforementioned rectangular text block. | |||
{| class="wikitable" style="width: 50%;" | {| class="wikitable" style="width: 50%;" | ||