Skip to content

marksolutions/mark-collapse

Repository files navigation

<mark-collapse> Published on npm

  • This is simple web component built using the lit.dev library.
  • It provides a simple way to create collapsible content sections.
  • Users can toggle the visibility of the content by interacting with the component.

Installation

npm i @markai/mark-collapse
yarn add @markai/mark-collapse

Usage

Example of mark-collapse usage patten.

  1. Import the mark-collapse element:
import '@markai/mark-collapse';
  1. Add the mark-collapse element to your HTML:
<mark-collapse open>
  <p>This content can be collapsed and expanded.</p>
</mark-collapse>

Properties

name Type Description
open boolean Determines whether the content is currently open (visible) or closed (hidden). By default, it is set to false, meaning the content is initially closed.

Methods

name Return Description
toggle void allows you to programmatically toggle the visibility of the content. Call this method to change the state of the open property.

Slots

name Description
default to insert content that you want to collapse. Place your content within the <slot></slot> tags inside the mark-collapse element.

CSS Custom Properties

Name Default Description
--mark-collapse-transition-duration 0.5s The duration of the collapse/expand animation.
--mark-collapse-transition-timing 0.5s The timing function for the collapse/expand animation.