Method render

core/src/components/picker-legacy/picker.tsx:354–401

()

  };

  render() {
    const { htmlAttributes } = this;
    const mode = getIonMode(this);
    return (
      <Host
        aria-modal="true"
        tabindex="-1"
        {...(htmlAttributes as any)}
        style={{
          zIndex: `${20000 + this.overlayIndex}`,
        }}
        class={{
          [mode]: true,

          // Used internally for styling
          [`picker-${mode}`]: true,
          'overlay-hidden': true,
          ...getClassMap(this.cssClass),
        }}
        onIonBackdropTap={this.onBackdropTap}
        onIonPickerWillDismiss={this.dispatchCancelHandler}
      >
        <ion-backdrop visible={this.showBackdrop} tappable={this.backdropDismiss}></ion-backdrop>

        <div tabindex="0" aria-hidden="true"></div>

        <div class="picker-wrapper ion-overlay-wrapper" role="dialog">
          <div class="picker-toolbar">
            {this.buttons.map((b) => (
              <div class={buttonWrapperClass(b)}>
                <button type="button" onClick={() => this.buttonClick(b)} class={buttonClass(b)}>
                  {b.text}
                </button>
              </div>
            ))}
          </div>

          <div class="picker-columns">
            <div class="picker-above-highlight"></div>
            {this.presented && this.columns.map((c) => <ion-picker-legacy-column col={c}></ion-picker-legacy-column>)}
            <div class="picker-below-highlight"></div>
          </div>
        </div>

        <div tabindex="0" aria-hidden="true"></div>
      </Host>
    );
  }
}

const buttonWrapperClass = (button: PickerButton): CssClassMap => {