Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/anypoint-web-components/anypoint-tabs
⛔️ DEPRECATED This component is being deprecated. Use the `awc` module instead.
https://github.com/anypoint-web-components/anypoint-tabs
deprecated obsolete
Last synced: 4 days ago
JSON representation
⛔️ DEPRECATED This component is being deprecated. Use the `awc` module instead.
- Host: GitHub
- URL: https://github.com/anypoint-web-components/anypoint-tabs
- Owner: anypoint-web-components
- License: mit
- Created: 2019-08-29T01:14:17.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-07T09:10:25.000Z (about 2 years ago)
- Last Synced: 2024-12-15T17:23:17.704Z (about 1 month ago)
- Topics: deprecated, obsolete
- Language: JavaScript
- Homepage:
- Size: 1.33 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 9
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Deprecated
This component has been moved to `anypoint-web-components/awc`.
-----
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.
[](https://www.npmjs.com/package/@anypoint-web-components/anypoint-tabs)
[](https://github.com/anypoint-web-components/anypoint-tabs/actions/workflows/deployment.yml)
## Usage
### Installation
```sh
npm install --save @anypoint-web-components/anypoint-tabs
```
### In a HTML document
```html
Tab one
Tab two
Tab three
```
### In a LitElement
```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);
```
### Styles
Anypoint tabs comes with 2 predefined styles:
- Material - (default) - Material Design styled tabs
- Compatibility To provide compatibility with Anypoint design
See [Tabs](https://material.io/components/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.
```html
Tab one
Tab two
Tab three
Tab four
```
### Fit container
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)
### 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.
```js
render() {
return html`
Tab one
${this.renderTwo ? html`Tab two` : ''}
Tab three
`;
}
```
## Development
```sh
git clone https://github.com/anypoint-web-components/anypoint-tabs
cd anypoint-tabs
npm install
```
### Running the demo locally
```sh
npm start
```
### Running the tests
```sh
npm test
```