JSFiddle - React, Tailwind, and code Playground

by lynnaloo

JavaScript

enyo.kind({
    name: "Panel1",
    kind: "onyx.Toolbar",
    style: "height: 40px;",
    components: [{
        name: "rightLabel",
        content: "Panel 1"
    }, {
        name: "showButton",
        kind: "onyx.Button",
        content: "Show New Panel"
    }]
});

enyo.kind({
    name: "Panel2",
    kind: "onyx.Toolbar",
    style: "height: 40px;",
    showing: false,
    components: [{
        name: "rightLabel",
        content: "Panel 2"
    }, {
        name: "clickButton",
        kind: "onyx.Button",
        content: "Don't Click Me"
    }],
    tap: function () {
        console.log("You clicked me!");
    }
});

enyo.kind({
    name: "App",
    components: [
        {kind: "Panel1", name: "panel1", ontap: "showPanel2"}, 
        {kind: "Panel2", name: "panel2"}],
    
    showPanel2: function (inSender, inEvent) {
        this.$.panel1.setShowing(false);
        this.$.panel2.setShowing(true);
    }
});

var app = new App();
app.renderInto(document.body);