@anypoint-web-components/anypoint-tabs

Anypoint tabs

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.

Tabs organize content across different screens, data sets, and other interactions.

Usage

Installation

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

In a HTML document

<script type="module" src="node_modules/@anypoint-web-components/anypoint-tabs/anypoint-tabs.js"></script>
<script type="module" src="node_modules/@anypoint-web-components/anypoint-tabs/anypoint-tab.js"></script>

<anypoint-tabs selected="1">
  <anypoint-tab>Tab one</anypoint-tab>
  <anypoint-tab>Tab two</anypoint-tab>
  <anypoint-tab>Tab three</anypoint-tab>
</anypoint-tabs>

In a LitElement

import { LitElement, html } from 'lit-element';
import '@anypoint-web-components/anypoint-tabs/anypoint-tabs.js';
import '@anypoint-web-components/anypoint-tabs/anypoint-tab.js';

class SimpleElement extends ControlStateMixin(ButtonStateMixin(LitElement)) {
  render() {
    return html`
    <anypoint-tabs .selected="${this.selectedTab}" @selected-changed="${this._tabHandler}">
      <anypoint-tab>Tab one</anypoint-tab>
      <anypoint-tab>Tab two</anypoint-tab>
      <anypoint-tab>Tab three</anypoint-tab>
    </anypoint-tabs>
    `;
  }

  _tabHandler(e) {
    this.selectedTab = e.detail.value;
  }
}
window.customElements.define('simple-element', SimpleElement);

Styles

Anypoint tabs comes with 2 predefined styles:

• Material - (default) - Material Design styled tabs
• Compatibility To provide compatibility with Anypoint design

See Tabs documentation in Material Design documentation for principles and anatomy of tabs.

Scrollable tabs

When tabs takes more place than available then set scrollable property to enable scrolling.

<div class="width: 320px;">
  <anypoint-tabs selected="0" scrollable>
    <anypoint-tab>Tab one</anypoint-tab>
    <anypoint-tab>Tab two</anypoint-tab>
    <anypoint-tab>Tab three</anypoint-tab>
    <anypoint-tab>Tab four</anypoint-tab>
  </anypoint-tabs>
</div>

Fit container

When the fitContainer property is set the tabs expands to full width of the container.

<anypoint-tabs selected="0" fitContainer>
  <anypoint-tab>Tab one</anypoint-tab>
  <anypoint-tab>Tab two</anypoint-tab>
  <anypoint-tab>Tab three</anypoint-tab>
  <anypoint-tab>Tab four</anypoint-tab>
</anypoint-tabs>

Otherwise they stay aligned to left/right (depending on dir value)

Dynamic content

The tab resets when it's children changes.

Note that the tabs won't change the selection when children change. You need to handle this situation depending on your application context.

render() {
  return html`
  <anypoint-tabs>
    <anypoint-tab>Tab one</anypoint-tab>
    ${this.renderTwo ? html`<anypoint-tab>Tab two</anypoint-tab>` : ''}
    <anypoint-tab>Tab three</anypoint-tab>
  </anypoint-tabs>
  `;
}

Development

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

Running the demo locally

npm start

Running the tests

npm test