Sharpnado.Tabs.Maui

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

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>