Py.Cafe

maartenbreddels/

anywidget-counter-button

Create a Counter Widget with anywidget

DocsPricing
  • app.py
  • counter.css
  • counter.js
  • requirements.txt
app.py
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# See https://anywidget.dev/
import anywidget
import traitlets
from pathlib import Path

class CounterWidget(anywidget.AnyWidget):
    _esm = Path("counter.js")
    _css= Path("counter.css")
    value = traitlets.Int(0).tag(sync=True)

counter = CounterWidget()
counter.value = 42
counter

# assign the widget to render to page, so solara knows what to render
page = counter
counter.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
function render({ model, el }) {
    let button = document.createElement("button");
    button.innerHTML = `count is ${model.get("value")}`;
    button.addEventListener("click", () => {
    model.set("value", model.get("value") + 1);
    model.save_changes();
    });
    model.on("change:value", () => {
    button.innerHTML = `count is ${model.get("value")}`;
    });
    el.classList.add("counter-widget");
    el.appendChild(button);
}
export default { render };
counter.css
1
2
.counter-widget button { color: white; font-size: 1.75rem; background-color: #ea580c; padding: 0.5rem 1rem; border: none; border-radius: 0.25rem; }
.counter-widget button:hover { background-color: #9a3412; }