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.
npm i @carbonaut/popover-dropdown --save
To get our component up and running on your app, follow the steps for your framework (or Vanilla JS):
Vanilla JS:
- Add the package's module on a
script
tag inside yourhead
tag in yourindex.html
file:
<script type='module' src='https://unpkg.com/@carbonaut/popover-dropdown@latest/dist/popover-dropdown/popover-dropdown.esm.js'></script>
</head>
- 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
- Add
defineCustomElements
function to yourmain.ts
file:
import { defineCustomElements } from '@carbonaut/popover-dropdown/loader';
defineCustomElements(window);
- On the
module.ts
file you're going to use the component addCUSTOM_ELEMENTS_SCHEMA
to your schema configuration
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
@NgModule({
imports: [
...
],
declarations: [...],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
- 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';
: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
}
option: {
label: string;
callback: () => {};
}
firstOption: string;
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 |
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