Aurelia Tabs

A dependency free tabs component for your Aurelia applications. Allows you to toggle between sections of content, with supports for dynamically composing views with optional data.

Installation

1. In your console type: npm install aurelia-tabs --save or for Jspm: jspm install aurelia-tabs
2. During the bootstrapping phase, register the plugin:

export function configure(aurelia) {
  aurelia.use
    .standardConfiguration()
    .plugin('aurelia-tabs')
    .developmentLogging();

  aurelia.start().then(a => a.setRoot());
}

Usage

This plugin is comprised of multiple components to be used together.

Tabs

The tabs component is where your clickable tabs are generated. It has two bindable values, one of which is required tabs

Valid data

Passing through tabs to your object they need to be defined in a standardised way. The plugin expects an array of one or more objects which contain at least a id property and a label property. The id property is used to identify which section this tab will open as defined in the sections element. The label property is the value displayed to the user. A third optional property selected allows us to specify if this tab is the default selected tab.

In your ViewModel:

export class ViewModel {
    constructor() {
        this.myTabValues = [
            {id: 'section-one', label: 'My First Section', selected: true},
            {id: 'section-two', label: 'Users'},
            {id: 'section-three', label: 'Browse Items'}
        ];
    }
}

In your View: <tabs tabs.bind="myTabValues"></tabs>

Tab Sections

Once you have your tabs setup, you will want to create tab sections which wrap tab-section items. We will use the example above and add in the sections related to each defined tab.

In your ViewModel:

export class ViewModel {
    constructor() {
        this.myTabValues = [
            {id: 'section-one', label: 'My First Section', selected: true},
            {id: 'section-two', label: 'Users'},
            {id: 'section-three', label: 'Browse Items'}
        ];
    }
}

In your View:

<tabs tabs.bind="myTabValues"></tabs>

<tab-sections>

</tab-sections>

We have a basic skeleton tab application, but no tabs to switch between. Lets add some individual tab sections now.

In your View:

<tabs tabs.bind="myTabValues"></tabs>

<tab-sections>
    <tab-section section="section-one">
        <h1>Hello</h1>
        <p>This is some basic HTML content within a tab section.</p>
    </tab-section>
    <tab-section section="section-two" view-model="myViewModel"></tab-section>
    <tab-section section="section-two" view-model="myViewModel" view-content="myViewContent"></tab-section>
</tab-sections>

You can see we used the <tab-section> attribute three different ways. The first we just specified some content right between the opening and closing tabs. The second we specified a property called view-model which allows us to dynamically render a ViewModel using the <compose> element and lastly, we do the same thing but pass through an object of data (like we would to the <compose> element).