javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-20 12:29:55 +08:00
Code Issues Packages Projects Releases Wiki Activity

docs(breaking): update breaking changes to include tabs properties

Browse Source 
closes #14745
This commit is contained in:
Brandy Carney
2018-07-10 14:41:55 -04:00
parent 45583bcebb
commit 4956d6d305
5 changed files with 100 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
angular/BREAKING.md
View File

@ -1057,19 +1057,55 @@ The `ios` and `ios-small` spinner's have been renamed to `lines` and `lines-smal
## Tabs ## Tabs
Some properties in `ion-tab` changed: ### Attributes Renamed
- [tabTitle] -> [label] #### `ion-tabs`
- [tabIcon] -> [icon]
- [tabBadge] -> [badge] The attributes to position the tabs, change the tab layout, enable the tab highlight and hide the tabs have been renamed.
- [tabBadgeStyle] -> [badgeStyle]
| Old Property | New Property | Notes |
|---------------------|----------------------|-------------------------------------------------|
| `tabsHighlight` | `tabbarHighlight` | |
| `tabsLayout` | `tabbarLayout` | Value `title-hide` was renamed to `icon-hide` |
| `tabsPlacement` | `tabbarPlacement` | |
| `hidden` | `tabbarHidden` | |
**Old Usage Example:**
```html
<ion-tabs tabsLayout="icon-top" tabsPlacement="bottom" tabsHighlight="true" hidden>
...
</ion-tabs>
```
**New Usage Example:**
```html
<ion-tabs tabbarLayout="icon-top" tabbarPlacement="bottom" tabbarHighlight="true" tabbarHidden>
...
</ion-tabs>
```
#### `ion-tab`
The attributes for the tab title, icon, and badge customization have been renamed.
| Old Property | New Property |
|---------------------|----------------------|
| `tabTitle` | `label` |
| `tabIcon` | `icon` |
| `tabBadge` | `badge` |
| `tabBadgeStyle` | `badgeColor` |
| `enabled` | `disabled` |
| `tabUrlPath` | `href` |
**Old Usage Example:** **Old Usage Example:**
```html ```html
<ion-tabs> <ion-tabs>
<ion-tab tabTitle="Schedule" tabIcon="add"></ion-tab> <ion-tab tabTitle="Schedule" tabIcon="add"></ion-tab>
<ion-tab tabTitle="Map" tabIcon="mao" tabBadge="2"></ion-tab> <ion-tab tabTitle="Map" tabIcon="map" tabBadge="2" tabBadgeStyle="danger" enabled="false"></ion-tab>
</ion-tabs> </ion-tabs>
``` ```
@ -1078,7 +1114,7 @@ Some properties in `ion-tab` changed:
```html ```html
<ion-tabs> <ion-tabs>
<ion-tab label="Schedule" icon="add"></ion-tab> <ion-tab label="Schedule" icon="add"></ion-tab>
<ion-tab label="Map" icon="mao" badge="2"></ion-tab> <ion-tab label="Map" icon="map" badge="2" badgeColor="danger" disabled="true"></ion-tab>
</ion-tabs> </ion-tabs>
``` ```

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

