Tabs component

index.coffee

# (optional) Root model/page initialisation
app.model.set '_page.punchline', 'go'

# Component
module.exports = class Tabs
  view: __dirname
  style: __dirname
  init: -> 
    @model.setNull 'selectedIndex', 0
    
  create: ->
    # called when the DOM is ready
    
  select: (i) ->
    @model.set 'selectedIndex', i

index.jade

//- (optional) Execution example
Body:
  tabs(selectedIndex='{{0}}')
    pane(title='One'): b Hi
    pane(title='Two') ho
    pane(title='Three') away
    pane(title='Four') we &sp;
      span.highlight {{#root._page.punchline}}!

//- Component
index:(tag='tabs' arrays='pane/panes')
  each @panes as #pane, #i
    .tabs-pane(class='{{if #i === selectedIndex}}active{{/}}')
      | {{ #pane.content }}
  ul.tabs
    each @panes as #pane, #i
      li(class='{{if #i === selectedIndex}}active{{/}}'
          on-click='select(#i)') 
        | {{ #pane.title }}  

index.styl

// (optional) Page
@import url('http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700')  
body 
  font-family "Source Sans Pro"
  
// Component  
.tabs 
  list-style none
  padding 0
  
.tabs 
  > li 
    display inline-block
    padding 10px
    background #192F41
    color #C8EBF3 
    cursor default
    &.active
      background #157EBF
      color white
      
.tabs-pane 
  display none
  font-size 30px
  padding 20px 0
  &.active 
    display block
    
.highlight 
  color #F2627C