logo
Tags down

shadow

Can we customize ionic toast close button.?


By : Brian White
Date : September 16 2020, 04:00 PM
I wish this help you If you want to do that, then you should use css class. Call the toast like this
code :
const toast = await this.toastCtrl.create({
    message: 'Please Fill all fields',
    duration: 30000,
    position: 'top',
    cssClass: 'toast-bg'
  });

  toast.present();
.toast-bg {
  --background: blue;
}


Share : facebook icon twitter icon

Ionic: customize toggle button.


By : Yan
Date : March 29 2020, 07:55 AM
Hope that helps I am developing ionic application now. May I know can I customize ionic button become as picture below? , 你可以嘗試修改 ionic.css
This is the snippet code for the ionic.css
code :
/**
 * Toggle
 * --------------------------------------------------
 */
.item-toggle {
  pointer-events: none; }

.toggle {
  position: relative;
  display: inline-block;
  pointer-events: auto;
  margin: -5px;
  padding: 5px; }
  .toggle input:checked + .track {
    border-color: #4cd964;
    background-color: #4cd964; }
  .toggle.dragging .handle {
    background-color: #f2f2f2 !important; }
...
...
...

Record Time when user click the close button in Toast notification


By : Ido Yarom
Date : March 29 2020, 07:55 AM
To fix this issue Register background task with ToastNotificationHistoryChangedTrigger trigger.
code :
public class MyBackgroundTask : IBackgroundTask
{
    public void Run(IBackgroundTaskInstance taskInstance)
    {
        var deferral = taskInstance.GetDeferral();
        var details = taskInstance.TriggerDetails as ToastNotificationHistoryChangedTriggerDetail;
        if (details != null)
        {
            if (details.ChangeType == ToastHistoryChangedType.Cleared || details.ChangeType == ToastHistoryChangedType.Removed)
            {
                // your code - get current time
            }
        }
        deferral.Complete();
    }
}

Ionic 2 toast doesn't close on page


By : dyon
Date : March 29 2020, 07:55 AM
this one helps. Keep a reference to your toast, and call dismiss() on it before presenting it. This solution will keep you from having more than one Toast presented at a time.
A solution I like to use myself is to handle all Toast interaction in a service. And inject that service in to whatever component/page/service you need it in.
code :
import { Injectable } from '@angular/core';
import { ToastController, Toast } from 'ionic-angular';

@Injectable()
export class ToastService{
    toast: Toast = null;

    constructor(private toastCtrl: ToastController){ }

    presentToast(text:string):void{
        let toastData = {
            message: text,
            duration: 3000,
            position: 'top'
        }

        this.showToast(toastData);
    }

    presentClosableToast(text:string):void{
        let toastData = {
            message: text,
            showCloseButton: true,
            closeButtonText: 'X',
            position: 'top' 
        };

        this.showToast(toastData);
    }

    private showToast(data:any):void{
        this.toast ? this.toast.dismiss() : false;
        this.toast = this.toastCtrl.create(data);
        this.toast.present();
    }
}

How can I disable the button click in my Ionic 3 Angular app until the toast message gets dismissed?


By : Lucas Shao
Date : March 29 2020, 07:55 AM
I hope this helps . You could modify you service to return the instance of the Toast, like this:
code :
import { Toast } from 'ionic-angular';

export class MessageService {

  constructor(public toastCtrl: ToastController) {}

  private toast(message: string): Toast {
    const toast = this.toastCtrl.create({
      message: message,
      duration: 2000
    });

    return toast;
  }

  error (message: string): Toast {
    return this.toast(message);
  }

  info(message: string): Toast {
    return this.toast(message);
  }

  warning(message: string): Toast {
    return this.toast(message);
  }

  alert (message: string): Toast {
    return this.toast(message);
  }
}
public isDisabled: boolean = false;

// ...

message() {

  // Disable the button
  this.isDisabled = true;

  const toast = this.message.alert('Hi Welcome');
  toast.onDidDismiss(() => {
     // Enable the button when the toast is dismissed
     this.isDisabled = false;    
  });

  // Show the toast
  toast.present();
} 
<button [disabled]="isDisabled" ion-button class="my-button" type="button" full (click)="message()">
  Click Me
</button>

button handler in Toast message Ionic 4 is not fired, why?


By : askgfstl
Date : March 29 2020, 07:55 AM
Hope this helps You just remove role: 'cancel' from Done button object and they start working as expected.
shadow
Privacy Policy - Terms - Contact Us © 35dp-dentalpractice.co.uk