@ -3467,7 +3467,7 @@ declare global {
*/ */
'getOpenItem': () => HTMLIonItemSlidingElement | undefined; 'getOpenItem': () => HTMLIonItemSlidingElement | undefined;
/** /**
* If true, the list will have margin around it and rounded corners. Defaults to `"false"`. * If true, the list will have margin around it and rounded corners. Defaults to `false`.
*/ */
'inset': boolean; 'inset': boolean;
/** /**
@ -3501,7 +3501,7 @@ declare global {
namespace JSXElements { namespace JSXElements {
export interface IonListAttributes extends HTMLAttributes { export interface IonListAttributes extends HTMLAttributes {
/** /**
* If true, the list will have margin around it and rounded corners. Defaults to `"false"`. * If true, the list will have margin around it and rounded corners. Defaults to `false`.
*/ */
'inset'?: boolean; 'inset'?: boolean;
/** /**
@ -6940,7 +6940,7 @@ declare global {
'color': Color; 'color': Color;
'mode': Mode; 'mode': Mode;
/** /**
* If the tab is selected or not * If true, the tab button will be selected. Defaults to `false`.
*/ */
'selected': boolean; 'selected': boolean;
/** /**
@ -6984,7 +6984,7 @@ declare global {
*/ */
'onIonTabbarClick'?: (event: CustomEvent<HTMLIonTabElement>) => void; 'onIonTabbarClick'?: (event: CustomEvent<HTMLIonTabElement>) => void;
/** /**
* If the tab is selected or not * If true, the tab button will be selected. Defaults to `false`.
*/ */
'selected'?: boolean; 'selected'?: boolean;
/** /**
@ -7001,7 +7001,7 @@ declare global {
namespace StencilComponents { namespace StencilComponents {
interface IonTab { interface IonTab {
/** /**
* If the tab is active or not * If true, sets the tab as the active tab.
*/ */
'active': boolean; 'active': boolean;
/** /**
@ -7020,6 +7020,9 @@ declare global {
* The component to display inside of the tab. * The component to display inside of the tab.
*/ */
'component': ComponentRef; 'component': ComponentRef;
/**
* hidden
*/
'delegate': FrameworkDelegate; 'delegate': FrameworkDelegate;
/** /**
* If true, the user cannot interact with the tab. Defaults to `false`. * If true, the user cannot interact with the tab. Defaults to `false`.
@ -7038,7 +7041,7 @@ declare global {
*/ */
'icon': string; 'icon': string;
/** /**
* The title of the tab. * The label of the tab.
*/ */
'label': string; 'label': string;
/** /**
@ -7084,7 +7087,7 @@ declare global {
namespace JSXElements { namespace JSXElements {
export interface IonTabAttributes extends HTMLAttributes { export interface IonTabAttributes extends HTMLAttributes {
/** /**
* If the tab is active or not * If true, sets the tab as the active tab.
*/ */
'active'?: boolean; 'active'?: boolean;
/** /**
@ -7103,6 +7106,9 @@ declare global {
* The component to display inside of the tab. * The component to display inside of the tab.
*/ */
'component'?: ComponentRef; 'component'?: ComponentRef;
/**
* hidden
*/
'delegate'?: FrameworkDelegate; 'delegate'?: FrameworkDelegate;
/** /**
* If true, the user cannot interact with the tab. Defaults to `false`. * If true, the user cannot interact with the tab. Defaults to `false`.
@ -7117,7 +7123,7 @@ declare global {
*/ */
'icon'?: string; 'icon'?: string;
/** /**
* The title of the tab. * The label of the tab.
*/ */
'label'?: string; 'label'?: string;
/** /**
@ -7151,20 +7157,20 @@ declare global {
interface IonTabbar { interface IonTabbar {
'color': Color; 'color': Color;
/** /**
* If the tabbar should include the highlight on the active tab * If true, show the tab highlight bar under the selected tab.
*/ */
'highlight': boolean; 'highlight': boolean;
/** /**
* The layout of the title and icons * Set the layout of the text and icon in the tabbar. Available options: `"icon-top"`, `"icon-start"`, `"icon-end"`, `"icon-bottom"`, `"icon-hide"`, `"label-hide"`.
*/ */
'layout': TabbarLayout; 'layout': TabbarLayout;
'mode': Mode; 'mode': Mode;
/** /**
* The placement of the tabbar in the app * Set the position of the tabbar, relative to the content. Available options: `"top"`, `"bottom"`.
*/ */
'placement': TabbarPlacement; 'placement': TabbarPlacement;
/** /**
* If the tabbar is scrollable or not * If true, the tabs will be scrollable when there are enough tabs to overflow the width of the screen.
*/ */
'scrollable': boolean; 'scrollable': boolean;
/** /**
@ -7203,20 +7209,20 @@ declare global {
export interface IonTabbarAttributes extends HTMLAttributes { export interface IonTabbarAttributes extends HTMLAttributes {
'color'?: Color; 'color'?: Color;
/** /**
* If the tabbar should include the highlight on the active tab * If true, show the tab highlight bar under the selected tab.
*/ */
'highlight'?: boolean; 'highlight'?: boolean;
/** /**
* The layout of the title and icons * Set the layout of the text and icon in the tabbar. Available options: `"icon-top"`, `"icon-start"`, `"icon-end"`, `"icon-bottom"`, `"icon-hide"`, `"label-hide"`.
*/ */
'layout'?: TabbarLayout; 'layout'?: TabbarLayout;
'mode'?: Mode; 'mode'?: Mode;
/** /**
* The placement of the tabbar in the app * Set the position of the tabbar, relative to the content. Available options: `"top"`, `"bottom"`.
*/ */
'placement'?: TabbarPlacement; 'placement'?: TabbarPlacement;
/** /**
* If the tabbar is scrollable or not * If true, the tabs will be scrollable when there are enough tabs to overflow the width of the screen.
*/ */
'scrollable'?: boolean; 'scrollable'?: boolean;
/** /**
@ -7254,11 +7260,11 @@ declare global {
*/ */
'getTab': (tabOrIndex: string | number | HTMLIonTabElement) => HTMLIonTabElement | undefined; 'getTab': (tabOrIndex: string | number | HTMLIonTabElement) => HTMLIonTabElement | undefined;
/** /**
* A unique name for the tabs * A unique name for the tabs.
*/ */
'name': string; 'name': string;
/** /**
* If the tabs should be scrollable * If true, the tabs will be scrollable when there are enough tabs to overflow the width of the screen.
*/ */
'scrollable': boolean; 'scrollable': boolean;
/** /**
@ -7267,7 +7273,7 @@ declare global {
'select': (tabOrIndex: number | HTMLIonTabElement) => Promise<boolean>; 'select': (tabOrIndex: number | HTMLIonTabElement) => Promise<boolean>;
'setRouteId': (id: string) => Promise<RouteWrite>; 'setRouteId': (id: string) => Promise<RouteWrite>;
/** /**
* If true, the tabbar * If true, the tabbar will be hidden. Defaults to `false`.
*/ */
'tabbarHidden': boolean; 'tabbarHidden': boolean;
/** /**
@ -7275,11 +7281,11 @@ declare global {
*/ */
'tabbarHighlight': boolean; 'tabbarHighlight': boolean;
/** /**
* Set the tabbar layout: `icon-top`, `icon-start`, `icon-end`, `icon-bottom`, `icon-hide`, `title-hide`. * Set the layout of the text and icon in the tabbar. Available options: `"icon-top"`, `"icon-start"`, `"icon-end"`, `"icon-bottom"`, `"icon-hide"`, `"label-hide"`.
*/ */
'tabbarLayout': TabbarLayout; 'tabbarLayout': TabbarLayout;
/** /**
* Set position of the tabbar: `top`, `bottom`. * Set the position of the tabbar, relative to the content. Available options: `"top"`, `"bottom"`.
*/ */
'tabbarPlacement': TabbarPlacement; 'tabbarPlacement': TabbarPlacement;
/** /**
@ -7287,7 +7293,7 @@ declare global {
*/ */
'translucent': boolean; 'translucent': boolean;
/** /**
* If the tabs should use the router or not. If true, `selectedTab` does nothing. * If true, the tabs will use the router and `selectedTab` will not do anything.
*/ */
'useRouter': boolean; 'useRouter': boolean;
} }
@ -7317,22 +7323,31 @@ declare global {
*/ */
'color'?: Color; 'color'?: Color;
/** /**
* A unique name for the tabs * A unique name for the tabs.
*/ */
'name'?: string; 'name'?: string;
/** /**
* Emitted when the tab changes. * Emitted when the tab changes.
*/ */
'onIonChange'?: (event: CustomEvent<{tab: HTMLIonTabElement}>) => void; 'onIonChange'?: (event: CustomEvent<{tab: HTMLIonTabElement}>) => void;
/**
* Emitted when the navigation has finished transitioning to a new component.
*/
'onIonNavDidChange'?: (event: CustomEvent<void>) => void; 'onIonNavDidChange'?: (event: CustomEvent<void>) => void;
/**
* Emitted when the navigation is about to transition to a new component.
*/
'onIonNavWillChange'?: (event: CustomEvent<void>) => void; 'onIonNavWillChange'?: (event: CustomEvent<void>) => void;
/**
* Emitted when the navigation will load a component.
*/
'onIonNavWillLoad'?: (event: CustomEvent<void>) => void; 'onIonNavWillLoad'?: (event: CustomEvent<void>) => void;
/** /**
* If the tabs should be scrollable * If true, the tabs will be scrollable when there are enough tabs to overflow the width of the screen.
*/ */
'scrollable'?: boolean; 'scrollable'?: boolean;
/** /**
* If true, the tabbar * If true, the tabbar will be hidden. Defaults to `false`.
*/ */
'tabbarHidden'?: boolean; 'tabbarHidden'?: boolean;
/** /**
@ -7340,11 +7355,11 @@ declare global {
*/ */
'tabbarHighlight'?: boolean; 'tabbarHighlight'?: boolean;
/** /**
* Set the tabbar layout: `icon-top`, `icon-start`, `icon-end`, `icon-bottom`, `icon-hide`, `title-hide`. * Set the layout of the text and icon in the tabbar. Available options: `"icon-top"`, `"icon-start"`, `"icon-end"`, `"icon-bottom"`, `"icon-hide"`, `"label-hide"`.
*/ */
'tabbarLayout'?: TabbarLayout; 'tabbarLayout'?: TabbarLayout;
/** /**
* Set position of the tabbar: `top`, `bottom`. * Set the position of the tabbar, relative to the content. Available options: `"top"`, `"bottom"`.
*/ */
'tabbarPlacement'?: TabbarPlacement; 'tabbarPlacement'?: TabbarPlacement;
/** /**
@ -7352,7 +7367,7 @@ declare global {
*/ */
'translucent'?: boolean; 'translucent'?: boolean;
/** /**
* If the tabs should use the router or not. If true, `selectedTab` does nothing. * If true, the tabs will use the router and `selectedTab` will not do anything.
*/ */
'useRouter'?: boolean; 'useRouter'?: boolean;
} }

