TABS control

by gbos

HTML

<script src="https://rawgit.com/giabos/ez-bind/master/build/ez-bind.min.js"></script>
<ul class="menu">
  <li ez-repeat="menu" ez-text="label" ez-class="active:active" ez-on="click:^activate"></li>
</ul>

CSS

@import url('https://fonts.googleapis.com/css?family=Montserrat');

body {
  padding: 10px 0;
  margin: 0;
  font-family: 'Montserrat', sans-serif;
}

ul.menu {
  list-style-type:none;
  border-bottom: 1px solid lightgrey;
  font-size: 1.5rem;
}


ul.menu li {
  color: grey;
  display: inline-block;
  padding: 2px 20px;
  cursor: pointer;
  margin: 0;
  position: relative;
  top: 1px;
}

ul.menu li.active {
  color: black;
  border-top: 3px solid limegreen;
  border-left: 1px solid lightgrey;
  border-right: 1px solid lightgrey;
  border-bottom: 1px solid white;
}

JavaScript

var vm = new EZ(document.documentElement);
vm._apply(function () {
    vm.menu = [
        {label: "Test 1", active: true},
        {label: "Test 2", active: false},
        {label: "Test 3", active: false},
        {label: "Test 4", active: false},
        
        ];
    
});
        
vm.activate = function (evt, idx) {
        vm.menu.forEach(function (a) {a.active = false;});
        vm.menu[idx].active = true;
};