Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Spec] TabView #7

Closed
Tracked by #22
jsuarezruiz opened this issue May 18, 2020 · 1 comment
Closed
Tracked by #22

[Spec] TabView #7

jsuarezruiz opened this issue May 18, 2020 · 1 comment
Labels
t/enhancement ☀️ New feature or request

Comments

@jsuarezruiz
Copy link
Contributor

TabView

We can have tabs using Shell. However, what happens if we want to have nested tabs within a specific section (Example: Grid)?, what if we want to fully customize each tab?. In these cases, we would need a Custom Renderer so far...

The TabView is a way to display a set of tabs and their respective content. TabView is useful for displaying several content while giving a user the capability to customize mostly everything.

tabview

NOTE: TabView is a cross-platform view that takes over when native tabs hit their limits, such as positioning with layouts, styling, and non-uniform styling like a raised button.

API

Next, a list with the TabView properties, events and visualstates.

Properties

TabView Properties

Property Type Description
TabItemsSource IEnumerable A collection used to generate the TabView's tab items.
TabViewItemDataTemplate DataTemplate the template the Tab View uses to generate tab items' header.
TabContentDataTemplate DataTemplate The template the Tab View uses to generate tab items' content.
IsCyclical Bool Enable or disable cyclical tabs navigation.
IsLazy Bool Enable or disable lazy tabs loading.
SelectedIndex Int Gets or sets the currently selected tab. Default is 0.
TabStripPlacement TabStripPlacement The TabStrip placement (top or bottom).
TabStripBackground Brush The TabStrip background.
TabIndicatorBrush Brush The TabIndicator background.
TabIndicatorHeight double The TabIndicator height.
TabIndicatorWidth double The TabIndicator width.
TabIndicatorPlacement TabIndicatorPlacement
TabIndicatorView View The TabIndicator content.
TabContentBackground Brush The tab content background.
TabContentHeight Double The tab content height.
TabStripHeight Double The TabStrip height.
TabContentHeight Double The tab content height.
HasTabStripShadow Bool Show or hide the TabStrip shadow effect.
IsTabTransitionEnabled Bool Enable or disable the transition between tabs.
IsSwipeEnabled Bool Enable or disable the swipe gesture.

TabViewItem Properties

Property Type Description
Text String The text of the tab.
TextColor Color The text color of the tab.
TextColorSelected Color The text color of the selected tab.
FontSize FontSize The font size used in the tab text.
FontSizeSelected FontSize The font size used in the selected tab.
FontFamily String The font family used in the tab.
FontFamilySelected String The font family used in the selected tab.
FontAttributes FontAttributes The font attributes used in the tab.
FontAttributesSelected FontAttributes The font attributes used in the selected tab.
Icon ImageSource The icon of the tab.
IconSelected ImageSource The ImageSource used as icon in the selected tab.
Content View The content of the tab. Is View, can use anything as content.
BadgeText Bool The badge text used in the tab.
BadgeTextColor Color The badge text color used in the tab.
BadgeTextColorSelected Color The badge text color used in the selected tab.
BadgeBackgroundColor Color The badge color used in the tab.
BadgeBackgroundColorSelected Color The badge color used in the selected tab.
IsSelected Bool a bool that indicate if the tab is selected or not.
TapCommand ICommand Command that is executed when the user tap a tab.
TapCommandParameter object The tap command parameter.

Events

TabView Events

Event Description
SelectionChanged Event that is raised when the selected tab changed.
Scrolled Event that is raised when is swiping between tabs.

TabViewItem Events

Event Description
TabTapped Event that is raised when the user tap a tab.

VisualStates

The Visual State Manager (VSM) provides a structured way to make visual changes to the user interface from code.
The VSM introduces the concept of visual states. TabView can have several different visual appearances depending on its underlying state.

TabView have four specific VisualStates:

  • CurrentTabVisualState
  • NextTabVisualState
  • PreviousTabVisualState
  • DefaultTabVisualState

Scenarios

Let's see some samples covering common scenarios.

Basic Tabs

Let's see a basic example:

<TabView 
    TabStripPlacement="Bottom"
    TabStripBackgroundColor="Blue">
    <TabViewItem
        Icon="triangle.png"
        Text="Tab 1">
        <Grid 
            BackgroundColor="Gray">
            <Label
                HorizontalOptions="Center"
                VerticalOptions="Center"
                Text="TabContent1" />
        </Grid>
    </TabViewItem>
    <TabViewItem
        Icon="circle.png"
        Text="Tab 2">
        <Grid>
            <Label    
                HorizontalOptions="Center"
                VerticalOptions="Center"
                Text="TabContent2" />
        </Grid>
    </TabViewItem>
</TabView>

basic-tabs

TabItemsSource

Using TabItemsSource (dynamic tabs):

<TabView
    TabItemsSource="{Binding Monkeys}"
    TabViewItemDataTemplate="{StaticResource TabViewItemTemplate}"
    TabContentDataTemplate="{StaticResource TabContentTemplate}" />