2
core/src/components/list/list.tsx
View File

@ -20,7 +20,7 @@ export class List {
@Prop() lines?: 'full' | 'inset' | 'none'; @Prop() lines?: 'full' | 'inset' | 'none';
/** /**
* If true, the list will have margin around it and rounded corners. Defaults to `"false"`. * If true, the list will have margin around it and rounded corners. Defaults to `false`.
*/ */
@Prop() inset = false; @Prop() inset = false;

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

@ -20,7 +20,9 @@ export class TabButton {
@State() keyFocus = false; @State() keyFocus = false;
/** If the tab is selected or not */ /**
* If true, the tab button will be selected. Defaults to `false`.
*/
@Prop() selected = false; @Prop() selected = false;
/** The tab component for the button */ /** The tab component for the button */

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

@ -10,17 +10,19 @@ export class Tab {
private loaded = false; private loaded = false;
@Element() el!: HTMLIonTabElement; @Element() el!: HTMLIonTabElement;
/** If the tab is active or not */ /**
* If true, sets the tab as the active tab.
*/
@Prop({ mutable: true }) active = false; @Prop({ mutable: true }) active = false;
/** hidden */ /** hidden */
@Prop() btnId?: string; @Prop() btnId?: string;
/** @hidden */ /** hidden */
@Prop() delegate?: FrameworkDelegate; @Prop() delegate?: FrameworkDelegate;
/** /**
* The title of the tab. * The label of the tab.
*/ */
@Prop() label?: string; @Prop() label?: string;
@ -81,7 +83,6 @@ export class Tab {
*/ */
@Prop() tabsHideOnSubPages = false; @Prop() tabsHideOnSubPages = false;
/** /**
* Emitted when the current tab is selected. * Emitted when the current tab is selected.
*/ */
@ -93,7 +94,7 @@ export class Tab {
console.error('You can not use a lazy-loaded component in a tab and inlined 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}">` + `- Remove the component attribute in: <ion-tab component="${this.component}">` +
` or` + ` or` +
`- Remove the embeded content inside the ion-tab: <ion-tab></ion-tab>`); `- Remove the embedded content inside the ion-tab: <ion-tab></ion-tab>`);
} }
} }
} }