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.

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.

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");