PyCafe - Solara - Create a "Hi" Widget with anywidget

app.py
requirements.txt
widget.css
widget.js

app.py

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import anywidget
import traitlets

class HelloWidget(anywidget.AnyWidget):
    _esm = "widget.js"
    _css = "widget.css"

    _msg = traitlets.Unicode("Hello World").tag(sync=True)

    def set_message(self, new_value):
      self._msg = new_value


w = HelloWidget()

page = w

widget.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
.hello-widget {
	background: linear-gradient(
		90deg,
		#9933ff 20%,
		#ff6666 40%,
		#faca30 60%,
		#00cd99 80%,
		#00ccff 100%
	);
	border-radius: 10px;
	border: none;
	color: white;
	cursor: pointer;
	font-family: "Roboto", sans-serif;
	font-size: 2em;
	margin: 10px;
	padding: 10px 20px;
	transition: transform 0.25s ease-in-out;
}
.hello-widget:hover {
	transform: scale(1.05);
}

widget.js

1
2
3
4
5
6
7
8
9
10
11
12
function render({ model, el }) {
  let btn = document.createElement("button");
  btn.classList.add("hello-widget");
  el.appendChild(btn);
  btn.innerHTML = "Hi"
  
  model.on("msg:custom", (msg) => {
    btn.innerHTML = `Message is ${msg}`;
  });
}

export default { render };