How to use the elm.Button function in elm
To help you get started, we’ve selected a few elm examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
kakaroto / e17 / PROTO / elev8 / data / javascript / genlist.js View on Github 
},
'other': {
style: 'double_label',
text: function(part) {
return 'Other #' + this.data.toString();
},
state: function(part) {
return true;
}
}
}
}),
but_box: elm.Box({
horizontal: true,
elements: {
appendBulk: elm.Button({
icon: violet,
label: "+ " + bulk_size,
weight: EXPAND_BOTH,
on_click: function() { append(bulk_size); }
}),
appendOne: elm.Button({
icon: violet,
label: "+ 1",
weight: EXPAND_BOTH,
on_click: function() { append(1); }
}),
replace: elm.Button({
icon: violet,
label: 'Replace',
weight: EXPAND_BOTH,
on_click: function() { createItem(item_selected && item_selected.key); }elements: {
pop: elm.Button({
icon: maroon,
label: "Pop",
weight: EXPAND_BOTH,
on_click: button_pop,
})
}
}),
add_box: elm.Box({
weight: EXPAND_BOTH,
align: FILL_BOTH,
resize: true,
horizontal: true,
elements: {
push_orange: elm.Button({
label: "Orange",
weight: EXPAND_BOTH,
on_click: button_push,
}),
push_violet: elm.Button({
label: "Yellow",
weight: EXPAND_BOTH,
on_click: button_push,
}),
push_green: elm.Button({
label: "Green",
weight: EXPAND_BOTH,
on_click: button_push,
}),
check: elm.Check({
label: "Show title",state: function(part) {
return true;
}
}
}
}),
but_box: elm.Box({
horizontal: true,
elements: {
appendBulk: elm.Button({
icon: violet,
label: "+ " + bulk_size,
weight: EXPAND_BOTH,
on_click: function() { append(bulk_size); }
}),
appendOne: elm.Button({
icon: violet,
label: "+ 1",
weight: EXPAND_BOTH,
on_click: function() { append(1); }
}),
replace: elm.Button({
icon: violet,
label: 'Replace',
weight: EXPAND_BOTH,
on_click: function() { createItem(item_selected && item_selected.key); }
}),
appendBefore: elm.Button({
icon: violet,
label: 'Before',
weight: EXPAND_BOTH,
on_click: function() { createItem(null, item_selected.key); }on_button_press: function(label) {
w.elements.popup.toast("Pressed button: " + label);
if (label === 'Content') {
w.elements.popup.message({
content: elm.Button({
label: 'This text will be changed as soon as this button is realized',
icon: elm.Icon({ image: 'starred' })
})
});
} else if (label === 'Items') {
w.elements.popup.message({
items: [
{ text: 'Available', icon: elm.Icon({ image: 'user-available'}) },
{ text: 'Away', icon: elm.Icon({ image: 'user-away'}) },
{ text: 'Busy', icon: elm.Icon({ image: 'user-busy'}) },
{ text: 'Idle', icon: elm.Icon({ image: 'user-idle'}) },
{ text: 'Invisible', icon: elm.Icon({ image: 'user-invisible'}) },
{ text: 'Offline', icon: elm.Icon({ image: 'user-offline'}) },
'Only text',
{ text: 'Only text in an object' }
],label: "Left",
weight: { x: -1.0, y: -1.0 },
on_click: function(arg) {
print("clicked event on Button: Left");
},
on_unpress: function(arg) {
print("unpressed event on Button: Left");
},
}),
right: elm.Pane({
weight: EXPAND_BOTH,
align: FILL_BOTH,
resize: true,
fill: true,
horizontal: true,
left: elm.Button({
icon: logo_icon,
label: "Up",
weight: { x: -1.0, y: -1.0 },
on_click: function(arg) {
print("clicked event on Button: Up");
},
on_unpress: function(arg) {
print("unpressed event on Button: Up");
},
}),
right: elm.Button({
icon: logo_icon,
label: "Down",
weight: { x: -1.0, y: -1.0 },
on_click: function(arg) {
print("clicked event on Button: Down");function op_button(str, op) {
return elm.Button ({
label : str,
on_click : function () {
push_entry();
push(op);
clear = 1;
}
});
}width: 320,
height: 480,
elements: {
the_background: elm.Background({
weight: EXPAND_BOTH,
resize: true
}),
scroll: elm.Scroller({
bounce: { x: false, y: true },
policy: { x: "off", y: "auto" },
weight: EXPAND_BOTH,
resize: true,
content: elm.Box({
weight: EXPAND_BOTH,
elements: {
icon_button: elm.Button({
icon: logo_icon,
label: "Icon sized to button",
weight: { x: -1.0, y: -1.0 },
on_click: function(arg) {
print("clicked event on Button: 1 " + this.label);
},
on_unpressed: function(arg) {
print("unpressed event on Button: 1" + this.label);
},
}),
icon_no_scale: elm.Button({
icon: logo_icon_unscaled,
label: "Icon no scale",
weight: { x: -1.0, y: -1.0 },
}),
disabled: elm.Button({on_click: button_pop,
})
}
}),
add_box: elm.Box({
weight: EXPAND_BOTH,
align: FILL_BOTH,
resize: true,
horizontal: true,
elements: {
push_orange: elm.Button({
label: "Orange",
weight: EXPAND_BOTH,
on_click: button_push,
}),
push_violet: elm.Button({
label: "Yellow",
weight: EXPAND_BOTH,
on_click: button_push,
}),
push_green: elm.Button({
label: "Green",
weight: EXPAND_BOTH,
on_click: button_push,
}),
check: elm.Check({
label: "Show title",
weight: EXPAND_BOTH,
state: true,
on_change: function() {
win.elements.box.elements.naviframe.title_visible = this.state;
}var win = elm.realise(elm.Window({
title: "Horizontal Box example",
width: 480,
height: 240,
elements: {
background: elm.Background({
weight: EXPAND_BOTH,
resize: true
}),
box: elm.Box({
weight: EXPAND_BOTH,
horizontal: true,
resize: true,
elements: {
button: elm.Button({
label: 'Pack',
align: FILL_BOTH,
on_click: function() {
win.elements.box.elements['logo_' + count++] = elm.Icon({
image: elm.datadir + "data/images/logo_small.png",
resizable_up: false,
resizable_down: false,
})
}
}),
logo_top: elm.Icon({
image: elm.datadir + "data/images/logo_small.png",
resizable_up: false,
resizable_down: false,
align: { x: 0.0, y: 0.0 }
}),horizontal : true,
homogeneous : true,
elements : {
b1 : number_button("1"),
b2 : number_button("2"),
b3 : number_button("3"),
subtract : op_button("-", subtract),
},
}),
hbox4 : elm.Box ({
horizontal : true,
homogeneous : true,
elements : {
b0 : number_button("0"),
bdot : number_button("."),
equals : elm.Button ({
type : "button",
label : "=",
weight : { x : -1.0, y : -1.0 },
on_click : function () {
push_entry();
set_entry("");
var answer = evaluate();
set_entry(answer);
clear = 1;
},
}),
add : op_button("+", add),
},
}),
},
}),elm
Installer for Elm: just downloads the binary into node_modules
