Template:IconBox: Difference between revisionsGive feedback
Jump to navigation
Jump to search
Emit data-ai-state so consumers can read box state from data attributes instead of CSS class names (with help from vergir-bot LLM) |
Temporarily emit both the ai- and iconbox- class and data attribute names so consumers can migrate one at a time (with help from vergir-bot LLM) |
||
| Line 1: | Line 1: | ||
<includeonly><templatestyles src="IconBox/styles.css" /><div class="ai-box {{#if:{{{type|}}}|ai-type-{{{type}}}}} {{#switch:{{lc:{{{state|}}}}}|disabled=ai-disabled|partial=ai-partial}}" data-ai-icon="{{{iconfile|}}}" data-ai-title="{{{title|}}}" data-ai-state="{{#switch:{{lc:{{{state|}}}}}|disabled=disabled|partial=partial|#default=normal}}"> | <includeonly><templatestyles src="IconBox/styles.css" /><div class="ai-box iconbox {{#if:{{{type|}}}|ai-type-{{{type}}} iconbox-type-{{{type}}}}} {{#switch:{{lc:{{{state|}}}}}|disabled=ai-disabled iconbox-disabled|partial=ai-partial iconbox-partial}}" data-ai-icon="{{{iconfile|}}}" data-ai-title="{{{title|}}}" data-ai-state="{{#switch:{{lc:{{{state|}}}}}|disabled=disabled|partial=partial|#default=normal}}" data-iconbox-icon="{{{iconfile|}}}" data-iconbox-title="{{{title|}}}" data-iconbox-state="{{#switch:{{lc:{{{state|}}}}}|disabled=disabled|partial=partial|#default=normal}}"> | ||
<div class="ai-header plainlinks">{{#if:{{{link|}}} | <div class="ai-header iconbox-header plainlinks">{{#if:{{{link|}}} | ||
|[{{#ifeq:{{lc:{{padleft:|4|{{{link|}}}}}}}|http|{{{link|}}}|https://deadlock.wiki/{{urlencode:{{{link|}}}|WIKI}}}} {{{title|}}}] | |[{{#ifeq:{{lc:{{padleft:|4|{{{link|}}}}}}}|http|{{{link|}}}|https://deadlock.wiki/{{urlencode:{{{link|}}}|WIKI}}}} {{{title|}}}] | ||
|{{{title|}}} | |{{{title|}}} | ||
}}</div> | }}</div> | ||
<div class="ai-body"> | <div class="ai-body iconbox-body"> | ||
<div class="ai-icon">{{#if:{{{iconfile|}}} | <div class="ai-icon iconbox-icon">{{#if:{{{iconfile|}}} | ||
|[[File:{{{iconfile}}}|48px|link={{#if:{{{link|}}}|{{#ifeq:{{lc:{{padleft:|4|{{{link|}}}}}}}|http|{{{link|}}}|https://deadlock.wiki/{{urlencode:{{{link|}}}|WIKI}}}}}}|alt={{{title|}}}]]{{#ifeq:{{lc:{{{state|}}}}}|partial|<span class="ai-icon-partial">[[File:{{{iconfile}}}|48px|link=]]</span>}} | |[[File:{{{iconfile}}}|48px|link={{#if:{{{link|}}}|{{#ifeq:{{lc:{{padleft:|4|{{{link|}}}}}}}|http|{{{link|}}}|https://deadlock.wiki/{{urlencode:{{{link|}}}|WIKI}}}}}}|alt={{{title|}}}]]{{#ifeq:{{lc:{{{state|}}}}}|partial|<span class="ai-icon-partial iconbox-icon-partial">[[File:{{{iconfile}}}|48px|link=]]</span>}} | ||
}}</div> | }}</div> | ||
<div class="ai-text"> | <div class="ai-text iconbox-text"> | ||
{{{text|}}} | {{{text|}}} | ||
</div> | </div> | ||
</div> | </div> | ||
</div></includeonly><noinclude>{{Documentation}}</noinclude> | </div></includeonly><noinclude>{{Documentation}}</noinclude> | ||
Revision as of 14:34, 15 July 2026
Usage
{{IconBox}} displays a box with a colored header, an icon, and a body of text.
Used by {{AbilityInteraction}}.
Parameters
| Parameter | Description | Type | Status | |
|---|---|---|---|---|
| title | title | Text shown in the box header. | String | required |
| text | text | Wikitext shown in the box body. May contain wikilinks, templates such as AbilityIcon, and lists. | Content | optional |
| type | type | Header color: positive (green), negative (red), or info (blue).
| String | required |
| iconfile | iconfile | File name of the icon image, without the File: prefix.
| String | required |
| link | link | Where the header and icon link. A bare page name (e.g. Healing Booster) or a full URL.
| String | required |
| state | state | Set to disabled to gray out the icon, partial to gray out half of it, or enhanced to add a blue glow.
| String | optional |
Examples
{{IconBox
| type = positive
| iconfile = Melee Charge.png
| link = Melee Charge
| title = Melee
| text = This ability benefits from Melee damage bonuses.
}}
This ability benefits from Melee damage bonuses.
Data attributes
The box carries several data attributes:
data-iconbox-icon,data-iconbox-title,data-iconbox-stateon its wrapper element.