diff --git a/docs/en/UI/AspNetCore/Tag-Helpers/Buttons.md b/docs/en/UI/AspNetCore/Tag-Helpers/Buttons.md index ba1bfb4032..ae62c7f2b7 100644 --- a/docs/en/UI/AspNetCore/Tag-Helpers/Buttons.md +++ b/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` is the main element to create buttons. -## Attributes +Basic usage: -`` has 7 different attribute. +````xml +Click Me +```` -* [`button-type`](#button-type) -* [`size`](#size) -* [`busy-text`](#busy-text) -* [`text`](#text) -* [`icon`](#icon) -* [`disabled`](#disabled) -* [`icon-type`](#icon-type) +## Demo -### `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 -`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` is a selectable parameter. It's default value is `Default`. +### size -`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` (default value) * `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` is a string parameter. It shows the text while the button is busy. - -### `text` +### 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 + +```` -[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. -`` +### 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 + +```` -`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` -* `Other` +Set `true` to make the button initially disabled. \ No newline at end of file diff --git a/docs/en/UI/AspNetCore/Tag-Helpers/Index.md b/docs/en/UI/AspNetCore/Tag-Helpers/Index.md index bdeb7668b7..d7e393933e 100644 --- a/docs/en/UI/AspNetCore/Tag-Helpers/Index.md +++ b/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. \ No newline at end of file +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). \ No newline at end of file diff --git a/docs/en/UI/AspNetCore/Tag-Helpers/fa-address-card.png b/docs/en/UI/AspNetCore/Tag-Helpers/fa-address-card.png deleted file mode 100644 index a3b2c815b8..0000000000 Binary files a/docs/en/UI/AspNetCore/Tag-Helpers/fa-address-card.png and /dev/null differ diff --git a/docs/en/docs-nav.json b/docs/en/docs-nav.json index 9cd9db14f7..1491a1bcb9 100644 --- a/docs/en/docs-nav.json +++ b/docs/en/docs-nav.json @@ -293,16 +293,7 @@ }, { "text": "Tag Helpers", - "items": [ - { - "text": "Live Demo", - "path": "UI/AspNetCore/Tag-Helpers/Index.md" - }, - { - "text": "Buttons", - "path": "UI/AspNetCore/Tag-Helpers/Buttons.md" - } - ] + "path": "UI/AspNetCore/Tag-Helpers/Index.md" }, { "text": "Widgets",