Template:IconBox/doc: Difference between revisions

From The Deadlock Wiki
Jump to navigation Jump to search
Vergir (talk | contribs)
Document the generic box split out of AbilityInteraction, including the data-attribute contract with Module:AbilitySection (with help from vergir-bot LLM)
 
Vergir (talk | contribs)
Document the "enhanced" state (with help from vergir-bot LLM)
 
(3 intermediate revisions by the same user not shown)
Line 1: Line 1:
== Usage ==
== Usage ==


{{tl|IconBox}} displays a box with a colored header, an icon, and a body of text. It carries no meaning of its own — every part of its appearance is supplied by the caller.
{{tl|IconBox}} displays a box with a colored header, an icon, and a body of text.


For standard ability interactions, use {{tl|AbilityInteraction}} instead. It picks the header, color, icon, and link from a registry, so a given mechanic looks the same on every page. IconBox is for one-off boxes the registry does not cover.
Used by {{tl|AbilityInteraction}}.


== Parameters ==
== Parameters ==
Line 9: Line 9:
<templatedata>
<templatedata>
{
{
"description": "A box with a colored header, an icon, and body text. Presentation is supplied entirely by the caller.",
"description": "",
"params": {
"params": {
"title": {
"title": {
Line 39: Line 39:
},
},
"state": {
"state": {
"description": "Set to disabled to gray out the icon, or partial to gray out half of it.",
"description": "Set to disabled to gray out the icon, partial to gray out half of it, or enhanced to add a blue glow.",
"type": "string",
"type": "string",
"suggestedvalues": [ "disabled", "partial" ]
"suggestedvalues": [ "disabled", "partial", "enhanced" ]
}
}
},
},
Line 48: Line 48:
}
}
</templatedata>
</templatedata>
== Data attributes ==
The box carries {{code|data-ai-icon}}, {{code|data-ai-title}}, and {{code|data-ai-state}} on its wrapper element. [[Module:AbilitySection]] reads these to build the hint icons shown beside an ability card, and to link each one to its box.
These attributes are a contract with that module. The CSS class names are '''not''' — they are presentational and may change. Any code that needs to find these boxes should match on the data attributes.


== Examples ==
== Examples ==
Line 73: Line 67:
| text    = This ability benefits from Melee damage bonuses.
| text    = This ability benefits from Melee damage bonuses.
}}
}}
== Data attributes ==
The box carries several data attributes:
* {{code|data-iconbox-icon}},
* {{code|data-iconbox-title}},
* {{code|data-iconbox-state}} on its wrapper element.
These are used by [[Module:AbilitySection]] to apply correct styling to its own elements.


<noinclude>[[Category:Template documentation]]</noinclude>
<noinclude>[[Category:Template documentation]]</noinclude>

Latest revision as of 10:09, 2 August 2026

{{IconBox}} displays a box with a colored header, an icon, and a body of text.

Used by {{AbilityInteraction}}.

Parameters

[edit source]

Template parameters

This template prefers block formatting of parameters.

ParameterDescriptionTypeStatus
titletitle

Text shown in the box header.

Stringrequired
texttext

Wikitext shown in the box body. May contain wikilinks, templates such as AbilityIcon, and lists.

Contentoptional
typetype

Header color: positive (green), negative (red), or info (blue).

Suggested values
positive negative info
Stringrequired
iconfileiconfile

File name of the icon image, without the File: prefix.

Example
Healing Booster.png
Stringrequired
linklink

Where the header and icon link. A bare page name (e.g. Healing Booster) or a full URL.

Example
Healing Booster
Stringrequired
statestate

Set to disabled to gray out the icon, partial to gray out half of it, or enhanced to add a blue glow.

Suggested values
disabled partial enhanced
Stringoptional

Examples

[edit source]
{{IconBox
| type     = positive
| iconfile = Melee Charge.png
| link     = Melee Charge
| title    = Melee
| text     = This ability benefits from Melee damage bonuses.
}}
Melee

This ability benefits from Melee damage bonuses.

Data attributes

[edit source]

The box carries several data attributes:

  • data-iconbox-icon,
  • data-iconbox-title,
  • data-iconbox-state on its wrapper element.

These are used by Module:AbilitySection to apply correct styling to its own elements.