# \<ix-tabs>

This webcomponent follows the [open-wc](https://github.com/open-wc/open-wc) recommendation.

## Installation

```bash
npm i @digital-realty/ix-tabs
```

## Usage

```html
<script type="module">
  import '@digital-realty/ix-tabs/ix-tabs.js';
  import '@digital-realty/ix-tabs/ix-primary-tab.js';
  import '@digital-realty/ix-tabs/ix-secondary-tab.js';
</script>

<ix-tabs>
  <ix-primary-tab>Tab 1</ix-primary-tab>
  <ix-primary-tab>Tab 2</ix-primary-tab>
  <ix-primary-tab>Tab 3</ix-primary-tab>
  <ix-primary-tab>Tab 4</ix-primary-tab>
</ix-tabs>

or

<ix-tabs id="secondary">
  <ix-secondary-tab>Tab 1</ix-secondary-tab>
  <ix-secondary-tab>Tab 2</ix-secondary-tab>
  <ix-secondary-tab>Tab 3</ix-secondary-tab>
</ix-tabs>

or 

scrollButton property can be set on ix-tabs to enable
left and right scroll buttons for overflowing tab sets

active property can be set on individual tabs to set initial active state

<ix-tabs scrollButtons>
  <ix-primary-tab>Tab 1</ix-primary-tab>
  <ix-primary-tab active>Tab 2</ix-primary-tab>
  <ix-primary-tab>Tab 3</ix-primary-tab>
  <ix-primary-tab>Tab 4</ix-primary-tab>
</ix-tabs>

```

### In React
```html
<script type="module">
  import { IxTabs } from '@digital-realty/ix-tabs/IxTabs'
  import { IxPrimaryTab } from '@digital-realty/ix-tabs/IxPrimaryTab'
  import { IxSecondaryTab } from '@digital-realty/ix-tabs/IxSecondaryTab'
</script>
```

## Demo and Documentation

Full documentation and demo are available at [DLR Component Gallery](https://inxn-p1-uicomponentgallery.azurewebsites.net/?path=/story/inxn-ix-tabs--default).