Toast messages customizations

WEB TMS WEB Core
1

I am trying to use Toast messages, using the TWebToast control and add Items to it.

Each item however is being rendered in Bootstrap 5 by a toast-header and toast-body DIV tag.

Some toast message needs a red background and a header, others don't.

How do I do this as each Toast is rendered with the same two DIV's (toast-header and toast-body)

Thanks !

2

At this moment, there is not a straight-forward way to do this.
To make this easier, we will add the TWebToast.OnShow event from where you will be able to customize each toast message with CSS as it gets displayed.

Example:

procedure TForm1.WebToast1Show(Sender: TObject; AIndex: Integer;
  AElement: TJSHTMLElement);
begin
  AElement.classList.add('bg-primary');
  AElement.classList.add('text-white');
end;

This will be included in the next update.

1 Like