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