feat: allow for custom ion-toast positioning

Feature Request

Ionic version: [x] 4.x

Describe the Feature Request Currently with the implementation of toasts in Ionic v4, we have no way of adding some padding or margin to an ion-toast. I’d like to be able to customize this position in order to adhere to the material design principle outlined here.

Describe Preferred Solution Ideally, this would be something that could be added in the CSS custom properties.

[jbae1024]

I do not know… I use it like this. Is there any other problem?

css

.md .tabs-bottom {
  transform: translateY(-56px) !important;
}
.ios .tabs-bottom {
  transform: translateY(-50px) !important;
}
.md .header-top {
  top: 56px !important;
}
.ios .header-top {
  top: 44px !important;
}

ts

const toast = await this.toastController.create({
            message: 'This is message',
            position: 'bottom',
            duration: 1000,
            color: 'warning',
            cssClass: 'tabs-bottom'
        });
        toast.present();

[map-lo]

@darkdread I found a solution for Ionic 5.x. Provide a custom enter animation including an offset for the tabs bar.

// ...
export const iosEnterAnimation = (baseEl: ShadowRoot, position: string, offset = 10): Animation => {
    const baseAnimation = createAnimation();
    const wrapperAnimation = createAnimation();

    const hostEl = baseEl.host || baseEl;
    const wrapperEl = baseEl.querySelector('.toast-wrapper') as HTMLElement;

    const bottom = `calc(-${offset}px - var(--ion-safe-area-bottom, 0px))`;
    const top = `calc(${offset}px + var(--ion-safe-area-top, 0px))`;

    wrapperAnimation.addElement(wrapperEl);

    switch (position) {
        case 'top':
            wrapperAnimation.fromTo('transform', 'translateY(-100%)', `translateY(${top})`);
            break;
        case 'middle':
            const topPosition = Math.floor(
                (hostEl as Element).clientHeight / 2 - wrapperEl.clientHeight / 2
            );
            wrapperEl.style.top = `${topPosition}px`;
            wrapperAnimation.fromTo('opacity', 0.01, 1);
            break;
        default:
            wrapperAnimation.fromTo('transform', 'translateY(100%)', `translateY(${bottom})`);
            break;
    }
    return baseAnimation
        .addElement(hostEl)
        .easing('cubic-bezier(.155,1.105,.295,1.12)')
        .duration(400)
        .addAnimation(wrapperAnimation);
};

// opts used as toastController.create(opts)
if (this.tabsVisible) {
    opts.enterAnimation = (baseEl: ShadowRoot) => iosEnterAnimation(baseEl, opts.position, 60)
}
const toast = await toastController.create(opts);
// ...