Accessible tabs styled for Material Design and Anypoint platform
npm install @anypoint-web-components/anypoint-tabsThis 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.


``sh`
npm install --save @anypoint-web-components/anypoint-tabs
`html
`
`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
;
}
_tabHandler(e) {
this.selectedTab = e.detail.value;
}
}
window.customElements.define('simple-element', SimpleElement);
`
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.
When tabs takes more place than available then set scrollable property to enable scrolling.
`html`
When the fitContainer property is set the tabs expands to full width of the container.
`html`
Otherwise they stay aligned to left/right (depending on dir value)
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
${this.renderTwo ? html : ''}
;`
}
`sh`
git clone https://github.com/anypoint-web-components/anypoint-tabs
cd anypoint-tabs
npm install
`sh`
npm start
`sh``
npm test