Skip to content

Latest commit

 

History

History
136 lines (95 loc) · 4.98 KB

readme.md

File metadata and controls

136 lines (95 loc) · 4.98 KB
Raw

Built With Stencil

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.

Example

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 = './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);
  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">
  <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