diff --git a/CHANGELOG.md b/CHANGELOG.md index e9f8920260e..d07d9559336 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -361,9 +361,9 @@ Windows platform support has been added to Ionic! The Windows mode is abbreviate ### Refactor -* **alert:** remove tabbarIcons and add tabbarLayout which accepts different values ([8cfebe1](https://github.com/driftyco/ionic/commit/8cfebe1)), closes [#5625](https://github.com/driftyco/ionic/issues/5625) * **menu:** improve menu get lookup ([004e635](https://github.com/driftyco/ionic/commit/004e635)), closes [#5535](https://github.com/driftyco/ionic/issues/5535) * **tabs:** remove duplicated styles from imports ([d5ebf3f](https://github.com/driftyco/ionic/commit/d5ebf3f)), closes [#5624](https://github.com/driftyco/ionic/issues/5624) +* **tabs:** remove tabbarIcons and add tabbarLayout which accepts different values ([8cfebe1](https://github.com/driftyco/ionic/commit/8cfebe1)), closes [#5625](https://github.com/driftyco/ionic/issues/5625) * **searchbar:** add class to searchbar when hideCancel is passed ([a0f0004](https://github.com/driftyco/ionic/commit/a0f0004)) ### Breaking Changes diff --git a/ionic/components/tabs/tabs.ts b/ionic/components/tabs/tabs.ts index 599f1e0c2d4..8134f1f4601 100644 --- a/ionic/components/tabs/tabs.ts +++ b/ionic/components/tabs/tabs.ts @@ -25,8 +25,8 @@ import {isBlank, isTrueProperty} from '../../util/util'; * ### Placement * * The position of the tabs relative to the content varies based on - * the mode. By default the tabs are placed at the bottom of the screen - * in `ios` mode, and at the top for `wp` and `md` mode. You can + * the mode. By default, the tabs are placed at the bottom of the screen + * for `ios` mode, and at the top for the `md` and `wp` modes. You can * configure the position using the `tabbarPlacement` property on the * `` element, or in your app's [config](../../config/Config/). * See the [Input Properties](#input-properties) below for the available @@ -36,7 +36,7 @@ import {isBlank, isTrueProperty} from '../../util/util'; * * The layout for all of the tabs can be defined using the `tabbarLayout` * property. If the individual tab has a title and icon, the icons will - * show on top of the title in a tab. All tabs can be changed by setting + * show on top of the title by default. All tabs can be changed by setting * the value of `tabbarLayout` on the `` element, or in your * app's [config](../../config/Config/). For example, this is useful if * you want to show tabs with a title only on Android, but show icons @@ -60,7 +60,7 @@ import {isBlank, isTrueProperty} from '../../util/util'; * Since the index starts at `0`, this will select the 3rd tab which has * root set to `tab3Root`. You can also grab the `Tabs` instance and call * the `select()` method. This requires the `` element to have - * an `id`. For example, set the `id` to `myTabs`: + * an `id`. For example, set the value of `id` to `myTabs`: * * ```html * @@ -70,8 +70,9 @@ import {isBlank, isTrueProperty} from '../../util/util'; * * ``` * - * Then in your JavaScript you can grab the `Tabs` instance and call `select()`. - * In the following code `app` is of type [`IonicApp`](../../app/IonicApp/): + * Then in your JavaScript you can grab the `Tabs` instance and call `select()`, + * passing the index of the tab as the argument. In the following code `app` is + * of type [`IonicApp`](../../app/IonicApp/): * *```js * constructor(app: IonicApp) { @@ -163,11 +164,6 @@ export class Tabs extends Ion { */ @Input() preloadTabs: any; - /** - * @input {string} Deprecated, use `tabbarLayout` instead. Set the position of the tabbar's icons: `top`, `bottom`, `left`, `right`, `hide`. - */ - @Input() tabbarIcons: string; - /** * @input {string} Set the tabbar layout: `icon-top`, `icon-left`, `icon-right`, `icon-bottom`, `icon-hide`, `title-hide`. */ @@ -241,11 +237,6 @@ export class Tabs extends Ion { ngAfterViewInit() { this._setConfig('tabbarPlacement', 'bottom'); this._setConfig('tabbarLayout', 'icon-top'); - this._setConfig('tabbarIcons', 'top'); - - if (this.tabbarIcons) { - console.warn('DEPRECATION WARNING: "tabbarIcons" is no longer supported and will be removed in next major release. Use "tabbarLayout" instead. Available values: "icon-top", "icon-left", "icon-right", "icon-bottom", "icon-hide", "title-hide".'); - } if (this._useHighlight) { this._platform.onResize(() => { diff --git a/ionic/components/tabs/tabs.wp.scss b/ionic/components/tabs/tabs.wp.scss index 0ba15bd8c3f..dfe4e3e1032 100644 --- a/ionic/components/tabs/tabs.wp.scss +++ b/ionic/components/tabs/tabs.wp.scss @@ -56,13 +56,13 @@ tabbar { font-size: $tabbar-wp-item-icon-size; } -[tabbarIcons=bottom] .tab-button { +[tabbarLayout=icon-bottom] .tab-button { padding-top: 8px; padding-bottom: 8px; } -[tabbarIcons=right] .tab-button, -[tabbarIcons=left] .tab-button { +[tabbarLayout=icon-right] .tab-button, +[tabbarLayout=icon-left] .tab-button { padding-bottom: 10px; ion-icon { @@ -70,6 +70,8 @@ tabbar { } } +[tabbarLayout=icon-hide] .tab-button, +[tabbarLayout=title-hide] .tab-button, .tab-button.icon-only, .tab-button.has-title-only { padding: 6px 10px;