javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-19 19:57:22 +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/readme.md
View File

@ -10,14 +10,14 @@ See the [Tabs API Docs](../Tabs/) for more details on configuring Tabs.
## Properties
| Property | Attribute | Description | Type | Default |
| ---------- | ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------ | ------------ |
| `color` | `color` | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). | `string \| undefined` | `undefined` |
| `disabled` | `disabled` | The selected tab component | `boolean` | `false` |
| `href` | `href` | The URL which will be used as the `href` within this tab's button anchor. | `string \| undefined` | `undefined` |
| `layout` | `layout` | Set the layout of the text and icon in the tabbar. | `"icon-bottom" \| "icon-end" \| "icon-hide" \| "icon-start" \| "icon-top" \| "label-hide"` | `'icon-top'` |
| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` |
| `tab` | `tab` | A tab id must be provided for each `ion-tab`. It's used internally to reference the selected tab or by the router to switch between them. | `string \| undefined` | `undefined` |
| Property | Attribute | Description | Type | Default |
| ---------- | ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------- | ----------- |
| `color` | `color` | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). | `string \| undefined` | `undefined` |
| `disabled` | `disabled` | The selected tab component | `boolean` | `false` |
| `href` | `href` | The URL which will be used as the `href` within this tab's button anchor. | `string \| undefined` | `undefined` |
| `layout` | `layout` | Set the layout of the text and icon in the tab bar. It defaults to `'icon-top'`. | `"icon-bottom" \| "icon-end" \| "icon-hide" \| "icon-start" \| "icon-top" \| "label-hide" \| undefined` | `undefined` |
| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` |
| `tab` | `tab` | A tab id must be provided for each `ion-tab`. It's used internally to reference the selected tab or by the router to switch between them. | `string \| undefined` | `undefined` |
----------------------------------------------

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">`);