@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@latest/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.firstOption = 'Deutsch';
popoverDropdown.icon = 'globe-outline';
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" [firstOption]="firstOption" [icon]="icon"></popover-dropdown>

your-page.page.ts

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

  icon: string = 'globe-outline';

  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
}

You can

Types and attributes

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

firstOption: string;

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
icon	icon	The icon displayed at the right side of the popover description. It uses ionicons v6 icons.	string	undefined
options	--	The options list of the popover.	Option[]	undefined

Dependencies

Depends on

• ion-icon

Graph

graph TD;
  popover-dropdown --> ion-icon
  style popover-dropdown fill:#f9f,stroke:#333,stroke-width:4px

---

Built with StencilJS