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(content): change main child element to div when parent is menu (#23160)

Browse Source 
* fix(content): change main child element to div when parent is menu

* fix(content): change main child element to div when parent is menu, popover, or modal

Co-authored-by: Liam DeBeasi <liamdebeasi@users.noreply.github.com>

* fix(content): make closest element detector unreactive

Co-authored-by: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
This commit is contained in:
William Martin
2021-04-12 09:22:24 -04:00
committed by GitHub
parent 91ac340ae7
commit 2d07d8216a
1 changed files with 11 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
core/src/components/content/content.tsx
View File

@ -27,6 +27,7 @@ export class Content implements ComponentInterface {
private cTop = -1;
private cBottom = -1;
private scrollEl!: HTMLElement;
private isMainContent = true;
// Detail is used in a hot loop in the scroll event, by allocating it here
// V8 will be able to inline any read/write to it since it's a monomorphic class.
@ -105,6 +106,10 @@ export class Content implements ComponentInterface {
*/
@Event() ionScrollEnd!: EventEmitter<ScrollBaseDetail>;
connectedCallback() {
this.isMainContent = this.el.closest('ion-menu, ion-popover, ion-modal') === null;
}
disconnectedCallback() {
this.onScrollEnd();
}
@ -304,9 +309,10 @@ export class Content implements ComponentInterface {
}
render() {
const { scrollX, scrollY } = this;
const { isMainContent, scrollX, scrollY } = this;
const mode = getIonMode(this);
const forceOverscroll = this.shouldForceOverscroll();
const TagType = isMainContent ? 'main' : 'div' as any;
const transitionShadow = (mode === 'ios' && config.getBoolean('experimentalTransitionShadow', true));
this.resize();
@ -324,19 +330,19 @@ export class Content implements ComponentInterface {
}}
>
<div id="background-content" part="background"></div>
<main
<TagType
class={{
'inner-scroll': true,
'scroll-x': scrollX,
'scroll-y': scrollY,
'overscroll': (scrollX || scrollY) && forceOverscroll
}}
ref={el => this.scrollEl = el!}
onScroll={(this.scrollEvents) ? ev => this.onScroll(ev) : undefined}
ref={(el: HTMLElement) => this.scrollEl = el!}
onScroll={(this.scrollEvents) ? (ev: UIEvent) => this.onScroll(ev) : undefined}
part="scroll"
>
<slot></slot>
</main>
</TagType>
{transitionShadow ? (
<div class="transition-effect">