👁 Image
Sharpnado.Tabs.Maui 4.0.1

Pure MAUI Tabs

• Fixed tabs (android tabs style)
• Scrollable tabs
• Vertical tabs
• Material design tabs (top and leading icon)
• Lazy and Delayed views
• Support for SVG images
• Segmented tabs
• Custom shadows (neumorphism ready)
• Badges on tabs
• Circle button in tab bar
• Bottom bar tabs (ios tabs style)
• Custom tabs (be creative just implement TabItem)
• Independent ViewSwitcher
• Bindable with ItemsSource
• Pure MAUI touch effects

Installation

• In Core project, in MauiProgram.cs:

public static MauiApp CreateMauiApp()
{
 var builder = MauiApp.CreateBuilder();
 builder
 .UseMauiApp()
 .UseSharpnadoTabs(loggerEnabled: false);
}

Usage

First create a TabHostView which will contains all your tabs:

<tabs:TabHostView WidthRequest="250"
 HeightRequest="60"
 Padding="20,0"
 HorizontalOptions="Center"
 BackgroundColor="{StaticResource Gray900}"
 CornerRadius="30"
 IsSegmented="True"
 Orientation="Horizontal"
 SegmentedOutlineColor="{StaticResource Gray950}"
 SelectedIndex="{Binding Source={x:Reference Switcher}, Path=SelectedIndex, Mode=TwoWay}"
 TabType="Fixed">
 <tabs:TabHostView.Shadow>
 <Shadow Brush="{StaticResource Primary}"
 Opacity="0.7"
 Radius="30"
 Offset="0,10" />
 </tabs:TabHostView.Shadow>
 <tabs:BottomTabItem Style="{StaticResource BottomTab}" Label="M" />
 <tabs:BottomTabItem Style="{StaticResource BottomTab}" Label="A">
 <tabs:BottomTabItem.Badge>
 <tabs:BadgeView BackgroundColor="{StaticResource Tertiary}" Text="new" />
 </tabs:BottomTabItem.Badge>
 </tabs:BottomTabItem>
 <tabs:UnderlinedTabItem FontFamily="OpenSansExtraBold"
 Label="U"
 LabelSize="36"
 SelectedTabColor="{StaticResource Primary}"
 UnselectedLabelColor="{StaticResource White}" />
 <tabs:BottomTabItem Style="{StaticResource BottomTab}"
 Padding="0,0,10,0"
 Label="I">
 <tabs:BottomTabItem.Badge>
 <tabs:BadgeView BackgroundColor="{StaticResource Tertiary}" Text="2" />
 </tabs:BottomTabItem.Badge>
 </tabs:BottomTabItem>
</tabs:TabHostView>

Then bind the SelectedIndex with a ViewSwitcher that will accordingly select your views.

<tabs:ViewSwitcher x:Name="Switcher"
 Grid.RowSpan="3"
 Margin="0"
 Animate="True"
 SelectedIndex="{Binding SelectedViewModelIndex, Mode=TwoWay}">
 <tabs:DelayedView x:TypeArguments="views:TabM"
 AccentColor="{StaticResource Primary}"
 Animate="True"
 BindingContext="{Binding HomePageViewModel}"
 UseActivityIndicator="True" />
 <tabs:DelayedView x:TypeArguments="views:TabA"
 AccentColor="{StaticResource Primary}"
 Animate="True"
 UseActivityIndicator="True" />
 <tabs:DelayedView x:TypeArguments="views:TabU"
 AccentColor="{StaticResource Primary}"
 Animate="True"
 UseActivityIndicator="True" />
 <tabs:LazyView x:TypeArguments="views:TabI" Animate="True" />
</tabs:ViewSwitcher>