JSFiddle - React, Tailwind, and code Playground
CSS
.onyx-sample {
padding: 10px;
}
.onyx-sample-tools {
padding-bottom:10px;
}
.onyx-sample-tools > * {
margin: 3px;
}
.onyx-sample-divider {
color: #F49200;
text-transform: uppercase;
font-family: Segoe UI, Prelude Medium, Helvetica, Verdana, sans-serif;
font-size: 14px;
font-weight: bold;
margin-bottom: 8px;
}
.onyx-sample-result-box {
width:100%;
}
.onyx-sample-result {
padding:8px;
}
.onyx-sample-spaced-button {
margin:3px;
}
.onyx-sample-animate-label {
vertical-align:middle;
padding-left:5px;
margin-right: 15px;
}
.onyx-sample-label {
color: #1879CD;
font-size: 18px;
text-transform: uppercase;
}
.onyx-sample-popup {
font-size: 30px;
text-align: center;
}
.onyx-contextualpopup-button-container{
padding:10px;
}
JavaScript
enyo.kind({
dernier :30,
name: "App",classes: "panels-sample-flickr-panels enyo-unselectable enyo-fit",
components:[{classes: "onyx-toolbar-inline", components: [
{kind: "onyx.PickerDecorator", components: [
{style: "min-width: 60px;"},
{kind: "onyx.Picker",name:"picker",components:[{content:"25"}]}
]}]}, {kind: "onyx.Groupbox", style: "width:100% ;height:50%", fit: "true", name: "groupbox3", components: [
{kind: "onyx.GroupboxHeader", content: "Current beat", name: "groupboxHeader2"},
{kind: "Control", classes: "onyx-sample-result", content: "1", name: "result"}
]}, {classes: "onyx-toolbar-inline", components: [
{kind: "onyx.PickerDecorator", components: [
{},
{kind: "onyx.Picker", onchange:"test",name:"abc",components: [{kind: "onyx.MenuItem", content: "25", name: "menuItem" ,onleave: "test"},
{content: "Gmail"},
{content: "Yahoo"},
{content: "Outlook"},
{content: "Hotmail", active: true}
]}
]}
]},
],
create: function() {
this.inherited(arguments);
for (var i=26; i<250; i++) {
this.$.picker.createComponent({content: i ,active:i==90})}
},
test: function(inSender, inEvent) {this.$.result.setContent(this.$.abc.selected.content);},
itemSelected: function(inSender, inEvent) {
this.$.result.setContent(inEvent.selected.content);}
//this.$.sound.play();
// TODO - Auto-generated code
});
new App().write();