javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-10 00:27:41 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(tabs): rename [tabTitle] -> [label]

Browse Source
This commit is contained in:
Manu Mtz.-Almeida
2018-04-03 13:37:07 +02:00
parent 1f78390c84
commit ae2cae635d
8 changed files with 110 additions and 112 deletions
Download Patch File Download Diff File Expand all files Collapse all files

108
core/src/components/tab/readme.md
View File

@ -10,12 +10,12 @@ navigation controllers take a look at the [NavController API Docs](../../../navi
See the [Tabs API Docs](../Tabs/) for more details on configuring Tabs.
To add a basic tab, you can use the following markup where the `root` property
is the page you want to load for that tab, `tabTitle` is the optional text to
display on the tab, and `tabIcon` is the optional [icon](../../icon/Icon/).
is the page you want to load for that tab, `label` is the optional text to
display on the tab, and `icon` is the optional [icon](../../icon/Icon/).
```html
<ion-tabs>
<ion-tab [root]="chatRoot" tabTitle="Chat" tabIcon="chat"></ion-tab>
<ion-tab [root]="chatRoot" label="Chat" icon="chat"></ion-tab>
</ion-tabs>
```
@ -27,7 +27,7 @@ the tabs.
```html
<ion-tabs>
<ion-tab (ionSelect)="chat()" tabTitle="Show Modal"></ion-tab>
<ion-tab (ionSelect)="chat()" label="Show Modal"></ion-tab>
</ion-tabs>pop
```
@ -55,6 +55,20 @@ export class Tabs {
boolean
#### badge
string
The badge for the tab.
#### badgeStyle
string
The badge color for the tab button.
#### btnId
string
@ -86,6 +100,20 @@ string
The URL which will be used as the `href` within this tab's `<ion-tab-button>` anchor.
#### icon
string
The icon for the tab.
#### label
string
The title of the tab.
#### name
string
@ -107,46 +135,32 @@ boolean
If true, the tab button is visible within the tabbar. Defaults to `true`.
#### tabBadge
#### tabsHideOnSubPages
string
boolean
The badge for the tab.
If true, hide the tabs on child pages.
#### tabBadgeStyle
## Attributes
string
#### active
The badge color for the tab button.
boolean
#### tabIcon
#### badge
string
The icon for the tab.
The badge for the tab.
#### tabTitle
#### badge-style
string
The title of the tab.
#### tabsHideOnSubPages
boolean
If true, hide the tabs on child pages.
## Attributes
#### active
boolean
The badge color for the tab button.
#### btn-id
@ -180,53 +194,39 @@ string
The URL which will be used as the `href` within this tab's `<ion-tab-button>` anchor.
#### name
#### icon
string
The name of the tab.
#### selected
boolean
If true, the tab will be selected. Defaults to `false`.
#### show
boolean
If true, the tab button is visible within the tabbar. Defaults to `true`.
The icon for the tab.
#### tab-badge
#### label
string
The badge for the tab.
The title of the tab.
#### tab-badge-style
#### name
string
The badge color for the tab button.
The name of the tab.
#### tab-icon
#### selected
string
boolean
The icon for the tab.
If true, the tab will be selected. Defaults to `false`.
#### tab-title
#### show
string
boolean
The title of the tab.
If true, the tab button is visible within the tabbar. Defaults to `true`.
#### tabs-hide-on-sub-pages

12
core/src/components/tab/tab.tsx
View File

@ -1,4 +1,4 @@
import { Build, Component, Element, Event, EventEmitter, Method, Prop, State, Watch } from '@stencil/core';
import { Build, Component, Element, Event, EventEmitter, Method, Prop, Watch } from '@stencil/core';
import { FrameworkDelegate, attachComponent } from '../../utils/framework-delegate';
import { ComponentRef } from '../..';
@ -10,8 +10,6 @@ export class Tab {
private loaded = false;
@Element() el: HTMLIonTabElement;
@State() init = false;
@Prop({ mutable: true }) active = false;
@Prop() btnId: string;
@ -20,7 +18,7 @@ export class Tab {
/**
* The title of the tab.
*/
@Prop() tabTitle: string;
@Prop() label: string;
/**
* The URL which will be used as the `href` within this tab's `<ion-tab-button>` anchor.
@ -30,17 +28,17 @@ export class Tab {
/**
* The icon for the tab.
*/
@Prop() tabIcon: string;
@Prop() icon: string;
/**
* The badge for the tab.
*/
@Prop() tabBadge: string;
@Prop() badge: string;
/**
* The badge color for the tab button.
*/
@Prop() tabBadgeStyle = 'default';
@Prop() badgeStyle = 'default';
/**
* The component to display inside of the tab.