Full customizable Tabs for MAUI
Here it is! Sharpnado.Tabs
is now migrated to dotnet MAUI
\o/
https://github.com/roubachof/Sharpnado.Tabs | |
You will find all your beloved features including:
- Fully customizable
- Underlined tabs, bottom tabs, Segmented control, scrollable tabs
- Vertical tabs
- Lazy and Delayed views
- Material tabs specs full implementation
- SVG support thanks to GeometryIcon
- Badge on tabs
- Component oriented architecture
- Layout your tabs and ViewSwitcher as you want
- Shadows included in TabHost
- Bindable
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>
Find all docs and features details on github
Please go to the github repo where you will find:
- A sample app showcasing all the feature (MAUISample folder)
- Numerous screenshots and gifs
- All the possible docs you want