Template:Callout: Difference between revisions
(added support for custom html classes for the wrapper) |
(added a "stacked" option) |
||
| Line 35: | Line 35: | ||
}}<!-- | }}<!-- | ||
--><div class="callout-wrapper {{{wrapper class|}}}" style=" | --><div class=" | ||
callout-wrapper | |||
{{#ifeq: {{{stacked|0}}}|1|stacked-notice}} | |||
{{{wrapper class|}}} | |||
" | |||
style=" | |||
justify-content: {{#var:callout_align}}; | justify-content: {{#var:callout_align}}; | ||
"> | "> | ||
| Line 148: | Line 153: | ||
"label": "Wrapper class", | "label": "Wrapper class", | ||
"description": "Extra class names to assign to the callout wrapper element. Use space to separate multiple classes.", | "description": "Extra class names to assign to the callout wrapper element. Use space to separate multiple classes.", | ||
"type": "line", | "type": "line" | ||
" | }, | ||
"stacked": { | |||
"label": "Stacked?", | |||
"description": "If set, the callout will have a predefined constant width, which would be the same for all callouts with this option set. Useful for making notice callouts that \"stack\" on top of each other.", | |||
"type": "boolean", | |||
"autovalue": "0" | |||
} | } | ||
}, | }, | ||
| Line 162: | Line 170: | ||
"image", | "image", | ||
"image2", | "image2", | ||
"stacked", | |||
"wrapper class" | "wrapper class" | ||
] | ] | ||
Revision as of 09:27, 17 August 2024
Examples
Types
| Type | Syntax | Result |
|---|---|---|
| Info | {{Callout |
Info An informative message. |
| Warning | {{Callout |
Warning Something to be warned about. |
| Danger | {{Callout |
Danger The clown is closing in. |
| Tip | {{Callout |
Tip When walking over slippery surfaces, hold Shift to slow down and not slip (in most cases). |
| Example | {{Callout |
Example An example for something. |
Header label
{{Callout
or
{{Callout
↓
or
Alignment
Left
The default.
Center
{{Callout
or
{{Callout
↓
or
Right
{{Callout
↓
Images
| Info
| header = Work in Progress
| align = center
| This page is unfinished.
| image = Wired Frame.png
| image2 = Wrench.png
}}
↓
Stacked callouts
Sets the callout to a predefined width, making all callouts with the same class appear with the same width.
Callouts will be stacked to the right and will require {{clear}} after to not overflow with the content that goes after.
{{Callout
{{Callout
{{Clear}}
↓
Wrapper classes
Allows to add custom classes to the wrapper element.
{{Callout
↓
A template for producing various notices.
| Parameter | Description | Type | Status | |
|---|---|---|---|---|
| Type | 1 | Type of the callout. Select from the suggested values. Any casing is supported.
| Line | required |
| Content | 2 | Content of the callout. | String | required |
| Header label | header h | Header text of the callout. By default, depends on the type. | Line | suggested |
| Align | align a | Alignment of the callout. When "Center" is used, the callout will span almost across the full width of a page.
| Line | suggested |
| Image | image image1 i | An image to add inside the callout at the start. | File | suggested |
| Second image | image2 i2 | A second image to add inside the callout to the left, after the first one. | File | suggested |
| Stacked? | stacked | If set, the callout will have a predefined constant width, which would be the same for all callouts with this option set. Useful for making notice callouts that "stack" on top of each other.
| Boolean | optional |
| Wrapper class | wrapper class | Extra class names to assign to the callout wrapper element. Use space to separate multiple classes. | Line | optional |
