Miss any of our Open RFC calls?Watch the recordings here! ¬Ľ

@minna-ui/collapse

0.36.0¬†‚Äʬ†Public¬†‚Äʬ†Published

NPM version NPM bundle size (minified + gzip) Licence

@minna-ui/collapse

A simple component to expand and collapse a section of HTML. It can be used standalone, in Svelte projects, or any JavaScript project.

FIXME: Test if standalone version works correctly.

TODO: Write note about @minna-ui/css interplay/dependency.

TODO: Example image.

TODO: Add link to demo and documentation page.

Usage

Standalone

The easiest way to use the component is to add the CDN hosted version directly in your HTML.

TIP: If you're already using a JavaScript bundler you should follow the the "Other JavaScript projects" instructions.

  1. Add the CSS and JS to your document, inside the <head></head>:

     <link href="https://cdn.jsdelivr.net/npm/@minna-ui/collapse/dist/index.css" rel="stylesheet"/>
     
     <script src="https://cdn.jsdelivr.net/npm/@minna-ui/collapse"></script> 

    Or use a specific version:

     <link href="https://cdn.jsdelivr.net/npm/@minna-ui/collapse@0.4.1/dist/index.css" rel="stylesheet"/>
     
     <script src="https://cdn.jsdelivr.net/npm/@minna-ui/collapse@0.4.1"></script> 
  2. Add element/s where you want the component to show in your document <body></body>:

     <div class="minna-collapse">
       <p>This is my collapsed content.</p>
     </div>
     
     <div class="minna-collapse">
       <p>This is more collapsed content.</p>
     </div>
  3. Initialise the component/s (this script must come after the HTML code in step 2):

    <script>
      var collapseEls = document.querySelectorAll('.minna-collapse');
      collapseEls.forEach(function(el) {
        new MinnaCollapse({ target: el });
      });
    </script> 

Svelte projects

Because this is actually a Svelte component, using it in your Svelte projects is simple and allows for the most flexibility and best possible performance.

  1. Install the package:

    yarn add @minna-ui/collapse
  2. Add to your Svelte component:

    MySvelteComponent.svelte:

     <MinnaCollapse>
       <p>This is my collapsed content.</p>
     </MinnaCollapse>
     
     <script>
       import MinnaCollapse from '@minna-ui/collapse';
     
       export default {
         components: {
           MinnaCollapse,
         },
       };
     </script> 

Other JavaScript projects

This component can also be used alongside any JavaScript project, regardless of your framework of choice, by using ES6 modules import.

  1. Install the package:

    yarn add @minna-ui/collapse
  2. Add to your files:

    my-example.html:

     <div class="minna-collapse">
       <p>This is my collapsed content.</p>
     </div>
     
     <div class="minna-collapse">
       <p>This is more collapsed content.</p>
     </div>

    my-example.js:

    import MinnaCollapse from '@minna-ui/collapse';
     
    const collapseEls = document.querySelectorAll('.minna-collapse');
    collapseEls.forEach((el) => {
      new MinnaCollapse({ target: el });
    });

Licence

@minna-ui/collapse is part of Minna UI, an Apache-2.0 licensed open source project. See LICENCE.


© 2020 We Are Genki

Install

npm i @minna-ui/collapse

DownloadsWeekly Downloads

72

Version

0.36.0

License

Apache-2.0

Unpacked Size

152 kB

Total Files

16

Last publish

Collaborators

  • avatar