Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 27 additions & 0 deletions maui-toolkit/Bottom-Sheet/BottomSheet-Customization.md
Original file line number Diff line number Diff line change
Expand Up @@ -415,3 +415,30 @@ SfBottomSheet bottomSheet = new SfBottomSheet

{% endhighlight %}
{% endtabs %}

## Animation duration

The [AnimationDuration](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.BottomSheet.SfBottomSheet.html#Syncfusion_Maui_Toolkit_BottomSheet_SfBottomSheet_AnimationDuration) property in `SfBottomSheet` is used to control the duration of the animation when opening and closing the bottom sheet. It allows you to customize how fast or slow the transition occurs.

{% tabs %}
{% highlight xaml %}

<bottomSheet:SfBottomSheet x:Name="bottomSheet"
IsOpen="True"
AnimationDuration="500">
<bottomSheet:SfBottomSheet.BottomSheetContent>
<!--Add your content here-->
</bottomSheet:SfBottomSheet.BottomSheetContent>
</bottomSheet:SfBottomSheet>


{% endhighlight %}
{% highlight c# %}

SfBottomSheet bottomSheet = new SfBottomSheet
{
AnimationDuration = 500,
};

{% endhighlight %}
{% endtabs %}
41 changes: 40 additions & 1 deletion maui-toolkit/NavigationDrawer/Side-Pane-Content.md
Original file line number Diff line number Diff line change
Expand Up @@ -297,4 +297,43 @@ this.Content = navigationDrawer;

{% endtabs %}

![Content](Images/panel-content/navigation_drawer_content.png)
![Content](Images/panel-content/navigation_drawer_content.png)

## Drawer content background

You can customize the background color of the drawer’s content area by setting the [ContentBackground](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.NavigationDrawer.DrawerSettings.html#Syncfusion_Maui_Toolkit_NavigationDrawer_DrawerSettings_ContentBackground) property in `DrawerSettings`.

{% tabs %}

{% highlight xaml %}

<navigationdrawer:SfNavigationDrawer x:Name="navigationDrawer">
<navigationdrawer:SfNavigationDrawer.DrawerSettings>
<navigationdrawer:DrawerSettings ContentBackground="Red">
<navigationdrawer:DrawerSettings.DrawerContentView>
<Grid BackgroundColor="#6750A4">
<VerticalStackLayout VerticalOptions="Center"
HorizontalOptions="Center">
<Label Text="Drawer Content"/>
</VerticalStackLayout>
</Grid>
</navigationdrawer:DrawerSettings.DrawerContentView>
</navigationdrawer:DrawerSettings>
</navigationdrawer:SfNavigationDrawer.DrawerSettings>
</navigationdrawer:SfNavigationDrawer>

{% endhighlight %}

{% highlight c# %}

SfNavigationDrawer navigationDrawer = new SfNavigationDrawer();
DrawerSettings drawerSettings = new DrawerSettings()
{
ContentBackground = Colors.Red
};
navigationDrawer.DrawerSettings = drawerSettings;
this.Content = navigationDrawer;

{% endhighlight %}

{% endtabs %}
20 changes: 20 additions & 0 deletions maui-toolkit/Otp-Input/OtpInput-Customization.md
Original file line number Diff line number Diff line change
Expand Up @@ -302,3 +302,23 @@ SfOtpInput otpInput = new SfOtpInput()
{% endtabs %}

![Error state](images/error.png)

## Auto focus

The [AutoFocus](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.OtpInput.SfOtpInput.html#Syncfusion_Maui_Toolkit_OtpInput_SfOtpInput_AutoFocus) property in SfOtpInput is used to automatically set focus to the first input field when the control is loaded. This improves usability by allowing users to start entering the OTP immediately without manually selecting a field.

{% tabs %}
{% highlight xaml %}

<otpInput:SfOtpInput AutoFocus="True" />

{% endhighlight %}
{% highlight C# %}

SfOtpInput otpInput = new SfOtpInput()
{
AutoFocus = true
};

{% endhighlight %}
{% endtabs %}
19 changes: 18 additions & 1 deletion maui-toolkit/TabView/Tab-Bar-Customization.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
layout: post
title: Customize the Tab Bar in .NET MAUI Tab View (SfTabView) | Syncfusion®
description: Learn how to customize the header in Syncfusion® .NET MAUI Tab View (SfTabView) control.
description: Learn how to customize tab bar layout, header appearance, spacing, alignment, and background in Syncfusion® .NET MAUI Tab View (SfTabView) control.
platform: maui-toolkit
control: SfTabView
documentation: UG
Expand Down Expand Up @@ -145,6 +145,23 @@ SfTabView tabView = new SfTabView();

{% endtabs %}

## Header item spacing

The [HeaderItemSpacing](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.TabView.SfTabView.html#Syncfusion_Maui_Toolkit_TabView_SfTabView_HeaderItemSpacing) property is used to control the spacing between adjacent tab header items in the SfTabView. This property helps improve readability and visual alignment by adjusting the gap between each tab header.

{% tabs %}

{% highlight xaml %}
<tabView:SfTabView HeaderItemSpacing="20"/>
{% endhighlight %}

{% highlight C# %}
SfTabView tabView = new SfTabView();
tabView.HeaderItemSpacing= 20 ;
{% endhighlight %}

{% endtabs %}

## Tab bar placement options

The .NET MAUI Tab View provides two options for determining how the tab bar aligns relative to the tab content. The options are top and bottom. This can be done using the [TabBarPlacement](https://help.syncfusion.com/cr/maui-toolkit/Syncfusion.Maui.Toolkit.TabView.SfTabView.html#Syncfusion_Maui_Toolkit_TabView_SfTabView_TabBarPlacement) property.
Expand Down