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
• Python

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();