Toast

FacesMessage but as a toast.

<tc:toasts id="toastFacesMessages" value="#{toastsController.toastFacesMessages}" var="toastFacesMessage" placement="bottomLeft"> <f:facet name="header"> <tc:panel> <tc:style customClass="rounded me-2 #{toastFacesMessage.severityColor}" width="1.25rem" height="1.25rem"/> </tc:panel> <strong> <tc:out value="#{toastFacesMessage.severityText}" plain="true"/> </strong> </f:facet> <tc:out value="#{toastFacesMessage.text}" plain="true"/> </tc:toasts> Severity Information Warning Error Fatal ToastFacesMessage ToastFacesMessage (AJAX)

Create a toast with a progress bar. Automatic dispose after a specific time is disabled ( disposeDelay="-1"). The close button is hidden ( markup="hideCloseButton"). The component is refreshed every 100ms. After the progress bar has reached 100%, the progress bar object is removed from the list ( value="#{toastsController.progressBars}". After the next refresh the related toast will also be removed from the page.

<tc:toasts id="progressBarToasts" value="#{toastsController.progressBars}" var="progress" disposeDelay="-1" markup="hideCloseButton"> <f:facet name="reload"> <tc:reload frequency="100"/> </f:facet> <f:facet name="header"> <tc:out value="Progress" plain="true"/> </f:facet> <tc:progress value="#{progress.value}" max="#{progress.max}"/> </tc:toasts> Progress bar toast Progress bar toast (AJAX)

To put a custom CSS class on a toast, use <tc:style customClass="..."/>.

<tc:toasts id="customToasts" value="#{toastsController.customCssToasts}" var="customToast"> <tc:style customClass="#{customToast.cssClass}"/> <f:facet name="header"> <tc:out value="Custom toast" plain="true"/> </f:facet> <tc:out value="The used CSS class is: #{customToast.cssClass}" plain="true"/> </tc:toasts> Custom CSS toast Custom CSS toast (AJAX)