Deprecated

This component has been moved to anypoint-web-components/awc.

====

This component is based on Material Design text field and adjusted for Anypoint platform components.

Anypoint web components are set of components that allows to build Anypoint enabled UI in open source projects.

A list item to be used in menus and list views.

``html
Item
`

![tests](https://github.com/anypoint-web-components/anypoint-item/actions/workflows/deployment.yml)

![Published on NPM](https://www.npmjs.com/package/@anypoint-web-components/anypoint-item)

Styling options

The element has two built-in themes:

- Material Design - Default style
- Anypoint Design - Enabled by adding legacy attribute to the elements.

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.

Usage

$3

`sh
npm install --save @anypoint-web-components/anypoint-item
`

$3

`html







Use this element with to make styled twoLine and threeLine items.

`html







To use anypoint-item as a link, wrap it in an anchor tag. Since anypoint-item will already receive focus, you may want to prevent the anchor tag from receiving focus as well by setting its tabindex to -1.

`html

API Project

`

If you are concerned about performance and want to use anypoint-item in a anypoint-listbox with many items, you can just use a native button with the anypoint-item class applied (provided you have correctly included the shared styles):

`javascript
import { LitElement, html, css } from 'lit-element';
import itemStyles from '@anypoint-web-components/anypoint-item/anypoint-item-shared-styles.js';

class SampleElement extends LitElement {
get styles() {
return [
itemStyles,
css...;
];
}

render() {
return html

Inbox
Starred
Sent mail

;
}
}
customElements.define('sample-element', SampleElement);
`

$3

See anypoint-item-shared-styles.js for list of CSS variables.

$3

This element has role="listitem" by default. Depending on usage, it may be more appropriate to set role="menuitem", role="menuitemcheckbox" or role="menuitemradio".

`html


Show your status



`

Development

`sh
git clone https://github.com/anypoint-web-components/anypoint-item
cd anypoint-item
npm install
`

$3

`sh
npm start
`

$3

`sh
npm test
``