Template:Alert: Difference between revisions

Browse history interactively
Content deleted Content added
VisualWikitext
Created page with "<noinclude> Examples: === Traditional === ==== Source ==== <pre><nowiki> {{Alert |type=traditional |content = an alert |content bold = This is |icon = info-circle |icon-type = fad }} </nowiki></pre> ==== Result ==== {{Alert |type=traditional |content = an alert |content bold = This is |icon = info-circle |icon-type = fad }} === Modern with Badge === ==== Source ==== <pre><nowiki> {{Alert |type=modern |content = an alert |content bold = This is |icon = info-circle |icon-t..."
 
No edit summary
 
(15 intermediate revisions by the same user not shown)
Line 1: Line 1:
<noinclude>
<noinclude>
Examples:
Examples:

=== openfox colors: ===
==== Source ====
<pre><nowiki>
{{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>

{{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}}

=== Traditional ===
=== Traditional ===
==== Source ====
==== Source ====
Line 19: Line 28:
|icon = info-circle
|icon = info-circle
|icon-type = fad
|icon-type = fad
|link=Main Page
}}
}}
=== Modern with Badge ===
=== Modern with Badge ===
Line 29: 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 39: 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 93: 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 103: Line 113:
|icon = info-circle
|icon = info-circle
|icon-type = fad
|icon-type = fad
|link=https://example.com
|external-link=https://example.com
}}
}}


Line 164: 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 170: 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>
</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">
|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|}}}|<span class="flex rounded-full bg-indigo-500 uppercase px-2 py-1 text-xs font-bold me-3">{{{content bold}}}</span>}}<span class="font- me-2 text-left flex-auto">{{{content|}}}</span>{{#if:{{{link|}}}|{{i|angle-{{{direction|right}}}|far|fill-current opacity-75 h-4 w-4}} }}</div>
{{#if:{{{icon|}}}|<div class="flex align-items-center">{{i|{{{icon}}}|{{{icon-type|fal}}}|me-2 {{#if:{{{content bold|}}}|{{#if:{{{content|}}}|{{{icon-size|fa-3x}}}}}|{{{icon-size|fa-2x}}}}}}}</div><div>}}{{#if:{{{content bold|}}}|<p class="font-bold">{{{content bold}}}</p>}}
</div>
{{#if:{{{content|}}}|<p>{{{content}}}</p>}}{{#if:{{{icon|}}}|</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" role="alert">
<p class="font-bold">{{{content bold|}}}</p>
<p>{{{content|}}}</p>
</div>
</div>
|titled = <div class="not-prose" role="alert">
|titled = <div class="not-prose" role="alert">
<div class="bg-red-500 text-white font-bold rounded-t px-4 py-2">
<div class="bg-red-500 text-white font-bold rounded-t px-4 py-2">
{{{content bold|}}}</div>
{{#if:{{{icon|}}}|{{i|{{{icon}}}|{{{icon-type|fal}}}|me-2 fill-current {{{icon-size|}}}}} }} {{{content bold|}}}</div>
<div class="border border-t-0 {{{border-color|border-red-400}}} rounded-b {{{bg-color|bg-red-100}}} px-4 py-3 {{{text-color|text-red-700}}}">
<div class="border border-t-0 {{{border-color|border-red-400}}} rounded-b {{{bg-color|bg-red-100}}} px-4 py-3 {{{text-color|text-red-700}}}">
<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}} }}
|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}}}|fill-current h-6 w-6 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>
<div>
<div>
<p class="font-bold">{{{content bold|}}}</p>
<p class="font-bold">{{{content bold|}}}</p>
Line 197: Line 226:
</div>
</div>
</div>
</div>
|banner = <div class="not-prose {{{bg-color|bg-blue-100}}} border-t border-b {{{border-color|border-blue-500}}} {{{text-color|text-blue-700}}} px-4 py-3" role="alert">
|banner = <div class="not-prose {{{bg-color|bg-blue-100}}} border-t border-b {{{border-color|border-blue-500}}} {{{text-color|text-blue-700}}} px-4 py-3 {{#if:{{{icon|}}}|flex}}" role="alert">
{{#if:{{{icon|}}}|<div class="flex align-items-center">{{i|{{{icon}}}|{{{icon-type|fal}}}|me-4 {{#if:{{{content bold|}}}|{{#if:{{{content|}}}|{{{icon-size|fa-2x}}}}}|{{{icon-size|}}}}}}}</div><div>}}
<p class="font-bold">{{{content bold|}}}</p>
<p class="font-bold">{{{content bold|}}}</p>
<p class="text-sm">{{{content|}}}</p>
<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>
<templatedata>
{
"params": {
"type": {
"type": "string",
"suggestedvalues": [
"traditional",
"titled",
"solid",
"modern",
"left border",
"top border",
"banner"
],
"default": "traditional",
"suggested": true,
"label": {
"he": "סוג הבאנר"
}
},
"bg-color": {
"label": {
"en": "Background color",
"he": "צבע רקע"
},
"type": "string",
"suggestedvalues": [
"bg-light-azure",
"bg-light-purple",
"bg-light-magenta"
],
"suggested": true
},
"border-color": {
"label": {
"en": "Border color",
"he": "צבע מסגרת"
},
"type": "string",
"suggestedvalues": [
"border-fox-purple",
"border-fox-azure",
"bg-fox-magenta"
],
"suggested": true
},
"text-color": {
"label": {
"en": "Text color",
"he": "צבע טקסט"
},
"type": "string",
"suggestedvalues": [
"text-fox-purple",
"text-fox-azure",
"text-fox-magenta"
]
},
"icon": {
"label": {
"en": "Icon",
"he": "אייקון"
},
"description": "Font Awesome icon name",
"type": "string"
},
"icon-type": {
"label": {
"en": "Icon type",
"he": "משקל האייקון"
},
"description": "Font Awesome icon weight",
"type": "string",
"suggestedvalues": [
"fa-solid",
"fa-regular",
"fa-light",
"fa-thin",
"fa-duotone"
],
"suggested": true
},
"content bold": {
"label": {
"en": "Bold content",
"he": "טקסט מודגש"
},
"type": "line",
"suggested": true
},
"content": {
"label": {
"en": "Content",
"he": "תוכן"
},
"type": "line",
"suggested": true
},
"link": {
"label": {
"en": "Link to page",
"he": "קישור לדף"
},
"type": "wiki-page-name",
"suggested": true
},
"direction": {
"label": {
"en": "Direction",
"he": "הפיכת כיוון"
},
"description": "click if RTL",
"suggestedvalues": [
"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": {
"en": "Template for text alerts and banners",
"he": "תבנית להוספת באנר התראה"
},
"paramOrder": [
"content",
"content bold",
"type",
"bg-color",
"border-color",
"text-color",
"icon",
"icon-type",
"link",
"external-link",
"direction",
"icon-size",
"hover",
"fox-color"
],
"format": "inline"
}
</templatedata>
</noinclude>

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"