diff --git a/angular/BREAKING.md b/angular/BREAKING.md index ec23bc1d0a..887655b43c 100644 --- a/angular/BREAKING.md +++ b/angular/BREAKING.md @@ -702,12 +702,12 @@ The attributes to set label position for input are now combined under the `posit ```html - Floating Label + Floating Label - Fixed Label + Fixed Label ``` @@ -716,12 +716,12 @@ The attributes to set label position for input are now combined under the `posit ```html - Floating Label + Floating Label - Fixed Label + Fixed Label ``` @@ -1057,19 +1057,55 @@ The `ios` and `ios-small` spinner's have been renamed to `lines` and `lines-smal ## Tabs -Some properties in `ion-tab` changed: +### Attributes Renamed -- [tabTitle] -> [label] -- [tabIcon] -> [icon] -- [tabBadge] -> [badge] -- [tabBadgeStyle] -> [badgeStyle] +#### `ion-tabs` + +The attributes to position the tabs, change the tab layout, enable the tab highlight and hide the tabs have been renamed. + +| 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 + +``` + +**New Usage Example:** + +```html + + ... + +``` + + +#### `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:** ```html - + ``` @@ -1078,7 +1114,7 @@ Some properties in `ion-tab` changed: ```html - + ``` diff --git a/core/src/components.d.ts b/core/src/components.d.ts index f98f497886..6c2de4385f 100644 --- a/core/src/components.d.ts +++ b/core/src/components.d.ts @@ -3467,7 +3467,7 @@ declare global { */ '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; /** @@ -3501,7 +3501,7 @@ declare global { namespace JSXElements { 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; /** @@ -6940,7 +6940,7 @@ declare global { 'color': Color; 'mode': Mode; /** - * If the tab is selected or not + * If true, the tab button will be selected. Defaults to `false`. */ 'selected': boolean; /** @@ -6984,7 +6984,7 @@ declare global { */ 'onIonTabbarClick'?: (event: CustomEvent) => void; /** - * If the tab is selected or not + * If true, the tab button will be selected. Defaults to `false`. */ 'selected'?: boolean; /** @@ -7001,7 +7001,7 @@ declare global { namespace StencilComponents { interface IonTab { /** - * If the tab is active or not + * If true, sets the tab as the active tab. */ 'active': boolean; /** @@ -7020,6 +7020,9 @@ declare global { * The component to display inside of the tab. */ 'component': ComponentRef; + /** + * hidden + */ 'delegate': FrameworkDelegate; /** * If true, the user cannot interact with the tab. Defaults to `false`. @@ -7038,7 +7041,7 @@ declare global { */ 'icon': string; /** - * The title of the tab. + * The label of the tab. */ 'label': string; /** @@ -7084,7 +7087,7 @@ declare global { namespace JSXElements { export interface IonTabAttributes extends HTMLAttributes { /** - * If the tab is active or not + * If true, sets the tab as the active tab. */ 'active'?: boolean; /** @@ -7103,6 +7106,9 @@ declare global { * The component to display inside of the tab. */ 'component'?: ComponentRef; + /** + * hidden + */ 'delegate'?: FrameworkDelegate; /** * If true, the user cannot interact with the tab. Defaults to `false`. @@ -7117,7 +7123,7 @@ declare global { */ 'icon'?: string; /** - * The title of the tab. + * The label of the tab. */ 'label'?: string; /** @@ -7151,20 +7157,20 @@ declare global { interface IonTabbar { '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; /** - * 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; '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; /** - * 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; /** @@ -7203,20 +7209,20 @@ declare global { export interface IonTabbarAttributes extends HTMLAttributes { '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; /** - * 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; '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; /** - * 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; /** @@ -7254,11 +7260,11 @@ declare global { */ 'getTab': (tabOrIndex: string | number | HTMLIonTabElement) => HTMLIonTabElement | undefined; /** - * A unique name for the tabs + * A unique name for the tabs. */ '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; /** @@ -7267,7 +7273,7 @@ declare global { 'select': (tabOrIndex: number | HTMLIonTabElement) => Promise; 'setRouteId': (id: string) => Promise; /** - * If true, the tabbar + * If true, the tabbar will be hidden. Defaults to `false`. */ 'tabbarHidden': boolean; /** @@ -7275,11 +7281,11 @@ declare global { */ '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; /** - * Set position of the tabbar: `top`, `bottom`. + * Set the position of the tabbar, relative to the content. Available options: `"top"`, `"bottom"`. */ 'tabbarPlacement': TabbarPlacement; /** @@ -7287,7 +7293,7 @@ declare global { */ '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; } @@ -7317,22 +7323,31 @@ declare global { */ 'color'?: Color; /** - * A unique name for the tabs + * A unique name for the tabs. */ 'name'?: string; /** * Emitted when the tab changes. */ 'onIonChange'?: (event: CustomEvent<{tab: HTMLIonTabElement}>) => void; + /** + * Emitted when the navigation has finished transitioning to a new component. + */ 'onIonNavDidChange'?: (event: CustomEvent) => void; + /** + * Emitted when the navigation is about to transition to a new component. + */ 'onIonNavWillChange'?: (event: CustomEvent) => void; + /** + * Emitted when the navigation will load a component. + */ 'onIonNavWillLoad'?: (event: CustomEvent) => 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; /** - * If true, the tabbar + * If true, the tabbar will be hidden. Defaults to `false`. */ 'tabbarHidden'?: boolean; /** @@ -7340,11 +7355,11 @@ declare global { */ '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; /** - * Set position of the tabbar: `top`, `bottom`. + * Set the position of the tabbar, relative to the content. Available options: `"top"`, `"bottom"`. */ 'tabbarPlacement'?: TabbarPlacement; /** @@ -7352,7 +7367,7 @@ declare global { */ '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; } diff --git a/core/src/components/list/list.tsx b/core/src/components/list/list.tsx index c54b423703..889fcb0222 100644 --- a/core/src/components/list/list.tsx +++ b/core/src/components/list/list.tsx @@ -20,7 +20,7 @@ export class List { @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; diff --git a/core/src/components/tab-button/tab-button.tsx b/core/src/components/tab-button/tab-button.tsx index 3dda456b03..f9186fb958 100644 --- a/core/src/components/tab-button/tab-button.tsx +++ b/core/src/components/tab-button/tab-button.tsx @@ -20,7 +20,9 @@ export class TabButton { @State() keyFocus = false; - /** If the tab is selected or not */ + /** + * If true, the tab button will be selected. Defaults to `false`. + */ @Prop() selected = false; /** The tab component for the button */ diff --git a/core/src/components/tab/tab.tsx b/core/src/components/tab/tab.tsx index 52ec4e097a..926831130a 100644 --- a/core/src/components/tab/tab.tsx +++ b/core/src/components/tab/tab.tsx @@ -10,17 +10,19 @@ export class Tab { private loaded = false; @Element() el!: HTMLIonTabElement; - /** If the tab is active or not */ + /** + * If true, sets the tab as the active tab. + */ @Prop({ mutable: true }) active = false; /** hidden */ @Prop() btnId?: string; - /** @hidden */ + /** hidden */ @Prop() delegate?: FrameworkDelegate; /** - * The title of the tab. + * The label of the tab. */ @Prop() label?: string; @@ -81,7 +83,6 @@ export class Tab { */ @Prop() tabsHideOnSubPages = false; - /** * 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.' + `- Remove the component attribute in: ` + ` or` + - `- Remove the embeded content inside the ion-tab: `); + `- Remove the embedded content inside the ion-tab: `); } } }