From 0f9faf8eed0fa140516f80b8c3a2bd7e20687dd6 Mon Sep 17 00:00:00 2001
From: mhartington <mikehartington@gmail.com>
Date: Thu, 1 Nov 2018 10:50:35 -0400
Subject: [PATCH] doc(): add new docs around tabs

---
 core/src/components/tab-button/readme.md      | 21 +--------
 .../components/tab-button/usage/javascript.md | 43 +++++++++++++++++++
 core/src/components/tabs/readme.md            | 22 +++++++++-
 core/src/components/tabs/usage/angular.md     | 43 +++++++++++++++----
 core/src/components/tabs/usage/javascript.md  | 27 ++++++++++--
 5 files changed, 124 insertions(+), 32 deletions(-)
 create mode 100644 core/src/components/tab-button/usage/javascript.md

diff --git a/core/src/components/tab-button/readme.md b/core/src/components/tab-button/readme.md
index f4a6e34e02..10641c628e 100644
--- a/core/src/components/tab-button/readme.md
+++ b/core/src/components/tab-button/readme.md
@@ -1,25 +1,8 @@
 # ion-tab-bar
 
-Tab bar is the UI component that implements the array of button of `ion-tabs`. It's provided by default when `ion-tabs` is used, though, this "implicit" tab bar can not be customized.
+Tab bar is a UI component that hold the array of [tab buttons](../tab-button). The Tab bar can provide a global setting for different tab/icon layouts as well as different positions for the bar itself.
 
-In order to have a custom tab bar, it should be provided in user's markup as direct children of `ion-tabs`:
-
-```html
-<style>
-  ion-tab-bar {
-    font-size: 20px;
-  }
-</style>
-
-<ion-tabs>
-  <!-- User tabs  -->
-  <ion-tab></ion-tab>
-  <ion-tab></ion-tab>
-
-  <!-- User provided ion-tab-bar that can be customized -->
-  <ion-tab-bar color="dark" layout="icon-only">
-</ion-tabs>
-```
+See the [Tabs API Docs](../Tabs/) for more details on configuring Tabs.
 
 
 <!-- Auto Generated Below -->
diff --git a/core/src/components/tab-button/usage/javascript.md b/core/src/components/tab-button/usage/javascript.md
new file mode 100644
index 0000000000..41b996b72a
--- /dev/null
+++ b/core/src/components/tab-button/usage/javascript.md
@@ -0,0 +1,43 @@
+```html
+<ion-tabs>
+
+  <ion-tab-bar>
+    <ion-tab-button tab="schedule" href="/app/tabs/(schedule:schedule)">
+      <ion-icon name="calendar"></ion-icon>
+      <ion-label>Schedule</ion-label>
+    </ion-tab-button>
+
+    <ion-tab-button tab="speakers" href="/app/tabs/(speakers:speakers)">
+      <ion-icon name="contacts"></ion-icon>
+      <ion-label>Speakers</ion-label>
+    </ion-tab-button>
+
+    <ion-tab-button tab="map" href="/app/tabs/(map:map)">
+      <ion-icon name="map"></ion-icon>
+      <ion-label>Map</ion-label>
+    </ion-tab-button>
+
+    <ion-tab-button tab="about" href="/app/tabs/(about:about)">
+      <ion-icon name="information-circle"></ion-icon>
+      <ion-label>About</ion-label>
+    </ion-tab-button>
+  </ion-tab-bar>
+
+  <ion-tab tab="schedule">
+    <ion-router-outlet name="schedule"></ion-router-outlet>
+  </ion-tab>
+
+  <ion-tab tab="speakers">
+    <ion-router-outlet name="speakers"></ion-router-outlet>
+  </ion-tab>
+
+  <ion-tab tab="map">
+    <ion-router-outlet name="map"></ion-router-outlet>
+  </ion-tab>
+
+  <ion-tab tab="about">
+    <ion-router-outlet name="about"></ion-router-outlet>
+  </ion-tab>
+
+</ion-tabs>
+```
diff --git a/core/src/components/tabs/readme.md b/core/src/components/tabs/readme.md
index a9341c2a41..71ac26111c 100644
--- a/core/src/components/tabs/readme.md
+++ b/core/src/components/tabs/readme.md
@@ -43,7 +43,7 @@ In order to link the button to the `ion-tab` container, a matching `tab` propert
 
 This `ion-tab-button` and `ion-tab` are now linked by the common `tab` property.
 
-The `tab` property identifies each tab, and it has to be unique within the scope of the same `ion-tabs`. It's very important to set the same property to `ion-tab` and `ion-tab-button`, even if you are only using one. e.g. You could use the `ion-tab-bar` without using `ion-tabs`. In this case you should still give each `ion-tab` the property of `tab="something"`.
+The `tab` property identifies each tab, and it has to be unique within the scope of the same `ion-tabs`. It's important to set the same property to `ion-tab` and `ion-tab-button`, even if you are only using one. e.g. You could use the `ion-tab-bar` without using `ion-tabs`. In this case you should still give each `ion-tab` the property of `tab="something"`.
 
 ### Router integration
 
