Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/anypoint-web-components/anypoint-dropdown-menu
⛔️ DEPRECATED This component is being deprecated. Use the `awc` module instead.
https://github.com/anypoint-web-components/anypoint-dropdown-menu
deprecated obsolete
Last synced: about 2 months ago
JSON representation
⛔️ DEPRECATED This component is being deprecated. Use the `awc` module instead.
- Host: GitHub
- URL: https://github.com/anypoint-web-components/anypoint-dropdown-menu
- Owner: anypoint-web-components
- License: other
- Created: 2019-08-05T05:28:00.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-06-16T16:17:39.000Z (over 1 year ago)
- Last Synced: 2024-11-03T16:03:20.740Z (2 months ago)
- Topics: deprecated, obsolete
- Language: JavaScript
- Homepage:
- Size: 1.45 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 9
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# Deprecated
This component has been moved to `anypoint-web-components/awc`.
-----
This component is based on Material Design menu and adjusted for Anypoint platform components.
Anypoint web components are set of components that allows to build Anypoint enabled UI in open source projects.
Exposed dropdown menus display the currently selected menu item above the menu.
They can be used only when a single menu item can be chosen at a time.
## Styling options
The element has three built-in themes:
- Material Design - Filled
- Material Design - Outlined
- Anypoint Design - Compatibility
By default the input renders `filled` dropdown list.
Outlined style is rendered when `outlined` property is set.
Anypoint ready styles are rendered when `compatibility` property is set.
OSS application should not use Anypoint based styling as it's protected by MuleSoft copyrights. This property is reserved for OSS applications embedded in the Anypoint platform.
[](https://www.npmjs.com/package/@anypoint-web-components/anypoint-dropdown-menu)
## Usage
### Installation
```sh
npm install --save @anypoint-web-components/anypoint-dropdown
```
### In an HTML file
```html
import "@anypoint-web-components/anypoint-dropdown/anypoint-dropdown.js";
import "@anypoint-web-components/anypoint-listbox/anypoint-listbox.js";
import "@anypoint-web-components/anypoint-item/anypoint-item.js";
Selected dinosaur
item 1
item 2
item 3
```
### Replacement for the `anypoint-listbox` element
It is possible to use different element than `anypoint-listbox`. The replacement should use [AnypointMenuMixin](https://github.com/anypoint-web-components/anypoint-menu-mixin) which provides API for the dropdown element to work.
### Value selection
When the user selects one of the options in the dropdown menu the list is closed and the rendered label is one of the following (in order):
- `label` property of the selected item
- `label` or `data-label` attribute io the selected item
- `innerText` of the selected item
The same value is set as `value` property.
The selection can be controlled by setting `selected` attribute/property on the `anypoint-listbox` or the element implementing `AnypointMenuMixin`.
```html
Selected dinosaur
item 1
item 2
item 3
```
By default the selected value is set to `My item 1`. When selecting option 3 then the label value becomes `item 3`.
### Assistive text
Assistive text allows the user to better understand what kind of input is required. It can be an info message or invalid message when invalid
input has been detected.
#### Info message
Info message provides the user with additional description for the field. It should be used when the label can be confusing or to ensure the user about the reason of collecting the input.
```html
Select a dinosaur
item 1
item 2
item 3
```
Do not try to put too detailed information. The user should be able to scan the message in a fraction of a second. Treat it as an additional text for the label.
#### Invalid message
Error message should help the user recover from the error state. Use clear message with simple instructions of how to fix the problem, for example `Only letters are allowed`.
```html
Select a dinosaur
item 1
item 2
item 3
```
### Form-associated custom elements
The [form-associated custom elements](https://docs.google.com/document/d/1JO8puctCSpW-ZYGU8lF-h4FWRIDQNDVexzHoOQ2iQmY/edit?pli=1#) allows to associate a custom element with a `` element. Original custom elements spec does not allow this.
The form-associated custom elements may not be supported in some browsers so custom form elements may be required to be used (for example [iron-form](https://www.webcomponents.org/element/@polymer/iron-form)).
The element supports this API in browser that has this API implemented. This means that the element behaves like a `` element when inserted into the form element. See demo page for an example.
### Validation
The element support `required` and `autoValidate` properties. When the element is `required` then it renders invalid state when `validate()` or `checkValidity()` function is called.
The `validate()` function is provided by [ValidatableMixin](https://github.com/anypoint-web-components/validatable-mixin) for custom elements. `checkValidity()` function calls `validate()` function, and, if available, internal `checkValidity()` function provided by form-associated custom elements API.
The `autoValidate` option allows to automatically call validate function when value change. It can be used with custom validators implementing [ValidatorMixin](https://github.com/anypoint-web-components/validator-mixin).
```html
Selected dinosaur
item 1
item 2
item 3
```
## Accessibility
The element works perfectly with `anypoint-listbox` which together creates an accessible list of options. The listbox can be replaced by any other element that support similar functionality but make sure it has an appropriate aria support.
## Development
```sh
git clone https://github.com/anypoint-web-components/anypoint-dropdown-menu
cd anypoint-dropdown-menu
npm install
```
### Running the demo locally
```sh
npm start
```
### Running the tests
```sh
npm test
```