Line 8:
Line 8:
{{{content}}}{{clr}}</div>
{{{content}}}{{clr}}</div>
</div><noinclude>
</div><noinclude>
−
{{documentation}}
+
DOCUMENTATION
+
== Usage ==
+
Allow to insert a modern box.
+
For the box to continue to the bottom you must use the argument « <code>| flex = 1 1 auto</code> »
+
+
== Syntax ==
+
'''Reduced Syntax'''
+
<pre>{{Colored box
+
| title =
+
| title-color = #000
+
| background-title-color = #eaecf0
+
| icon =
+
| content =
+
| background-content-color = #f8f9fa
+
| link =
+
}}</pre>
+
+
'''Complete syntax'''
+
<pre>{{Colored box
+
| title =
+
| title-color = #000
+
| background-title-color = #eaecf0
+
| icon =
+
| content =
+
| background-content-color = #f8f9fa
+
| style =
+
| link =
+
}}</pre>
+
+
== Parameters ==
+
<templatedata>
+
{
+
"params": {
+
"title": {
+
"label": "Title",
+
"description": "Title of the box.",
+
"example": "Tag water",
+
"type": "string",
+
"required": true
+
},
+
"content": {
+
"label": "Content",
+
"description": "Content of the box.",
+
"example": "Content text",
+
"type": "content",
+
"required": true
+
},
+
"link": {
+
"label": "Link",
+
"description": "Title of the wiki page to edit the content.",
+
"example": "Map_Features",
+
"type": "wiki-page-name",
+
"suggested": true
+
},
+
"icon": {
+
"label": "Icon",
+
"description": "Name of the file for icon.",
+
"example": "Circle-icons-chat.svg",
+
"type": "wiki-file-name"
+
},
+
"title-color": {
+
"label": "Title color",
+
"description": "Hexadecimal color code of the title text.",
+
"example": "#339966",
+
"type": "string",
+
"default": "#FFFFFF"
+
},
+
"style": {
+
"label": "Style",
+
"description": "Additional CSS style for the container.",
+
"example": "flex: 1 1 20em;",
+
"type": "string"
+
},
+
"link-color": {
+
"label": "Link color",
+
"description": "Hexadecimal color code of the Modify link.",
+
"example": "#339966",
+
"type": "string",
+
"default": "#999999"
+
},
+
"background-title-color": {
+
"label": "Title background color",
+
"description": "Hexadecimal color code of the title bar background.",
+
"example": "#447FF5",
+
"type": "string",
+
"default": "#339966",
+
"suggested": true
+
},
+
"background-content-color": {
+
"label": "Content background color",
+
"description": "Hexadecimal color code of the box content background.",
+
"example": "#339966",
+
"type": "string",
+
"default": "#F8F9FA"
+
},
+
"view-text": {
+
"description": "Default title: edit, can be changed",
+
"default": "edit"
+
},
+
"titre-couleur-fond-hover": {
+
"label": "Title background color on hover",
+
"description": "When hovering with the mouse, changes the background color of the title.",
+
"default": "{{{titre-couleur-fond}}}"
+
},
+
"flex": {
+
"label": "Flex",
+
"description": "Integration in the grid of the dynamic column/line. The first number indicates the proportion to which the box can expand, the second to which it can shrink, the third the minimum width in px/em of the box",
+
"example": "1 1 25em",
+
"type": "string",
+
"default": "0 1 auto"
+
},
+
"center": {
+
"label": "Center the title",
+
"description": "If filled, allows to center the title."
+
}
+
},
+
"description": "Colored box for content presentation.",
+
"paramOrder": [
+
"title",
+
"content",
+
"link",
+
"background-title-color",
+
"icon",
+
"title-color",
+
"style",
+
"link-color",
+
"background-content-color",
+
"view-text",
+
"titre-couleur-fond-hover",
+
"flex",
+
"center"
+
],
+
"format": "block"
+
}
+
</templatedata>
+
+
== Exemple ==
+
* <code><nowiki>
+
{{Colored box
+
| title = Wikidata Query Builder
+
| title-color = #000
+
| background-title-color = #D33F00
+
| icon =
+
| content = Lorem Ipsum
+
| background-content-color = #f8f9fa
+
| link = Wikidata:Query Builder
+
}}
+
</nowiki></code>
+
+
{{Colored box
+
| title = Wikidata Query Builder
+
| title-color = #000
+
| background-title-color = #D33F00
+
| icon =
+
| content = Lorem Ipsum
+
| background-content-color = #f8f9fa
+
| link = Wikidata:Query Builder
+
}}
+
+
* <code><nowiki>
+
{{Colored box
+
| title = Box name
+
| title-color = #000
+
| background-title-color = #eaecf0
+
| icon =
+
| content =
+
| background-content-color = #f8f9fa
+
| link =
+
}}
+
</nowiki></code>
+
+
{{Colored box
+
| title = Box name
+
| title-color = #000
+
| background-title-color = #eaecf0
+
| icon =
+
| content =
+
| background-content-color = #f8f9fa
+
| link =
+
}}
+
+
== See also ==
+
* [[Template:Colored bar]]
+
* [[Template:Colorbar]]
+
* [[Template:Begin colored insert]]
+
* [[Template:End insert]]
+
* [[Template:Clickable button]]
+
* [[Template:Code rendered]]
</noinclude>
</noinclude>