@carbonaut/popover-dropdown

Popover Dropdown

This is a web-component built with Stencil that presents a custom popover that can receive a any callback functions that will be called on click.

Install

npm i @carbonaut/popover-dropdown --save

Getting Started

To get our component up and running on your app, follow the steps for your framework (or Vanilla JS):

Vanilla JS:

1. Add the package's module on a script tag inside your head tag in your index.html file:

<script type='module' src='https://unpkg.com/@carbonaut/popover-dropdown@0.0.2/dist/popover-dropdown/popover-dropdown.esm.js'></script>
</head>

1. Apply the component to html and then attach the options attibutes to the component using JavaScript:

HTML

<popover-dropdown></popover-dropdown>

JavaScript

const popoverDropdown = document.querySelector('popover-dropdown');
popoverDropdown.currentOption = 'Deutsch';
popoverDropdown.options = [
  { label: 'Deutsch', callback: () => {} },
  { label: 'English', callback: () => {} },
  { label: 'Español', callback: () => {} },
];

Angular

1. Add defineCustomElements function to your main.ts file:

import { defineCustomElements } from '@carbonaut/popover-dropdown/loader';

defineCustomElements(window);

1. On the module.ts file you're going to use the component add CUSTOM_ELEMENTS_SCHEMA to your schema configuration

import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';


@NgModule({
  imports: [
    ...
  ],
  declarations: [...],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})

1. Use the component on your HTML template page and attach the option properties through your .ts file;

your-page.page.html

<popover-dropdown [options]="options" [currentOption]="firstOption"></popover-dropdown>

your-page.page.ts

export class ExamplePage {
  options = [
    { label: 'Deutsch', callback: () => {} },
    { label: 'English', callback: () => {} },
    { label: 'Español', callback: () => {} },
  ];

  firstOption: string = 'Deutsch';

Types and attributes

option: {
  label: string;
  callback: () => {};
}

currentOption: string;

Property	Description
options	Option[] Array of objects that contains a label property of type string and a callback property that can be any function you want to be triggered when the option is selected.
current-option	string The option you want to have displayed when you first open the component, this property must match with a label from the options property, otherwise it will be replaced by the first label on the options array.

This package was built utilizing Stencil.js

Stencil is a compiler for building fast web apps using Web Components.

Stencil combines the best concepts of the most popular frontend frameworks into a compile-time rather than run-time tool. Stencil takes TypeScript, JSX, a tiny virtual DOM layer, efficient one-way data binding, an asynchronous rendering pipeline (similar to React Fiber), and lazy-loading out of the box, and generates 100% standards-based Web Components that run in any browser supporting the Custom Elements v1 spec.

Stencil components are just Web Components, so they work in any major framework or with no framework at all.