Tabs is a horizontal stack for implementing Tab Menu. It is the base class for your customized TabMenu class. Each tab has a title and Icon and destination page name.

To use this component, install the Zebble.Tab nuget package. 
It's open source and available on GitHub. Also we welcome any contributions to enhace it.

 

Create a tabs control:

Note: This is usually done in the template, as opposed to each page. See the new project template for an example.

var myTabs = this.Add(new Tabs());Or in markup:

<Tabs id="myTabs"/>

Adding tab to TabMenu: 

myTabs.AddTab<Destinition page>("Title", Icon");

Example:  <Tabs Id="myTabs">
    <Tabs.Tab  Label.Text="Settings" Icon.Path="Images/Icons/Settings.png"></Tabs.Tab>
    <Tabs.Tab  Label.Text="Map" Icon.Path="Images/Icons/Map.png"></Tabs.Tab>
    <Tabs.Tab  Label.Text="Types" Icon.Path="Images/Icons/Types.png"></Tabs.Tab>
    <Tabs.Tab  Label.Text="Videos" Icon.Path="Images/Icons/Video.png"></Tabs.Tab>
    <Tabs.Tab  Label.Text="Share" Icon.Path="Images/Icons/Share.png"></Tabs.Tab>
    <Tabs.Tab  Label.Text="Check" Icon.Path="Images/Icons/Check.png" ></Tabs.Tab>
  </Tabs>

 

 

 

 

Note1: Based on the standard design, For iOS, tabs should appear at the bottom of the screen and for Android, it should be at the top of the screen, below the navigation bar.

 

Note2: If you want to seot other properties, you should use C# codes and then use them in your markup.

 

 

 

 

 

 

 

Tab with a custom action:

If your tab needs to do anything other than a simple navigation you can easily create it using the following method:

var customTab = myTabs.Add(new Tab("Tab text"));
customTab.Icon.Path = "images/tabs/my-icon.png";
// You can define the custom action here:
customTab.Tapped += Nav.Go<Pages.SomePage>(new { myParam = "..." });You can also specify when this tab should be highlighted as "current".

if (...)
{
     customTab.Selected = true;
}  Alternatively, you can specify a page type for automatic highlighting. This way whenever the Nav.Stack contains that page, then it matches that (regardless of the nav parameters) the tab will be highlighted. For example when the user is on that page, or if the user is on a sub-page of that page (with BACK being enabled on the nav bar).

customTab.TargetPageType = typeof(Pages.SomePage);

Events:

• on-Flashed: Raised when the object is flashed.
• on-Initialized: Raised when the object is created and rendered.
• on-Initializing: Raised when the object is being created and rendered.
• on-LongPressed: Raised when user clicked on the object for a long time.
• on-PanFinished: Raised when user panned on the object.
• on-Panning: Raised when user starts to pan on the object.
• on-PreRendered: Raised when the object object is not started to rendered before rendering.
• on-Swiped: Raised when user swiped on the object.
• on-Tapped: Raised when user tapped on the object.