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

fix(tabbar): fix highlight bar

Browse Source
This commit is contained in:
Manu Mtz.-Almeida
2018-08-13 17:58:45 +02:00
parent 617347950d
commit 39104cb366
2 changed files with 23 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
core/src/components.d.ts vendored
View File

@ -2103,7 +2103,7 @@ declare global {
* The text to display on the ok button. Default: `OK`.
*/
'okText': string;
'open': (ev?: UIEvent | undefined) => Promise<HTMLIonActionSheetElement> | Promise<HTMLIonAlertElement> | Promise<HTMLIonPopoverElement>;
'open': (ev?: UIEvent | undefined) => Promise<HTMLIonPopoverElement> | Promise<HTMLIonActionSheetElement> | Promise<HTMLIonAlertElement>;
/**
* The text to display when the select is empty.
*/

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

@ -1,4 +1,4 @@
import { Component, Element, Event, EventEmitter, Listen, Prop, QueueApi, State } from '@stencil/core';
import { Component, Element, Event, EventEmitter, Listen, Prop, QueueApi, State, Watch } from '@stencil/core';
import { Color, Mode, TabbarLayout, TabbarPlacement } from '../../interface';
import { createColorClasses } from '../../utils/theme';
@ -41,11 +41,6 @@ export class Tabbar {
/** The tabs to render */
@Prop() tabs: HTMLIonTabElement[] = [];
// @Watch('selectedTab')
// selectedTabChanged() {
// this.updateHighlight();
// }
/**
* If true, show the tab highlight bar under the selected tab.
*/
@ -71,32 +66,28 @@ export class Tabbar {
}
}
// @Listen('window:resize')
// onResize() {
// this.updateHighlight();
// }
componentDidLoad() {
this.updateHighlight();
}
// componentDidLoad() {
// this.updateHighlight();
// }
private getSelectedButton(): HTMLElement | null {
return this.el.shadowRoot!.querySelector('.tab-btn-selected');
}
// private getSelectedButton(): HTMLIonTabButtonElement | undefined {
// return Array.from(this.el.querySelectorAll('ion-tab-button'))
// .find(btn => btn.selected);
// }
// private updateHighlight() {
// if (!this.highlight) {
// return;
// }
// this.queue.read(() => {
// const btn = this.getSelectedButton();
// const highlight = this.el.querySelector('div.tabbar-highlight') as HTMLElement;
// if (btn && highlight) {
// highlight.style.transform = `translate3d(${btn.offsetLeft}px,0,0) scaleX(${btn.offsetWidth})`;
// }
// });
// }
@Watch('selectedTab')
@Listen('window:resize')
private updateHighlight() {
if (!this.highlight) {
return;
}
this.queue.read(() => {
const btn = this.getSelectedButton();
const highlight = this.el.shadowRoot!.querySelector('.tabbar-highlight') as HTMLElement;
if (btn && highlight) {
highlight.style.transform = `translate3d(${btn.offsetLeft}px,0,0) scaleX(${btn.offsetWidth})`;
}
});
}
hostData() {
const { color, translucent, layout, placement, keyboardVisible } = this;
@ -134,9 +125,9 @@ function renderTabButton(tab: HTMLIonTabElement, selected: boolean, mode: string
return (
<a
role="tab"
ion-activable
aria-selected={selected ? 'true' : null}
href={href || '#'}
ion-activable
class={{
'tab-btn': true,
'tab-btn-selected': selected,