Skip to content

Root

The root component of the application, which serves as the starting point of the component hierarchy.

Fields

NameTypeDescriptionOptions
App nameTextThe app name will be shown in the browser's title bar.
AccentColor
Primary textColor
Secondary textColor
EmptinessColorPage background color
Container backgroundColor
Container shadowShadow
SeparatorColor
ButtonColor
Button textColor
Button shadowShadow
SelectedColor
Custom CSS classesTextCSS classes, separated by spaces. You can define classes in custom stylesheets.
Content widthWidthConfigure content width using CSS units, e.g. 100px, 50%, 10vw, etc.
Content alignment (H)Align (H)
Content alignment (V)Align (V)
PaddingPadding

Events

NameDescriptionUsage
ss-hashchangeCapture changes to the URL hash, including page key and route vars.
def handle_hashchange(state, payload):
  # The payload is a dictionary with the page key and all the route variables in the URL hash.
  # For example, if the current URL is
  # http://localhost:3000/#main/animal=duck&colour=yellow
  # you will get the following dictionary
  # {
  #  "page_key": "main",
  #  "route_vars": {
  #    "animal": "duck",
  #    "colour": "yellow"
  #  }
  # }

  page_key = payload.get("page_key")
  route_vars = payload.get("route_vars")

  if not route_vars:
    return

  if route_vars.get("animal") == "duck":
    state["message"] = "You've navigated to the Duck zone."
  else:
    state["message"] = "You're not in the Duck zone.

Low code usage

This component can be declared directly in Python, using backend-driven UI.

python
ui.Root(content={
        "appName": "", # str 
        "accentColor": "", # str 
        "primaryTextColor": "", # str 
        "secondaryTextColor": "", # str 
        "emptinessColor": "", # str 
        "containerBackgroundColor": "", # str 
        "containerShadow": "", # str 
        "separatorColor": "", # str 
        "buttonColor": "", # str 
        "buttonTextColor": "", # str 
        "buttonShadow": "", # str 
        "selectedColor": "", # str 
        "cssClasses": "", # str 
        "contentWidth": "", # str 
        "contentHAlign": "", # str 
        "contentVAlign": "", # str 
        "contentPadding": "", # str 
    },
    handlers={
        "ss-hashchange": handle_event,
    }
)
A function, in this example handle_event, should be implemented in your code to handle events.
python
def handle_event(state, payload, context, ui):
  pass

Reference