@@ -61,6 +61,26 @@ Would match the following tab:
 <ion-tab tab="settings" component="settings-component"></ion-tab>
 ```
 
+### Angular Router integration
+
+Using tabs with Angular's router is fairly straight forward. The only additional requirement is that an href is supplied to update the browser URL. In this way, the correct `ion-tab` is selected, and the URl is updated.
+
+```html
+
+<ion-tabs>
+  <ion-tab-bar>
+    <ion-tab-button tab="schedule" href="/app/tabs/(schedule:schedule)">
+      <ion-icon name="calendar"></ion-icon>
+      <ion-label>Schedule</ion-label>
+    </ion-tab-button>
+  </ion-tab-bar>
+
+  <ion-tab tab="schedule">
+    <ion-router-outlet name="schedule"></ion-router-outlet>
+  </ion-tab>
+</ion-tabs>
+```
+
 <!-- Auto Generated Below -->
 
 
diff --git a/core/src/components/tabs/usage/angular.md b/core/src/components/tabs/usage/angular.md
index 56fae51dfd..41b996b72a 100644
--- a/core/src/components/tabs/usage/angular.md
+++ b/core/src/components/tabs/usage/angular.md
@@ -1,16 +1,43 @@
 ```html
 <ion-tabs>
-  <ion-tab label="Schedule" icon="calendar" href="/app/tabs/(schedule:schedule)">
-    <ion-router-outlet stack name="schedule"></ion-router-outlet>
+
+  <ion-tab-bar>
+    <ion-tab-button tab="schedule" href="/app/tabs/(schedule:schedule)">
+      <ion-icon name="calendar"></ion-icon>
+      <ion-label>Schedule</ion-label>
+    </ion-tab-button>
+
+    <ion-tab-button tab="speakers" href="/app/tabs/(speakers:speakers)">
+      <ion-icon name="contacts"></ion-icon>
+      <ion-label>Speakers</ion-label>
+    </ion-tab-button>
+
+    <ion-tab-button tab="map" href="/app/tabs/(map:map)">
+      <ion-icon name="map"></ion-icon>
+      <ion-label>Map</ion-label>
+    </ion-tab-button>
+
+    <ion-tab-button tab="about" href="/app/tabs/(about:about)">
+      <ion-icon name="information-circle"></ion-icon>
+      <ion-label>About</ion-label>
+    </ion-tab-button>
+  </ion-tab-bar>
+
+  <ion-tab tab="schedule">
+    <ion-router-outlet name="schedule"></ion-router-outlet>
   </ion-tab>
-  <ion-tab label="Speakers" icon="contacts" href="/app/tabs/(speakers:speakers)">
-    <ion-router-outlet stack name="speakers"></ion-router-outlet>
+
+  <ion-tab tab="speakers">
+    <ion-router-outlet name="speakers"></ion-router-outlet>
   </ion-tab>
-  <ion-tab label="Map" icon="map" href="/app/tabs/(map:map)">
-    <ion-router-outlet stack name="map"></ion-router-outlet>
+
+  <ion-tab tab="map">
+    <ion-router-outlet name="map"></ion-router-outlet>
   </ion-tab>
-  <ion-tab label="About" icon="information-circle" href="/app/tabs/(about:about)">
-    <ion-router-outlet stack name="about"></ion-router-outlet>
+
+  <ion-tab tab="about">
+    <ion-router-outlet name="about"></ion-router-outlet>
   </ion-tab>
+
 </ion-tabs>
 ```
diff --git a/core/src/components/tabs/usage/javascript.md b/core/src/components/tabs/usage/javascript.md
index 721f6a57ea..d1b911884c 100644
--- a/core/src/components/tabs/usage/javascript.md
+++ b/core/src/components/tabs/usage/javascript.md
@@ -1,12 +1,31 @@
 ```html
 <ion-tabs>
-  <ion-tab label="schedule" icon="calendar" name="tab-schedule">
+  <ion-tab tab="tab-schedule">
     <ion-nav></ion-nav>
   </ion-tab>
-  <ion-tab label="speakers" icon="contacts" name="tab-speaker">
+  <ion-tab tab="tab-speaker">
     <ion-nav></ion-nav>
   </ion-tab>
-  <ion-tab label="map" icon="map" component="page-map"></ion-tab>
-  <ion-tab label="about" icon="information-circle" component="page-about"></ion-tab>
+  <ion-tab tab="tab-map" component="page-map"></ion-tab>
+  <ion-tab tab="tab-about" component="page-about"></ion-tab>
+
+  <ion-tab-bar>
+    <ion-tab-button tab="tab-schedule">
+      <ion-icon name="calendar"></ion-icon>
+      <ion-label>Schedule</ion-label>
+    </ion-tab-button>
+    <ion-tab-button tab="tab-speaker">
+      <ion-icon name="contacts"></ion-icon>
+      <ion-label>Speakers</ion-label>
+    </ion-tab-button>
+    <ion-tab-button tab="tab-map">
+      <ion-icon name="map"></ion-icon>
+      <ion-label>Map</ion-label>
+    </ion-tab-button>
+    <ion-tab-button tab="tab-about">
+      <ion-icon name="information-circle"></ion-icon>
+      <ion-label>About</ion-label>
+    </ion-tab-button>
+  </ion-tab-bar>
 </ion-tabs>
 ```