Button - bellinux/pcode GitHub Wiki
The Button
component creates a customizable button element with event listeners for both touch and mouse events. This component allows you to easily create, style, and manage buttons in your applications.
JavaScript
Import the Component
To use the Button
component, you need to import it in your project.
import Button from './js/button.js';
Creating a Button
To create a button, instantiate the Button class with an options object. You can specify the text, event handlers, and styles.
const button = new Button({
text: 'Click Me',
style: {
backgroundColor: 'blue',
color: 'white',
padding: '10px 20px'
}
});
Setting Button Text
To set the text of the button after it has been created, use the setText
method.
button.setText('New Text');
Setting Button Position
To set the position of the button, use the setPosition
method.
button.setPosition('100px', '50px');
Customizing Button Style
To customize the style of the button, use the setStyle
method. Pass an object with the desired CSS properties.
button.setStyle({
backgroundColor: 'green',
borderRadius: '5px'
});
Handling Button Events
To handle button press and release events, use the onPressed
and onRelease
methods to set the respective callbacks.
button.onPressed(() => console.log('Button pressed'));
button.onRelease(() => console.log('Button released'));
Removing the Button
To remove the button from the document, use the remove
method.
button.remove();
Python
Import the Component
To use the Button
component, you need to import it in your project.
from button import Button;
Creating a Button
To create a button, instantiate the Button class with an options object. You can specify the text, event handlers, and styles.
config = {
"text": "Click Me",
"style": {
"backgroundColor": "blue",
"color": "white",
"padding": "10px 20px"
}
}
button = Button(config)
Setting Button Text
To set the text of the button after it has been created, use the setText
method.
button.setText('New Text')
Setting Button Position
To set the position of the button, use the setPosition
method.
button.setPosition('100px', '50px');
Customizing Button Style
To customize the style of the button, use the setStyle
method. Pass an object with the desired CSS properties.
button.setStyle({
"backgroundColor": "green",
"borderRadius": "5px"
})
Handling Button Events
To handle button press and release events, use the onPressed
and onRelease
methods to set the respective callbacks.
def on_pres(e):
print("Button pressed")
def on_rel(e):
print("Button released")
button.onPressed(on_pres)
button.onRelease(on_rel)
Removing the Button
To remove the button from the document, use the remove
method.
button.remove();