Template:IconBox/doc: Difference between revisions

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>