<commit_before>---
layout: "v2_fluid/docs_base"
version: "nightly"
versionHref: "/docs/v2/nightly"
path: ""
category: api
id: "tab"
title: "Tab"
header_sub_title: "Ionic API Documentation"
doc: "Tab"
docType: "class"
show_preview_device: true
preview_device_url: "/docs/v2/demos/src/tabs/"
angular_controller: APIDemoCtrl 
---









<h1 class="api-title">
<a class="anchor" name="tab" href="#tab"></a>

Tab
<h3><code>ion-tab</code></h3>






</h1>

<a class="improve-v2-docs" href="http://github.com/driftyco/ionic/edit/master//src/components/tabs/tab.ts#L14">
Improve this doc
</a>






<p>The Tab component, written <code>&lt;ion-tab&gt;</code>, is styled based on the mode and should
be used in conjunction with the <a href="../Tabs/">Tabs</a> component.</p>
<p>Each <code>ion-tab</code> is a declarative component for a <a href="../../../navigation/NavController/">NavController</a>.
Basically, each tab is a <code>NavController</code>. For more information on using
navigation controllers take a look at the <a href="../../../navigation/NavController/">NavController API Docs</a>.</p>
<p>See the <a href="../Tabs/">Tabs API Docs</a> for more details on configuring Tabs.</p>




<!-- @usage tag -->

<h2><a class="anchor" name="usage" href="#usage"></a>Usage</h2>

<p>To add a basic tab, you can use the following markup where the <code>root</code> property
is the page you want to load for that tab, <code>tabTitle</code> is the optional text to
display on the tab, and <code>tabIcon</code> is the optional <a href="../../icon/Icon/">icon</a>.</p>
<pre><code class="lang-html">&lt;ion-tabs&gt;
 &lt;ion-tab [root]=&quot;chatRoot&quot; tabTitle=&quot;Chat&quot; tabIcon=&quot;chat&quot;&gt;&lt;ion-tab&gt;
&lt;/ion-tabs&gt;
</code></pre>
<p>Then, in your class you can set <code>chatRoot</code> to an imported class:</p>
<pre><code class="lang-ts">import { ChatPage } from &#39;../chat/chat&#39;;

export class Tabs {
  // here we&#39;ll set the property of chatRoot to
  // the imported class of ChatPage
  chatRoot = ChatPage;

  constructor() {

  }
}
</code></pre>
<p>You can also pass some parameters to the root page of the tab through
<code>rootParams</code>. Below we pass <code>chatParams</code> to the Chat tab:</p>
<pre><code class="lang-html">&lt;ion-tabs&gt;
 &lt;ion-tab [root]=&quot;chatRoot&quot; [rootParams]=&quot;chatParams&quot; tabTitle=&quot;Chat&quot; tabIcon=&quot;chat&quot;&gt;&lt;ion-tab&gt;
&lt;/ion-tabs&gt;<commit_msg>Automated build of ionic  v2.0.0-rc.3 driftyco/ionic@3fd9a205d7c23dcd92b5b12b53a0fd1a712c54f8<commit_after>---
layout: "v2_fluid/docs_base"
version: "nightly"
versionHref: "/docs/v2/nightly"
path: ""
category: api
id: "tab"
title: "Tab"
header_sub_title: "Ionic API Documentation"
doc: "Tab"
docType: "class"
show_preview_device: true
preview_device_url: "/docs/v2/demos/src/tabs/"
angular_controller: APIDemoCtrl 
---









<h1 class="api-title">
<a class="anchor" name="tab" href="#tab"></a>

Tab
<h3><code>ion-tab</code></h3>






</h1>

<a class="improve-v2-docs" href="http://github.com/driftyco/ionic/edit/master//src/components/tabs/tab.ts#L14">
Improve this doc
</a>






<p>The Tab component, written <code>&lt;ion-tab&gt;</code>, is styled based on the mode and should
be used in conjunction with the <a href="../Tabs/">Tabs</a> component.</p>
<p>Each <code>ion-tab</code> is a declarative component for a <a href="../../../navigation/NavController/">NavController</a>.
Basically, each tab is a <code>NavController</code>. For more information on using
navigation controllers take a look at the <a href="../../../navigation/NavController/">NavController API Docs</a>.</p>
<p>See the <a href="../Tabs/">Tabs API Docs</a> for more details on configuring Tabs.</p>




<!-- @usage tag -->

<h2><a class="anchor" name="usage" href="#usage"></a>Usage</h2>

<p>To add a basic tab, you can use the following markup where the <code>root</code> property
is the page you want to load for that tab, <code>tabTitle</code> is the optional text to
display on the tab, and <code>tabIcon</code> is the optional <a href="../../icon/Icon/">icon</a>.</p>
<pre><code class="lang-html">&lt;ion-tabs&gt;
 &lt;ion-tab [root]=&quot;chatRoot&quot; tabTitle=&quot;Chat&quot; tabIcon=&quot;chat&quot;&gt;&lt;/ion-tab&gt;
&lt;/ion-tabs&gt;
</code></pre>
<p>Then, in your class you can set <code>chatRoot</code> to an imported class:</p>
<pre><code class="lang-ts">import { ChatPage } from &#39;../chat/chat&#39;;

export class Tabs {
  // here we&#39;ll set the property of chatRoot to
  // the imported class of ChatPage
  chatRoot = ChatPage;

  constructor() {

  }
}
</code></pre>
<p>You can also pass some parameters to the root page of the tab through
<code>rootParams</code>. Below we pass <code>chatParams</code> to the Chat tab:</p>
<pre><code class="lang-html">&lt;ion-tabs&gt;
 &lt;ion-tab [root]=&quot;chatRoot&quot; [rootParams]=&quot;chatParams&quot; tabTitle=&quot;Chat&quot; tabIcon=&quot;chat&quot;&gt;&lt;ion-tab&gt;
&lt;/ion-tabs&gt;
{'fraction_non_alphanumeric': 0.1875125075045027, 'fraction_numerical': 0.012607564538723234, 'mean_word_length': 4.764705882352941, 'pattern_counts': {'":': 0, '<': 133, '<?xml version=': 0, '>': 133, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5209776', 'n_tokens_mistral': 1834, 'n_tokens_neox': 1745, 'n_words': 472}