tabitemssource

Custom Tabs

The appearance of each tab can be customized:

<ControlTemplate
    x:Key="TabItemTemplate">
    <Grid>
    ...
    </Grid>
</ControlTemplate>

<TabView>
    <TabViewItem
        Text="Tab 1"
        ControlTemplate="{StaticResource TabItemTemplate}">
    </TabViewItem>
</TabView>

custom-tabs

Cyclical Tabs

Do you want to navigate between the tabs cyclically?

<TabView
    IsCyclical="True">
    ...
</TabView>

iscyclical

Lazy Loading

Lazy tab loading:

<TabView
    IsLazy="True">
    ...
</TabView>

lazy-tabs

Tab Transitions and TabViewItem animations

Can use Maui animations to customize the transition between each tab, animate the tab when appears or disappears, or even animate the badge when appears or disappears.

<TabView>
    <TabView.TabTransition>
        <local:CustomTabTransition />
    </TabView.TabTransition>
    <TabViewItem
        Text="Tab 1">      
            <TabViewItem.TabAnimation>
                <local:CustomTabViewItemAnimation />
            </TabViewItem.TabAnimation>
        <Grid 
            BackgroundColor="LawnGreen">
            <Label
                HorizontalOptions="Center"
                VerticalOptions="Center"
                Text="TabContent1" />
        </Grid>
    </TabViewItem>
    ...
</TabView>

custom-tabs-animation

Using VisualStates

Can use different visual states to customize the current tab, the next tab, etc.

<Grid>
    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup x:Name="TabViewStates">
            <VisualState x:Name="CurrentTab">
                <VisualState.Setters>
                    <Setter Property="Opacity" Value="1" />
                </VisualState.Setters>
            </VisualState>
            <VisualState x:Name="PreviousTab">
                <VisualState.Setters>
                    <Setter Property="Opacity" Value="0.7" />
                </VisualState.Setters>
            </VisualState>
            <VisualState x:Name="NextTab">
                <VisualState.Setters>
                    <Setter Property="Opacity" Value="0.7" />
                </VisualState.Setters>
            </VisualState>
            <VisualState x:Name="DefaultTab">
                <VisualState.Setters>
                    <Setter Property="Opacity" Value="0.9" />
                </VisualState.Setters>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
    <Label Text="{Binding Index}" HorizontalOptions="Center" VerticalOptions="End" />
</Grid>

Create Tabs using C#

You can use XAML or C# to create the UI in Maui. Let's see how we would create tabs using C#.

var tabView = new Tabs
{
    TabStripPlacement = TabStripPlacement.Bottom,
    TabStripBackgroundColor = Color.Blue,
    TabStripHeight = 60,
    TabIndicatorColor = Color.Yellow,
    TabContentBackgroundColor = Color.Yellow
};

var tabViewItem1 = new TabViewItem
{
    Icon = "triangle.png",
    Text = "Tab 1",
    TextColor = Color.White,
    TextColorSelected = Color.Yellow,
};

var tabViewItem1Content = new Grid
{
    BackgroundColor = Color.Gray
};

var label1 = new Label
{
    HorizontalOptions = LayoutOptions.Center,
    VerticalOptions = LayoutOptions.Center,
    Text = "TabContent1"
};

tabViewItem1Content.Children.Add(label1);

tabViewItem1.Content = tabViewItem1Content;

tabView.TabItems.Add(tabViewItem1);

var tabViewItem2 = new TabViewItem
{
    Icon = "circle.png",
    Text = "Tab 2",
    TextColor = Color.White,
    TextColorSelected = Color.Yellow
};

var tabViewItem2Content = new Grid
{
    BackgroundColor = Color.OrangeRed
};

var label2 = new Label
{
    HorizontalOptions = LayoutOptions.Center,
    VerticalOptions = LayoutOptions.Center,
    Text = "TabContent2"
};

tabViewItem2Content.Children.Add(label2);

tabViewItem2.Content = tabViewItem2Content;

tabView.TabItems.Add(tabViewItem2);

Using Styles

Can customize the appearance of the tab content, tab strip, tab item, etc. using XAML styles or CSS.

Using XAML:

<Style
    x:Key="TabItemStyle"
    TargetType="TabViewItem">
    <Setter
        Property="FontSize"
        Value="12" />
    <Setter
        Property="TextColor"
        Value="#979797" />
</Style>

Using CSS:

.customTabItem {
    font-size: medium;
    text-color: red;
}

Difficulty : Medium

@jsuarezruiz jsuarezruiz added the t/enhancement ☀️ New feature or request label May 18, 2020
@jsuarezruiz jsuarezruiz changed the title TabView [Spec] TabView May 18, 2020
@jsuarezruiz
Copy link
Contributor Author

Moved to Xamarin.Forms.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
t/enhancement ☀️ New feature or request
Projects
None yet
Development

No branches or pull requests

1 participant