Directory

← Back

simple-dropdown

Featherweight, style-agnostic dropdown UI component

Author

Rating

Popularity

<100

[ 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

Compatibility

(Loading compatibility data...)

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 simple-dropdown - Vaadin Add-on Directory
**[ 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
Online