Method render

core/src/components/popover/popover.tsx:726–767

()

  };

  render() {
    const mode = getIonMode(this);
    const { onLifecycle, parentPopover, dismissOnSelect, side, arrow, htmlAttributes, focusTrap } = this;
    const desktop = isPlatform('desktop');
    const enableArrow = arrow && !parentPopover;

    return (
      <Host
        aria-modal="true"
        no-router
        tabindex="-1"
        {...(htmlAttributes as any)}
        style={{
          zIndex: `${20000 + this.overlayIndex}`,
        }}
        class={{
          ...getClassMap(this.cssClass),
          [mode]: true,
          'popover-translucent': this.translucent,
          'overlay-hidden': true,
          'popover-desktop': desktop,
          [`popover-side-${side}`]: true,
          [FOCUS_TRAP_DISABLE_CLASS]: focusTrap === false,
          'popover-nested': !!parentPopover,
        }}
        onIonPopoverDidPresent={onLifecycle}
        onIonPopoverWillPresent={onLifecycle}
        onIonPopoverWillDismiss={onLifecycle}
        onIonPopoverDidDismiss={onLifecycle}
        onIonBackdropTap={this.onBackdropTap}
      >
        {!parentPopover && <ion-backdrop tappable={this.backdropDismiss} visible={this.showBackdrop} part="backdrop" />}

        <div class="popover-wrapper ion-overlay-wrapper" onClick={dismissOnSelect ? () => this.dismiss() : undefined}>
          {enableArrow && <div class="popover-arrow" part="arrow"></div>}
          <div class="popover-content" part="content">
            <slot></slot>
          </div>
        </div>
      </Host>
    );
  }
}

const LIFECYCLE_MAP: any = {