@extends('../layout/' . $layout) @section('subhead') Alert - Rocketman - Tailwind HTML Admin Template @endsection @section('subcontent')

Alert

Basic Alerts

Icon Alerts

Additional Content Alerts

Icon & Dismiss Alerts

Outline Alerts

Soft Color Alerts

Methods

Get or Create Instance
Static method which allows you to get the alert instance associated with a DOM element, or create a new one in case it wasn’t initialized.
                            
                                const myAlert = tailwind.Alert.getOrCreateInstance(document.querySelector("#myAlert"));
Get Instance
Static method which allows you to get the alert instance associated with a DOM element.
                            
                                const myAlert = tailwind.Alert.getInstance(document.querySelector("#myAlert"));
Hide
Manually hides an alert. Returns to the caller before the alert has actually been hidden (i.e. before the hidden.tw.alert event occurs).
                            
                                myAlert.hide();
Show
Manually opens an alert. Returns to the caller before the alert has actually been shown (i.e. before the shown.tw.alert event occurs).
                            
                                myAlert.show();
Toggle
Manually toggles an alert. Returns to the caller before the alert has actually been shown or hidden (i.e. before the shown.tw.alert or hidden.tw.alert event occurs).
                            
                                myAlert.toggle();

Events

Rocketman’s alert class exposes a few events for hooking into alert functionality. All alert events are fired at the alert itself (i.e. at the <div class="alert">).
Event type Description
show.tw.alert This event fires immediately when the show instance method is called.
hide.tw.alert This event is fired immediately when the hide instance method has been called. 
                            
                                const myAlertEl = document.getElementById('myAlert')
                                myAlertEl.addEventListener('hidden.tw.alert', function (event) {
                                    // do something...
                                })
@endsection