javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-16 18:17:31 +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 116 additions and 118 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
angular/test/nav/src/app/lazy-load-tabs/tabs.html
View File

@ -2,15 +2,15 @@
<ion-tabs>
<ion-tab tabTitle="Tab 1" tabIcon="home" href="/lazy-load-tabs/tabs/(tab1:mustang)">
<ion-tab label="Tab 1" icon="home" href="/lazy-load-tabs/tabs/(tab1:mustang)">
<ion-router-outlet name="tab1"></ion-router-outlet>
</ion-tab>
<ion-tab tabTitle="Tab 2" tabIcon="heart" href="/lazy-load-tabs/tabs/(tab2:camaro)">
<ion-tab label="Tab 2" icon="heart" href="/lazy-load-tabs/tabs/(tab2:camaro)">
<ion-router-outlet name="tab2"></ion-router-outlet>
</ion-tab>
<ion-tab tabTitle="Tab 3" tabIcon="star" href="/lazy-load-tabs/tabs/(tab3:charger)">
<ion-tab label="Tab 3" icon="star" href="/lazy-load-tabs/tabs/(tab3:charger)">
<ion-router-outlet name="tab3"></ion-router-outlet>
</ion-tab>

6
angular/test/nav/src/app/simple-tabs/tabs.html
View File

@ -2,15 +2,15 @@
<ion-tabs>
<ion-tab tabTitle="Tab 1" tabIcon="home" href="/lazy-load-tabs/tabs/(tab1:mustang)">
<ion-tab label="Tab 1" icon="home" href="/lazy-load-tabs/tabs/(tab1:mustang)">
<ion-router-outlet name="tab1"></ion-router-outlet>
</ion-tab>
<ion-tab tabTitle="Tab 2" tabIcon="heart" href="/lazy-load-tabs/tabs/(tab2:camaro)">
<ion-tab label="Tab 2" icon="heart" href="/lazy-load-tabs/tabs/(tab2:camaro)">
<ion-router-outlet name="tab2"></ion-router-outlet>
</ion-tab>
<ion-tab tabTitle="Tab 3" tabIcon="star" href="/lazy-load-tabs/tabs/(tab3:charger)">
<ion-tab label="Tab 3" icon="star" href="/lazy-load-tabs/tabs/(tab3:charger)">
<ion-router-outlet name="tab3"></ion-router-outlet>
</ion-tab>

68
core/src/components.d.ts vendored
View File

