Template:Demo RecipeItemIcon: Difference between revisions

From Eco - English Wiki
[unchecked revision][checked revision]
← Older edit
undoStalEF (talk | contribs)
Autochecked users, Editors, Reviewers, Administrators
5,237 edits
VisualWikitext
WugWugg (talk | contribs)
141 edits
No edit summary
 
(27 intermediate revisions by 2 users not shown)
Line 1: Line 1:
<templatestyles src="Template:Demo_RecipeItemIcon/styles.css" />
<templatestyles src="Template:Demo_RecipeItemIcon/styles.css" />


<!-- NOTE: Do not indent lines in <includeonly>. Leading spaces create <pre> blocks. -->
<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>
<!-- Minify template HTML using something like: https://codebeautify.org/minify-html -->
<!-- Edit externally and to get indents back use same editor, just click "beautify" in the middle instead of "minify" -->
<includeonly><div class="recipe-item-icon shadow {{#if: {{{count|}}} | has-count }}" style="font-size:{{{size}}}px"><div class="recipe-item-icon__img-container">[[File:{{{icon}}}|{{{size}}}px]]</div><span class="recipe-item-icon__count">{{{count|}}}</span></div></includeonly>


<noinclude>
<noinclude>
=== Visual Goals ===
=== Visual Goals ===
[[File:DaisyItem--Icon Yellow.png|frameless|border|upright=3|location=center|link=]]
[[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.png|frameless|border|upright=3|location=center|link=]]
[[File:DaisyItem--Icon White--100.png|border|upright=3|location=center|link=]]


=== Template Examples ===
=== Template Examples ===
{| class="wikitable"
{| 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
|+ Responsive Sizing
! Size !! Example
! Size !! Example
|-
|-
| 64px ||{{Demo RecipeItemIcon|icon=DaisyItem_Icon.png|count=10|size=64}}
| 64px ''(Default)'' ||{{Demo RecipeItemIcon|icon=DaisyItem_Icon.png|count=10|size=64}}
|-
|-
| 128px ||{{Demo RecipeItemIcon|icon=DaisyItem_Icon.png|count=10|size=128}}
| 128px ||{{Demo RecipeItemIcon|icon=DaisyItem_Icon.png|count=10|size=128}}
Line 22: Line 32:
| 256px ||{{Demo RecipeItemIcon|icon=DaisyItem_Icon.png|count=10|size=256}}
| 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>
<templatedata>
Line 34: Line 61:
"128"
"128"
],
],
"default": "64"
"default": "64",
"autovalue": "64"
},
},
"icon": {
"icon": {
"description": "File name for icon.",
"description": "File name for icon.",
"example": "DaisyItem_Icon.png",
"example": "DaisyItem_Icon.png",
"required": true
"required": true,
"type": "string"
},
},
"count": {
"count": {
Line 46: Line 75:
],
],
"description": "A number to display over this icon's image. Useful for showing counts.",
"description": "A number to display over this icon's image. Useful for showing counts.",
"example": "10"
"example": "10",
"type": "number"
},
"border": {
"description": "Border color",
"type": "string",
"suggestedvalues": [
"white",
"yellow",
"green"
],
"default": "white",
"autovalue": "white"
}
}
}
}

Latest revision as of 12:47, 24 February 2026



Visual Goals

[edit source]

location=center location=center location=center location=center

Template Examples

[edit source]
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

[edit source]
100
100
10
67

Recipe Demo

[edit source]
2
0.5
10
2

No description.

Template parameters[Edit template data]

ParameterDescriptionTypeStatus
sizesize

Size in pixels (numbers only)

Suggested values
64 128
Default
64
Example
64
Auto value
64
Numberoptional
iconicon

File name for icon.

Example
DaisyItem_Icon.png
Stringrequired
countcount num

A number to display over this icon's image. Useful for showing counts.

Example
10
Numberoptional
borderborder

Border color

Suggested values
white yellow green
Default
white
Auto value
white
Stringoptional
Retrieved from "https://wiki.play.eco/en/index.php?title=Template:Demo_RecipeItemIcon&oldid=16388"
CC BY-NC-SA 4.0
Powered by MediaWiki