Difference between revisions of "Template:Alerts"
Jump to navigation
Jump to search
| Line 1: | Line 1: | ||
{{#switch: {{{alert|}}} | {{#switch: {{{alert|}}} | ||
| warning = | | warning = | ||
| − | <div class="alert alert-warning | + | <div class="alert alert-warning" role="alert">{{#if: {{{1|}}}|<h4 class="alert-heading">{{{1|}}}</h4>|}}<p>{{{2|}}}</p><div type="button" class="close" data-dismiss="alert" aria-label="Close" style="cursor: pointer;"><span aria-hidden="true">×</span></div></div> |
| danger = | | danger = | ||
| − | <div class="alert alert-danger | + | <div class="alert alert-danger" role="alert">{{#if: {{{1|}}}|<h4 class="alert-heading">{{{1|}}}</h4>|}}<p>{{{2|}}}</p><div type="button" class="close" data-dismiss="alert" aria-label="Close" style="cursor: pointer;"><span aria-hidden="true">×</span></div></div> |
| dark = | | dark = | ||
| − | <div class="alert alert-dark | + | <div class="alert alert-dark" role="alert">{{#if: {{{1|}}}|<h4 class="alert-heading">{{{1|}}}</h4>|}}<p>{{{2|}}}</p><div type="button" class="close" data-dismiss="alert" aria-label="Close" style="cursor: pointer;"><span aria-hidden="true">×</span></div></div> |
|#default = | |#default = | ||
| − | <div class="alert alert-light" role="alert" | + | <div class="alert alert-light" role="alert"><p>{{{2|}}}</p></div> |
}} | }} | ||
<noinclude> | <noinclude> | ||
| − | <div class="row"> | + | <div class="row template-documentation"> |
| − | <div class="col-12 | + | <div class="col-12"> |
| − | + | <h2>Template Documentation</h2> | |
| − | + | <p>Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.</p> | |
| − | |||
| − | |||
</div> | </div> | ||
| + | <div class="col-12"> | ||
| + | <h4>Usage</h4> | ||
| + | <hr> | ||
| + | <p>This template can be used to provide an alert textbox in 4 contextual cases with 3 of them having a close/dismiss button. This template can display the following alerts:</p> | ||
| + | <ol> | ||
| + | <li>A warning alert</li> | ||
| + | <li>A danger alert</li> | ||
| + | <li>A dark alert</li> | ||
| + | <li>And a normal alert</li> | ||
| + | </ol> | ||
| + | </div> | ||
| + | <div class="col-12"> | ||
| + | <h4>Examples</h4> | ||
| + | <hr> | ||
| + | <h5>The Classic Light Alert</h5> | ||
| + | <p>The following displays the light alert text box. You can follow this with whatever text/images/markup you like.</p> | ||
| + | <p>Wiki code:</p> | ||
| + | <pre>{{Alerts|message}}</pre> | ||
| + | </div> | ||
</div> | </div> | ||
</noinclude> | </noinclude> | ||
Revision as of 08:11, 30 April 2020
Template Documentation
Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.
Usage
This template can be used to provide an alert textbox in 4 contextual cases with 3 of them having a close/dismiss button. This template can display the following alerts:
- A warning alert
- A danger alert
- A dark alert
- And a normal alert
Examples
The Classic Light Alert
The following displays the light alert text box. You can follow this with whatever text/images/markup you like.
Wiki code:
{{Alerts|message}}