Template:Demo RecipeItemIcon: Difference between revisions

[unchecked revision]

[checked revision]

Latest revision as of 12:47, 24 February 2026

Visual Goals

location=center

Template Examples

Border Colors
Color	Example
White (Default)
Yellow
Green

Responsive Sizing
Size	Example
64px (Default)	10
128px	10
256px	10

Count Shadow
Count	Example
No Count/Shadow
10	10
100	100

Grid Demo

100

10

67

Recipe Demo

2

0.5

10

2

No description.

Template parameters[Edit template data]
Parameter		Description	Type	Status
size	`size`	Size in pixels (numbers only) Suggested values `64` `128` Default 64 Example 64 Auto value `64`	Number	optional
icon	`icon`	File name for icon. Example DaisyItem_Icon.png	String	required
count	`count` `num`	A number to display over this icon's image. Useful for showing counts. Example 10	Number	optional
border	`border`	Border color Suggested values `white` `yellow` `green` Default white Auto value `white`	String	optional

@@ Line 1: / Line 1: @@
-<includeonly>
+<templatestyles src="Template:Demo_RecipeItemIcon/styles.css" />
-<div class="recipe-item-icon">
-    <div class="recipe-item-icon__img-container">
+<includeonly><div class="recipe-item-icon {{#if: {{{count|}}} | has-count }} {{#switch: {{{border|}}} | yellow = border-yellow | white = border-white | green = border-green | #default = border-white}}" style="font-size:{{{size|64}}}px"><div class="recipe-item-icon__img-container">[[File:{{{icon}}}|{{{size|64}}}px]]</div><span class="recipe-item-icon__count">{{{count|}}}</span></div></includeonly>
-        [[File:{{{icon}}}|64px]]
-    </div>
-    <span class="recipe-item-icon__count">
-        {{{count|}}}
-    </span>
-</div>
-</includeonly>
 <noinclude>
-{{Demo RecipeItemIcon|icon=DaisyItem_Icon.png|count=10}}
+=== Visual Goals ===
+[[File:DaisyItem--Icon Yellow.png|frameless|border|upright=3|location=center|link=]]
+[[File:DaisyItem--Icon White--No-Count.png|border|upright=3|location=center|link=]]
+[[File:DaisyItem--Icon White.png|frameless|border|upright=3|location=center|link=]]
+[[File:DaisyItem--Icon White--100.png|border|upright=3|location=center|link=]]
+=== Template Examples ===
+{| class="wikitable recipe-icon-demo"
+|+ Border Colors
+! Color !! Example
+|-
+| White ''(Default)'' ||{{Demo RecipeItemIcon|icon=DaisyItem_Icon.png}}
+|-
+| Yellow ||{{Demo RecipeItemIcon|icon=DaisyItem_Icon.png|border=yellow}}
+|-
+| Green ||{{Demo RecipeItemIcon|icon=DaisyItem_Icon.png|border=green}}
+|}
+{| class="wikitable recipe-icon-demo"
+|+ Responsive Sizing
+! Size !! Example
+|-
+| 64px ''(Default)'' ||{{Demo RecipeItemIcon|icon=DaisyItem_Icon.png|count=10|size=64}}
+|-
+| 128px ||{{Demo RecipeItemIcon|icon=DaisyItem_Icon.png|count=10|size=128}}
+|-
+| 256px ||{{Demo RecipeItemIcon|icon=DaisyItem_Icon.png|count=10|size=256}}
+|}
+{| class="wikitable recipe-icon-demo"
+|+ Count Shadow
+! Count !! Example
+|-
+| ''No Count/Shadow'' ||{{Demo RecipeItemIcon|icon=DaisyItem_Icon.png}}
+|-
+| 10 ||{{Demo RecipeItemIcon|icon=DaisyItem_Icon.png|count=10}}
+|-
+| 100 ||{{Demo RecipeItemIcon|icon=DaisyItem_Icon.png|count=100}}
+|}
+=== Grid Demo ===
+<div class="row g-2 mb-3"><div class="col-1">{{Demo RecipeItemIcon|icon=DaisyItem_Icon.png|count=100|size=48}}</div><div class="col-1">{{Demo RecipeItemIcon|icon=TulipItem Icon.png|count=100|border=yellow|size=48}}</div><div class="col-1">{{Demo RecipeItemIcon|icon=LupineItem Icon.png|size=48}}</div><div class="col-1">{{Demo RecipeItemIcon|icon=RoseItem Icon.png|count=10|border=yellow|size=48}}</div><div class="col-1">{{Demo RecipeItemIcon|icon=FlaxFlowerItem Icon.png|count=67|border=green|size=48}}</div><div class="col-1">{{Demo RecipeItemIcon|icon=Flower Icon.png|border=green|size=48}}</div><div class="col-1">{{Demo RecipeItemIcon|icon=EcoBookItem Icon.png|size=48}}</div><div class="col-1">{{Demo RecipeItemIcon|icon=RiceFlourItem Icon.png|border=green|size=48}}</div><div class="col-1">{{Demo RecipeItemIcon|icon=NailItem Icon.png|border=yellow|size=48}}</div><div class="col-1">{{Demo RecipeItemIcon|icon=AdobeItem Icon.png|border=green|size=48}}</div><div class="col-1">{{Demo RecipeItemIcon|icon=JoshuaLogItem Icon.png|size=48}}</div><div class="col-1">{{Demo RecipeItemIcon|icon=IronOreItem Icon.png|border=yellow|size=48}}</div></div>
+=== Recipe Demo ===
+<div class="row g-2 mb-3 align-items-center justify-content-center"><div class="col-xs-12 col-sm-4 col-md-3 col-lg-2">{{Demo RecipeItemIcon|icon=NailItem Icon.png|border=yellow|size=128|count=2}}</div><div class="col-xs-12 col-sm-2 col-md-1"><i class="fas fa-plus" style="font-size:64px"></i></div><div class="col-xs-12 col-sm-4 col-md-3 col-lg-2">{{Demo RecipeItemIcon|icon=FlaxseedOilItem_Icon.png|border=yellow|size=128|count=0.5}}</div><div class="col-xs-12 col-sm-2 col-md-1"><i class="fas fa-plus" style="font-size:64px"></i></div><div class="col-xs-12 col-sm-4 col-md-3 col-lg-2">{{Demo RecipeItemIcon|icon=WoodBoard_Icon.png|border=yellow|size=128|count=10}}</div><div class="col-xs-12 col-sm-2 col-md-1"><i class="fas fa-equals" style="font-size:64px"></i></div><div class="col-xs-12 col-sm-4 col-md-3 col-lg-2">{{Demo RecipeItemIcon|icon=LumberItem_Icon.png|size=128|count=2}}</div></div>
+<templatedata>
+{
+	"params": {
+		"size": {
+			"description": "Size in pixels (numbers only)",
+			"example": "64",
+			"type": "number",
+			"suggestedvalues": [
+				"64",
+				"128"
+			],
+			"default": "64",
+			"autovalue": "64"
+		},
+		"icon": {
+			"description": "File name for icon.",
+			"example": "DaisyItem_Icon.png",
+			"required": true,
+			"type": "string"
+		},
+		"count": {
+			"aliases": [
+				"num"
+			],
+			"description": "A number to display over this icon's image. Useful for showing counts.",
+			"example": "10",
+			"type": "number"
+		},
+		"border": {
+			"description": "Border color",
+			"type": "string",
+			"suggestedvalues": [
+				"white",
+				"yellow",
+				"green"
+			],
+			"default": "white",
+			"autovalue": "white"
+		}
+	}
+}
+</templatedata>
 </noinclude>