@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.
-
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>
-
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>
-
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.
-
Install the package:
yarn add @minna-ui/collapse
-
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.
-
Install the package:
yarn add @minna-ui/collapse
-
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