ractive-ez-tabs/demo/app.js

Ractive Ez UI Tabs

import Ractive 	from 'ractive';
import EzTabs 	from '../index.js';
import 				 '../themes/blue.less';

window.onload = function() {
	
	var instance = new Ractive({
		el: document.querySelector("#container"),
		template: document.querySelector("#template").innerHTML,
		
		data() {
			return {
				orientation: "top",
				tabs: [
					{ name: "Dynamic 1", content: "Dynamic content 1" },
					{ name: "Dynamic 2", content: "Dynamic content 2" },
					{ name: "Dynamic 3", content: "Dynamic content 3" }
				]
			}
		},
		
		getNextOrientation(orientation) {
			switch (orientation) {
				case "top": return "right";
				case "right": return "bottom";
				case "bottom": return "left";
				case "left": return "top";
			}
		},
		
		cycleOrientation(orientation) {
			this.set("orientation", this.getNextOrientation(orientation));
		}
	});
	
};