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

docs(all): add global config docs (#16193)

Browse Source 
* docs(all): add global config docs

fixes #16109

* lint issue

* add tabButtonLayout

* tabs docs
This commit is contained in:
Manu MA
2018-11-02 17:30:37 +01:00
committed by GitHub
parent bc57ca9415
commit 0680fe9251
24 changed files with 267 additions and 140 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,8 +1,7 @@
import { Component, ComponentInterface, Element, Event, EventEmitter, Listen, Prop, QueueApi, State } from '@stencil/core';
import { Color, Mode, TabbarClickDetail, TabbarLayout } from '../../interface';
import { Color, Config, Mode, TabBarChangedDetail, TabButtonClickDetail, TabButtonLayout } from '../../interface';
import { createColorClasses } from '../../utils/theme';
import { TabbarChangedDetail } from '../tab-bar/tab-bar-interface';
@Component({
tag: 'ion-tab-button',
@ -18,6 +17,7 @@ export class TabButton implements ComponentInterface {
@Prop({ context: 'queue' }) queue!: QueueApi;
@Prop({ context: 'document' }) doc!: Document;
@Prop({ context: 'config' }) config!: Config;
/**
* The selected tab component
@ -37,9 +37,10 @@ export class TabButton implements ComponentInterface {
@Prop() color?: Color;
/**
* Set the layout of the text and icon in the tabbar.
* Set the layout of the text and icon in the tab bar.
* It defaults to `'icon-top'`.
*/
@Prop() layout: TabbarLayout = 'icon-top';
@Prop() layout?: TabButtonLayout;
/**
* The URL which will be used as the `href` within this tab's button anchor.
@ -61,10 +62,10 @@ export class TabButton implements ComponentInterface {
* Emitted when the tab bar is clicked
* @internal
*/
@Event() ionTabButtonClick!: EventEmitter<TabbarClickDetail>;
@Event() ionTabButtonClick!: EventEmitter<TabButtonClickDetail>;
@Listen('parent:ionTabBarChanged')
onTabbarChanged(ev: CustomEvent<TabbarChangedDetail>) {
onTabBarChanged(ev: CustomEvent<TabBarChangedDetail>) {
this.selected = this.tab === ev.detail.tab;
}
@ -80,6 +81,9 @@ export class TabButton implements ComponentInterface {
}
componentWillLoad() {
if (this.layout === undefined) {
this.layout = this.config.get('tabButtonLayout', 'icon-top');
}
if (this.tab === undefined) {
console.warn(`ion-tab-button needs a tab name, so it can be selected.
<ion-tab-button tab="TAB_NAME">`);