@revolist/dropdown NPM

Description

This is minimalistic dropdown webcomponent built with StencilJs.

Stencil is a compiler for building fast web apps using Web Components.

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

git clone https://github.com/revolist/revodropdown.git revo-dropdown
cd revo-dropdown
git remote rm origin

and run:

npm install
npm start

To build the component for production, run:

npm run build

To run the unit tests for the components, run:

npm test

Need help? Check out our docs here.

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
Then you can use the element anywhere in your template, JSX, html etc

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`
`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"`	`'contains'`
`hasFilter`	`has-filter`		`boolean`	`true`
`placeholder`	`placeholder`	Placeholder text	`string`	`'Select'`
`source`	--	Define object mapping for id/value	`any[]`	`undefined`
`value`	`value`	Selected value	`any`	`undefined`

Event	Description	Type
`changeValue`	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>`

Change value

Type: Promise<void>

Close dropdown

Type: Promise<void>

Open dropdown

Type: Promise<void>

graph TD;
  revo-dropdown --> revo-list
  style revo-dropdown fill:#f9f,stroke:#333,stroke-width:4px

Built with StencilJS

4 years ago