Merge pull request #255 from syncfusion-content/ug_update

Updated the code and content for OtpInput and TabView.

Author: naveenkumar-sanjeevirayan

maui-toolkit/Otp-Input/Input-Types.md

@@ -11,7 +11,7 @@ documentation: ug
 
 ## Types
 
-This section explains the the various types of OTP (One-Time Password) input component, explaining their default behaviors and appropriate use cases.
+This section explains the various types of OTP (One-Time Password) input component, explaining their default behaviors and appropriate use cases.
 
 ### Number type
 

maui-toolkit/Otp-Input/OtpInput-Customization.md

@@ -122,28 +122,6 @@ SfOtpInput otpInput = new SfOtpInput()
 
 ![InputLength Image for OTP Input](images/length.png)
 
-## Disable inputs
-
-You can disable the OTP Input component by using the `IsEnabled` property. By default, this property's value is set to `True.`
-
-{% tabs %}
-{% highlight xaml %}
-
-<otpInput:SfOtpInput IsEnabled="False" />
-
-{% endhighlight %}
-{% highlight C# %}
-
-SfOtpInput otpInput = new SfOtpInput()
-{
-    IsEnabled = false
-};
-
-{% endhighlight %}
-{% endtabs %}
-
-![Disabled Image for OTP Input](images/isenabled.png)
-
 ## Input background
 
 You can set the `InputBackground` property to any color to customize the appearance of the input fields. The `InputBackground` property applies only when `StylingMode` is set to `Filled.`
@@ -218,15 +196,15 @@ You can set the `MaskCharacter` property to any character to define how the mask
 {% tabs %}
 {% highlight xaml %}
 
-<otpInput:SfOtpInput Type="Password" MaskCharacter="*" />
+<otpInput:SfOtpInput Type="Password" MaskCharacter="#" />
 
 {% endhighlight %}
 {% highlight C# %}
 
 SfOtpInput otpInput = new SfOtpInput()
 {
     Type = OtpInputType.Password,
-    MaskCharacter = '*'
+    MaskCharacter = '#'
 };
 
 {% endhighlight %}

maui-toolkit/TabView/CenterButton-Customization.md

@@ -9,11 +9,11 @@ documentation: ug
 
 # Center Button Customization in .NET MAUI Tab View (SfTabView)
 
-This section explains how to enable and customize The center button in .NET MAUI [SfTabView.](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.TabView.SfTabView.html)
+This section explains how to enable and customize the center button in .NET MAUI [SfTabView.](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.TabView.SfTabView.html)
 
 ## Enable the center button 
 
-You can enable the center button in Tab View by setting the `IsCenterButtonEnable` property to `True.`
+You can enable the center button in Tab View by setting the `IsCenterButtonEnabled` property to `True.`
 
 {% tabs %}
 
@@ -38,27 +38,22 @@ public MainPage()
 {% endtabs %}
 
 ## Customize the center button
-You can customize the center button using the properties of `CenterButtonSetting.` The following properties are used to customize the view of the center button `Background,` `Stroke,` `StrokeThickness,` `CornerRadius,` `TextColor,` `Height,` `Title,` `FontAttributes,` `FontFamily,` `FontSize,` `Width,` `ImageSource,` `ImageSize,` and `DisplayMode.`
+
+You can customize the center button using the properties of `CenterButtonSettings`. The following properties are used to customize the view of center button `Background`, `Stroke`,`StrokeThickness`, `CornerRadius`, `TextColor`, `Height`, `Title`, `FontAttributes`, `FontFamily`, `FontSize`, `Width`, `ImageSource`, `ImageSize`, and `DisplayMode`.
 
 {% tabs %}
 
 {% highlight xaml %}
 
 <tabView:SfTabView.CenterButtonSettings>
-     <tabView:CenterButtonSettings Title="Home" 
-                              Height="70" 
-                              Width="80"
-                              Background="White" 
-                              Stroke="HotPink" 
-                              StrokeThickness="3" 
-                              CornerRadius="10" 
-                              TextColor="Green" 
-                              ImageSource="image.png" 
-                              ImageSize="24" 
-                              DisplayMode="ImageWithText" 
-                              FontFamily="SevillanaRegular" 
-                              FontAttributes="Bold" 
-                              FontSize="16" />
+  <tabView:CenterButtonSettings Height="45"
+                                Width="45"
+                                CornerRadius="50"
+                                Background="#6750A4"
+                                ImageSize="25"
+                                DisplayMode="Image"
+                                ImageSource="image.png">
+  </tabView:CenterButtonSettings>
 </tabView:SfTabView.CenterButtonSettings>
 
 {% endhighlight %}
@@ -71,16 +66,13 @@ public MainPage()
     SfTabView tabView = new SfTabView();
     CenterButtonSettings centerButtonSettings = new CenterButtonSettings()
     {
-        Height = 80,
-        Width = 100,
-        Title = "Center Button",
-        FontAttributes = FontAttributes.Bold,
-        TextColor = Colors.Green,
-        DisplayMode = CenterButtonDisplayMode.ImageWithText,
-        ImageSource = "Home.png",
-        ImageSize = 24,
-        FontFamily = "SevillanaRegular",
-        CornerRadius = new CornerRadius(10),
+        Height = 45,
+        Width = 45,
+        DisplayMode = CenterButtonDisplayMode.Image,
+        ImageSize = 25,
+        Background = Color.FromArgb("#6750A4");
+        CornerRadius = new CornerRadius(50),
+        ImageSource = "image.png"        
     };
 
     tabView.CenterButtonSettings = centerButtonSettings;
@@ -89,6 +81,8 @@ public MainPage()
 
 {% endtabs %}
 
+![.NET MAUI Customize the center button](images/CenterButton-Customizaton.jpg) 
+
 ## Center button tapped event
 
 When the center button is tapped, the `CenterButtonTapped` event occurs. Using this event we can set alert messages.

maui-toolkit/TabView/Tab-Bar-Customization.md

@@ -119,35 +119,15 @@ tabView.HeaderHorizontalTextAlignment = TextAlignment.Center;
 
 ![Tab header text alignment](images/HorizontalTextAlignmentCenter.png) 
 
-
-## Enable content transition
-
-The .NET MAUI Tab View allows users to enable or disable the transition animation for tab content when switching between tabs using `IsContentTransitionEnabled` property. 
-
-{% tabs %}
-
-{% highlight xaml %}
-<tabView:SfTabView IsContentTransitionEnabled="True" ContentTransitionDuration = 1000/>
-{% endhighlight %}
-
-{% highlight C# %}
-SfTabView tabView = new SfTabView();
-tabView.IsContentTransitionEnabled = "True"; 
-tabView.ContentTransitionDuration = 1000; 
-{% endhighlight %}
-
-{% endtabs %}
-
-
 ## Tab header alignment 
 
 The .NET MAUI TabView allows users to customize the header position using the `TabHeaderAlignment` property, providing greater flexibility in tab layout customization.
 
 By default, the header is positioned at the Start. This property supports the following values:
 
-*   **Start** - Positions the tab header at the beginning of the tab view.
-*   **Center** - Aligns the tab header at the center of the tab view.
-*   **End** - Places the tab header at the end of the tab view.
+*   **Start** - Positions the tab header at the beginning of the Tab View.
+*   **Center** - Aligns the tab header at the center of the Tab View.
+*   **End** - Places the tab header at the end of the Tab View.
 
 
 N> The `TabHeaderAlignment` property is applicable only when the `TabWidthMode` is set to SizeToContent.

maui-toolkit/TabView/Tab-Item-Customization.md

@@ -622,6 +622,24 @@ tabView.ContentTransitionDuration = 300;
 
 {% endtabs %}
 
+## Enable content transition
+
+The .NET MAUI Tab View allows users to enable or disable the transition animation for tab content when switching between tabs using `IsContentTransitionEnabled` property. 
+
+{% tabs %}
+
+{% highlight xaml %}
+<tabView:SfTabView IsContentTransitionEnabled="True" ContentTransitionDuration = "1000"/>
+{% endhighlight %}
+
+{% highlight C# %}
+SfTabView tabView = new SfTabView();
+tabView.IsContentTransitionEnabled = "True"; 
+tabView.ContentTransitionDuration = 1000; 
+{% endhighlight %}
+
+{% endtabs %}
+
 ## Image size
 
 You can customize the image size in the .NET MAUI TabView control by setting the [ImageSize](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.TabView.SfTabItem.html#Syncfusion_Maui_Toolkit_TabView_SfTabItem_ImageSize) property.