JSFiddle - React, Tailwind, and code Playground

by Ryan Duffy

CSS

.enyo-panels > * {
    padding: 20px;
    background: #eee;
    box-sizing: border-box;
}

JavaScript

enyo.kind({
    name: "LRArranger",
    kind: "LeftRightArranger",
    arrange: function(inC, inIndex) {
		var i,c,b;
        var c$ = this.container.getPanels();
        
        // exclude the margin if on a narrow display
        var margin = enyo.Panels.isScreenNarrow() ? 0 : this.margin;
        inIndex = Math.floor(inIndex);
        
        // calculate the panel size
		var box = this.containerBounds[this.axisSize] - margin - margin;
		for (i=0; (c=c$[i]); i++) {
			b = {};
            // each panel is offset by the width of the panel times
            // the difference between its index and the selected index.
            // this pushes panels before the selected to be to the left.
			b[this.axisPosition] = margin + box*(i-inIndex);
			this.arrangeControl(c, b);
		}
	}
});

enyo.kind({
    name: "ex.App",
    kind: "Panels",
    arrangerKind: "LRArranger",
    margin: 40,
    components: [
        {content:"I'm a panel"},
        {content:"I'm a panel"}
    ],
    refresh: enyo.inherit(function(sup) {
        return function() {
            sup.apply(this, arguments);
            this.narrowFitChanged();
        };
    })
});

new ex.App().renderInto(document.body);