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

fix(tabs): update the tabbar placement value to match the property it applies to

Browse Source
This commit is contained in:
Brandy Carney
2018-07-10 14:41:30 -04:00
parent 7628b36ecd
commit 45583bcebb
3 changed files with 38 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
core/src/components/tabbar/tabbar-interface.ts
View File

@ -1,2 +1,2 @@
export type TabbarLayout = 'icon-top' | 'icon-start' | 'icon-end' | 'icon-bottom' | 'icon-hide' | 'title-hide'; export type TabbarLayout = 'icon-top' | 'icon-start' | 'icon-end' | 'icon-bottom' | 'icon-hide' | 'label-hide';
export type TabbarPlacement = 'top' | 'bottom'; export type TabbarPlacement = 'top' | 'bottom';

17
core/src/components/tabbar/tabbar.tsx
View File

@ -26,16 +26,22 @@ export class Tabbar {
@State() canScrollRight = false; @State() canScrollRight = false;
@State() hidden = false; @State() hidden = false;
/** 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"`.
*/
@Prop() layout: TabbarLayout = 'icon-top'; @Prop() layout: TabbarLayout = 'icon-top';
/** The placement of the tabbar in the app */ /**
* Set the position of the tabbar, relative to the content. Available options: `"top"`, `"bottom"`.
*/
@Prop() placement: TabbarPlacement = 'bottom'; @Prop() placement: TabbarPlacement = 'bottom';
/** The selected tab component */ /** The selected tab component */
@Prop() selectedTab?: HTMLIonTabElement; @Prop() selectedTab?: HTMLIonTabElement;
/** 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.
*/
@Prop() scrollable = false; @Prop() scrollable = false;
/** The tabs to render */ /** The tabs to render */
@ -47,8 +53,9 @@ export class Tabbar {
this.highlight && this.updateHighlight(); this.highlight && this.updateHighlight();
} }
/**
/** If the tabbar should include the highlight on the active tab */ * If true, show the tab highlight bar under the selected tab.
*/
@Prop() highlight = false; @Prop() highlight = false;
/** /**

36
core/src/components/tabs/tabs.tsx
View File

@ -20,6 +20,7 @@ export class Tabs implements NavOutlet {
@State() selectedTab?: HTMLIonTabElement; @State() selectedTab?: HTMLIonTabElement;
@Prop({ context: 'config' }) config!: Config; @Prop({ context: 'config' }) config!: Config;
@Prop({ context: 'document' }) doc!: Document; @Prop({ context: 'document' }) doc!: Document;
/** /**
@ -29,29 +30,29 @@ export class Tabs implements NavOutlet {
@Prop() color?: Color; @Prop() color?: Color;
/** /**
* A unique name for the tabs * A unique name for the tabs.
*/ */
@Prop() name?: string; @Prop() name?: string;
/** /**
* If true, the tabbar * If true, the tabbar will be hidden. Defaults to `false`.
*/ */
@Prop() tabbarHidden = false; @Prop() tabbarHidden = false;
/** /**
* Set the tabbar layout: `icon-top`, `icon-start`, `icon-end`, `icon-bottom`, `icon-hide`, `title-hide`. * If true, show the tab highlight bar under the selected tab.
*/ */
@Prop({ mutable: true }) tabbarLayout?: TabbarLayout; @Prop({ mutable: true }) tabbarHighlight?: boolean;
/** /**
* Set position of the tabbar: `top`, `bottom`. * 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"`.
*/ */
@Prop({ mutable: true }) tabbarPlacement?: TabbarPlacement; @Prop({ mutable: true }) tabbarLayout?: TabbarLayout;
/** /**
* If true, show the tab highlight bar under the selected tab. * Set the position of the tabbar, relative to the content. Available options: `"top"`, `"bottom"`.
*/ */
@Prop({ mutable: true }) tabbarHighlight?: boolean; @Prop({ mutable: true }) tabbarPlacement?: TabbarPlacement;
/** /**
* If true, the tabs will be translucent. * If true, the tabs will be translucent.
@ -61,12 +62,13 @@ export class Tabs implements NavOutlet {
*/ */
@Prop() translucent = false; @Prop() translucent = false;
/** 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.
*/
@Prop() scrollable = false; @Prop() scrollable = false;
/** /**
* If the tabs should use the router or not. * If true, the tabs will use the router and `selectedTab` will not do anything.
* If true, `selectedTab` does nothing.
*/ */
@Prop({ mutable: true }) useRouter = false; @Prop({ mutable: true }) useRouter = false;
@ -74,8 +76,20 @@ export class Tabs implements NavOutlet {
* Emitted when the tab changes. * Emitted when the tab changes.
*/ */
@Event() ionChange!: EventEmitter<{tab: HTMLIonTabElement}>; @Event() ionChange!: EventEmitter<{tab: HTMLIonTabElement}>;
/**
* Emitted when the navigation will load a component.
*/
@Event() ionNavWillLoad!: EventEmitter<void>; @Event() ionNavWillLoad!: EventEmitter<void>;
/**
* Emitted when the navigation is about to transition to a new component.
*/
@Event() ionNavWillChange!: EventEmitter<void>; @Event() ionNavWillChange!: EventEmitter<void>;
/**
* Emitted when the navigation has finished transitioning to a new component.
*/
@Event() ionNavDidChange!: EventEmitter<void>; @Event() ionNavDidChange!: EventEmitter<void>;
componentWillLoad() { componentWillLoad() {