https://github.com/marksolutions/mark-collapse

Toggle the visibility of content.
https://github.com/marksolutions/mark-collapse

collapse collapsible lit lit-element lit-html toggle

Last synced: 19 days ago
JSON representation

Toggle the visibility of content.

• Host: GitHub
• URL: https://github.com/marksolutions/mark-collapse
• Owner: marksolutions
• License: apache-2.0
• Created: 2022-07-11T14:34:13.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2023-11-16T11:29:38.000Z (about 1 year ago)
• Last Synced: 2024-11-07T05:42:32.456Z (about 2 months ago)
• Topics: collapse, collapsible, lit, lit-element, lit-html, toggle
• Language: TypeScript
• Homepage:
• Size: 31.3 KB
• Stars: 0
• Watchers: 0
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# `` [![Published on npm](https://img.shields.io/npm/v/@markai/mark-collapse.svg)](https://www.npmjs.com/package/@markai/mark-collapse)

- This is simple web component built using the [lit.dev](https://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

```shell

npm i @markai/mark-collapse

```

```shell

yarn add @markai/mark-collapse

```

### Usage

Example of mark-collapse usage patten.

1. Import the mark-collapse element:

```js

import '@markai/mark-collapse';

```

2. Add the mark-collapse element to your HTML:

```html

  
This content can be collapsed and expanded.


```

### 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 `` 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. |