akili-tabs

Tabs component for Akili framework.

Example

import Akili from 'akili';
import Component from 'akili/src/component';
import Tabs from 'akili-tabs';

class App extends Component {
  static define() {
    Akili.component('app', this);
  }
  
  created() {
    this.scope.data = [
      {
        title: 'first title',
        pane: 'first pane'
      },
      {
        title: 'second title',
        pane: 'second pane'
      }
    ];
  }
}

Tabs.define();
App.define();

document.addEventListener('DOMContentLoaded', () => {
  Akili.init().catch((err) => console.error(err));
});

<app>
  <tabs>
    <tab-menu>
      <tab-title>${ this.data[0].title }</tab-title>
      <tab-title>${ this.data[1].title }</tab-title>
    </tab-menu>
    <tab-content>
      <tab-pane>${ this.data[0].pane }</tab-pane>
      <tab-pane>${ this.data[1].pane }</tab-pane>
    </tab-content>
  </tabs>
<app>

You can add items to the loop.

<app>
  <tabs>
    <tab-menu in="${ this.data }">
      <tab-title>
        ${ this.loopValue.title }
      </tab-title>
    </tab-menu>
    <tab-content in="${ this.data }">
      <tab-pane>
        ${ this.loopValue.pane }
      </tab-pane>
    </tab-content>
  </tabs>
<app>

To change the active item, use active attribute.

<tabs active="${ this.activeTab }">
  ...
</tabs>

To get change, use on-tab event.

<tabs on-tab="${ this.activeTab = event.detail }">
  ...
</tabs>

Each tab-title and tab-pane component has scope value isActiveTab indicating whether this item is active or not.

<app>
  <tabs>
    <tab-menu in="${ this.data }">
      <tab-title class="${ utils.class({active: this.isActiveTab}) }">
        ${ this.loopValue.title }
      </tab-title>
    </tab-menu>
    <tab-content in="${ this.data }">
      <tab-pane class="${ utils.class({active: this.isActiveTab}) }">
        ${ this.loopValue.pane }
      </tab-pane>
    </tab-content>
  </tabs>
<app>

You can add recreate attribute to tab-pane like if component feature.

If you load the component as a script, you will have Akili.components.Tabs to get it.