@anypoint-web-components/anypoint-item

v1.1.3

Published

3 years ago

Anypoint list item

Downloads

1,763

0High
0Medium
0Low

web-components anypoint icons

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.

<anypoint-item>Item</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

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

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme