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@latest/dist/popover-dropdown/popover-dropdown.esm.js'></script>
</head>

2. 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.firstOption = 'Deutsch';
popoverDropdown.icon = './assets/img/globe-outline.svg';
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);

2. 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],
})

3. 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" [firstOption]="firstOption">
  <img style="width: 100%" slot="icon" src="./assets/img/globe-outline.svg" alt="icon" />
</popover-dropdown>

your-page.page.ts

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

  firstOption: string = 'Deutsch';

Styles

:host {
  --text-color: #111122; // General text color
  --highlight-color: #111122; // Highlight color on hover and selection
  --title-weight: 700; // font-weight of the title element
}

Types and attributes

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

firstOption: string;

Slots

| Property | Attribute | Description | Type | Default | | -------- | --------- | -------------------------------------------------------------------------------- | -------------- | ----------- | | icon | -- | Image, svg or emoji that can be used as an icon on the label's left (up to 24px) | HTML Element | undefined |

Properties

| Property | Attribute | Description | Type | Default | | ------------- | -------------- | ------------------------------------------------------------------------------------------ | ---------- | ----------- | | firstOption | first-option | The first option to be displayed, if it's empty it'll show the first one on options array. | string | undefined | | options | -- | The options list of the popover. | Option[] | undefined | | upwards | upwards | Boolean property to set the popover dropdown to be displayed on top of the description. | boolean | false |

Built with StencilJS