javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-18 11:17:19 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(segment): segment functions properly on android 5 (#20554)

Browse Source 
fixes #20466
This commit is contained in:
Liam DeBeasi
2020-02-24 13:41:49 -05:00
committed by GitHub
parent cefb08fe32
commit 0224bed0c9
2 changed files with 19 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
core/src/components/segment/segment.tsx
View File

@ -171,9 +171,10 @@ export class Segment implements ComponentInterface {
if (!useRippleEffect) { return; }
const buttons = this.getButtons();
const checked = buttons.find(button => button.value === this.value);
const checked = buttons.find(button => button.value === this.value)!;
const ripple = checked!.shadowRoot!.querySelector('ion-ripple-effect');
const root = checked.shadowRoot || checked;
const ripple = root.querySelector('ion-ripple-effect');
if (!ripple) { return; }
@ -223,7 +224,8 @@ export class Segment implements ComponentInterface {
}
private getIndicator(button: HTMLIonSegmentButtonElement): HTMLDivElement | null {
return button.shadowRoot && button.shadowRoot.querySelector('.segment-button-indicator');
const root = button.shadowRoot || button;
return root.querySelector('.segment-button-indicator');
}
private checkButton(previous: HTMLIonSegmentButtonElement, current: HTMLIonSegmentButtonElement) {
@ -302,7 +304,8 @@ export class Segment implements ComponentInterface {
// gesture event and the Y coordinate of the starting element, since the gesture
// can move up and down off of the segment
const currentX = detail.currentX;
const previousY = rect.y;
const previousY = rect.top + (rect.height / 2);
const nextEl = document.elementFromPoint(currentX, previousY) as HTMLIonSegmentButtonElement;
const decreaseIndex = isRTL ? currentX > (left + width) : currentX < left;

12
core/src/components/segment/test/basic/index.html
View File

@ -75,6 +75,18 @@
</ion-toolbar>
</ion-header>
<ion-segment value="segment">
<ion-segment-button value="segment">
Segment
</ion-segment-button>
<ion-segment-button value="outside">
Outside
</ion-segment-button>
<ion-segment-button value="content">
Content
</ion-segment-button>
</ion-segment>
<ion-content>
<div class="ion-padding">
<ion-segment>