Skip to content

Page

A container component representing a single page within the application.

Fields

NameTypeDescriptionOptions
Page keyIdentifying KeyUnique identifier. It's needed to enable navigation to this Page.
Page modeText
  • Compact
  • Wide
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.

Events

NameDescriptionUsage
ss-keydownCaptures all key activity while this page is open.

def handle_keydown(state, payload):
  # The payload is a dictionary containing the key code and modifier keys.
  # For example,
  # {
  #  "key": "ArrowDown",
  #  "ctrl_key": False,
  #  "shift_key": False,
  #  "meta_key": False
  # }

  key_activated = payload.get("key")
  delta = 0
  if key_activated == "ArrowLeft":
    delta += -10
  elif key_activated == "ArrowRight":
    delta += 10

  shift_key = payload.get("shift_key")
  if shift_key:
    delta *= 2 # Shift makes it go faster

  state["position"] += delta
ss-page-openEmitted when the page is opened.

def handle_page_open(state, payload):
  page_key = payload
  state["message"] = f"The page {page_key} has been opened."

Low code usage

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

python
ui.Page(content={
        "key": "", # str 
        "pageMode": "compact", # str [compact, wide]
        "accentColor": "", # str 
        "primaryTextColor": "", # str 
        "secondaryTextColor": "", # str 
        "emptinessColor": "", # str 
        "containerBackgroundColor": "", # str 
        "containerShadow": "", # str 
        "separatorColor": "", # str 
        "buttonColor": "", # str 
        "buttonTextColor": "", # str 
        "buttonShadow": "", # str 
        "selectedColor": "", # str 
        "cssClasses": "", # str 
    },
    handlers={
        "ss-keydown": handle_event,
        "ss-page-open": 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