Ractive Ez Tabs

Tabs component for ractive.js

Demo

Install

npm i ractive-ez-tabs

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

Usage

<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