Contact us
Get started

Directory

← Back

simple-dropdown

Featherweight, style-agnostic dropdown UI component

Author

Contributors

Rating

Links

[ This description is mirrored from README.md at github.com/SimpleElements/simple-dropdown on 2019-05-22 ]

Simple Dropdown

Build status Size Version Published

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

(Loading compatibility data...)

Last updated: 2017-10-24

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
Online