Semantic UI - Ractive Component - Toolbar

Toolbar

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 labeled icon vertical compact menu">
	{{#items}}
  	<a class="item" on-click="{{onclick}}">
    	<i class="{{icon}} icon"></i>{{text}}
    </a>
  {{/items}}

</div>

</script>

<main>
  <div class="left ui rail">
    <p>
    
    </p>
  </div>
</main>

JavaScript

var items = [{
  text: 'Upload'
  ,icon: 'upload'
}, {
  text: 'Download'
  ,icon: 'download'
}];

var MyToolbar = Ractive.extend({
  template: '#templ'

  ,oninit() {
    var self = this;
  }
})

var MyToolbarWrapper = Ractive.extend({
  template: '<MyToolbar items="{{items}}"/>',
  
  components: {
    MyToolbar: MyToolbar
  },
  data() {
    return {
      items: items
    }
  }
});

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