diff --git a/docs/en/UI/AspNetCore/Tag-Helpers/Form-elements.md b/docs/en/UI/AspNetCore/Tag-Helpers/Form-elements.md index df8c5008ac..0275bf8030 100644 --- a/docs/en/UI/AspNetCore/Tag-Helpers/Form-elements.md +++ b/docs/en/UI/AspNetCore/Tag-Helpers/Form-elements.md @@ -10,7 +10,7 @@ See the [form elements demo page](https://bootstrap-taghelpers.abp.io/Components ## abp-input -`abp-input` tag creates a Bootstrap form input for a given c# property. It uses [Asp.Net Core Input Tag Helper](https://docs.microsoft.com/tr-tr/aspnet/core/mvc/views/working-with-forms?view=aspnetcore-3.1#the-input-tag-helper) in background, so every data annotation attribute of `input` tag helper of Asp.Net Core is also valid for `abp-input`. +`abp-input` tag creates a Bootstrap form input for a given c# property. It uses [ASP.NET Core Input Tag Helper](https://docs.microsoft.com/tr-tr/aspnet/core/mvc/views/working-with-forms?view=aspnetcore-3.1#the-input-tag-helper) in background, so every data annotation attribute of `input` tag helper of ASP.NET Core is also valid for `abp-input`. Usage: @@ -58,49 +58,49 @@ Model: ### Attributes -You can set some of the attributes on your c# property, or directly on html tag. If you are going to use this property in a [abp-dynamic-form](Dynamic-forms.md), then you can only set these properties via property attributes. +You can set some of the attributes on your c# property, or directly on HTML tag. If you are going to use this property in a [abp-dynamic-form](Dynamic-forms.md), then you can only set these properties via property attributes. #### Property Attributes - `[TextArea()]`: Converts the input into a text area. -* `[Placeholder()]`: Sets placeholder for input. You can use a localization key directly. -* `[InputInfoText()]`: Sets a small info text for input. You can use a localization key directly. -* `[FormControlSize()]`: Sets size of form-control wrapper element. Available values are +* `[Placeholder()]`: Sets the description are of the input. You can use a localization key directly. +* `[InputInfoText()]`: Sets text for the input. You can directly use a localization key. +* `[FormControlSize()]`: Sets the size of the form-control wrapper element. Available values are - `AbpFormControlSize.Default` - `AbpFormControlSize.Small` - `AbpFormControlSize.Medium` - `AbpFormControlSize.Large` -* `[DisabledInput]` : Input is disabled. -* `[ReadOnlyInput]`: Input is read-only. +* `[DisabledInput]` : Sets the input as disabled. +* `[ReadOnlyInput]`: Sets the input as read-only. #### Tag Attributes -* `info`: Sets a small info text for input. You can use a localization key directly. -* `auto-focus`: If true, browser auto focuses on the element. -* `size`: Sets size of form-control wrapper element. Available values are +* `info`: Sets text for the input. You can directly use a localization key. +* `auto-focus`: It lets the browser set focus to the element when its value is true. +* `size`: Sets the size of the form-control wrapper element. Available values are - `AbpFormControlSize.Default` - `AbpFormControlSize.Small` - `AbpFormControlSize.Medium` - `AbpFormControlSize.Large` -* `disabled`: Input is disabled. -* `readonly`: Input is read-only. -* `label`: Sets the label for input. -* `display-required-symbol`: Adds the required symbol (*) to label if input is required. Default `True`. +* `disabled`: Sets the input as disabled. +* `readonly`: Sets the input as read-only. +* `label`: Sets the label of input. +* `display-required-symbol`: Adds the required symbol `(*)` to the label when the input is required. The default value is `True`. -`asp-format`, `name` and `value` attributes of [Asp.Net Core Input Tag Helper](https://docs.microsoft.com/en-us/aspnet/core/mvc/views/working-with-forms?view=aspnetcore-3.1#the-input-tag-helper) are also valid for `abp-input` tag helper. +`asp-format`, `name` and `value` attributes of [ASP.NET Core Input Tag Helper](https://docs.microsoft.com/en-us/aspnet/core/mvc/views/working-with-forms?view=aspnetcore-3.1#the-input-tag-helper) are also valid for `abp-input` tag helper. ### Label & Localization -You can set label of your input in different ways: +You can set the label of the input in several ways: -- You can use `Label` attribute and directly set the label. But it doesn't auto localize your localization key. So use it as `label="@L["{LocalizationKey}"].Value"`. -- You can set it using `[Display(name="{LocalizationKey}")]` attribute of Asp.Net Core. +- You can use the `Label` attribute to set the label directly. This property does not automatically localize the text. To localize the label, use `label="@L["{LocalizationKey}"].Value"`. +- You can set it using `[Display(name="{LocalizationKey}")]` attribute of ASP.NET Core. - You can just let **abp** find the localization key for the property. It will try to find "DisplayName:{PropertyName}" or "{PropertyName}" localization keys, if `label` or `[DisplayName]` attributes are not set. ## abp-select -`abp-select` tag creates a Bootstrap form select for a given c# property. It uses [Asp.Net Core Select Tag Helper](https://docs.microsoft.com/tr-tr/aspnet/core/mvc/views/working-with-forms?view=aspnetcore-3.1#the-select-tag-helper) in background, so every data annotation attribute of `select` tag helper of Asp.Net Core is also valid for `abp-select`. +`abp-select` tag creates a Bootstrap form select for a given c# property. It uses [ASP.NET Core Select Tag Helper](https://docs.microsoft.com/tr-tr/aspnet/core/mvc/views/working-with-forms?view=aspnetcore-3.1#the-select-tag-helper) in background, so every data annotation attribute of `select` tag helper of ASP.NET Core is also valid for `abp-select`. `abp-select` tag needs a list of `Microsoft.AspNetCore.Mvc.Rendering.SelectListItem ` to work. It can be provided by `asp-items` attriube on the tag or `[SelectItems()]` attribute on c# property. (if you are using [abp-dynamic-form](Dynamic-forms.md), c# attribute is the only way.) @@ -170,14 +170,14 @@ Model: ### Attributes -You can set some of the attributes on your c# property, or directly on html tag. If you are going to use this property in a [abp-dynamic-form](Dynamic-forms.md), then you can only set these properties via property attributes. +You can set some of the attributes on your c# property, or directly on HTML tag. If you are going to use this property in a [abp-dynamic-form](Dynamic-forms.md), then you can only set these properties via property attributes. #### Property Attributes * `[SelectItems()]`: Sets the select data. Parameter should be the name of the data list. (see example above) -- `[InputInfoText()]`: Sets a small info text for input. You can use a localization key directly. -- `[FormControlSize()]`: Sets size of form-control wrapper element. Available values are +- `[InputInfoText()]`: Sets text for the input. You can directly use a localization key. +- `[FormControlSize()]`: Sets the size of the form-control wrapper element. Available values are - `AbpFormControlSize.Default` - `AbpFormControlSize.Small` - `AbpFormControlSize.Medium` @@ -186,21 +186,21 @@ You can set some of the attributes on your c# property, or directly on html tag. #### Tag Attributes - `asp-items`: Sets the select data. This Should be a list of SelectListItem. -- `info`: Sets a small info text for input. You can use a localization key directly. -- `size`: Sets size of form-control wrapper element. Available values are +- `info`: Sets text for the input. You can directly use a localization key. +- `size`: Sets the size of the form-control wrapper element. Available values are - `AbpFormControlSize.Default` - `AbpFormControlSize.Small` - `AbpFormControlSize.Medium` - `AbpFormControlSize.Large` -- `label`: Sets the label for input. -- `display-required-symbol`: Adds the required symbol (*) to label if input is required. Default `True`. +- `label`: Sets the label of input. +- `display-required-symbol`: Adds the required symbol `(*)` to the label when the input is required. The default value is `True`. ### Label & Localization -You can set label of your input in different ways: +You can set the label of the input in several ways: - You can use `Label` attribute and directly set the label. But it doesn't auto localize your localization key. So use it as `label="@L["{LocalizationKey}"].Value".` -- You can set it using `[Display(name="{LocalizationKey}")]` attribute of Asp.Net Core. +- You can set it using `[Display(name="{LocalizationKey}")]` attribute of ASP.NET Core. - You can just let **abp** find the localization key for the property. It will try to find "DisplayName:{PropertyName}" or "{PropertyName}" localization keys. Localizations of combobox values are set by `abp-select` for **Enum** property. It searches for "{EnumTypeName}.{EnumPropertyName}" or "{EnumPropertyName}" localization keys. For instance, in the example above, it will use "CarType.StationWagon" or "StationWagon" keys for localization when it localizes combobox values. @@ -251,7 +251,7 @@ Model: ### Attributes -You can set some of the attributes on your c# property, or directly on html tag. If you are going to use this property in a [abp-dynamic-form](Dynamic-forms.md), then you can only set these properties via property attributes. +You can set some of the attributes on your c# property, or directly on HTML tag. If you are going to use this property in a [abp-dynamic-form](Dynamic-forms.md), then you can only set these properties via property attributes. #### Property Attributes @@ -298,47 +298,47 @@ Model: ### Attributes -You can set some of the attributes on your c# property, or directly on html tag. If you are going to use this property in a [abp-dynamic-form](Dynamic-forms.md), then you can only set these properties via property attributes. +You can set some of the attributes on your c# property, or directly on HTML tag. If you are going to use this property in a [abp-dynamic-form](Dynamic-forms.md), then you can only set these properties via property attributes. #### Property Attributes -* `[Placeholder()]`: Sets placeholder for input. You can use a localization key directly. -* `[InputInfoText()]`: Sets a small info text for input. You can use a localization key directly. -* `[FormControlSize()]`: Sets size of form-control wrapper element. Available values are +* `[Placeholder()]`: Sets the description are of the input. You can use a localization key directly. +* `[InputInfoText()]`: Sets text for the input. You can directly use a localization key. +* `[FormControlSize()]`: Sets the size of the form-control wrapper element. Available values are - `AbpFormControlSize.Default` - `AbpFormControlSize.Small` - `AbpFormControlSize.Medium` - `AbpFormControlSize.Large` -* `[DisabledInput]` : Input is disabled. -* `[ReadOnlyInput]`: Input is read-only. -- `[DatePickerOptions()]`: Sets the options of datepicker. You can use a localization key directly. See [datepicker options](https://www.daterangepicker.com/#options) for more information.) +* `[DisabledInput]` : Sets the input as disabled. +* `[ReadOnlyInput]`: Sets the input as read-only. +- `[DatePickerOptions()]`: Sets the predefined options of the date picker. See the available [datepicker options](https://www.daterangepicker.com/#options). You can use a localization key directly. ##### abp-date-picker -`[DatePicker]` : Date picker is enabled. +`[DatePicker]` : Sets the input as datepicker. Especially for string properties. ##### abp-date-range-picker -`[DateRangePicker()]` : Sets the picker id for date range picker. This is used to link start and end date pickers. And sets this property is start date or end date. +`[DateRangePicker()]` : Sets the picker id for the date range picker. You can set the property as a start date by setting IsStart=true or leave it as default/false to set it as an end date. #### Tag Attributes -* `info`: Sets a small info text for input. You can use a localization key directly. -* `auto-focus`: If true, browser auto focuses on the element. -* `size`: Sets size of form-control wrapper element. Available values are +* `info`: Sets text for the input. You can directly use a localization key. +* `auto-focus`: It lets the browser set focus to the element when its value is true. +* `size`: Sets the size of the form-control wrapper element. Available values are - `AbpFormControlSize.Default` - `AbpFormControlSize.Small` - `AbpFormControlSize.Medium` - `AbpFormControlSize.Large` -* `disabled`: Input is disabled. -* `readonly`: Input is read-only. -* `label`: Sets the label for input. -* `display-required-symbol`: Adds the required symbol (*) to label if input is required. Default `True`. -* `open-button`: If true, a button will be added to open datepicker. Default `True`. -* `clear-button`: If true, a button will be added to clear datepicker. Default `True`. -* `is-utc`: If true, datepicker will use UTC date. Default `False`. -* `is-iso`: If true, datepicker will use ISO date. Default `False`. -* `date-format`: Sets the date format. Default your culture's date format. (JS format) -* `date-separator`: Sets the range date separator. Default `-`. -* Other attributes will be added to the input element and [datepicker options](https://www.daterangepicker.com/#options). +* `disabled`: Sets the input as disabled. +* `readonly`: Sets the input as read-only. +* `label`: Sets the label of input. +* `display-required-symbol`: Adds the required symbol `(*)` to the label when the input is required. The default value is `True`. +* `open-button`: A button to open the datepicker will be added when its `True`. The default value is `True`. +* `clear-button`: A button to clear the datepicker will be added when its `True`. The default value is `True` +* `is-utc`: Converts the date to UTC when its `True`. The default value is `False`. +* `is-iso`: Converts the date to ISO format when its `True`. The default value is `False`. +* `date-format`: Sets the date format of the input. The default format is the user's culture date format. You need to provide a JavaScript date format convention. Eg: `YYYY-MM-DDTHH:MM:SSZ`. +* `date-separator`: Sets a character to separate start and end dates. The default value is `-` +* Other non-mapped attributes will be automatically added to the input element as is. See the available [datepicker options](https://www.daterangepicker.com/#options). Eg: `data-start-date="2020-01-01"` ##### abp-date-picker @@ -351,9 +351,8 @@ You can set some of the attributes on your c# property, or directly on html tag. ### Label & Localization -You can set label of your input in different ways: - -- You can use `Label` attribute and directly set the label. But it doesn't auto localize your localization key. So use it as `label="@L["{LocalizationKey}"].Value"`. -- You can set it using `[Display(name="{LocalizationKey}")]` attribute of Asp.Net Core. -- You can just let **abp** find the localization key for the property. It will try to find "DisplayName:{PropertyName}" or "{PropertyName}" localization keys, if `label` or `[DisplayName]` attributes are not set. +You can set the label of the input in several ways: +- You can use the `Label` attribute to set the label directly. This property does not automatically localize the text. To localize the label, use `label="@L["{LocalizationKey}"].Value"`. +- You can set it using `[Display(name="{LocalizationKey}")]` attribute ASP.NET Core. +- You can just let **abp** find the localization key for the property. If the `label` or `[DisplayName]` attributes are not set, it tries to find the localization by convention. For example `DisplayName:{YourPropertyName}` or `{YourPropertyName}`. If your property name is FullName, it will search for `DisplayName:FullName` or `{FullName}`. \ No newline at end of file