ractive-ez-tabs/readme.md

Ractive Ez UI Tabs

# Ractive Ez Tabs

Tabs component for ractive.js

[Demo](https://bartvanbeurden.github.io/ractive-ez-demo/)

## Install

    npm i ractive-ez-tabs

```js
import 'ractive-ez-tabs';
import 'ractive-ez-tabs/themes/blue.less';
```

## Usage

```html
<EzTabs align="top">

    <EzTabLinks>
        <EzTabLink>First Tab</EzTabLink>
        <EzTabLink>Dynamic subtabs</EzTabLink>
        <EzTabLink disabled>Disabled tab</EzTabLink>
    </EzTabLinks>
    
    <EzTabPanes>
        <EzTabPane>Content of first tab</EzTabPane>
        <EzTabPane>
            <EzTabs align="left">
                <EzTabLinks>
                    {{#each tabs as tab }}
                    <EzTabLink>{{ tab.name }}</EzTabLink>
                    {{/each}}
                </EzTabLinks>
                <EzTabPanes>
                    {{#each tabs as tab }}
                    <EzTabPane>{{ tab.content }}</EzTabPane>
                    {{/each}}
                </EzTabPanes>
            </EZtabs>
        </EzTabPane>
        <EzTabPane>Disabled pane will be invisible</EzTabPane>
    </EzTabPanes>
    
</EzTabs>
```

### EzTabs

- `align`: `top`, `right`, `bottom` or `left`

### EzTabLink

- `disabled`: If true, the link cannot be clicked