From Brotato Wiki
(Initial using new JS approach. Needs line breaks, TempateData, and logic to handle disabled tiers) |
(Update to use logic and options, templatedata still needs doing) |
||
Line 1: | Line 1: | ||
<div class="cardtabs" data-cardtabs> | <onlyinclude><includeonly><!-- | ||
--><div class="cardtabs" data-cardtabs> | |||
<div class="mytabs__panels" data-cardtabs-panels> | <div class="mytabs__panels" data-cardtabs-panels> | ||
<div data-cardtabs-panel="1" class="cardtabs__panel"> | <div data-cardtabs-panel="1" class="cardtabs__panel {{#ifeq:{{{firstShownTier|}}}|1||cardtabs__panel--js-hidden}}"> | ||
{{StatsCardWeapon | {{StatsCardWeapon | ||
| name = | | name = {{{name1|}}} | ||
| class = | | class = {{{class1|}}} | ||
| image = | | image = {{{image1|}}} | ||
| rarity = 1 | | rarity = 1 | ||
| damage = | | damage = {{{damage1|}}} | ||
| critical = | | critical = {{{critical1|}}} | ||
| cooldown = | | cooldown = {{{cooldown1|}}} | ||
| knockback = | | knockback = {{{knockback1|}}} | ||
| range = | | range = {{{range1|}}} | ||
| lifesteal = | | lifesteal = {{{lifesteal1|}}} | ||
| bounce = | | bounce = {{{bounce1|}}} | ||
| | | piercing = {{{piercing1|}}} | ||
| special1 = | | special1 = {{{speciala1|}}} | ||
| special2 = | | special2 = {{{specialb1|}}} | ||
}} | }} | ||
</div> | </div> | ||
<div data-cardtabs-panel="2" class="cardtabs__panel cardtabs__panel--js-hidden"> | <div data-cardtabs-panel="2" class="cardtabs__panel {{#ifeq:{{{firstShownTier|}}}|2||cardtabs__panel--js-hidden}}"> | ||
{{StatsCardWeapon | {{StatsCardWeapon | ||
| name = | | name = {{{name2|{{{name1|}}}}}} | ||
| class = | | class = {{{class2|{{{class1|}}}}}} | ||
| image = | | image = {{{image2|{{{image1|}}}}}} | ||
| rarity = 2 | | rarity = 2 | ||
| damage = | | damage = {{{damage2|{{{damage1|}}}}}} | ||
| critical = | | critical = {{{critical2|{{{critical1|}}}}}} | ||
| cooldown = | | cooldown = {{{cooldown2|{{{cooldown1|}}}}}} | ||
| knockback = | | knockback = {{{knockback2|{{{knockback1|}}}}}} | ||
| range = | | range = {{{range2|{{{range1|}}}}}} | ||
| lifesteal = | | lifesteal = {{{lifesteal2|{{{lifesteal1|}}}}}} | ||
| bounce = | | bounce = {{{bounce2|{{{bounce1|}}}}}} | ||
| | | piercing = {{{piercing2|{{{piercing1|}}}}}} | ||
| special1 = | | special1 = {{{speciala2|{{{speciala1|}}}}}} | ||
| special2 = | | special2 = {{{specialb2|{{{specialb1|}}}}}} | ||
}} | }} | ||
</div> | </div> | ||
<div data-cardtabs-panel="3" class="cardtabs__panel cardtabs__panel--js-hidden"> | <div data-cardtabs-panel="3" class="cardtabs__panel {{#ifeq:{{{firstShownTier|}}}|3||cardtabs__panel--js-hidden}}"> | ||
{{StatsCardWeapon | {{StatsCardWeapon | ||
| name = | | name = {{{name3|{{{name2|{{{name1|}}}}}}}}} | ||
| class = | | class = {{{class3|{{{class2|{{{class1|}}}}}}}}} | ||
| image = | | image = {{{image3|{{{image2|{{{image1|}}}}}}}}} | ||
| rarity = 3 | | rarity = 3 | ||
| damage = | | damage = {{{damage3|{{{damage2|{{{damage1|}}}}}}}}} | ||
| critical = | | critical = {{{critical3|{{{critical2|{{{critical1|}}}}}}}}} | ||
| cooldown = | | cooldown = {{{cooldown3|{{{cooldown2|{{{cooldown1|}}}}}}}}} | ||
| knockback = | | knockback = {{{knockback3|{{{knockback2|{{{knockback1|}}}}}}}}} | ||
| range = | | range = {{{range3|{{{range2|{{{range1|}}}}}}}}} | ||
| lifesteal = | | lifesteal = {{{lifesteal3|{{{lifesteal2|{{{lifesteal1|}}}}}}}}} | ||
| bounce = | | bounce = {{{bounce3|{{{bounce2|{{{bounce1|}}}}}}}}} | ||
| | | piercing = {{{piercing3|{{{piercing2|{{{piercing1|}}}}}}}}} | ||
| special1 = | | special1 = {{{speciala3|{{{speciala2|{{{speciala1|}}}}}}}}} | ||
| special2 = | | special2 = {{{specialb3|{{{specialb2|{{{specialb1|}}}}}}}}} | ||
}} | }} | ||
</div> | </div> | ||
<div data-cardtabs-panel="4" class="cardtabs__panel cardtabs__panel--js-hidden"> | <div data-cardtabs-panel="4" class="cardtabs__panel {{#ifeq:{{{firstShownTier|}}}|4||cardtabs__panel--js-hidden}}"> | ||
{{StatsCardWeapon | {{StatsCardWeapon | ||
| name = | | name = {{{name4|{{{name3|{{{name2|{{{name1|}}}}}}}}}}}} | ||
| class = | | class = {{{class4|{{{class3|{{{class2|{{{class1|}}}}}}}}}}}} | ||
| image = | | image = {{{image4|{{{image3|{{{image2|{{{image1|}}}}}}}}}}}} | ||
| rarity = 4 | | rarity = 4 | ||
| damage = | | damage = {{{damage4|{{{damage3|{{{damage2|{{{damage1|}}}}}}}}}}}} | ||
| critical = | | critical = {{{critical4|{{{critical3|{{{critical2|{{{critical1|}}}}}}}}}}}} | ||
| cooldown = | | cooldown = {{{cooldown4|{{{cooldown3|{{{cooldown2|{{{cooldown1|}}}}}}}}}}}} | ||
| knockback = | | knockback = {{{knockback4|{{{knockback3|{{{knockback2|{{{knockback1|}}}}}}}}}}}} | ||
| range = | | range = {{{range4|{{{range3|{{{range2|{{{range1|}}}}}}}}}}}} | ||
| lifesteal = | | lifesteal = {{{lifesteal4|{{{lifesteal3|{{{lifesteal2|{{{lifesteal1|}}}}}}}}}}}} | ||
| bounce = | | bounce = {{{bounce4|{{{bounce3|{{{bounce2|{{{bounce1|}}}}}}}}}}}} | ||
| | | piercing = {{{piercing4|{{{piercing3|{{{piercing2|{{{piercing1|}}}}}}}}}}}} | ||
| special1 = | | special1 = {{{speciala4|{{{speciala3|{{{speciala2|{{{speciala1|}}}}}}}}}}}} | ||
| special2 = | | special2 = {{{specialb4|{{{specialb3|{{{specialb2|{{{specialb1|}}}}}}}}}}}} | ||
}} | }} | ||
</div> | </div> | ||
Line 84: | Line 81: | ||
</div> | </div> | ||
<!-- | |||
Apologies for this. Explanation: | |||
* `cardtabs__button--active` = Aplied to the sole initially visible button, usually tier1. Only used once | |||
* `cardtabs__button--disabled` = Applied to any disabled tiers. Most of the time this won't be used | |||
--> | |||
<div class="cardtabs__buttons" data-cardtabs-btns> | <div class="cardtabs__buttons" data-cardtabs-btns> | ||
<div data-cardtabs-btn="1" class="cardtabs__button rarity1 rarity1dark cardtabs__button--active">Tier I</div> | <div data-cardtabs-btn="1" class="cardtabs__button rarity1 rarity1dark {{#ifeq:{{{firstShownTier|}}}|1|cardtabs__button--active|}} {{#ifeq:{{{tier1disabled|}}}|1|cardtabs__button--disabled|}} <!-- | ||
<div data-cardtabs-btn="2" class="cardtabs__button rarity2 rarity2dark">Tier II</div> | -->">Tier I</div> | ||
<div data-cardtabs-btn="3" class="cardtabs__button rarity3 rarity3dark">Tier III</div> | <div data-cardtabs-btn="2" class="cardtabs__button rarity2 rarity2dark {{#ifeq:{{{firstShownTier|}}}|2|cardtabs__button--active|}} {{#ifeq:{{{tier2disabled|}}}|1|cardtabs__button--disabled|}} <!-- | ||
<div data-cardtabs-btn="4" class="cardtabs__button rarity4 rarity4dark">Tier IV</div> | -->">Tier II</div> | ||
<div data-cardtabs-btn="3" class="cardtabs__button rarity3 rarity3dark {{#ifeq:{{{firstShownTier|}}}|3|cardtabs__button--active|}} {{#ifeq:{{{tier3disabled|}}}|1|cardtabs__button--disabled|}} <!-- | |||
-->">Tier III</div> | |||
<div data-cardtabs-btn="4" class="cardtabs__button rarity4 rarity4dark {{#ifeq:{{{firstShownTier|}}}|4|cardtabs__button--active|}} {{#ifeq:{{{tier4disabled|}}}|1|cardtabs__button--disabled|}} <!-- | |||
-->">Tier IV</div> | |||
</div> | </div> | ||
</div><!-- | |||
--></includeonly></onlyinclude><noinclude> | |||
</div> | Creates a set of tabs for a weapon. Similar to [[Template:StatsCardWeapon]] but with tabs. | ||
== Example == | |||
If you don't include a value for a tier, the previous tier's value will be used instead. | |||
<table class="wikitable"> | |||
<tr> | |||
<th>Code</th> | |||
<th>Preview</th> | |||
</tr> | |||
<tr> | |||
<td> | |||
<pre> | |||
{{StatsCardWeaponTabs | |||
| firstShownTier = 1 | |||
| tier1disabled = 0 | |||
| tier2disabled = 0 | |||
| tier3disabled = 0 | |||
| tier4disabled = 0 | |||
| name1 = Isaac's Tears | |||
| name3 = Isaac's Bloody Tears | |||
| class1 = Tears | |||
| image1 = Mod-Isaac-isaacs_tears_icon.png | |||
| image3 = Mod-Isaac-isaacs_tears_icon_bloody.png | |||
| damage1 = 7 ({{StatIcon|Ranged Damage}}) | |||
| damage2 = 14 ({{StatIcon|Ranged Damage}}) | |||
| damage3 = 28 ({{StatIcon|Ranged Damage}}) | |||
| damage4 = 45 ({{StatIcon|Ranged Damage}}) | |||
| critical1 = x2 (3% chance) | |||
| cooldown1 = 0.7s | |||
| cooldown2 = 0.62s | |||
| cooldown3 = 0.53s | |||
| cooldown4 = 0.45s | |||
| knockback1 = 2 | |||
| range1 = 350 (Melee) | |||
| piercing1 = {{Color|grey|0}} | |||
| piercing3 = 1 | |||
}} | |||
</pre> | |||
</td> | |||
<td style="padding: 20px 30px;"> | |||
{{StatsCardWeaponTabs | |||
| firstShownTier = 1 | |||
| tier1disabled = 0 | |||
| tier2disabled = 0 | |||
| tier3disabled = 0 | |||
| tier4disabled = 0 | |||
| name1 = Isaac's Tears | |||
| name3 = Isaac's Bloody Tears | |||
| class1 = Tears | |||
| image1 = Mod-Isaac-isaacs_tears_icon.png | |||
| image3 = Mod-Isaac-isaacs_tears_icon_bloody.png | |||
| damage1 = 7 ({{StatIcon|Ranged Damage}}) | |||
| damage2 = 14 ({{StatIcon|Ranged Damage}}) | |||
| damage3 = 28 ({{StatIcon|Ranged Damage}}) | |||
| damage4 = 45 ({{StatIcon|Ranged Damage}}) | |||
| critical1 = x2 (3% chance) | |||
| cooldown1 = 0.7s | |||
| cooldown2 = 0.62s | |||
| cooldown3 = 0.53s | |||
| cooldown4 = 0.45s | |||
| knockback1 = 2 | |||
| range1 = 350 (Melee) | |||
| piercing1 = {{Color|grey|0}} | |||
| piercing3 = 1 | |||
}} | |||
</td> | |||
</tr> | |||
</table> | |||
== Notes == | |||
The <code>firstShownTier</code> is mandatory. Leaving it out will prevent anything from being shown. | |||
In the example above, "Piercing" is shown as 0 at tiers 1 and 2. This is because this particular weapon gains piercing at tier 3, but leaving it off of tiers 1 and 2 will make the container change its height when you click through the tabs, which is jarring for users. | |||
Special effects are labelled "speciala" and "specialb" (plus their tier, eg <code>speciala3</code>), rather than "special1/special2/etc" like in [[Template:StatsCardWeapon]]. | |||
== All Options == | |||
The full list of options are listed below. Please don't leave anything blank though, else the previous tier's values won't get used (ie., only include options if you use them). | |||
<!-- | |||
Toggler:Button | |||
--><span class="mw-customtoggle-mytoggle1" style="display: inline-block; padding: 5px; font-weight: bold; border: 1px solid white; border-radius: 3px; font-size: 0.85rem;">Toggle Full Options</span><!-- | |||
Toggler:Start | |||
--><div class="mw-collapsible mw-made-collapsible mw-collapsed" id="mw-customcollapsible-mytoggle1" data-expandtext="▼" data-collapsetext="▲"> | |||
<pre style="max-width: 280px;"> | |||
{{StatsCardWeaponTabs | |||
| firstShownTier = 1 | |||
| tier1disabled = 0 | |||
| tier2disabled = 0 | |||
| tier3disabled = 0 | |||
| tier4disabled = 0 | |||
| name1 = | |||
| name2 = | |||
| name3 = | |||
| name4 = | |||
| class1 = | |||
| class2 = | |||
| class3 = | |||
| class4 = | |||
| image1 = | |||
| image2 = | |||
| image3 = | |||
| image4 = | |||
| damage1 = | |||
| damage2 = | |||
| damage3 = | |||
| damage4 = | |||
| critical1 = | |||
| critical2 = | |||
| critical3 = | |||
| critical4 = | |||
| cooldown1 = | |||
| cooldown2 = | |||
| cooldown3 = | |||
| cooldown4 = | |||
| knockback1 = | |||
| knockback2 = | |||
| knockback3 = | |||
| knockback4 = | |||
| range1 = | |||
| range2 = | |||
| range3 = | |||
| range4 = | |||
| lifesteal1 = | |||
| lifesteal2 = | |||
| lifesteal3 = | |||
| lifesteal4 = | |||
| bounce1 = | |||
| bounce2 = | |||
| bounce3 = | |||
| bounce4 = | |||
| piercing1 = | |||
| piercing2 = | |||
| piercing3 = | |||
| piercing4 = | |||
| speciala1 = | |||
| speciala2 = | |||
| speciala3 = | |||
| speciala4 = | |||
| specialb1 = | |||
| specialb2 = | |||
| specialb3 = | |||
| specialb4 = | |||
}} | |||
</pre> | |||
<!--Toggler:End--></div> | |||
</noinclude> |
Revision as of 05:44, 6 December 2022
Creates a set of tabs for a weapon. Similar to Template:StatsCardWeapon but with tabs.
Example
If you don't include a value for a tier, the previous tier's value will be used instead.
Code | Preview |
---|---|
{{StatsCardWeaponTabs | firstShownTier = 1 | tier1disabled = 0 | tier2disabled = 0 | tier3disabled = 0 | tier4disabled = 0 | name1 = Isaac's Tears | name3 = Isaac's Bloody Tears | class1 = Tears | image1 = Mod-Isaac-isaacs_tears_icon.png | image3 = Mod-Isaac-isaacs_tears_icon_bloody.png | damage1 = 7 ({{StatIcon|Ranged Damage}}) | damage2 = 14 ({{StatIcon|Ranged Damage}}) | damage3 = 28 ({{StatIcon|Ranged Damage}}) | damage4 = 45 ({{StatIcon|Ranged Damage}}) | critical1 = x2 (3% chance) | cooldown1 = 0.7s | cooldown2 = 0.62s | cooldown3 = 0.53s | cooldown4 = 0.45s | knockback1 = 2 | range1 = 350 (Melee) | piercing1 = {{Color|grey|0}} | piercing3 = 1 }} |
|
Notes
The firstShownTier
is mandatory. Leaving it out will prevent anything from being shown.
In the example above, "Piercing" is shown as 0 at tiers 1 and 2. This is because this particular weapon gains piercing at tier 3, but leaving it off of tiers 1 and 2 will make the container change its height when you click through the tabs, which is jarring for users.
Special effects are labelled "speciala" and "specialb" (plus their tier, eg speciala3
), rather than "special1/special2/etc" like in Template:StatsCardWeapon.
All Options
The full list of options are listed below. Please don't leave anything blank though, else the previous tier's values won't get used (ie., only include options if you use them).
Toggle Full Options
{{StatsCardWeaponTabs | firstShownTier = 1 | tier1disabled = 0 | tier2disabled = 0 | tier3disabled = 0 | tier4disabled = 0 | name1 = | name2 = | name3 = | name4 = | class1 = | class2 = | class3 = | class4 = | image1 = | image2 = | image3 = | image4 = | damage1 = | damage2 = | damage3 = | damage4 = | critical1 = | critical2 = | critical3 = | critical4 = | cooldown1 = | cooldown2 = | cooldown3 = | cooldown4 = | knockback1 = | knockback2 = | knockback3 = | knockback4 = | range1 = | range2 = | range3 = | range4 = | lifesteal1 = | lifesteal2 = | lifesteal3 = | lifesteal4 = | bounce1 = | bounce2 = | bounce3 = | bounce4 = | piercing1 = | piercing2 = | piercing3 = | piercing4 = | speciala1 = | speciala2 = | speciala3 = | speciala4 = | specialb1 = | specialb2 = | specialb3 = | specialb4 = }}