Semantic UI - Ractive Component - Tab

Tab

by vikikamath

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.6/semantic.min.css">
<script id="templ" type="text/ractive">
		<div class="ui {{titleClasses.join(' ')}} menu">
	{{#tabs:i}}
	<div class="{{#active}}active{{/active}} item" on-click="boom:{{i}}"><i class="{{icon}} icon"></i>{{title}}</div>
	{{/tabs}}
</div>
{{#tabs:i}}
<div class="ui {{detailClasses.join(' ')}} {{#active}}active{{/active}} tab">
	{{>cont}}
</div>
{{/tabs}}
   
</script>

<main></main>

JavaScript

var Settings = Ractive.extend({
	template: '<div>This is a setting</div>'
})

var Actions = Ractive.extend({
	template: '<div>This is an action</div>'
})

var MyAccordion = Ractive.extend({
	template: '#templ'
  ,oninit () {
  	var self = this;
    
    self.on('boom', function(_,i){
    	var keyPath = 'tabs.'+i+'.active'
      self.set('tabs.*.active', false);
    	self.set(keyPath, !self.get(keyPath) )
    })
  }
})


var Container = Ractive.extend({
	template: '<MyAccordion tabs="{{tabs}}" classes="{{[\'styled\', \'fluid\']}}"/>'
  ,partials: {
  	inline: '<p>A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.</p>'
    ,settings: '<Settings name="Va" text="bcbdscbd"/>'
    ,actions: '<Actions name="Va" text="bcbdscbd"/>'
  }
  ,components: {
  	MyAccordion: MyAccordion
  	,Settings: Settings
    ,Actions: Actions
  }
  ,data () {
  	return {
    	titleClasses: ['secondary', 'pointing']
      ,detailClasses: ['attached']
    	,tabs: [
      	{
        	title: 'Using Partial with text'
          ,cont: 'inline'
          ,active: false
          
        }
        , {
        	title: 'Using Partial with Settings component'
        	//,content: 'embeddedComponent'
          ,cont: 'settings'
          ,active: false
        }
        , {
        	title: 'Using Partial with Action component'
        	//,content: 'embeddedComponent'
          ,cont: 'actions'
          ,active: false
        }
      
      ]
    }
  }
})

new Ractive({
  el: 'main'
  ,template: '<Container/>'
  ,components: {
  	Container: Container
  }
})