import ipyreact
import pathlib
import solara
import traitlets
from ipywidgets import Widget, widget_serialization
class FlexLayout(ipyreact.ValueWidget):
_esm = pathlib.Path("confetti.tsx")
flex_layout = traitlets.Any({}, allow_none=True).tag(sync=True, **widget_serialization)
# components = traitlets.Any({}, allow_none=True).tag(sync=True, **widget_serialization)
flex_layout = {
"global": {
"tabEnableClose": True,
"tabSetHeaderHeight": 44,
"tabSetTabStripHeight": 44,
"borderBarSize": 44,
"enableRotateBorderIcons": False,
},
"borders": [
{
"type": "border",
"location": "bottom",
"size": 200,
"show": True,
"selected": 0,
"enableDrop": False,
"children": [
{
"type": "tab",
"name": "Messages",
# "icon": `/icons/terminal.svg`,
"component": 0,
"enableClose": False,
"enableRenderOnDemand": False,
},
],
},
{
"type": "border",
"location": "left",
"size": 175,
"barSize": 44,
"enableDrop": False,
"selected": 0,
"children": [
{
"type": "tab",
"name": "Files",
"id": "file-browser",
"component": 1,
# "icon": "/icons/folder.svg",
"enableClose": False,
"config": {
"path": "/",
},
},
],
},
],
"layout": {
"type": "row",
"weight": 100,
"children": [
{
"type": "tabset",
"weight": 50,
"children": [
{
"type": "tab",
"name": "One",
"component": 2,
}
]
},
{
"type": "tabset",
"weight": 50,
"children": [
{
"type": "tab",
"name": "Two",
"component": 3,
}
]
}
]
}
};
@solara.component
def Page():
clicks = solara.use_reactive(0)
with solara.Card("Second tab") as second:
def increment():
clicks.value += 1
solara.Button(f"Click {clicks}", on_click=increment)
children = [
solara.Text("Bottom border"),
solara.Text("Left border"),
solara.Card("First tab", children=[solara.Button("I do nothing")]),
second,
]
with solara.Column(style={"height": "100%"}):
FlexLayout.element(flex_layout=flex_layout, value=1, children=children, layout={"height": "100%"})
solara.Style(pathlib.Path("light.css"))