st-collapsable v0.1.4

st-collapsable

What is it?

st-collapsable is a web component built with Stencil that makes any html content collpasable. It works in pretty much same way as BS collpsable tough it has some extensions.

Usage

To use this component in your app, no matter what framework you are using, follow these steps:

• pop this script tag <script async defer src='https://unpkg.com/st-collapsable@0.1.4/dist/stcollapsable.js'></script> into your index.html
• define your collapsable content:

  <st-collapsable collapsed="false" collapsable-id="collapsable-test">
    <div>My collapsable html content</div>
  </st-collapsable>

• define triggers for your collapsable content (it is crucial that your trigger has class St-Collapsable__trigger and points to id of collapsable content with st-collapsable-trigger):

  <button class="St-Collapsable__trigger" st-collapsable-trigger="collapsable-test">trigger</button>
  <span class="St-Collapsable__trigger" st-collapsable-trigger="collapsable-test">trigger</span>
  <a class="St-Collapsable__trigger" st-collapsable-trigger="collapsable-test">trigger</a>

API

Properties:

• collapsable-id (string): id of your collapsable content. It is used when registering triggers for your collapsable content
• collapsed (string): decides if html content is collapsed at the begining. true by default

Examples

  <button class="St-Collapsable__trigger" st-collapsable-trigger="collapsable-test">trigger</button>

  <st-collapsable collapsed="false" collapsable-id="collapsable-test">
    <div>My collapsable html content</div>
  </st-collapsable>