@seed-catalog/collapse

Collapse custom-element

Usage no npm install needed!

<script type="module">
  import seedCatalogCollapse from 'https://cdn.skypack.dev/@seed-catalog/collapse';
</script>

README

Seed Collapse

Storybook

Dependencies

Npm

npm install @seed-catalog/collapse

How to use

import { LitElement, html, css } from 'lit-element';
import { seedStyle } from '@seed-catalog/styles';
import '@seed-catalog/collapse';
import '@seed-catalog/dropdown';

class MyComponent extends LitElement {
  static get styles() {
    return [
      seedStyle,
      css`
        ...
      `
    ];
  }

  render() {
    return html`
      <seed-collapse>
        <seed-dropdown position="absolute" maxWidth="300" rotate clickout>
          <button slot="button" class="sd-btn-mix red"><i class="material-icons">keyboard_arrow_down</i>Collapse</button>
          <p slot="content">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            Cras ut viverra leo, vel dapibus quam. Proin a sollicitudin quam,
            eget viverra diam. Donec euismod mattis dignissim.
          </p>
        </seed-dropdown>
      </seed-collapse>
    `;
  }
}

Link: https://www.npmjs.com/package/@seed-catalog/collapse