Looking for SASS-based vui-dropdown
? It's over here.
A Polymer-based web component for dropdown/flyouts.
d2l-dropdown
can be installed from Bower:
bower install d2l-dropdown
Include the webcomponents.js "lite" polyfill (for browsers who don't natively support web components), then import the opener and content components as needed:
<head>
<script src="https://s.brightspace.com/lib/webcomponentsjs/0.7.21/webcomponents-lite.min.js"></script>
</head>
d2l-dropdown
is a generic opener for dropdown content (d2l-dropdown-content
or d2l-dropdown-menu
) enabling alternate opener implementation using existing elements/components. Provide and indicate your own opener element with the class attribute value d2l-dropdown-opener
. Wire-up is automatic.
<link rel="import" href="../d2l-dropdown/d2l-dropdown.html">
<link rel="import" href="../d2l-dropdown/d2l-dropdown-content.html">
<d2l-dropdown>
<button class="d2l-dropdown-opener">Open!</button>
<d2l-dropdown-content>
Some content...
</d2l-dropdown-content>
</d2l-dropdown>
If the dropdown is initially empty when it's opened, the dropdown pointer will not be positioned correctly. In such cases, the no-auto-open
attribute may be added to the opener, enabling you to take control of when the dropdown is actually opened:
<d2l-dropdown no-auto-open>
...
</d2l-dropdown>
dropdown.addEventListener('click', function() {
// fetch some content
...
// take control of when the dropdown is actually opened
dropdown.toggleOpen();
});
d2l-dropdown-button
is a d2l-button
opener for dropdown content (d2l-dropdown-content
or d2l-dropdown-menu
). Provide text
for the button and content component as needed.
<link rel="import" href="../d2l-dropdown/d2l-dropdown-button.html">
<link rel="import" href="../d2l-dropdown/d2l-dropdown-content.html">
<d2l-dropdown-button text="Open!" primary>
<d2l-dropdown-content>
Some content...
</d2l-dropdown-content>
</d2l-dropdown-button>
primary
- optionally render button as primary button
d2l-dropdown-context-menu
is a simple/minimal opener for dropdown content (d2l-dropdown-content
or d2l-dropdown-menu
). Provide text
for accessibility and content component as needed.
<link rel="import" href="../d2l-dropdown/d2l-dropdown-context-menu.html">
<link rel="import" href="../d2l-dropdown/d2l-dropdown-content.html">
<d2l-dropdown-context-menu text="Open!">
<d2l-dropdown-content>
Some content...
</d2l-dropdown-content>
</d2l-dropdown-context-menu>
d2l-dropdown-more
is a simple opener using d2l-tier1:more
as the button's icon.
<link rel="import" href="../d2l-dropdown-more.html">
<link rel="import" href="../d2l-dropdown-menu.html">
<d2l-dropdown-more id="dropdown-more-menu" label="Open!">
<d2l-dropdown-menu id="dropdown-menu">
Some content...
</d2l-dropdown-menu>
</d2l-dropdown-more>
d2l-dropdown-content
is a generic container for dropdown content. It provides behavior such as sizing, positioning, and managing focus gain/loss.
<link rel="import" href="../d2l-dropdown/d2l-dropdown-content.html">
<d2l-dropdown-content min-width="..." max-width="..." no-padding>
Some content...
</d2l-dropdown-content>
min-width
(number) - optionally override default min-widthmax-width
(number) - optionally override default max-widthno-auto-fit
- optionally opt out of auto-sizingno-padding
- optionally render with no paddingno-pointer
- optionally render without a pointerrender-content
- optionally stamp contents into DOM immediatelyvertical-offset
- optionally provide custom offset, positive or negativealign
(enum) - optionally align dropdown. Valid values are "start","end". If not set, the dropdown will attempt be centredboundary
(object) - optionally provide boundaries to where the dropdown will appear. Valid properties are "above", "below", "left", "right"
// triggered when dropdown opened
content.addEventListener('d2l-dropdown-open', () => { ... });
// triggered when dropdown closed
content.addEventListener('d2l-dropdown-close', () => { ... });
d2l-dropdown-menu
is a container for a d2l-menu component. It provides behavior in addition to the basic behavior of d2l-dropdown-content
such as closing the menu when menu items are selected, resetting to the root of nested menus when reopening, etc.
<link rel="import" href="../d2l-dropdown/d2l-dropdown-menu.html">
<d2l-dropdown-menu>
<d2l-menu label="some menu">
...
</d2l-menu>
</d2l-dropdown-menu>
In production, it's recommended to use a build tool like Vulcanize to combine all your web components into a single import file. More from the Polymer Docs: Optimize for Production...
See the VUI Best Practices & Style Guide for information on VUI naming conventions, plus information about the EditorConfig rules used in this repo.