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

Installation

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

In an HTML file

<html>
  <head>
    <script type="module">
      import '@anypoint-web-components/anypoint-item/anypoint-item.js';
    </script>
  </head>
  <body>
    <div role="listbox" slot="content">
      <anypoint-item>
        Option 1
      </anypoint-item>
      <anypoint-item>
        Option 2
      </anypoint-item>
      <anypoint-item>
        Option 3
      </anypoint-item>
      <anypoint-item>
        <p>Paragraph as a child</p>
      </anypoint-item>
    </div>
  </body>
</html>

Use this element with <anypoint-item-body> to make styled twoLine and threeLine items.

<html>
  <head>
    <script type="module">
      import '@anypoint-web-components/anypoint-item/anypoint-item.js';
      import '@anypoint-web-components/anypoint-item/anypoint-item-body.js';
    </script>
  </head>
  <body>
    <div role="listbox" slot="content">
      <anypoint-item-body twoline>
        <div>Show your status</div>
        <div secondary>Your status is visible to everyone</div>
      </anypoint-item-body>
      <iron-icon icon="warning"></iron-icon>
    </div>
  </body>
</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.

<a href="https://domain.com/project" tabindex="-1">
  <anypoint-item raised>API Project</anypoint-item>
</a>

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):

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`<style>${this.styles}</style>
    <anypoint-listbox>
      <button class="anypoint-item" role="option">Inbox</button>
      <button class="anypoint-item" role="option">Starred</button>
      <button class="anypoint-item" role="option">Sent mail</button>
    </anypoint-listbox>
    `;
  }
}
customElements.define('sample-element', SampleElement);

Styling

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

Accessibility

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

<anypoint-item role="menuitemcheckbox">
  <anypoint-item-body>
    Show your status
  </anypoint-item-body>
  <paper-checkbox></paper-checkbox>
</anypoint-item>

Development

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

Running the demo locally

npm start

Running the tests

npm test

Keywords

FAQs

What is @anypoint-web-components/anypoint-item?

Is @anypoint-web-components/anypoint-item popular?

Is @anypoint-web-components/anypoint-item well maintained?

Last updated on 15 Oct 2021

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

@anypoint-web-components/anypoint-item

Deprecated

Styling options