diff --git a/docs/en/UI/AspNetCore/Tag-Helpers/Alerts.md b/docs/en/UI/AspNetCore/Tag-Helpers/Alerts.md new file mode 100644 index 0000000000..cf19e31e29 --- /dev/null +++ b/docs/en/UI/AspNetCore/Tag-Helpers/Alerts.md @@ -0,0 +1,82 @@ +# Alerts + +## Introduction + +`abp-alert` is a main element to create an alert. + +Basic usage: + +````xml + + A simple primary alert—check it out! + +```` + + + +## 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 + + A simple warning alert—check it out! + +```` + +### alert-link + +A value provides matching colored links within any alert. + +Example: + +````xml + + A simple danger alert with an example link. Give it a click if you like. + +```` + +### dismissible + +A value to make the alert dismissible. + +Example: + +````xml + + Holy guacamole! You should check in on some of those fields below. + +```` + +### Additional content + +`abp-alert` can also contain additional HTML elements like headings, paragraphs and dividers. + +Example: + +````xml + +

Well done!

+

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.

+
+

Whenever you need to, be sure to use margin utilities to keep things nice and tidy.

+ +```` diff --git a/docs/en/UI/AspNetCore/Tag-Helpers/Index.md b/docs/en/UI/AspNetCore/Tag-Helpers/Index.md index d7e393933e..5f36395c00 100644 --- a/docs/en/UI/AspNetCore/Tag-Helpers/Index.md +++ b/docs/en/UI/AspNetCore/Tag-Helpers/Index.md @@ -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.