Merge pull request #2780 from syncfusion-content/871738-Asp-UG

Author: PrinceOliver

ej2-asp-core-mvc/textarea/floating-label.md

@@ -42,6 +42,10 @@ The floating label functionality in the TextArea control allows the placeholder
 {% endtabs %}
 {% endif %}
 
+Output be like the below.
+
+![textarea](./images/textarea-float-label.png)
+
 ## Placeholder with localization
 
 Localization library allows to localize the placeholder text of the TextArea to different cultures using the `Locale` property.
@@ -69,6 +73,10 @@ Localization library allows to localize the placeholder text of the TextArea to
 {% endtabs %}
 {% endif %}
 
+Output be like the below.
+
+![textarea](./images/textarea-localization1.png)
+
 To load translation object in an application use `load` function of `L10n` class.
 In the below sample, `German` culture is loaded to the TextArea placeholder text.
 

ej2-asp-core-mvc/textarea/form-support.md

@@ -38,6 +38,10 @@ This integration enhances the usability of forms, allowing users to provide deta
 {% endtabs %}
 {% endif %}
 
+Output be like the below.
+
+![textarea](./images/textarea-form.png)
+
 # Integration of ##Platform_Name## TextArea control with FormValidator component
 
 TextArea control seamlessly integrates with the `FormValidator` component, allowing users to incorporate textarea inputs into form validation processes efficiently.

ej2-asp-core-mvc/textarea/images/textarea-asterisk.png

@@ -39,4 +39,8 @@ You can enforce a maximum length limit for the text input in the TextArea using
 {% endtabs %}
 {% endif %}
 
+Output be like the below.
+
+![textarea](./images/textarea-maxLength.png)
+
 When the user reaches the specified limit, the TextArea prevents further input, ensuring compliance with the defined character limit. This feature helps maintain data integrity and provides users with clear feedback on the allowed input length.

ej2-asp-core-mvc/textarea/images/textarea-color.png

@@ -43,7 +43,6 @@ The TextArea allows users to input and edit large amounts of text. Resizing this
 {% endtabs %}
 {% endif %}
 
-
 ## Width of ##Platform_Name## TextArea control
 
 You can easily customize the width of the TextArea using the [Width](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Inputs.TextArea.html#Syncfusion_EJ2_Inputs_TextArea_Width) property. This property allows precise adjustment of the TextArea's width according to the specific layout requirements of the application.

ej2-asp-core-mvc/textarea/images/textarea-filledOutlined.png

@@ -39,3 +39,7 @@ The `rows`attribute determines the initial visible number of lines within the Te
 {% endhighlight %}
 {% endtabs %}
 {% endif %}
+
+Output be like the below.
+
+![textarea](./images/textarea-rowscols.png)

ej2-asp-core-mvc/textarea/images/textarea-float-label.png

@@ -44,6 +44,10 @@ By applying these classes, users can easily customize the appearance of the Text
 
 {% endif %}
 
+Output be like the below.
+
+![textarea](./images/textarea-sizing.png)
+
 ## Filled and Outline mode
 
 The Filled and Outline modes can be enabled in the TextArea component by adding the `e-outline` or `e-filled` class to the [CssClass](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Inputs.TextArea.html#Syncfusion_EJ2_Inputs_TextArea_CssClass) API.
@@ -73,6 +77,10 @@ By adding these classes, users can choose between a filled or outline appearance
 
 {% endif %}
 
+Output be like the below.
+
+![textarea](./images/textarea-filledOutlined.png)
+
 >Note: Filled and Outline theme customization are available only with Material themes.
 
 ## Custom styling with cssClass API in TextArea
@@ -177,6 +185,10 @@ To display a static clear button in the TextArea component, you can add the `e-s
 
 {% endif %}
 
+Output be like the below.
+
+![textarea](./images/textarea-static-clear.png)
+
 ## Customize the TextArea background color and text color
 
 You can customize the TextArea styles such as background-color, text-color and border-color by overriding its default styles to achieve the desired appearance for the TextArea.
@@ -205,6 +217,10 @@ You can customize the TextArea styles such as background-color, text-color and b
 
 {% endif %}
 
+Output be like the below.
+
+![textarea](./images/textarea-color.png)
+
 ## Change the floating label color of the TextArea
 
 You can change the floating label color of the TextArea for both `success` and `warning` validation states by applying the following CSS styles.
@@ -251,6 +267,10 @@ You can change the floating label color of the TextArea for both `success` and `
 
 {% endif %}
 
+Output be like the below.
+
+![textarea](./images/textarea-floatLabel-color.png)
+
 ## Adding mandatory asterisk to placeholder
 
 To add a mandatory asterisk (*) to the placeholder in the TextArea component, you can utilize CSS to append the asterisk after the placeholder text.
@@ -288,3 +308,7 @@ To add a mandatory asterisk (*) to the placeholder in the TextArea component, yo
 {% endtabs %}
 
 {% endif %}
+
+Output be like the below.
+
+![textarea](./images/textarea-asterisk.png)