@evergreen-wc/eve-dropdown
Dropdown component made with lit element
Last updated a year ago by hutchgrant .
Apache-2.0 · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install @evergreen-wc/eve-dropdown 
SYNC missed versions from official npm registry.

eve-dropdown

An Evergreen Dropdown Web Component

Demo

Install

npm i @evergreen-wc/eve-dropdown

Usage

import { html, LitElement } from '@polymer/lit-element';
import '@evergreen-wc/eve-dropdown';

const options = [
  { value: 'value1', label: 'label1'},
  { value: 'value2', label: 'label2'},
  { value: 'value3', label: 'label3'},
];

class MyComponent extends LitElement {
  handleSelection(value, idx) {
    console.log('selected', value);
    console.log('index', idx);
  }

  render() {
    return html`
      <eve-dropdown label="Options..." .options='${options}' .optionSelectedCallback="${this.handleSelection.bind(this)}" ></eve-dropdown>
    `;
  }
}
customElements.define('my-component', MyComponent);

Props

Property Description
label The initial text displayed for the dropdown and at the top of the expanded dropdown.
options An array of objects containing value and label properties to display in dropdown.
optionSelectedCallback A callback function for when an option is selected. Will be return the value and index of the selected item to the callback function.

Styling

/* Example style */
--primary-color: #41a6ef;
--secondary-color: #fff;
--dropdown-color: var(--primary-color);
--dropdown-border-color: var(--primary-color);
--dropdown-text-color: var(--secondary-color);
--dropdown-text-size: 1rem;
--dropdown-text-hover-color: var(--secondary-color);
--dropdown-text-expanded-color: var(--primary-color);
--dropdown-text-background-hover: var(--primary-color);
--dropdown-timing: .3s;

Current Tags

  • 0.0.9                                ...           latest (a year ago)

8 Versions

  • 0.0.9                                ...           a year ago
  • 0.0.7                                ...           2 years ago
  • 0.0.6                                ...           2 years ago
  • 0.0.5                                ...           2 years ago
  • 0.0.4                                ...           2 years ago
  • 0.0.3                                ...           2 years ago
  • 0.0.2                                ...           2 years ago
  • 0.0.1                                ...           2 years ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 1
Last Day 0
Last Week 0
Last Month 1
Dependencies (1)
Dev Dependencies (0)
None
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |