Tailwind Dismiss component allows users to hide elements like alerts or notifications with a click.
Dismiss the element with a smooth transition, ensuring it is removed from the DOM.
Dismiss the element with a smooth transition, ensuring it is hidden with .hidden Tailwind Class.
These data attributes allow you to set options for the dismiss component during auto initialization.
| Option | Type | Default | Description |
|---|---|---|---|
data-kt-collapse-hidden-class | Tailwind class to use for the hidden state of the dismissable elements. | ||
data-kt-dismiss-interrupt | Prevents event propagation when the dismiss element is clicked. | ||
data-kt-dismiss-mode | By using "hide" mode, you can hide dismissed elements within the DOM structure, preserving their state for potential re-display later. This differs from the default behavior "remove" , which permanently removes them from the DOM. |
This table details the data attributes used by the dismiss component.
| Name | Description |
|---|---|
| Data Attributes | |
| data-kt-dismiss | Used to auto-initialize KTDismiss instances on page load and provides a string value serving as an ID selector, "#content_id" for a collapsible element. Alternatively, you can remove it and perform initialization using JavaScript. |
Use KTDismiss component's API methods to programmatically control its behavior.
| Method | Description |
|---|---|
new KTDismiss(element, options) | Creates an object instance of KTCollapse class for the given DOM element and configuration options. |
dismiss() | Executes the dismissal action on the target element. |
getTargetElement() | Retrieves the DOM element targeted by a specific KTDismiss instance. |
getOption(name) | Retrieves the value of a configuration option by name parameter from a KTDismiss instance. |
getElement() | Retrieves the DOM element linked to a specific KTDismiss instance. |
on(eventName, handler) | Allows attaching event listeners to the KTCollapse custom events using the eventName and eventId string parameters. These events enable programmatic interaction based on user actions or internal state changes of KTCollapse. The function returns string as a unique identifier for the registered listener, allowing you to remove it later if needed. |
off(eventName, eventId) | Removes an event listener for the eventName and eventId parameters attached with the on method. |
dispose() | Removes the KTDismiss instance from an element, including any associated data stored on the DOM element. |
const dismisserEl = document.querySelector('#my_dismisser');
const dismiss = KTDismiss.getInstance(dismisserEl);
// Create a new instance on demand.
const newDismiss = new KTDismiss(dismisserEl, {
interrupt: true,
mode: 'hide'
});
dismiss.dismiss();Manage and interact with KTDismiss instances using these static methods of KTDismiss JavaScript class.
| Method | Description |
|---|---|
init() | Automatically initializes KTDismiss object for all elements with the data-kt-dismiss attribute on page load. |
createInstances() | Allows to create KTDismiss instances for all elements that have been dynamically added to the DOM but haven't been activated yet. |
getInstance(element) | Returns the KTDismiss object associated with the given DOM element element . |
getOrCreateInstance(element) | Returns the existing KTDismiss object for the provided DOM element element , or creates a new instance if none exists, then returns the same. |
// Initialize all dismisses
KTDismiss.init()
// Initialzie pending dismisses
KTDismiss.createInstances();
// Get dismiss object
const dismisserEl = document.querySelector('#my_dismisser');
const dismiss = KTDismiss.getInstance(dismisserEl);KTDismiss custom events allows you to register callback functions(event listeners) that will be invoked automatically whenever specific custom events are triggered within the component.
| Event | Description |
|---|---|
dismiss | dismiss Triggered immediately before a dismissible element is hidden. |
dismissed | Triggered immediately after a dismissible element is hidden. |
const dismisserEl = document.querySelector('#my_dismisser');
const dismiss = KTDismiss.getInstance(dismisserEl);
dismiss.on('dismiss', () => {
detail.cancel = true;
console.log('dismiss action canceled');
});
dismiss.on('dismissed', () => {
console.log('dismissed event');
});