JSFiddle - React, Tailwind, and code Playground

by Travis Harris

JavaScript

enyo.create({
	kind:"FittableColumns",
  components:[{
  	content:'L<br>e<br>f<br>t',
    allowHtml:true,
    ontap:'openLeft',
    style:'width:20px;background-color:red'
  },{
  	name:'Left',
    kind: 'onyx.Drawer',
    orient: "h",
    open:true,
    fit:true,
    components:[{
    	content:'THIS IS THE LEFT PANEL CONTENT'
    }]
  },{
  	content:'R<br>i<br>g<br>h<br>t',
    allowHtml:true,
    ontap:'openRight',
    style:'width:20px;background-color:blue'
  },{
  	name:'Right',
    kind: 'onyx.Drawer',
    orient: "h",
    open:false,
    fit:true,
    components:[{
    	content:'THIS IS THE RIGHT PANEL CONTENT'
    }]
  }],
  openLeft:function(){
  	if(!this.$.Left.open){
    	this.$.Left.setFit(true);
    	this.$.Left.setOpen(true);
      this.$.Right.setOpen(false);
      this.$.Right.setFit(false);
    }
  },
  openRight:function(){
  	if(this.$.Left.open){
    	this.$.Left.setFit(false);
    	this.$.Left.setOpen(false);
      this.$.Right.setOpen(true);
      this.$.Right.setFit(true);
    }
  }
}).renderInto(document.body)