Template:Callout: Difference between revisions

From Space Station 14 Wiki
Browse history interactively
VisualWikitext
(fixed images)
(moved to lua)
 
(8 intermediate revisions by the same user not shown)
Line 1: Line 1:
<includeonly><!--
<includeonly><!--
-->{{#switch: {{#vardefineecho: callout_type|{{lc: {{{1}}}}}<!--/vardefine-->}}
--><templatestyles src="Template:Callout/styles.css" /><!--
|info =
{{#vardefine: callout_header|Info}}
{{#vardefine: callout_strip_color|var(--action-color)}}


|warning =
-->{{#invoke:Callout|generate_callout}}</includeonly><noinclude>
{{#vardefine: callout_header|Warning}}
{{docs|bb=
{{#vardefine: callout_strip_color|yellow}}
{{uses lua|Callout}}
 
{{uses template styles}}
|danger =
}}
{{#vardefine: callout_header|Danger}}
{{#vardefine: callout_strip_color|var(--danger-color)}}
 
|tip =
{{#vardefine: callout_header|Tip}}
{{#vardefine: callout_strip_color|var(--green-color)}}
 
|example =
{{#vardefine: callout_header|Example}}
{{#vardefine: callout_strip_color|#f92672}}
 
|{{error|unknown type{{colon}} {{{1}}}}}
}}<!--
 
# override the header label if needed
-->{{#if: {{#vardefineecho: callout_header_override|{{{header|{{{h|}}}}}}}}
|{{#vardefine: callout_header|{{#var:callout_header_override}}}}
}}<!--
 
-->{{#vardefine: callout_align
|{{lc: {{{align|{{{a|left}}}}}}}}
}}<!--
 
-->{{#vardefine: callout_min_width
|{{#ifeq: {{#var:callout_align}}|center<!--
    # for centered callouts, turn them into a banner by spanning them the full page's width
    -->|80%<!--
    # otherwise, keep it tidy
    -->|20rem<!--
-->}}<!--
-->}}<!--
 
--><div class="callout-wrapper" style="
    display: flex;
    justify-content: {{#var:callout_align}};
    margin-top: .5em;
">
<div class="callout" style="
      --strip-size: 10px;
     
      box-sizing: border-box;
     
        display: flex;
        flex-direction: row;
   
        width: fit-content;
        min-width: {{#var:callout_min_width}};
padding: .5rem;
       
        background-color: var(--bg-color-light-x2);
       
        border: 1px solid {{#var: callout_strip_color}};
border-left: 10px solid {{#var: callout_strip_color}};
       
        clip-path: polygon(
            0 0,
           
            100% 0,
           
            100% 100%,
           
            calc(var(--strip-size) / 2) 100%,
            0 calc(100% - var(--strip-size) / 2)
        );
><!--
        --><div class="callout-images" style="grid-column: 1; grid-row: 1 / span 2;"><!--
            -->{{#if: {{#vardefineecho: image_1|{{{image 1|{{{image|}}}<!--/1-->}}}}}
            |[[File:{{#var:image_1}}|80px]]
            }}<!--
           
            -->{{#if: {{#vardefineecho: image_2|{{{image 2|}}}}}
            |[[File:{{#var:image_2}}|80px]]
            }}<!--
        --></div><!--
       
        --><div class="callout-header-content-container" style="
            display: flex;
            flex-direction: column;
        "><!--
            --><div class="callout-header" style="
                font-weight: bold;
                font-size: large;
            ">{{#var:callout_header}}</div><!--
           
--><div class="callout-content-container" style="
display: flex;
align-items: center;
               
                height: 100%;
"><!--
--><div class="callout-content">{{{2}}}</div><!--
--></div><!--
        --></div><!--
--></div><!--
--></div></includeonly><noinclude>
{{docs}}


[[Category:Notice templates]]
[[Category:Notice templates]]
[[Category:Template starter-kit]]
<templatedata>
<templatedata>
{
{
Line 141: Line 43:
"align": {
"align": {
"label": "Align",
"label": "Align",
"description": "Alignment of the callout. When \"Center\" is used, the callout will span almost across the full width of a page.",
"description": "Alignment of the callout. When \"Center\" is used, the callout will span almost across the full width of a page. If \"Stacked?\" is enabled, this option is ignored.",
"type": "line",
"type": "line",
"suggestedvalues": [
"suggestedvalues": [
Line 156: Line 58:
"image": {
"image": {
"aliases": [
"aliases": [
"image 1"
"image1",
"i"
],
],
"label": "Image",
"label": "Image",
Line 163: Line 66:
"suggested": true
"suggested": true
},
},
"image 2": {
"image2": {
"aliases": [
"i2"
],
"label": "Second image",
"label": "Second image",
"description": "A second image to add inside the callout to the left, after the first one.",
"description": "A second image to add inside the callout to the left, after the first one.",
"type": "wiki-file-name",
"type": "wiki-file-name",
"suggested": true
"suggested": true
},
"wrapper class": {
"label": "Wrapper class",
"description": "Extra class names to assign to the callout wrapper element. Use space to separate multiple classes.",
"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 177: Line 94:
"align",
"align",
"image",
"image",
"image 2"
"image2",
"stacked",
"wrapper class"
]
]
}
}
</templatedata>
</templatedata>
</noinclude>
</noinclude>

Latest revision as of 11:37, 1 September 2024

Template documentation
view or edit this documentation • about template documentation
Uses Lua module
This template uses Lua module:
Uses template styles
This template uses template styles found in:

Examples

Types

Caption text
Type Syntax Result
Info {{Callout|Info|An informative message.}}
Info
An informative message.
Warning {{Callout|Warning|Something to be warned about.}}
Warning
Something to be warned about.
Danger {{Callout|Danger|The clown is closing in.}}
Danger
The clown is closing in.
Tip {{Callout|Tip|When walking over slippery surfaces, hold {{button|Shift}} to slow down and not slip (in most cases).}}
Tip
When walking over slippery surfaces, hold Shift to slow down and not slip (in most cases).
Example {{Callout|Example|An example for something.}}
Example
An example for something.

Header label

{{Callout|Info|header=Notice|Bla-bla-bla, lorem ipsum...}}
or
{{Callout|Info|h=Notice|Bla-bla-bla, lorem ipsum...}}

↓

Notice
Bla-bla-bla, lorem ipsum...

or

Notice
Bla-bla-bla, lorem ipsum...

Alignment

Left

The default.

Center

{{Callout|Info|align=center|Bla-bla-bla, lorem ipsum...}}
or
{{Callout|Info|a=center|Bla-bla-bla, lorem ipsum...}}

↓

Info
Bla-bla-bla, lorem ipsum...

or

Info
Bla-bla-bla, lorem ipsum...

Right

{{Callout|Info|align=right|Bla-bla-bla, lorem ipsum...}}

↓

Info
Bla-bla-bla, lorem ipsum...

Images

{{Callout
| Info
| header = Work in Progress
| align = center
| This page is unfinished.
| image = Wired Frame.png
| image2 = Wrench.png
}}

↓

Work in Progress
This page is unfinished.

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|stacked=1|Info|An informative message. An informative message. An informative message.}}
{{Callout|stacked=1|Info|Bla-bla-bla, lorem ipsum... Bla-bla-bla, lorem ipsum... Bla-bla-bla, lorem ipsum... Bla-bla-bla, lorem ipsum...}}
{{Clear}}

↓

Info
An informative message. An informative message. An informative message.
Info
Bla-bla-bla, lorem ipsum... Bla-bla-bla, lorem ipsum... Bla-bla-bla, lorem ipsum... Bla-bla-bla, lorem ipsum...

Wrapper classes

Allows to add custom classes to the wrapper element.

{{Callout|wrapper class=hello|Info|An informative message.}}

↓

Info
An informative message.

A template for producing various notices.

Template parameters[Edit template data]

ParameterDescriptionTypeStatus
Type1

Type of the callout. Select from the suggested values. Any casing is supported.

Suggested values
Info Warning Danger Example Tip
Linerequired
Content2

Content of the callout.

Stringrequired
Header labelheader h

Header text of the callout. By default, depends on the type.

Linesuggested
Alignalign a

Alignment of the callout. When "Center" is used, the callout will span almost across the full width of a page. If "Stacked?" is enabled, this option is ignored.

Suggested values
Left Center Right
Default
Left
Linesuggested
Imageimage image1 i

An image to add inside the callout at the start.

Filesuggested
Second imageimage2 i2

A second image to add inside the callout to the left, after the first one.

Filesuggested
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.

Auto value
0
Booleanoptional
Wrapper classwrapper class

Extra class names to assign to the callout wrapper element. Use space to separate multiple classes.

Lineoptional
Retrieved from "https://wiki.spacestation14.com/w/index.php?title=Template:Callout&oldid=8642"