https://github.com/polymerelements/paper-tabs

Material Design tabs
https://github.com/polymerelements/paper-tabs

Last synced: 10 months ago
JSON representation

Material Design tabs

• Host: GitHub
• URL: https://github.com/polymerelements/paper-tabs
• Owner: PolymerElements
• Created: 2015-05-01T01:37:20.000Z (about 11 years ago)
• Default Branch: master
• Last Pushed: 2023-10-16T15:55:57.000Z (over 2 years ago)
• Last Synced: 2024-12-13T16:50:28.818Z (over 1 year ago)
• Language: HTML
• Homepage: https://www.webcomponents.org/element/PolymerElements/paper-tabs
• Size: 539 KB
• Stars: 65
• Watchers: 21
• Forks: 52
• Open Issues: 48
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • Codeowners: .github/CODEOWNERS

Awesome Lists containing this project

README

          
[![Published on NPM](https://img.shields.io/npm/v/@polymer/paper-tabs.svg)](https://www.npmjs.com/package/@polymer/paper-tabs)

[![Build status](https://travis-ci.org/PolymerElements/paper-tabs.svg?branch=master)](https://travis-ci.org/PolymerElements/paper-tabs)

[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://webcomponents.org/element/@polymer/paper-tabs)

## <paper-tabs>

`` makes it easy to explore and switch between different views or

functional aspects of an app, or to browse categorized data sets.

See: [Documentation](https://www.webcomponents.org/element/@polymer/paper-tabs),

  [Demo](https://www.webcomponents.org/element/@polymer/paper-tabs/demo/demo/index.html).

## Usage

### Installation

```

npm install --save @polymer/paper-tabs

```

### In an HTML file

```html

  

    

      import '@polymer/paper-tabs/paper-tabs.js';

      import '@polymer/paper-tabs/paper-tab.js';

    

  

  

    

      Tab 0

      Tab 1

      Tab 2

      Tab 3

    

  

```

### In a Polymer 3 element

```js

import {PolymerElement} from '@polymer/polymer/polymer-element.js';

import {html} from '@polymer/polymer/lib/utils/html-tag.js';

import '@polymer/paper-tabs/paper-tabs.js';

import '@polymer/paper-tabs/paper-tab.js';

class ExampleElement extends PolymerElement {

  static get template() {

    return html`

      

        Tab 0

        Tab 1

        Tab 2

        Tab 3

      

    `;

  }

}

customElements.define('example-element', ExampleElement);

```

## Contributing

If you want to send a PR to this element, here are the instructions for running

the tests and demo locally:

### Installation

```sh

git clone https://github.com/PolymerElements/paper-tabs

cd paper-tabs

npm install

npm install -g polymer-cli

```

### Running the demo locally

```sh

polymer serve --npm

open http://127.0.0.1:/demo/

```

### Running the tests

```sh

polymer test --npm

```