Update tabs to reflect the material design bottom navigation spec:
https://material.google.com/components/bottom-navigation.html#bottom-nav
igation-usage
BREAKING CHANGES:
Material design mode defaults have changed to the following:
```
tabsHighlight: false,
tabsPlacement: 'bottom',
tabsHideOnSubPages: false
```
`tabsHighlight` can now be passed as an attribute on the `ion-tabs`
element, this allows for tabs to be added in multiple places inside of
an app and enable the highlight on some of them.
references #7455
Use NavController as the public API, and NavControllerBase as the
internal API. Refactored all app/nav/tabs unit tests and created
centralized mocking functions.
The Material Design spec has added “Bottom Navigation”, which is what
Ionic calls “Tabs”. Ionic’s MD mode now follows the updated Material
Design spec with the tabbar placed on the bottom. Additionally, any tab
sub pages do not automatically cover up the tabbar. Covering up the
tabbar is still possible by using a modal, however, it is no longer a
default feature for MD mode.
BREAKING CHANGES:
Tab input/config options have been renamed. The following options were
renamed:
- `tabbarHighlight` -> `tabsHighlight`
- `tabbarLayout` -> `tabsLayout`
- `tabSubPages` -> `tabsHideOnSubPages`
- `tabbarPlacement` -> `tabsPlacement`
The previous names have been deprecated. They will still work in the
current release but will be removed in the future so please update to
the new names.
references #7143
BREAKING CHANGES:
- Overlay components, such as Alert or Modals, should now be created
using its injected provider.
- Overlays now have the `present()` method on the overlay’s instance,
rather than using `nav.present(overlayInstance)`.
- All overlays now present on top of all app content, to include menus.
- Below is an example of the change to `Alert`, but the pattern is the
same for all overlays: ActionSheet, Loading, Modal, Picker, Popover,
Toast
WAS:
```
import { NavController, Alert } from ‘ionic-angular’;
constructor(private nav: NavController) {
}
doAlert() {
let alert = Alert.create({
title: 'Alert',
});
this.nav.present(alert);
}
```
NOW:
```
import { AlertController } from ‘ionic-angular’;
constructor(private alertCtrl: AlertController) {
}
doAlert() {
let alert = this.alertCtrl.create({
title: 'Alert'
});
alert.present();
}
```
Toolbars can be stacked up vertically in `<ion-header>`,
`<ion-content>`, and `<ion-footer>` elements. However, toolbars also
come with borders on both the top and bottom of the toolbar. To give
developers full control of the design, Ionic also includes the
`no-border-bottom` and `no-border-top` attributes. For example,
sometimes two vertically stacked toolbars may have different background
colors, in this case it might be best to leave a border between them.
However, if they have the same background color, the app may look best
without a border between them. The main point here is, it's entirely up
to the app's design to decide when and when not to show borders between
toolbars, and to do so then each toolbar can individually set
`no-border-bottom` and `no-border-top` attributes.
* fix(navigation): fixes bug where navigating to page with child-nav immediately re-enables app
fixes bug where navigating to page with child-nav immediately re-enables app
closes#6752
* test(navigation): added some additional tests
added some additional tests
* test(tabs): added multiple nested children test
added multiple nested children test
BREAKING CHANGES:
- Lifecycle method prefixes have changed to `ionView`
- `onPageLoaded` renamed to `ionViewLoaded`
- `onPageWillEnter` renamed to `ionViewWillEnter`
- `onPageDidEnter` renamed to `ionViewDidEnter`
- `onPageWillLeave` renamed to `ionViewWillLeave`
- `onPageDidLeave` renamed to `ionViewDidLeave`
- `onPageWillUnload` renamed to `ionViewWillUnload`
- `onPageDidUnload` renamed to `ionViewDidUnload`
