[SOLVED] Is it possible to create Toast with Icon and CloseButton?

Question:
How to create Toast with Icon and CloseButton?

SImulate:
Create a toast with icon and button.

Error:
Only icon appears.

Example:

export default (props, { $f7, $f7router }) => {

        let toastOptions = { icon: '<i class="f7-icons">star_fill</i>', position: 'top', closeButton: true, closeButtonText: 'Close Me', closeButtonColor: 'red' };

        let emptyInput = 'Preencha o campo corretamente';

        $on('pageAfterIn', () => createToast());

        const createToast = () => {

            toastOptions.text = emptyInput;

            $f7.toast.create(toastOptions).open();

        };

        return $render;

    };

Try instead of icon define icon HTML in text option

It works Perfect!

i just add:

 .toast-text {
  text-align: center;
}

and my code look like:

export default (props, { $f7, $f7router }) => {

    let toastOptions = {  position: 'top', closeButton: true, closeButtonText: 'Close Me', closeButtonColor: 'red' };
    let toastIcon = '<i class="f7-icons">star_fill</i>';
    let emptyInput = 'Preencha o campo corretamente';

    $on('pageAfterIn', () => createToast());

    const createToast = (err) => {

        toastOptions.text = `${toastIcon}<br/>${emptyInput}`;

        $f7.toast.create(toastOptions).open();

    };

    return $render;

};

Thanks @nolimits4web!

1 Like