Revised the tag helpers documentation.

docs/en/UI/AspNetCore/Tag-Helpers/Buttons.md

@@ -1,30 +1,26 @@
 # Buttons
 
-ABP framework has a special Tag Helper to create bootstrap button easily.
+## Introduction
 
-`<abp-button>`
+`abp-button` is the main element to create buttons.
 
-## Attributes
+Basic usage:
 
-`<abp-button>` has 7 different attribute.
+````xml
+<abp-button button-type="Primary">Click Me</abp-button>
+````
 
-* [`button-type`](#button-type)
+## Demo
-* [`size`](#size)
-* [`busy-text`](#busy-text)
-* [`text`](#text)
-* [`icon`](#icon)
-* [`disabled`](#disabled)
-* [`icon-type`](#icon-type)
 
-### `button-type`
+See the [buttons demo page](https://bootstrap-taghelpers.abp.io/Components/Buttons) to see it in action.
 
-`button-type` is a selectable parameter. It's default value is `Default`.
+## Attributes
 
-`<abp-button button-type="Primary">Button</abp-button>`
+### button-type
 
-You can choose one of the button type listed below.
+A value indicates the main style/type of the button. Should be one of the following values:
 
-* `Default`
+* `Default` (default value)
 * `Primary`
 * `Secondary`
 * `Success`
@@ -43,15 +39,11 @@ You can choose one of the button type listed below.
 * `Outline_Dark`
 * `Link`
 
-### `size`
+### size
-
-`size` is a selectable parameter. It's default value is `Default`.
 
-`<abp-button size="Default">Button</abp-button>`
+A value indicates the size of the button. Should be one of the following values:
 
-You can choose one of the size type listed below.
+* `Default` (default value)
-
-* `Default`
 * `Small`
 * `Medium`
 * `Large`
@@ -60,35 +52,35 @@ You can choose one of the size type listed below.
 * `Block_Medium`
 * `Block_Large`
 
-### `busy-text`
+### busy-text
-
-`busy-text` is a string parameter. It shows the text while the button is busy.
-
-### `text`
 
-`text` is a string parameter that displaying on button.
+A text that is shown when the button is busy.
 
-### `icon`
+### text
 
-`icon` is a string parameter. It is depending to [`icon-type`](#`icon-type`). For default, we use [Font Awesome](https://fontawesome.com/) for icons. To use it, you need to set `icon` parameter as a icon name. 
+The text of the button. This is a shortcut if you simply want to set a text to the button. Example:
 
-##### Example
+````xml
+<abp-button button-type="Primary" text="Click Me" />
+````
 
-[fa-address-card](https://fontawesome.com/icons/address-card): ![fa-address-card](fa-address-card.png "Address Card")
+In this case, you can use a self-closing tag to make it shorter.
 
-`<abp-button icon="address-card" text="Address" />`
+### icon
 
-> Don't forget: You dont need to write prefix! It will add automatically "fa" prefix for [Font Awesome](https://fontawesome.com/) icons while you did not change `icon-type`.
+Used to set an icon for the button. It works with the [Font Awesome](https://fontawesome.com/) icon classes by default. Example:
 
-### `disabled`
+````xml
+<abp-button icon="address-card" text="Address" />
+````
 
-`disabled` is a boolean parameter. If you set it `true`, your button will be disabled.
+##### icon-type
 
-### `icon-type`
+If you don't want to use font-awesome, you have two options:
 
-`icon-type` is a selectable parameter. It's default value is `FontAwesome`. You can create your own icon type provider and change it.
+1. Set `icon-type` to `Other` and write the CSS class of the font icon you're using.
+2. If you don't use a font icon use the opening and closing tags manually and write any code inside the tags.
 
-You can choose one of the icon type listed below.
+### disabled
 
-* `FontAwesome`
+Set `true` to make the button initially disabled.
-* `Other`

docs/en/UI/AspNetCore/Tag-Helpers/Index.md

@@ -1,3 +1,26 @@
-## ABP Tag Helpers
+# ABP Tag Helpers
 
-"ABP tag helpers" documentation is creating now. You can see a [demo of components](http://bootstrap-taghelpers.abp.io/) for now.
+ABP Framework defines a set of **tag helper components** to simply the user interface development for ASP.NET Core (MVC / Razor Pages) applications.
+
+## Bootstrap Component Wrappers
+
+Most of the tag helpers are [Bootstrap](https://getbootstrap.com/) (v4+) wrappers. Coding bootstrap is not so easy, not so type-safe and contains too much repetitive HTML tags. ABP Tag Helpers makes it **easier** and **type safe**.
+
+We don't aim to wrap bootstrap components 100%. Writing **native bootstrap style code** is still possible (actually, tag helpers generates native bootstrap code in the end), but we suggest to use the tag helpers wherever possible.
+
+ABP Framework also adds some **useful features** to the standard bootstrap components.
+
+Here, the list of components those are wrapped by the ABP Framework:
+
+* [Buttons](Buttons.md)
+* ...
+
+> Until all the tag helpers are documented, you can visit https://bootstrap-taghelpers.abp.io/ to see them with live samples.
+
+## Form Elements
+
+See [demo](https://bootstrap-taghelpers.abp.io/Components/FormElements).
+
+## Dynamic Inputs
+
+See [demo](https://bootstrap-taghelpers.abp.io/Components/DynamicForms).

docs/en/docs-nav.json

@@ -293,16 +293,7 @@
             },
             {
               "text": "Tag Helpers",
-              "items": [
+              "path": "UI/AspNetCore/Tag-Helpers/Index.md"
-                {
-                  "text": "Live Demo",
-                  "path": "UI/AspNetCore/Tag-Helpers/Index.md"
-                },
-                {
-                  "text": "Buttons",
-                  "path": "UI/AspNetCore/Tag-Helpers/Buttons.md"
-                }
-              ]
             },
             {
               "text": "Widgets",