stencil-expansion-panel v0.1.2

Getting Started

To install the package, run the following command

npm i stencil-expansion-panel

Using this component

modify the main.ts file in angular project import the below line import { defineCustomElements } from 'stencil-expansion-panel/loader';

and defineCustomElements like this platformBrowserDynamic() .bootstrapModule(AppModule) .catch((err) => console.error(err)); defineCustomElements();

To use components / examples

<stencil-expansion-panel expansionPanelTitle="Expansion 1" icon="😀" isOpened>
  Lorem Ipsum is simply dummy text of the printing and typesetting industry.
  Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
  when an unknown printer took a galley of type and scrambled it to make a type
  specimen book. It has survived not only five centuries, but also the leap into
  electronic typesetting, remaining essentially unchanged. It was popularised in
  the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,
  and more recently with desktop publishing software like Aldus PageMaker
  including versions of Lorem Ipsum.
</stencil-expansion-panel>

Input

expansionPanelTitle - to give the title of the expansion panel.

isOpened - to set the exapansion panel as opened or closed.

titleBackgroundColor - can set the background color of the expansion panel.

icon - can add the icon to the expansion panel (right side of the title)

Output

onClickIcon(event) - emits when the user clicks on the icon to know whether expansion panel is opened or closed