Template:SlotColor/doc: Difference between revisions
examples moved from Module:Utilities/doc |
m clarified that no_wrap is named parameter; clarified the no_wrap example's usage of alpha channel |
||
| Line 4: | Line 4: | ||
* '''slot''' - slot key, options are Weapon, Armor, and Tech | * '''slot''' - slot key, options are Weapon, Armor, and Tech | ||
* '''color_format''' - color format - Defaults to hex. Valid options are hex, rgb, hsl, cmyk | * '''color_format''' - color format - Defaults to hex. Valid options are hex, rgb, hsl, cmyk | ||
* '''no_wrap''' - (OPTIONAL) - Defaults to false. Set to true to remove prefixes and postfixes of '#' from hex, or 'rgb()', 'hsl()', and 'cmyk()' from the other formats. May be useful for altering the values dynamically | * '''no_wrap''' - (OPTIONAL, Named parameter) - Defaults to false. Set to true to remove prefixes and postfixes of '#' from hex, or 'rgb()', 'hsl()', and 'cmyk()' from the other formats. May be useful for altering the values dynamically | ||
===Examples=== | ===Examples=== | ||
| Line 38: | Line 38: | ||
{{SlotColor|Tech|rgb|no_wrap=true|debug_mode=true}} | {{SlotColor|Tech|rgb|no_wrap=true|debug_mode=true}} | ||
This can manually be wrapped like <code><nowiki>rgba({{SlotColor|Tech|no_wrap=true}}, 0.5)</nowiki></code> to customize the alpha channel (opacity/transparency) of the color to your liking. Note that with transparency, the color will vary on light or dark mode, so consider adding a white/black background behind to enforce consistency. | |||
To alter the alpha value using rgb dynamically: | To alter the alpha value using rgb dynamically: | ||
<code><nowiki><div style="background-color: | <code><nowiki><div style="background-color: rgba({{SlotColor|Armor|rgb|no_wrap=true}}, 1.0);"> | ||
Armor colored div with 1.0 alpha</div></nowiki></code> | Armor colored div with 1.0 alpha</div></nowiki></code> | ||
<div style="background-color: | <div style="background-color: rgba({{SlotColor|Armor|rgb|no_wrap=true}}, 1.0);"> | ||
Armor colored div with 1.0 alpha | Armor colored div with 1.0 alpha | ||
</div> | </div> | ||
| Line 50: | Line 52: | ||
<code><nowiki><div style="background-color: | <code><nowiki><div style="background-color: rgba({{SlotColor|Armor|rgb|no_wrap=true}}, 0.5);"> | ||
Armor colored div with 0. | Armor colored div with 0.5 alpha</div></nowiki></code> | ||
<div style="background-color: | <div style="background-color: rgba({{SlotColor|Armor|rgb|no_wrap=true}}, 0.5);"> | ||
Armor colored div with 0. | Armor colored div with 0.5 alpha | ||
</div> | </div> | ||
[[Category:Template documentation]] | [[Category:Template documentation]] | ||
Revision as of 22:55, 1 November 2024
Retrieve's the color of a certain slot/category in any color format (default hex), formerly known in english as Weapon, Vitality, and Spirit, though their unlocalized names are Weapon, Armor, and Tech. Utilizes Module:Utilities's get_slot_color function.
Parameters
- slot - slot key, options are Weapon, Armor, and Tech
- color_format - color format - Defaults to hex. Valid options are hex, rgb, hsl, cmyk
- no_wrap - (OPTIONAL, Named parameter) - Defaults to false. Set to true to remove prefixes and postfixes of '#' from hex, or 'rgb()', 'hsl()', and 'cmyk()' from the other formats. May be useful for altering the values dynamically
Examples
To retrieve the color alone
{{SlotColor|Tech}}
To retrieve other color formats
{{SlotColor|Tech|rgb}}
To style text:
<span style="color: {{SlotColor|Weapon}};">Weapon colored text</span>
<span style="color:
;">Weapon colored text
To style divs:
<div style="background-color: {{SlotColor|Tech}};">
Tech colored div</div>
<div style="background-color:
;">
Tech colored div
To get the color without otherwise necessary prefix/postfix wrapping:
{{SlotColor|Tech|rgb|no_wrap=true}}
This can manually be wrapped like rgba({{SlotColor|Tech|no_wrap=true}}, 0.5) to customize the alpha channel (opacity/transparency) of the color to your liking. Note that with transparency, the color will vary on light or dark mode, so consider adding a white/black background behind to enforce consistency.
To alter the alpha value using rgb dynamically:
<div style="background-color: rgba({{SlotColor|Armor|rgb|no_wrap=true}}, 1.0);">
Armor colored div with 1.0 alpha</div>
<div style="background-color: rgba(
, 1.0);">
Armor colored div with 1.0 alpha
<div style="background-color: rgba({{SlotColor|Armor|rgb|no_wrap=true}}, 0.5);">
Armor colored div with 0.5 alpha</div>
<div style="background-color: rgba(
, 0.5);">
Armor colored div with 0.5 alpha