Skip to content

Instantly share code, notes, and snippets.

@charlespockert
Last active October 14, 2015 18:48
Show Gist options
  • Save charlespockert/54228f77a06fce04c8d3 to your computer and use it in GitHub Desktop.
Save charlespockert/54228f77a06fce04c8d3 to your computer and use it in GitHub Desktop.
<template>
<ul class="nav nav-tabs">
<li role="presentation" click.delegate="$parent.selectTab(tab)" repeat.for="tab of tabs" class="${ $parent.selectedTab === tab ? 'active' : '' }"><a href="#">${ tab.heading }</a></li>
</ul>
<div style="margin-top:8px">
<content></content>
</div>
</template>
import {sync, bindable} from 'aurelia-framework';
@sync({ name: "tabs", selector: "tab" })
export class TabSet {
tabs: any[] = [];
@bindable selectedTab: any = null;
@bindable selectedIndex: number = 0;
@bindable tabChanged: any;
bind(ctx) {
this["$parent"] = ctx;
}
selectedTabChanged() {
this.onTabChanged();
}
tabsChanged() {
if (this.tabs.length > 0) {
if (this.selectedIndex >= this.tabs.length)
this.selectedTab = this.tabs[0];
else
this.selectedTab = this.tabs[this.selectedIndex];
}
else
this.selectedTab = null;
this.updateVisibility();
}
onTabChanged() {
if (this.tabChanged)
this.tabChanged(this.selectedTab);
}
selectTab(tab: any) {
this.selectedTab = tab;
// Find tab index
var i = 0;
this.tabs.forEach(t => { if (t === this.selectedTab) this.selectedIndex = i; i++ })
this.updateVisibility();
}
updateVisibility() {
this.tabs.forEach(tab => {
tab.visible = tab === this.selectedTab;
});
}
}
<template>
<div class="${ visible ? '' : 'hidden' }">
<content>
</content>
</div>
</template>
import {bindable} from 'aurelia-framework';
export class Tab {
@bindable heading:string = "Tab";
visible: boolean = false;
bind(ctx) {
this["$parent"] = ctx;
}
}
<template>
<!-- Some view model... -->
<tab-set>
<tab heading="Tab 1">
<p>Hello world!</p>
</tab>
<tab heading="Tab 2">
<p>Hello another world!</p>
</tab>
</tab-set>
</template>
@charlespockert
Copy link
Author

@adriatic, the tabs are hide/show so the tabs themselves are all in the DOM, so they don't lose state

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment