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://unpkg.com/revo-dropdown@latest/dist/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

| Property | Attribute | Description | Type | Default | | --------------- | ---------------- | ---------------------------------------- | ----------------------- | ----------- | | appendTo | append-to | Where to append element | "body" \| "current" | 'body' | | autoClose | auto-close | Should dropdown autoclose on changeValue | boolean | true | | autoFocus | auto-focus | | boolean | false | | autocomplete | autocomplete | | boolean | false | | currentFilter | current-filter | Filter value | any | undefined | | dataId | data-id | Define object mapping for id/value | string | undefined | | dataLabel | data-label | Define object mapping for labels | string | undefined | | filter | filter | Filter criteria | "contains" \| "start" | undefined | | hasFilter | has-filter | | boolean | true | | maxHeight | max-height | | number | undefined | | placeholder | placeholder | Placeholder text | string | 'Select' | | source | -- | Define object mapping for id/value | any[] | [] | | value | value | Selected value | any | undefined |

Events

| Event | Description | Type | | --------- | -------------------------------------- | -------------------------------------------------------- | | changed | When value changed | CustomEvent<{ val: any; originalEvent?: MouseEvent; }> | | close | Before element close, can be prevented | CustomEvent<any> | | open | Before element open, can be prevented | CustomEvent<any> |

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>

Built with StencilJS