mirror of
https://github.com/material-components/material-web.git
synced 2024-09-11 13:46:10 +03:00
fix(tabs): remove public indicator property
PiperOrigin-RevId: 563781246
This commit is contained in:
parent
82e9e92a19
commit
d296316a2b
@ -20,7 +20,8 @@ export class TabHarness extends Harness<Tab> {
|
|||||||
|
|
||||||
private async completeIndicatorAnimation() {
|
private async completeIndicatorAnimation() {
|
||||||
await this.element.updateComplete;
|
await this.element.updateComplete;
|
||||||
const animations = this.element.indicator.getAnimations();
|
const indicator = this.element.renderRoot.querySelector('.indicator')!;
|
||||||
|
const animations = indicator.getAnimations();
|
||||||
for (const animation of animations) {
|
for (const animation of animations) {
|
||||||
animation.finish();
|
animation.finish();
|
||||||
}
|
}
|
||||||
@ -28,7 +29,8 @@ export class TabHarness extends Harness<Tab> {
|
|||||||
|
|
||||||
async isIndicatorShowing() {
|
async isIndicatorShowing() {
|
||||||
await this.completeIndicatorAnimation();
|
await this.completeIndicatorAnimation();
|
||||||
const opacity = getComputedStyle(this.element.indicator)['opacity'];
|
const indicator = this.element.renderRoot.querySelector('.indicator')!;
|
||||||
|
const opacity = getComputedStyle(indicator)['opacity'];
|
||||||
return opacity === '1';
|
return opacity === '1';
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -21,6 +21,12 @@ interface Tabs extends HTMLElement {
|
|||||||
previousSelectedItem?: Tab;
|
previousSelectedItem?: Tab;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Symbol for tabs to use to animate their indicators based off another tab's
|
||||||
|
* indicator.
|
||||||
|
*/
|
||||||
|
const INDICATOR = Symbol('indicator');
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Tab component.
|
* Tab component.
|
||||||
*/
|
*/
|
||||||
@ -44,9 +50,7 @@ export class Tab extends LitElement {
|
|||||||
*/
|
*/
|
||||||
@property({type: Boolean, attribute: 'icon-only'}) iconOnly = false;
|
@property({type: Boolean, attribute: 'icon-only'}) iconOnly = false;
|
||||||
|
|
||||||
// note, this is public so it can participate in selection animation.
|
@query('.indicator') readonly[INDICATOR]!: HTMLElement|null;
|
||||||
/** @private */
|
|
||||||
@query('.indicator') readonly indicator!: HTMLElement;
|
|
||||||
@state() protected fullWidthIndicator = false;
|
@state() protected fullWidthIndicator = false;
|
||||||
@queryAssignedNodes({flatten: true})
|
@queryAssignedNodes({flatten: true})
|
||||||
private readonly assignedDefaultNodes!: Node[];
|
private readonly assignedDefaultNodes!: Node[];
|
||||||
@ -110,12 +114,16 @@ export class Tab extends LitElement {
|
|||||||
}
|
}
|
||||||
|
|
||||||
private animateSelected() {
|
private animateSelected() {
|
||||||
this.indicator.getAnimations().forEach(a => {
|
if (!this[INDICATOR]) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
this[INDICATOR].getAnimations().forEach(a => {
|
||||||
a.cancel();
|
a.cancel();
|
||||||
});
|
});
|
||||||
const frames = this.getKeyframes();
|
const frames = this.getKeyframes();
|
||||||
if (frames !== null) {
|
if (frames !== null) {
|
||||||
this.indicator.animate(
|
this[INDICATOR].animate(
|
||||||
frames, {duration: 250, easing: EASING.EMPHASIZED});
|
frames, {duration: 250, easing: EASING.EMPHASIZED});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -130,11 +138,11 @@ export class Tab extends LitElement {
|
|||||||
const tabs = this.closest<Tabs>('md-tabs');
|
const tabs = this.closest<Tabs>('md-tabs');
|
||||||
const from: Keyframe = {};
|
const from: Keyframe = {};
|
||||||
const fromRect =
|
const fromRect =
|
||||||
(tabs?.previousSelectedItem?.indicator.getBoundingClientRect() ??
|
(tabs?.previousSelectedItem?.[INDICATOR]?.getBoundingClientRect() ??
|
||||||
({} as DOMRect));
|
({} as DOMRect));
|
||||||
const fromPos = fromRect.left;
|
const fromPos = fromRect.left;
|
||||||
const fromExtent = fromRect.width;
|
const fromExtent = fromRect.width;
|
||||||
const toRect = this.indicator.getBoundingClientRect();
|
const toRect = this[INDICATOR]!.getBoundingClientRect();
|
||||||
const toPos = toRect.left;
|
const toPos = toRect.left;
|
||||||
const toExtent = toRect.width;
|
const toExtent = toRect.width;
|
||||||
const scale = fromExtent / toExtent;
|
const scale = fromExtent / toExtent;
|
||||||
|
Loading…
Reference in New Issue
Block a user