simple-dropdown
Featherweight, style-agnostic dropdown UI component
[ This description is mirrored from README.md at github.com/SimpleElements/simple-dropdown on 2019-05-22 ]
Simple Dropdown
Performant, featherweight, style-agnostic dropdown UI component, built on Web Components.
<simple-dropdown origin="top right" label="menu" arrow>
<a href="#">settings</span>
</simple-dropdown>
Contents
Installation & usage
Install simple-dropdown with Bower
$ bower i SimpleElements/simple-dropdown --save
Import it into the <head> of your page
<link rel="import" href="/bower_components/simple-dropdown/simple-dropdown.html">
Then use simple-dropdown in your project
<simple-dropdown></simple-dropdown>
Polyfills for cross-browser support
simple-dropdown relies on emerging standards, for full cross-browser support include the WebComponentsJS polyfill on your page.
<script src="https://unpkg.com/@webcomponents/webcomponentsjs@^1.0.0/webcomponents-loader.js"></script>
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 in your buildstep of choice. Then just include the ES5 adapter on your page
<script src="https://unpkg.com/@webcomponents/webcomponentsjs@^1.0.0/custom-elements-es5-adapter.js"></script>
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
<simple-dropdown position="top left" arrow></simple-dropdown>
<script>
document.querySelector('simple-dropdown').active = true;
</script>
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
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
simple-dropdown {
--simple-dropdown-menu: {
background: blue;
color: white;
padding: 12px 18px;
}
}
MIT © Sean King
Links
Compatibility
Was this helpful? Need more help?
Leave a comment or a question below. You can also join
the chat on Discord or
ask questions on StackOverflow.
Version
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
- Released
- 2017-10-24
- Maturity
- IMPORTED
- License
- MIT License
Compatibility
- Framework
- Polymer 2.0+
- Polymer 1.0+ in 0.4.1
- Browser
- Browser Independent
simple-dropdown - Vaadin Add-on Directory
Featherweight, style-agnostic dropdown UI component
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