revo-dropdown

Minimalistic dropdown webcomponent. After long search we couldn't find any cross platform and had to build our own inspired by the latest trends.

Autocomplete	Regular select

Getting Started

To start building a new web component using Stencil, clone this repo to a new directory:

npm i @revolist/revo-dropdown

Module import

import * as loader from '@revolist/revo-dropdown/loader';
if (loader.defineCustomElements) {
  loader.defineCustomElements();
}

Script tag

• Put a script tag similar to this <script src='https://cdn.jsdelivr.net/npm/@revolist/revo-dropdown@latest/dist/revo-dropdown/revo-dropdown.js'></script> in the head of your index.html

Usage

Then you can use the element anywhere in your template, JSX, html etc

<revo-dropdown data-label="name" autocomplete="true" placeholder="Philosophers" max-height="300"></revo-dropdown>

<script type="module">
  const people = [
  {
    eyeColor: 'green',
    name: 'Samantha Molina',
  },
  {
    eyeColor: 'green',
    name: 'Weber Henderson',
  }];
  const dropdowns = document.querySelectorAll('revo-dropdown');
  for (var q = 0; q < dropdowns.length; q++) {
    dropdowns[q].source = people;
  } 
</script>

Need help? Check out docs here.

API

Properties

Events

Methods

doChange(val: any, originalEvent?: MouseEvent) => Promise<void>

Change value

Returns

Type: Promise<void>

doClose(isDisconnected?: boolean) => Promise<void>

Close dropdown

Returns

Type: Promise<void>

doOpen() => Promise<void>

Open dropdown

Returns

Type: Promise<void>