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

fix(tab-button): allow standalone tab-button (#16905)

Browse Source 
* fix(tab-button): allow standalone tab-button

fixes #16845

* fix lint issue
This commit is contained in:
Manu MA
2018-12-31 12:51:36 +01:00
committed by GitHub
parent 302be5392c
commit 6ca7645258
6 changed files with 30 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
core/src/components/tab-button/readme.md
View File

@ -97,7 +97,8 @@ See the [tabs documentation](../tabs) for more details on configuring tabs.
| `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` |
| `selected` | `selected` | The selected tab component | `boolean` | `false` |
| `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` |
## CSS Custom Properties

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

@ -1,4 +1,4 @@
import { Component, ComponentInterface, Element, Event, EventEmitter, Listen, Prop, QueueApi, State } from '@stencil/core';
import { Component, ComponentInterface, Element, Event, EventEmitter, Listen, Prop, QueueApi } from '@stencil/core';
import { Config, Mode, TabBarChangedEventDetail, TabButtonClickEventDetail, TabButtonLayout } from '../../interface';
@ -21,7 +21,7 @@ export class TabButton implements ComponentInterface {
/**
* The selected tab component
*/
@State() selected = false;
@Prop({ mutable: true }) selected = false;
/**
* The mode determines which platform styles to use.
@ -43,7 +43,7 @@ export class TabButton implements ComponentInterface {
* 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.
*/
@Prop() tab!: string;
@Prop() tab?: string;
/**
* The selected tab component
@ -63,23 +63,22 @@ export class TabButton implements ComponentInterface {
@Listen('click')
onClick(ev: Event) {
if (!this.disabled) {
this.ionTabButtonClick.emit({
tab: this.tab,
href: this.href,
selected: this.selected
});
if (this.tab !== undefined) {
if (!this.disabled) {
this.ionTabButtonClick.emit({
tab: this.tab,
href: this.href,
selected: this.selected
});
}
ev.preventDefault();
}
ev.preventDefault();
}
componentWillLoad() {
if (this.layout === undefined) {
this.layout = this.config.get('tabButtonLayout', 'icon-top');
}
if (isNotDefined(this.tab)) {
console.error('Missing "tab" property in <ion-tab-button>');
}
}
private get hasLabel() {
@ -95,8 +94,7 @@ export class TabButton implements ComponentInterface {
return {
'role': 'tab',
'aria-selected': selected ? 'true' : null,
'id': `tab-button-${tab}`,
'aria-controls': `tab-view-${tab}`,
'id': tab !== undefined ? `tab-button-${tab}` : null,
class: {
'tab-selected': selected,
'tab-disabled': disabled,
@ -113,14 +111,10 @@ export class TabButton implements ComponentInterface {
render() {
const { mode, href } = this;
return (
<a href={href || '#'}>
<a href={href}>
<slot></slot>
{mode === 'md' && <ion-ripple-effect type="unbounded"></ion-ripple-effect>}
</a>
);
}
}
function isNotDefined(a: any) {
return a == null;
}