1. Docs
  2. Dismissible

Dismissible Component

Easily remove an element from the DOM or hide it from the screen.

Installation

To get started, install the @flexilla/dismissible package. You can skip this step if you’ve already installed @flexilla/flexilla.

Structure

Dismissible Structure

  • Dismissible: The container element to make dismissible.
  • Dismiss Buttons: Elements used as triggers to dismiss the container. Must include the data-dismiss-btn attribute.

Example

Hide Element From Screen Only

You neen to add new user

Lorem, ipsum dolor sit amet consectetur adipisicing elit.

icon - html index.html (html)

Using the Component

Import the Dismissible component and initialize it with the desired target. 
import { Dismissible } from '@flexilla/dismissible';
new Dismissible("#dismiss-me");

Removing from DOM

The Dismissible component supports removing elements from the DOM. Here’s how to do it:

Via Data Attribute 

<div id="dismiss-me" data-action="remove-from-dom">
  <!-- Content here -->
</div>

With Parameter 

new Dismissible(
    '#dismiss-me',
    "remove-from-dom"
);

Example

Here’s an example of removing an element from the DOM.

Remove Element From Dom

You neen to add new user

Lorem, ipsum dolor sit amet consectetur adipisicing elit.

icon - html index.html (html)

Examples

We’re using UnoCSS here for styling, but you can use any CSS library or framework, or even plain CSS.

Props/Params & Options

Params

dismissible
HTMLElement|string
The dismissible container. Must be a valid selector or HTMLElement.
action
remove-from-dom | hide-from-screen | undefined
The action to perform when dismissing. Default is hide-from-screen.
onDismiss
void
A method to perform a specific action when an element is dismissed.

With JavaScript

new Dismissible(
    "#dismiss-me",
    "hide-from-screen",
    () => {
        console.log("Dismissed");
    }
);

Methods

dismiss

You can manually dismiss the element. 
import { Dismissible } from "@flexilla/dismissible";

const dismissEl = new Dismissible("#dismiss-me");

dismissEl.dismiss();

Auto Init

The autoInit method allows you to initialize all dismissible elements. It accepts a string to identify the elements (e.g., by class name or data attribute). By default, [data-fx-dismissible] is used. 
import { Dismissible } from "@flexilla/dismissible";

Dismissible.autoInit();  // Initializes dismissible components based on `data-fx-dismissible`
// or
Dismissible.autoInit(".dismiss-item");