simple-dropdown - Vaadin Add-on Directory
Featherweight, style-agnostic dropdown UI component
**[ This description is mirrored from README.md at [github.com/SimpleElements/simple-dropdown](https://github.com//SimpleElements/simple-dropdown/blob/v1.0.0/README.md) on 2019-05-22 ]**
# Simple Dropdown
[![Build status][travis-badge]][travis-url] ![Size][size-badge] [![Version][tag-badge]][releases-url] [![Published][webcomponents-badge]][webcomponents-url]
Performant, featherweight, style-agnostic dropdown UI component, built on Web Components.
```html
settings
```
### Contents
- [Installation & usage](#installation--usage)
- [Polyfills for cross-browser support](#polyfills-for-cross-browser-support)
- [Transpiling for IE11 support](#transpiling-for-ie11-support)
- [Options](#options)
- [Styling](#styling)
## Installation & usage
Install simple-dropdown with Bower
```sh
$ bower i SimpleElements/simple-dropdown --save
```
Import it into the `` of your page
```html
```
Then use simple-dropdown in your project
```html
```
### Polyfills for cross-browser support
simple-dropdown relies on emerging standards, for full cross-browser support include the [WebComponentsJS](https://github.com/webcomponents/webcomponentsjs) polyfill on your page.
```html
```
### Transpiling for IE11 support
Web Components like simple-dropdown are distributed as ES6 classes, which are supported in all evergreen browsers. To support Internet Explorer 11 you should transpile simple-dropdown to ES5 and use the `webcomponentsjs` `custom-elements-es5-adapter.js` shim.
The easiest way to do this is by including [polymer-build][polymer-build] in your buildstep of choice. Then just include the ES5 adapter on your page
```html
```
## Options
Property | Type | Default | Description
----------- | ------- | ----------------- | ------------
`active` | Boolean | `false` | Whether the dropdown is open or not
`origin` | String | `''` | Position the menu should open from. Can be any combination of `'top'`, `'bottom'`, `'left'`, `'center`, or `'right'`.
`label` | String | `''` | Optional label to display in toggle button
`icon` | String | `simple-dropdown:expand-more` | Icon definition, from `iron-iconset`, set to empty string to hide icon
`noTap` | Boolean | `false` | Disable openeing menu on tap/click
`noIconRotate` | Boolean | `false` | Whether icon should flip when dropdown is open
`arrow` | Boolean | `false` | Add a callout-style arrow to the dropdown menu
Properties can either be set as attributes on the element, or imperitively with Javascript
```html
```
## Styling
Style simple-dropdown with custom CSS properties and mixins
Property | Default | Description
--------------------------------- | --------- | ------------
`--simple-dropdown-icon-size` | `18px` | Size of the toggle icon
`--simple-dropdown-gutter` | `0` | Spacing between the toggle and the menu when open
`--simple-dropdown-offset` | `-5px` | Left/right offset of the dropdown menu when open, relative to the toggle
`--simple-dropdown-border-radius` | `3px` | Border radius applied to menu
Apply properties on simple-dropdown
```css
simple-dropdown {
--simple-dropdown-icon-size: 1rem;
}
```
Mixin | Description
---------------------------| ------------
`--simple-dropdown-toggle` | Mixin applied to the toggle button
`--simple-dropdown-menu` | Mixin applied to the menu
Define mixins on simple-dropdown
```css
simple-dropdown {
--simple-dropdown-menu: {
background: blue;
color: white;
padding: 12px 18px;
}
}
```
***
MIT © [Sean King](https://www.twitter.com/seaneking)
[tag-badge]: https://img.shields.io/github/tag/SimpleElements/simple-dropdown.svg
[releases-url]: https://github.com/SimpleElements/simple-dropdown/releases
[travis-badge]: https://img.shields.io/travis/SimpleElements/simple-dropdown.svg
[travis-url]: https://travis-ci.org/SimpleElements/simple-dropdown
[size-badge]: http://img.badgesize.io/SimpleElements/simple-dropdown/master/simple-dropdown.html?compression=gzip&label=size%20%28unminified%29
[webcomponents-badge]: https://img.shields.io/badge/webcomponents.org-published-blue.svg
[webcomponents-url]: https://www.webcomponents.org/element/SimpleElements/simple-dropdown
[polymer-build]: https://github.com/Polymer/polymer-build
Documentation
GitHub Homepage
Issue tracker
View on GitHub
simple-dropdown version 0.1.0
### Dependencies
* webcomponentsjs#^0.7.14
* polymer#^1.6.0
* iron-icon#PolymerElements/iron-icon#^1.0.9
* simple-callout#^0.2.0
* iron-icons#PolymerElements/iron-icons#^1.1.3
simple-dropdown version 0.1.1
### Dependencies
* webcomponentsjs#^0.7.14
* polymer#^1.6.0
* iron-icon#PolymerElements/iron-icon#^1.0.9
* simple-callout#^0.2.0
* iron-icons#PolymerElements/iron-icons#^1.1.3
simple-dropdown version 0.1.2
### Dependencies
* webcomponentsjs#^0.7.14
* polymer#^1.6.0
* iron-icon#PolymerElements/iron-icon#^1.0.9
* simple-callout#^0.2.0
* iron-icons#PolymerElements/iron-icons#^1.1.3
simple-dropdown version 0.1.3
### Dependencies
* webcomponentsjs#^0.7.14
* polymer#^1.6.0
* iron-icon#PolymerElements/iron-icon#^1.0.9
* simple-callout#^0.2.0
* iron-icons#PolymerElements/iron-icons#^1.1.3
simple-dropdown version 0.1.4
### Dependencies
* webcomponentsjs#^0.7.14
* polymer#^1.6.0
* iron-icon#PolymerElements/iron-icon#^1.0.9
* simple-callout#^0.2.0
* iron-icons#PolymerElements/iron-icons#^1.1.3
simple-dropdown version 0.1.5
### Dependencies
* polymer#^1.6.0
* iron-icon#PolymerElements/iron-icon#^1.0.12
* simple-callout#^0.4.0
* iron-iconset-svg#PolymerElements/iron-iconset-svg#^1.1.0
simple-dropdown version 0.1.6
### Dependencies
* polymer#^1.6.0
* iron-icon#PolymerElements/iron-icon#^1.0.12
* simple-callout#^0.4.0
* iron-iconset-svg#PolymerElements/iron-iconset-svg#^1.1.0
simple-dropdown version 0.1.7
### Dependencies
* polymer#^1.6.0
* iron-icon#PolymerElements/iron-icon#^1.0.12
* simple-callout#^0.4.0
* iron-iconset-svg#PolymerElements/iron-iconset-svg#^1.1.0
simple-dropdown version 0.1.8
### Dependencies
* polymer#^1.6.0
* iron-icon#PolymerElements/iron-icon#^1.0.12
* simple-callout#^0.4.0
* iron-iconset-svg#PolymerElements/iron-iconset-svg#^1.1.0
simple-dropdown version 0.1.10
### Dependencies
* polymer#^1.6.0
* iron-icon#PolymerElements/iron-icon#^1.0.12
* simple-callout#^0.4.0
* iron-iconset-svg#PolymerElements/iron-iconset-svg#^1.1.0
simple-dropdown version 0.1.9
### Dependencies
* polymer#^1.6.0
* iron-icon#PolymerElements/iron-icon#^1.0.12
* simple-callout#^0.4.0
* iron-iconset-svg#PolymerElements/iron-iconset-svg#^1.1.0
simple-dropdown version 0.2.0
### Dependencies
* polymer#^1.6.0
* iron-icon#PolymerElements/iron-icon#^1.0.12
* simple-callout#^0.4.0
* iron-iconset-svg#PolymerElements/iron-iconset-svg#^1.1.0
simple-dropdown version 0.2.1
### Dependencies
* polymer#^1.6.0
* iron-icon#PolymerElements/iron-icon#^1.0.12
* simple-callout#^0.4.0
* iron-iconset-svg#PolymerElements/iron-iconset-svg#^1.1.0
simple-dropdown version 0.2.2
### Dependencies
* polymer#^1.6.0
* iron-icon#PolymerElements/iron-icon#^1.0.12
* simple-callout#^0.4.0
* iron-iconset-svg#PolymerElements/iron-iconset-svg#^1.1.0
simple-dropdown version 0.3.0
### Dependencies
* polymer#^1.6.0
* iron-icon#PolymerElements/iron-icon#^1.0.12
* simple-callout#^0.4.0
* iron-iconset-svg#PolymerElements/iron-iconset-svg#^1.1.0
simple-dropdown version 0.4.0
### Dependencies
* polymer#^1.6.0
* iron-icon#PolymerElements/iron-icon#^1.0.12
* simple-callout#^0.4.3
* iron-iconset-svg#PolymerElements/iron-iconset-svg#^1.1.0
simple-dropdown version 0.4.1
### Dependencies
* polymer#^1.6.0
* iron-icon#PolymerElements/iron-icon#^1.0.12
* simple-callout#^0.4.3
* iron-iconset-svg#PolymerElements/iron-iconset-svg#^1.1.0
simple-dropdown version 1.0.0
### Dependencies
* polymer#^2.0.0
* iron-iconset-svg#PolymerElements/iron-iconset-svg#^2.1.0
* iron-icon#PolymerElements/iron-icon#^2.0.1
* simple-callout#SimpleElements/simple-callout#^1.0.0