Template:Alert: Difference between revisions

Browse history interactively
← Older edit
Content deleted Content added
VisualWikitext
No edit summary
No edit summary
 
(12 intermediate revisions by the same user not shown)
Line 2: Line 2:
Examples:
Examples:


== openfox colors: ==
=== openfox colors: ===
==== Source ====
==== Source ====
<pre><nowiki>
<pre><nowiki>
{{Alert|content=a tailwind based skin|content bold=Lisa:|type=top border|bg-color=bg-light-purple|border-color=border-fox-purple|text-color=text-fox-purple|icon-type=fa-regular}}
{{Alert|content=a tailwind based skin|content bold=Lisa:|type=top border|bg-color=bg-light-purple|border-color=border-fox-{{{fox-color|purple}}}|text-color=text-fox-purple|icon-type=fa-regular}}
</nowiki></pre>
</nowiki></pre>


Line 28: Line 28:
|icon = info-circle
|icon = info-circle
|icon-type = fad
|icon-type = fad
|link=Main Page
}}
}}
=== Modern with Badge ===
=== Modern with Badge ===
Line 38: Line 39:
|icon = info-circle
|icon = info-circle
|icon-type = fad
|icon-type = fad
|link=https://example.com
|external-link=https://example.com
}}
}}
</nowiki></pre>
</nowiki></pre>
Line 48: Line 49:
|icon = info-circle
|icon = info-circle
|icon-type = fad
|icon-type = fad
|link=https://example.com
|external-link=https://example.com
}}
}}
=== Left Accent Border ===
=== Left Accent Border ===
Line 102: Line 103:
|icon = info-circle
|icon = info-circle
|icon-type = fad
|icon-type = fad
|link=https://example.com
|external-link=https://example.com
}}
}}
</nowiki></pre>
</nowiki></pre>
Line 112: Line 113:
|icon = info-circle
|icon = info-circle
|icon-type = fad
|icon-type = fad
|link=https://example.com
|external-link=https://example.com
}}
}}


Line 173: Line 174:
==== Result ====
==== Result ====
{{Alert
{{Alert
|type=Titled
|type=titled
|content = an alert
|content = an alert
|content bold = This is
|content bold = This is
Line 179: Line 180:
|icon-type = fad
|icon-type = fad
|link=https://example.com
|link=https://example.com
}}

=== Defualt (no type) ===
==== Source ====
<pre><nowiki>
{{Alert
|content = an alert
|content bold = This is
|icon = info-circle
|icon-type = fad
|external-link=https://example.com
}}
</nowiki></pre>
==== Result ====
{{Alert
|content = an alert
|content bold = This is
|icon = info-circle
|icon-type = fad
|external-link=https://example.com
}}
}}
</noinclude><includeonly>
</noinclude><includeonly>
{{#switch:{{{type|}}}
{{#switch:{{{type|fox}}}
|traditional = <div class="{{{bg-color|bg-red-100}}} border {{{border-color|border-red-400}}} {{{text-color|text-red-700}}} px-4 py-3 rounded relative" role="alert">{{#if:{{{icon|}}}|{{i|{{{icon}}}|{{{icon-type|fal}}}|me-2}} }}<span class="font-bold">{{{content bold|}}}</span> <span class="block sm:inline">{{{content|}}}</span>
|traditional = <div class="{{{bg-color|bg-red-100}}} border {{{border-color|border-red-400}}} {{{text-color|text-red-700}}} px-4 py-3 rounded relative {{#if:{{{link|{{{external-link|}}}}}}|flex justify-between align-items-center {{{hover|hover:bg-red-200 hover:border-red-500 hover:text-red-800}}} }}" role="alert">{{#if:{{{link|{{{external-link|}}}}}}|<div>}}{{#if:{{{icon|}}}|{{i|{{{icon}}}|{{{icon-type|fal}}}|me-2}} }}<span class="font-bold">{{{content bold|}}}</span> <span class="block sm:inline">{{{content|}}}</span>{{#if:{{{link|{{{external-link|}}}}}}|</div><div>{{i|angle-{{{direction|right}}}|fas|fill-current opacity-75 h-4 w-4}}<div class="overlay-link">{{#if:{{{external-link|}}}|{{{external-link|}}}|{{#if:{{{link|}}}|[[{{{link}}}]]}} }}</div></div>}}</div>
|modern = <div class="{{{border-color|bg-indigo-900}}} text-center py-4 lg:px-4"><div class="p-2 {{{bg-color|bg-indigo-800}}} relative items-center {{{text-color|text-indigo-100}}} leading-none lg:rounded-full flex lg:inline-flex {{#if:{{{link|{{{external-link|}}}}}}|hover:bg-indigo-900 hover:text-white}}" role="alert">{{#if:{{{content bold|}}}{{{icon|}}}|<span class="flex rounded-full bg-indigo-500 uppercase align-items-center px-2 py-1 text-xs font-bold me-3">{{#if:{{{icon|}}}|{{i|{{{icon}}}|{{{icon-type|fal}}}|me-2 fill-current}} }}{{{content bold}}}</span>}}<span class="me-2 text-left flex-auto">{{{content|}}}</span>{{#if:{{{link|{{{external-link|}}}}}}|{{i|angle-{{{direction|right}}}|far|fill-current opacity-75 h-4 w-4}}<div class="overlay-link">{{#if:{{{external-link|}}}|{{{external-link|}}}|{{#if:{{{link|}}}|[[{{{link}}}]]}} }}</div>}}</div>
</div>
|modern = <div class="{{{border-color|bg-indigo-900}}} text-center py-4 lg:px-4"><div class="p-2 {{{bg-color|bg-indigo-800}}} items-center {{{text-color|text-indigo-100}}} leading-none lg:rounded-full flex lg:inline-flex" role="alert">{{#if:{{{content bold|}}}{{{icon|}}}|<span class="flex rounded-full bg-indigo-500 uppercase align-items-center px-2 py-1 text-xs font-bold me-3">{{#if:{{{icon|}}}|{{i|{{{icon}}}|{{{icon-type|fal}}}|me-2 fill-current}} }}{{{content bold}}}</span>}}<span class="me-2 text-left flex-auto">{{{content|}}}</span>{{#if:{{{link|}}}|{{i|angle-{{{direction|right}}}|far|fill-current opacity-75 h-4 w-4}} }}</div>
</div>
</div>
|left border = <div class="not-prose {{{bg-color|bg-orange-100}}} border-l-4 {{{border-color|border-orange-500}}} {{{text-color|text-orange-700}}} p-4 {{#if:{{{icon|}}}|flex}}" role="alert">
|left border = <div class="not-prose {{{bg-color|bg-orange-100}}} border-l-4 {{{border-color|border-orange-500}}} {{{text-color|text-orange-700}}} p-4 {{#if:{{{icon|}}}|flex}}" role="alert">
Line 196: Line 216:
<p>{{{content|}}}</p>
<p>{{{content|}}}</p>
</div></div>
</div></div>
|solid = <div class="not-prose flex items-center {{{bg-color|bg-blue-500}}} {{{text-color|text-white}}} text-sm font-bold px-4 py-3" role="alert">{{#if:{{{icon|}}}|{{i|{{{icon}}}|{{{icon-type|fal}}}|me-2 {{{icon-size|}}}}} }}
|solid = <div class="not-prose relative flex items-center {{{bg-color|bg-blue-500}}} {{{text-color|text-white}}} text-sm font-bold px-4 py-3 {{#if:{{{link|{{{external-link|}}}}}}|flex justify-between align-items-center hover:bg-blue-600 hover:text-white}}" role="alert">{{#if:{{{link|{{{external-link|}}}}}}|<div class="flex items-center">}}{{#if:{{{icon|}}}|{{i|{{{icon}}}|{{{icon-type|fal}}}|me-2 {{{icon-size|}}}}} }}
<p>{{#if:{{{content bold|}}}|'''{{{content bold}}}'''|}} {{{content|}}}</p>
<p>{{#if:{{{content bold|}}}|'''{{{content bold}}}'''|}} {{{content|}}}</p>{{#if:{{{link|{{{external-link|}}}}}}|</div><div>{{i|angle-{{{direction|right}}}|fas|fill-current opacity-75 h-4 w-4}}<div class="overlay-link">{{#if:{{{external-link|}}}|{{{external-link|}}}|{{#if:{{{link|}}}|[[{{{link}}}]]}} }}</div></div>}}
</div>
</div>
|top border = <div class="not-prose {{{bg-color|bg-teal-100}}} border-t-4 {{{border-color|border-teal-500}}} rounded-b {{{text-color|text-teal-900}}} px-4 py-3 shadow-md" role="alert"><div class="flex"><div class="py-1">{{#if:{{{icon|}}}|{{i|{{{icon}}}|{{{icon-type|fal}}}|fa-xl fill-current {{{icon-size|}}} h-6 w-6 {{{text-color|text-teal-500}}} mr-4}} }}</div>
|top border = <div class="not-prose {{{bg-color|bg-teal-100}}} border-t-4 {{{border-color|border-teal-500}}} rounded-b {{{text-color|text-teal-900}}} px-4 py-3 shadow-md" role="alert"><div class="flex"><div class="py-1">{{#if:{{{icon|}}}|{{i|{{{icon}}}|{{{icon-type|fal}}}|fa-xl fill-current {{{icon-size|}}} h-6 w-6 {{{text-color|text-teal-500}}} mr-4}} }}</div>
Line 211: Line 231:
<p class="text-sm">{{{content|}}}</p>{{#if:{{{icon|}}}|</div>}}
<p class="text-sm">{{{content|}}}</p>{{#if:{{{icon|}}}|</div>}}
</div>
</div>
|fox = <div class="{{{bg-color|bg-light-purple}}} border {{{border-color|border-fox-{{{fox-color|purple}}}}}} {{{text-color|text-fox-{{{fox-color|purple}}}}}} px-4 py-3 rounded relative {{#if:{{{link|{{{external-link|}}}}}}|flex justify-between align-items-center {{{{hover|transition-all hover:bg-fox-{{{fox-color|purple}}} hover:border-fox-{{{fox-color|purple}}} hover:text-white}}} }}" role="alert">{{#if:{{{link|{{{external-link|}}}}}}|<div>}}{{#if:{{{icon|}}}|{{i|{{{icon}}}|{{{icon-type|fal}}}|me-2}} }}<span class="font-bold">{{{content bold|}}}</span> <span class="block sm:inline">{{{content|}}}</span>{{#if:{{{link|{{{external-link|}}}}}}|</div><div>{{i|angle-{{{direction|right}}}|fas|fill-current opacity-75 h-4 w-4}}<div class="overlay-link">{{#if:{{{external-link|}}}|{{{external-link|}}}|{{#if:{{{link|}}}|[[{{{link}}}]]}} }}</div></div>}}</div>
|
}}</includeonly>
}}</includeonly>
<noinclude>
<noinclude>
Line 229: Line 249:
],
],
"default": "traditional",
"default": "traditional",
"suggested": true
"suggested": true,
"label": {
"he": "סוג הבאנר"
}
},
},
"bg-color": {
"bg-color": {
"label": "Background color",
"label": {
"en": "Background color",
"he": "צבע רקע"
},
"type": "string",
"type": "string",
"suggestedvalues": [
"suggestedvalues": [
Line 242: Line 268:
},
},
"border-color": {
"border-color": {
"label": "Border color",
"label": {
"en": "Border color",
"he": "צבע מסגרת"
},
"type": "string",
"type": "string",
"suggestedvalues": [
"suggestedvalues": [
Line 252: Line 281:
},
},
"text-color": {
"text-color": {
"label": "Text color",
"label": {
"en": "Text color",
"he": "צבע טקסט"
},
"type": "string",
"type": "string",
"suggestedvalues": [
"suggestedvalues": [
Line 261: Line 293:
},
},
"icon": {
"icon": {
"label": "Icon",
"label": {
"en": "Icon",
"he": "אייקון"
},
"description": "Font Awesome icon name",
"description": "Font Awesome icon name",
"type": "string"
"type": "string"
},
},
"icon-type": {
"icon-type": {
"label": "Icon type",
"label": {
"en": "Icon type",
"he": "משקל האייקון"
},
"description": "Font Awesome icon weight",
"description": "Font Awesome icon weight",
"type": "string",
"type": "string",
Line 279: Line 317:
},
},
"content bold": {
"content bold": {
"label": "Bold content",
"label": {
"en": "Bold content",
"he": "טקסט מודגש"
},
"type": "line",
"type": "line",
"suggested": true
"suggested": true
},
},
"content": {
"content": {
"label": "Content",
"label": {
"en": "Content",
"he": "תוכן"
},
"type": "line",
"type": "line",
"suggested": true
"suggested": true
},
},
"link": {
"link": {
"label": "Link to page",
"label": {
"en": "Link to page",
"he": "קישור לדף"
},
"type": "wiki-page-name",
"type": "wiki-page-name",
"suggested": true
"suggested": true
},
},
"direction": {
"direction": {
"label": "Direction",
"label": {
"en": "Direction",
"he": "הפיכת כיוון"
},
"description": "click if RTL",
"description": "click if RTL",
"suggestedvalues": [
"suggestedvalues": [
"rtl"
"left"
]
},
"icon-size": {
"label": {
"he": "גודל האייקון",
"en": "Icon size"
},
"type": "string",
"suggestedvalues": [
"fa-2xs",
"fa-xs",
"fa-sm",
"fa-lg",
"fa-xl",
"fa-2xl",
"fa-1x",
"fa-2x",
"fa-3x",
"fa-4x",
"fa-5x"
]
},
"external-link": {
"label": {
"en": "External link",
"he": "קישור חיצוני"
},
"description": {
"he": "בסוגים המתאימים"
},
"type": "url"
},
"hover": {
"label": {
"en": "Hover class for links",
"he": "קלאס לשינוי מצב במעבר עכבר על לינק"
}
},
"fox-color": {
"label": "Leading color",
"description": "Leading color from openfox.io pallet",
"type": "string",
"suggestedvalues": [
"purple",
"azure",
"magenta"
]
]
}
}
},
},
"description": "Template for text alerts and banners",
"description": {
"en": "Template for text alerts and banners",
"he": "תבנית להוספת באנר התראה"
},
"paramOrder": [
"paramOrder": [
"content",
"content",
Line 312: Line 411:
"icon-type",
"icon-type",
"link",
"link",
"direction"
"external-link",
"direction",
"icon-size",
"hover",
"fox-color"
],
],
"format": "inline"
"format": "inline"

Latest revision as of 05:49, 4 May 2025

Examples:

openfox colors:

Source

{{Alert|content=a tailwind based skin|content bold=Lisa:|type=top border|bg-color=bg-light-purple|border-color=border-fox-{{{fox-color|purple}}}|text-color=text-fox-purple|icon-type=fa-regular}}



Traditional

Source

{{Alert
|type=traditional
|content = an alert
|content bold = This is
|icon = info-circle
|icon-type = fad
}}

Result

Modern with Badge

Source

{{Alert
|type=modern
|content = an alert
|content bold = This is
|icon = info-circle
|icon-type = fad
|external-link=https://example.com
}}

Result

Left Accent Border

Source

{{Alert
|type=left border
|content = an alert
|content bold = This is
|icon = info-circle
|icon-type = fad
|link=https://example.com
}}

Result

Titled

Source

{{Alert
|type=titled
|content = an alert
|content bold = This is
|icon = info-circle
|icon-type = fad
|link=https://example.com
}}

Result


Solid

Source

{{Alert
|type=solid
|content = an alert
|content bold = This is
|icon = info-circle
|icon-type = fad
|external-link=https://example.com
}}

Result


Top Accent Border

Source

{{Alert
|type=top border
|content = an alert
|content bold = This is
|icon = info-circle
|icon-type = fad
|link=https://example.com
}}

Result


Source

{{Alert
|type=banner
|content = an alert
|content bold = This is
|icon = info-circle
|icon-type = fad
|link=https://example.com
}}

Result


Titled

Source

{{Alert
|type=Titled
|content = an alert
|content bold = This is
|icon = info-circle
|icon-type = fad
|link=https://example.com
}}

Result


Defualt (no type)

Source

{{Alert
|content = an alert
|content bold = This is
|icon = info-circle
|icon-type = fad
|external-link=https://example.com
}}

Result


Template for text alerts and banners

Template parameters[Edit template data]

This template prefers inline formatting of parameters.

ParameterDescriptionTypeStatus
Contentcontent

no description

Linesuggested
Bold contentcontent bold

no description

Linesuggested
typetype

no description

Suggested values
traditional titled solid modern left border top border banner
Default
traditional
Stringsuggested
Background colorbg-color

no description

Suggested values
bg-light-azure bg-light-purple bg-light-magenta
Stringsuggested
Border colorborder-color

no description

Suggested values
border-fox-purple border-fox-azure bg-fox-magenta
Stringsuggested
Text colortext-color

no description

Suggested values
text-fox-purple text-fox-azure text-fox-magenta
Stringoptional
Iconicon

Font Awesome icon name

Stringoptional
Icon typeicon-type

Font Awesome icon weight

Suggested values
fa-solid fa-regular fa-light fa-thin fa-duotone
Stringsuggested
Link to pagelink

no description

Page namesuggested
External linkexternal-link

no description

URLoptional
Directiondirection

click if RTL

Suggested values
left
Unknownoptional
Icon sizeicon-size

no description

Suggested values
fa-2xs fa-xs fa-sm fa-lg fa-xl fa-2xl fa-1x fa-2x fa-3x fa-4x fa-5x
Stringoptional
Hover class for linkshover

no description

Unknownoptional
Leading colorfox-color

Leading color from openfox.io pallet

Suggested values
purple azure magenta
Stringoptional
Retrieved from "https://templates.openfox.io/w/index.php?title=Template:Alert&oldid=4109"