@ -609,7 +609,7 @@ declare global {
*/
'mode': 'ios' | 'md';
/**
* The text property is used to provide custom text for the back button while using the default look-and-feel
* The text property is used to provide custom text for the back button while using the default look-and-feel.
*/
'text': string|undefined;
}
@ -637,7 +637,7 @@ declare global {
*/
'mode'?: 'ios' | 'md';
/**
* The text property is used to provide custom text for the back button while using the default look-and-feel
* The text property is used to provide custom text for the back button while using the default look-and-feel.
*/
'text'?: string|undefined;
}
@ -5757,6 +5757,14 @@ declare global {
declare global {
interface HTMLIonTabElement extends HTMLStencilElement {
'active': boolean;
/**
* The badge for the tab.
*/
'badge': string;
/**
* The badge color for the tab button.
*/
'badgeStyle': string;
'btnId': string;
/**
* The component to display inside of the tab.
@ -5772,6 +5780,14 @@ declare global {
* The URL which will be used as the `href` within this tab's `<ion-tab-button>` anchor.
*/
'href': string;
/**
* The icon for the tab.
*/
'icon': string;
/**
* The title of the tab.
*/
'label': string;
/**
* The name of the tab.
*/
@ -5785,22 +5801,6 @@ declare global {
* If true, the tab button is visible within the tabbar. Defaults to `true`.
*/
'show': boolean;
/**
* The badge for the tab.
*/
'tabBadge': string;
/**
* The badge color for the tab button.
*/
'tabBadgeStyle': string;
/**
* The icon for the tab.
*/
'tabIcon': string;
/**
* The title of the tab.
*/
'tabTitle': string;
/**
* If true, hide the tabs on child pages.
*/
@ -5824,6 +5824,14 @@ declare global {
namespace JSXElements {
export interface IonTabAttributes extends HTMLAttributes {
'active'?: boolean;
/**
* The badge for the tab.
*/
'badge'?: string;
/**
* The badge color for the tab button.
*/
'badgeStyle'?: string;
'btnId'?: string;
/**
* The component to display inside of the tab.
@ -5838,6 +5846,14 @@ declare global {
* The URL which will be used as the `href` within this tab's `<ion-tab-button>` anchor.
*/
'href'?: string;
/**
* The icon for the tab.
*/
'icon'?: string;
/**
* The title of the tab.
*/
'label'?: string;
/**
* The name of the tab.
*/
@ -5854,22 +5870,6 @@ declare global {
* If true, the tab button is visible within the tabbar. Defaults to `true`.
*/
'show'?: boolean;
/**
* The badge for the tab.
*/
'tabBadge'?: string;
/**
* The badge color for the tab button.
*/
'tabBadgeStyle'?: string;
/**
* The icon for the tab.
*/
'tabIcon'?: string;
/**
* The title of the tab.
*/
'tabTitle'?: string;
/**
* If true, hide the tabs on child pages.
*/

6
core/src/components/back-button/back-button.tsx
View File

@ -23,7 +23,7 @@ export class BackButton {
/**
* The text property is used to provide custom text for the back button while using the
* default look-and-feel
* default look-and-feel.
*/
@Prop() text: string|undefined;
@ -55,14 +55,14 @@ export class BackButton {
render() {
const backButtonIcon = this.icon || this.config.get('backButtonIcon', 'arrow-back');
const backButtonText = this.text != null ? this.text : this.config.get('backButtonText', this.mode === 'ios' ? 'Back' : '');
const backButtonText = this.text != null ? this.text : this.config.get('backButtonText', 'Back');
return (
<button
class='back-button-inner'
onClick={(ev) => this.onClick(ev)}>
{ backButtonIcon && <ion-icon name={backButtonIcon}/> }
{ backButtonText && <span class='button-text'>{backButtonText}</span> }
{ this.mode === 'ios' && backButtonText && <span class='button-text'>{backButtonText}</span> }
{ this.mode === 'md' && <ion-ripple-effect useTapClick={true} /> }
</button>
);

4
core/src/components/back-button/readme.md
View File

@ -71,7 +71,7 @@ For more information, see [Platform Styles](/docs/theming/platform-specific-styl
The text property is used to provide custom text for the back button while using the
default look-and-feel
default look-and-feel.
## Attributes
@ -100,7 +100,7 @@ For more information, see [Platform Styles](/docs/theming/platform-specific-styl
The text property is used to provide custom text for the back button while using the
default look-and-feel
default look-and-feel.

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

@ -51,11 +51,11 @@ export class TabButton {
hostData() {
const selected = this.selected;
const tab = this.tab;
const hasTitle = !!tab.tabTitle;
const hasIcon = !!tab.tabIcon;
const hasTitle = !!tab.label;
const hasIcon = !!tab.icon;
const hasTitleOnly = (hasTitle && !hasIcon);
const hasIconOnly = (hasIcon && !hasTitle);
const hasBadge = !!tab.tabBadge;
const hasBadge = !!tab.badge;
return {
'role': 'tab',
'id': tab.btnId,
@ -84,9 +84,9 @@ export class TabButton {
class='tab-cover'
onKeyUp={this.onKeyUp.bind(this)}
onBlur={this.onBlur.bind(this)}>
{ tab.tabIcon && <ion-icon class='tab-button-icon' name={tab.tabIcon}></ion-icon> }
{ tab.tabTitle && <span class='tab-button-text'>{tab.tabTitle}</span> }
{ tab.tabBadge && <ion-badge class='tab-badge' color={tab.tabBadgeStyle}>{tab.tabBadge}</ion-badge> }
{ tab.icon && <ion-icon class='tab-button-icon' name={tab.icon}></ion-icon> }
{ tab.label && <span class='tab-button-text'>{tab.label}</span> }
{ tab.badge && <ion-badge class='tab-badge' color={tab.badgeStyle}>{tab.badge}</ion-badge> }
{ this.mode === 'md' && <ion-ripple-effect useTapClick={true}/> }
</a>
];

120
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,34 +135,6 @@ boolean
If true, the tab button is visible within the tabbar. Defaults to `true`.
#### tabBadge
string
The badge for the tab.
#### tabBadgeStyle
string
The badge color for the tab button.
#### tabIcon
string
The icon for the tab.
#### tabTitle
string
The title of the tab.
#### tabsHideOnSubPages
boolean
@ -149,6 +149,20 @@ If true, hide the tabs on child pages.
boolean
#### badge
string
The badge for the tab.
#### badge-style
string
The badge color for the tab button.
#### btn-id
string
@ -180,6 +194,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
@ -201,34 +229,6 @@ boolean
If true, the tab button is visible within the tabbar. Defaults to `true`.
#### tab-badge
string
The badge for the tab.
#### tab-badge-style
string
The badge color for the tab button.
#### tab-icon
string
The icon for the tab.
#### tab-title
string
The title of the tab.
#### tabs-hide-on-sub-pages
boolean

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.