Have ideas to improve npm?Join in the discussion! »

    akili-tabs

    1.2.8 • Public • Published

    akili-tabs npm version

    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.

    Install

    npm i akili-tabs

    DownloadsWeekly Downloads

    7

    Version

    1.2.8

    License

    MIT

    Unpacked Size

    24.9 kB

    Total Files

    12

    Homepage

    akilijs.com

    Last publish

    Collaborators

    • avatar