mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-19 11:41:20 +08:00
refactor(tab): rename tab properties
This commit is contained in:
Adam Bradley
60
core/src/components.d.ts
vendored
60
core/src/components.d.ts
vendored
@ -5756,14 +5756,6 @@ 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.
|
||||
@ -5779,10 +5771,6 @@ 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 name of the tab.
|
||||
*/
|
||||
@ -5797,13 +5785,25 @@ declare global {
|
||||
*/
|
||||
'show': boolean;
|
||||
/**
|
||||
* If true, hide the tabs on child pages.
|
||||
* The badge for the tab.
|
||||
*/
|
||||
'tabsHideOnSubPages': boolean;
|
||||
'tabBadge': string;
|
||||
/**
|
||||
* The badge color for the tab button.
|
||||
*/
|
||||
'tabBadgeStyle': string;
|
||||
/**
|
||||
* The icon for the tab.
|
||||
*/
|
||||
'tabIcon': string;
|
||||
/**
|
||||
* The title of the tab.
|
||||
*/
|
||||
'title': string;
|
||||
'tabTitle': string;
|
||||
/**
|
||||
* If true, hide the tabs on child pages.
|
||||
*/
|
||||
'tabsHideOnSubPages': boolean;
|
||||
}
|
||||
var HTMLIonTabElement: {
|
||||
prototype: HTMLIonTabElement;
|
||||
@ -5823,14 +5823,6 @@ 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.
|
||||
@ -5845,10 +5837,6 @@ 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 name of the tab.
|
||||
*/
|
||||
@ -5866,13 +5854,25 @@ declare global {
|
||||
*/
|
||||
'show'?: boolean;
|
||||
/**
|
||||
* If true, hide the tabs on child pages.
|
||||
* The badge for the tab.
|
||||
*/
|
||||
'tabsHideOnSubPages'?: boolean;
|
||||
'tabBadge'?: string;
|
||||
/**
|
||||
* The badge color for the tab button.
|
||||
*/
|
||||
'tabBadgeStyle'?: string;
|
||||
/**
|
||||
* The icon for the tab.
|
||||
*/
|
||||
'tabIcon'?: string;
|
||||
/**
|
||||
* The title of the tab.
|
||||
*/
|
||||
'title'?: string;
|
||||
'tabTitle'?: string;
|
||||
/**
|
||||
* If true, hide the tabs on child pages.
|
||||
*/
|
||||
'tabsHideOnSubPages'?: boolean;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -208,15 +208,15 @@ class TabsPage extends HTMLElement {
|
||||
async connectedCallback() {
|
||||
this.innerHTML = `
|
||||
<ion-tabs>
|
||||
<ion-tab title='Page 1' icon='chatboxes' class='tab-one'>
|
||||
<ion-tab tab-title='Page 1' tab-icon='chatboxes' class='tab-one'>
|
||||
<ion-nav class="tab-one-nav"></ion-nav>
|
||||
</ion-tab>
|
||||
|
||||
<ion-tab title='Page 2' icon='map' class='tab-two'>
|
||||
<ion-tab tab-title='Page 2' tab-icon='map' class='tab-two'>
|
||||
<ion-nav class="tab-two-nav"></ion-nav>
|
||||
</ion-tab>
|
||||
|
||||
<ion-tab title='Page 3' icon='person' class='tab-three'>
|
||||
<ion-tab tab-title='Page 3' tab-icon='person' class='tab-three'>
|
||||
<ion-nav class="tab-three-nav"></ion-nav>
|
||||
</ion-tab>
|
||||
</ion-tabs>
|
||||
|
||||
@ -104,21 +104,21 @@
|
||||
this.innerHTML = `
|
||||
<ion-tabs>
|
||||
<ion-tab component="tab-one"
|
||||
title="Plain List"
|
||||
icon="star"></ion-tab>
|
||||
tab-title="Plain List"
|
||||
tab-icon="star"></ion-tab>
|
||||
|
||||
<ion-tab component="tab-two"
|
||||
title="Schedule"
|
||||
icon="globe"></ion-tab>
|
||||
tab-title="Schedule"
|
||||
tab-icon="globe"></ion-tab>
|
||||
|
||||
<ion-tab name="tab3"
|
||||
title="Stopwatch"
|
||||
icon="logo-facebook"
|
||||
tab-title="Stopwatch"
|
||||
tab-icon="logo-facebook"
|
||||
component="tab-three"></ion-tab>
|
||||
|
||||
<ion-tab name="tab4"
|
||||
title="Messages"
|
||||
icon="chatboxes"
|
||||
tab-title="Messages"
|
||||
tab-icon="chatboxes"
|
||||
name="tab-four">
|
||||
inline tab 4
|
||||
</ion-tab>
|
||||
|
||||
@ -121,25 +121,16 @@
|
||||
|
||||
<ion-tabs>
|
||||
|
||||
<ion-tab component="tab-one"
|
||||
title="Plain List"
|
||||
icon="star"></ion-tab>
|
||||
<ion-tab component="tab-one" tab-title="Plain List" tab-icon="star"></ion-tab>
|
||||
|
||||
<ion-tab component="tab-two"
|
||||
title="Schedule"
|
||||
icon="globe"></ion-tab>
|
||||
<ion-tab component="tab-two" tab-title="Schedule" tab-icon="globe"></ion-tab>
|
||||
|
||||
<ion-tab name="tab3"
|
||||
title="Stopwatch"
|
||||
icon="logo-facebook"
|
||||
component="tab-three"></ion-tab>
|
||||
<ion-tab component="tab-three" name="tab3" tab-title="Stopwatch" tab-icon="logo-facebook"></ion-tab>
|
||||
|
||||
<ion-tab name="tab4"
|
||||
title="Messages"
|
||||
icon="chatboxes"
|
||||
name="tab-four">
|
||||
<ion-tab name="tab4" tab-title="Messages" tab-icon="chatboxes"name="tab-four">
|
||||
inline tab 4
|
||||
</ion-tab>
|
||||
|
||||
</ion-tabs>
|
||||
|
||||
</ion-app>
|
||||
|
||||
@ -51,11 +51,11 @@ export class TabButton {
|
||||
hostData() {
|
||||
const selected = this.selected;
|
||||
const tab = this.tab;
|
||||
const hasTitle = !!tab.title;
|
||||
const hasIcon = !!tab.icon;
|
||||
const hasTitle = !!tab.tabTitle;
|
||||
const hasIcon = !!tab.tabIcon;
|
||||
const hasTitleOnly = (hasTitle && !hasIcon);
|
||||
const hasIconOnly = (hasIcon && !hasTitle);
|
||||
const hasBadge = !!tab.badge;
|
||||
const hasBadge = !!tab.tabBadge;
|
||||
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.icon && <ion-icon class='tab-button-icon' name={tab.icon}></ion-icon> }
|
||||
{ tab.title && <span class='tab-button-text'>{tab.title}</span> }
|
||||
{ tab.badge && <ion-badge class='tab-badge' color={tab.badgeStyle}>{tab.badge}</ion-badge> }
|
||||
{ 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> }
|
||||
{ this.mode === 'md' && <ion-ripple-effect useTapClick={true}/> }
|
||||
</a>
|
||||
];
|
||||
|
||||
@ -55,20 +55,6 @@ export class Tabs {
|
||||
boolean
|
||||
|
||||
|
||||
#### badge
|
||||
|
||||
string
|
||||
|
||||
The badge for the tab.
|
||||
|
||||
|
||||
#### badgeStyle
|
||||
|
||||
string
|
||||
|
||||
The badge color for the tab button.
|
||||
|
||||
|
||||
#### btnId
|
||||
|
||||
string
|
||||
@ -100,13 +86,6 @@ 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.
|
||||
|
||||
|
||||
#### name
|
||||
|
||||
string
|
||||
@ -128,6 +107,34 @@ 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
|
||||
@ -135,13 +142,6 @@ boolean
|
||||
If true, hide the tabs on child pages.
|
||||
|
||||
|
||||
#### title
|
||||
|
||||
string
|
||||
|
||||
The title of the tab.
|
||||
|
||||
|
||||
## Attributes
|
||||
|
||||
#### active
|
||||
@ -149,20 +149,6 @@ The title of the tab.
|
||||
boolean
|
||||
|
||||
|
||||
#### badge
|
||||
|
||||
string
|
||||
|
||||
The badge for the tab.
|
||||
|
||||
|
||||
#### badge-style
|
||||
|
||||
string
|
||||
|
||||
The badge color for the tab button.
|
||||
|
||||
|
||||
#### btn-id
|
||||
|
||||
string
|
||||
@ -194,13 +180,6 @@ 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.
|
||||
|
||||
|
||||
#### name
|
||||
|
||||
string
|
||||
@ -222,6 +201,34 @@ 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
|
||||
@ -229,13 +236,6 @@ boolean
|
||||
If true, hide the tabs on child pages.
|
||||
|
||||
|
||||
#### title
|
||||
|
||||
string
|
||||
|
||||
The title of the tab.
|
||||
|
||||
|
||||
## Events
|
||||
|
||||
#### ionSelect
|
||||
|
||||
@ -19,7 +19,7 @@ export class Tab {
|
||||
/**
|
||||
* The title of the tab.
|
||||
*/
|
||||
@Prop() title: string;
|
||||
@Prop() tabTitle: string;
|
||||
|
||||
/**
|
||||
* The URL which will be used as the `href` within this tab's `<ion-tab-button>` anchor.
|
||||
@ -29,17 +29,17 @@ export class Tab {
|
||||
/**
|
||||
* The icon for the tab.
|
||||
*/
|
||||
@Prop() icon: string;
|
||||
@Prop() tabIcon: string;
|
||||
|
||||
/**
|
||||
* The badge for the tab.
|
||||
*/
|
||||
@Prop() badge: string;
|
||||
@Prop() tabBadge: string;
|
||||
|
||||
/**
|
||||
* The badge color for the tab button.
|
||||
*/
|
||||
@Prop() badgeStyle = 'default';
|
||||
@Prop() tabBadgeStyle = 'default';
|
||||
|
||||
/**
|
||||
* The component to display inside of the tab.
|
||||
@ -87,7 +87,7 @@ export class Tab {
|
||||
componentWillLoad() {
|
||||
if (Build.isDev) {
|
||||
if (this.component && this.el.childElementCount > 0) {
|
||||
console.error('You can not use a lazy-loaded component in a tab and inlineed content at the same time.' +
|
||||
console.error('You can not use a lazy-loaded component in a tab and inlined content at the same time.' +
|
||||
`- Remove the component attribute in: <ion-tab component="${this.component}">` +
|
||||
` or` +
|
||||
`- Remove the embeded content inside the ion-tab: <ion-tab></ion-tab>`);
|
||||
|
||||
@ -10,7 +10,7 @@
|
||||
|
||||
<ion-app>
|
||||
<ion-tabs>
|
||||
<ion-tab title="Plain List" icon="star" path="">
|
||||
<ion-tab tab-title="Plain List" tab-icon="star" path="">
|
||||
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
@ -23,7 +23,7 @@
|
||||
|
||||
</ion-tab>
|
||||
|
||||
<ion-tab title="Schedule" icon="globe" path="tab2">
|
||||
<ion-tab tab-title="Schedule" tab-icon="globe" path="tab2">
|
||||
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
@ -36,7 +36,7 @@
|
||||
|
||||
</ion-tab>
|
||||
|
||||
<ion-tab title="Stopwatch" icon="logo-facebook" path="tab3">
|
||||
<ion-tab tab-title="Stopwatch" tab-icon="logo-facebook" path="tab3">
|
||||
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
@ -50,8 +50,8 @@
|
||||
</ion-tab>
|
||||
|
||||
<ion-tab disabled
|
||||
title="Messages"
|
||||
icon="chatboxes"
|
||||
tab-title="Messages"
|
||||
tab-icon="chatboxes"
|
||||
component="page-one"
|
||||
path="tab4">
|
||||
</ion-tab>
|
||||
|
||||
@ -250,15 +250,15 @@
|
||||
|
||||
<ion-app useRouter='false'>
|
||||
<ion-tabs>
|
||||
<ion-tab title="Plain List" icon="star" path="">
|
||||
<ion-tab tab-title="Plain List" tab-icon="star" path="">
|
||||
<ion-nav root="page-one"></ion-nav>
|
||||
</ion-tab>
|
||||
|
||||
<ion-tab title="Schedule" icon="globe" path="tab2">
|
||||
<ion-tab tab-title="Schedule" tab-icon="globe" path="tab2">
|
||||
<ion-nav root="page-four"></ion-nav>
|
||||
</ion-tab>
|
||||
|
||||
<ion-tab title="Stopwatch" icon="logo-facebook" path="tab3">
|
||||
<ion-tab tab-title="Stopwatch" tab-icon="logo-facebook" path="tab3">
|
||||
<ion-nav root="page-seven"></ion-nav>
|
||||
</ion-tab>
|
||||
</ion-tabs>
|
||||
|
||||
@ -10,7 +10,7 @@
|
||||
|
||||
<ion-app>
|
||||
<ion-tabs>
|
||||
<ion-tab title="Plain List" icon="star" path="">
|
||||
<ion-tab tab-title="Plain List" tab-icon="star" path="">
|
||||
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
@ -23,7 +23,7 @@
|
||||
|
||||
</ion-tab>
|
||||
|
||||
<ion-tab title="Schedule" icon="globe" path="tab2">
|
||||
<ion-tab tab-title="Schedule" tab-icon="globe" path="tab2">
|
||||
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
@ -36,7 +36,7 @@
|
||||
|
||||
</ion-tab>
|
||||
|
||||
<ion-tab title="Stopwatch" icon="logo-facebook" path="tab3">
|
||||
<ion-tab tab-title="Stopwatch" tab-icon="logo-facebook" path="tab3">
|
||||
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
@ -50,8 +50,8 @@
|
||||
</ion-tab>
|
||||
|
||||
<ion-tab disabled
|
||||
title="Messages"
|
||||
icon="chatboxes"
|
||||
tab-title="Messages"
|
||||
tab-icon="chatboxes"
|
||||
component="page-one"
|
||||
path="tab4">
|
||||
</ion-tab>
|
||||
|
||||
@ -11,21 +11,21 @@
|
||||
|
||||
<ion-app>
|
||||
<ion-tabs scrollable="true" tabbar-placement="top" tabbar-highlight="true">
|
||||
<ion-tab title="Plain List" icon="star"></ion-tab>
|
||||
<ion-tab title="Schedule Long Text" icon="globe"></ion-tab>
|
||||
<ion-tab title="Stopwatch" icon="logo-facebook"></ion-tab>
|
||||
<ion-tab title="Messages" icon="chatboxes"></ion-tab>
|
||||
<ion-tab title="Messages 2" icon="chatboxes"></ion-tab>
|
||||
<ion-tab title="Messages 3" icon="chatboxes"></ion-tab>
|
||||
<ion-tab title="Messages 4" icon="chatboxes"></ion-tab>
|
||||
<ion-tab title="Messages 5" icon="chatboxes"></ion-tab>
|
||||
<ion-tab title="Messages 6" icon="chatboxes"></ion-tab>
|
||||
<ion-tab title="Messages 7" icon="chatboxes"></ion-tab>
|
||||
<ion-tab title="Messages 8" icon="chatboxes"></ion-tab>
|
||||
<ion-tab title="Messages 9" icon="chatboxes"></ion-tab>
|
||||
<ion-tab title="Messages 10" icon="chatboxes"></ion-tab>
|
||||
<ion-tab title="Messages 11" icon="chatboxes"></ion-tab>
|
||||
<ion-tab title="Messages 12" icon="chatboxes"></ion-tab>
|
||||
<ion-tab tab-title="Plain List" tab-icon="star"></ion-tab>
|
||||
<ion-tab tab-title="Schedule Long Text" tab-icon="globe"></ion-tab>
|
||||
<ion-tab tab-title="Stopwatch" tab-icon="logo-facebook"></ion-tab>
|
||||
<ion-tab tab-title="Messages" tab-icon="chatboxes"></ion-tab>
|
||||
<ion-tab tab-title="Messages 2" tab-icon="chatboxes"></ion-tab>
|
||||
<ion-tab tab-title="Messages 3" tab-icon="chatboxes"></ion-tab>
|
||||
<ion-tab tab-title="Messages 4" tab-icon="chatboxes"></ion-tab>
|
||||
<ion-tab tab-title="Messages 5" tab-icon="chatboxes"></ion-tab>
|
||||
<ion-tab tab-title="Messages 6" tab-icon="chatboxes"></ion-tab>
|
||||
<ion-tab tab-title="Messages 7" tab-icon="chatboxes"></ion-tab>
|
||||
<ion-tab tab-title="Messages 8" tab-icon="chatboxes"></ion-tab>
|
||||
<ion-tab tab-title="Messages 9" tab-icon="chatboxes"></ion-tab>
|
||||
<ion-tab tab-title="Messages 10" tab-icon="chatboxes"></ion-tab>
|
||||
<ion-tab tab-title="Messages 11" tab-icon="chatboxes"></ion-tab>
|
||||
<ion-tab tab-title="Messages 12" tab-icon="chatboxes"></ion-tab>
|
||||
</ion-tabs>
|
||||
|
||||
<ion-nav-controller></ion-nav-controller>
|
||||
|
||||
@ -13,25 +13,25 @@
|
||||
|
||||
<ion-app>
|
||||
<ion-tabs color="primary" translucent>
|
||||
<ion-tab title="Today" icon="calendar" path="" root="translucent-page-tab">
|
||||
<ion-tab tab-title="Today" tab-icon="calendar" path="" root="translucent-page-tab">
|
||||
<ion-route path="" component="translucent-page-tab"></ion-route>
|
||||
</ion-tab>
|
||||
|
||||
<ion-tab title="Games" icon="planet" root="page-two">
|
||||
<ion-tab tab-title="Games" tab-icon="planet" root="page-two">
|
||||
<ion-route path="" component="page-two"></ion-route>
|
||||
<ion-route path="path/to/page/three" component="page-three"></ion-route>
|
||||
</ion-tab>
|
||||
|
||||
<ion-tab title="Apps" icon="logo-buffer" root="page-three">
|
||||
<ion-tab tab-title="Apps" tab-icon="logo-buffer" root="page-three">
|
||||
<ion-route path="/" component="page-three"></ion-route>
|
||||
</ion-tab>
|
||||
|
||||
<ion-tab title="Updates" icon="download" badge="7" badge-style="danger" root="translucent-page-tab">
|
||||
<ion-tab tab-title="Updates" tab-icon="download" badge="7" badge-style="danger" root="translucent-page-tab">
|
||||
<ion-route component="page-one"></ion-route>
|
||||
<ion-route path="paginaaaa-two" component="page-two"></ion-route>
|
||||
</ion-tab>
|
||||
|
||||
<ion-tab title="Search" icon="search">
|
||||
<ion-tab tab-title="Search" tab-icon="search">
|
||||
<ion-route path="" component="translucent-page-tab"></ion-route>
|
||||
</ion-tab>
|
||||
</ion-tabs>
|
||||
|
||||
@ -11,11 +11,11 @@
|
||||
</head>
|
||||
<body>
|
||||
<ion-tabs>
|
||||
<ion-tab title="Tab One" icon="star" path="">
|
||||
<ion-tab tab-title="Tab One" tab-icon="star" path="">
|
||||
<div class="div-one" slot="not-initialized">Div One</div>
|
||||
</ion-tab>
|
||||
|
||||
<ion-tab title="Tab Two" icon="globe" path="tab2">
|
||||
<ion-tab tab-title="Tab Two" tab-icon="globe" path="tab2">
|
||||
<div class="div-two" slot="not-initialized">Div Two</div>
|
||||
</ion-tab>
|
||||
</ion-tabs>
|
||||
|
||||
Reference in New Issue
Block a user