Py.Cafe

maartenbreddels/

ipyreact-button-layout

Ipyreact example showing how to compose / have children

DocsPricing
  • app.py
  • requirements.txt
app.py
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
# demonstrates composibility with ipyreact
import ipyreact
import ipywidgets
from pathlib import Path
from traitlets import Unicode


# css align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end + ... safe | unsafe;
# css justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right ... + safe | unsafe;

class Column(ipyreact.Widget):
    _esm = Path("column.tsx")
    align = Unicode("stretch").tag(sync=True)
    justify = Unicode("center").tag(sync=True)

class Row(ipyreact.Widget):
    _esm = Path("row.tsx")
    align = Unicode("center").tag(sync=True)
    justify = Unicode("center").tag(sync=True)


class Button(ipyreact.Widget):
    _esm = Path("button.tsx")


page = Column(align="start", justify="center", children=[
    Button(children=["react based button 1"]),
    Button(children=["react based button 2"]),
    Button(children=["react based button 3"]),
    Row(justify="center", children=[
        Button(children=["react based button 4"]),
        Button(children=["react based button 5"]),
    ])
], layout={"height": "100%", "display": "flex"})
# this last layout of for the parent div of the Column that gets inserted around it
column.tsx
1
Could not load content
row.tsx
1
Could not load content