Merge pull request #3232 from gterdem/pr/alerts_documentation

Create documentation for Alert Tag Helper
pull/3259/head
Halil İbrahim Kalkan 6 years ago committed by GitHub
commit 5815ec6d7a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

@ -0,0 +1,82 @@
# Alerts
## Introduction
`abp-alert` is a main element to create an alert.
Basic usage:
````xml
<abp-alert alert-type="Primary">
A simple primary alert—check it out!
</abp-alert>
````
## Demo
See the [alerts demo page](https://bootstrap-taghelpers.abp.io/Components/Alerts) to see it in action.
## Attributes
### alert-type
A value indicates the type of the alert. Should be one of the following values:
* `Default` (default value)
* `Primary`
* `Secondary`
* `Success`
* `Danger`
* `Warning`
* `Info`
* `Light`
* `Dark`
Example:
````xml
<abp-alert alert-type="Warning">
A simple warning alert—check it out!
</abp-alert>
````
### alert-link
A value provides matching colored links within any alert.
Example:
````xml
<abp-alert alert-type="Danger">
A simple danger alert with <a abp-alert-link href="#">an example link</a>. Give it a click if you like.
</abp-alert>
````
### dismissible
A value to make the alert dismissible.
Example:
````xml
<abp-alert alert-type="Warning" dismissible="true">
Holy guacamole! You should check in on some of those fields below.
</abp-alert>
````
### Additional content
`abp-alert` can also contain additional HTML elements like headings, paragraphs and dividers.
Example:
````xml
<abp-alert alert-type="Success">
<h4>Well done!</h4>
<p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
<hr>
<p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
</abp-alert>
````

@ -13,6 +13,8 @@ ABP Framework also adds some **useful features** to the standard bootstrap compo
Here, the list of components those are wrapped by the ABP Framework:
* [Buttons](Buttons.md)
* [Cards](Cards.md)
* [Alerts](Alerts.md)
* ...
> Until all the tag helpers are documented, you can visit https://bootstrap-taghelpers.abp.io/ to see them with live samples.

Loading…
Cancel
Save