JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://cdn.ractivejs.org/edge/ractive.js"></script>
<script src="//cdn.jsdelivr.net/select2/3.4.8/select2.min.js"></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/select2/3.4.8/select2.css">
<script src="https://rawgit.com/Rich-Harris/simulant/master/simulant.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js"></script>
<main></main>
<script id='template' type='text/ractive'>
<ul class="tab-list">{{#tabs:i}}
<li class="tab {{ (tabs[i].dirty ? 'dirty' : ' ') + (tabs[i].active ? ' active': ' ') + (tabs[i].type > 0 ? ' research' : ' ') }}"><span class="title">{{ tabs[i].label }}</span><a href="#" class="close"></a></li>{{/}}
</ul><a href="#" on-click="createNewTab" class="new-tab"><span class="plus">Add</span></a>
</script>
CSS
body {
font-family: 'Helvetica Neue', arial, sans-serif;
font-weight: 200;
color: #353535;
}
h1, h2, h3, h4, h5, h6 {
font-weight: 200;
}
.tab.active {
color: red !important;
}
JavaScript
var ractive = new Ractive({
el: 'main',
template: '#template',
data: {
'tabs': [
{
label: 'Welcome!',
id: 0,
dirty: false,
active: true,
type: -1
}
]
}
});
var ractiveUtils = {
activateTab: function(id) {
_.forEachRight(this.get('tabs'), function(t){
t.active = false;
});
var tab = _.find(this.get('tabs'), function(t){
return t.id === id;
});
tab.active = true;
}
}
_.extend(ractive, ractiveUtils);
var counter = 0;
ractive.on('createNewTab', function(e){
this.push('tabs', {
label: 'New Tab' + (counter > 0 ? ' ' + ++counter : (counter++, '')),
id: counter,
dirty: false,
active: true,
type: -1
});
this.push('tabs', {
label: 'New Tab' + (counter > 0 ? ' ' + ++counter : (counter++, '')),
id: counter,
dirty: false,
active: true,
type: -1
});
this.activateTab(counter);
});