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

$3

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

$3

`html




Tab one
Tab two
Tab three

`

$3

`js
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

Tab one
Tab two
Tab three

;
}

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

$3

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.

$3

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

`html



`

$3

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

`html

Tab one
Tab two
Tab three
Tab four

`

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

$3

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.

`js
render() {
return html

Tab one
${this.renderTwo ? htmlTab two : ''}
Tab three

;
}
`

Development

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

$3

`sh
npm start
`

$3

`sh
npm test
``