class trame.widgets.client.ClientStateChange(children=None, **kwargs)

Bases: AbstractElement

Allow the client side to trigger an event when a state element changes.

  • value (str) – Name of the state variable to monitor

  • immediate (bool) – Trigger change right away rather than at nextTick (default: False)

  • trigger_on_create (bool) – If set to true, the change event will be triggered when the client start. (default: False)

  • change (Function or JS expression (event)) – Event triggered when state[value] change

class trame.widgets.client.ClientTriggers(ref='trame_triggers', children=None, **kwargs)

Bases: AbstractElement

Allow to trigger an event on the client side

  • ref – Identifier for the client side DOM elem

  • **kwargs

    List of events to registers with their callbacks

Built-in events are:
  • mounted

  • created

  • before_destroy

  • before_unmount

  • exit

call(method, *args)

Perform the call on the client


method – Key used in the kwargs at construction time

class trame.widgets.client.Getter(children=None, value_name=None, key_name=None, update_nested_name=None, update_name=None, **kwargs)

Bases: AbstractElement

Provide means to extract a reactive state variable from its name

  • name – Name of the state variable to extract. This can be an expression too.

  • value_name (str) – Name of the JavaScript variable name (default: “value”)

  • key_name – Name for the JavaScript variable that will hold the evaluate expression of the “name” property.

  • update_nested_name – Method name if you aim to update the nested structure.

  • update_name – Method name if you aim to update the full value.

class trame.widgets.client.JSEval(children=None, **kwargs)

Bases: AbstractElement

Provide means to execute JS code

class trame.widgets.client.LifeCycleMonitor(children=None, **kwargs)

Bases: AbstractElement

LifeCycleMonitor is a debug purpose tool to validate a sub-tree get the proper expected life cycle event.

This component allow to print into the client side console when any of the monitored event happen.

  • name – User specific text to easily identify which component the event was coming from.

  • type – console[type](…) so you can use ‘log’, ‘error’, ‘info’, ‘warn’

  • value – Another value that is printed when an event occur

  • events – List of events to monitor such as created, beforeMount, mounted, beforeUpdate, updated, beforeDestroy, destroyed

class trame.widgets.client.Loading(children=None, **kwargs)

Bases: AbstractElement

Three circle spinning with a message


message – Content of the message

class trame.widgets.client.ServerTemplate(children=None, **kwargs)

Bases: AbstractElement

Template content presentation

  • name (str) – Name of the template to display. (default: ‘main’)

  • use_url (bool) – If true, will use the {url_key}= from the url to override the name= attribute.

  • url_key (str) – Name of the key to extract from url for use_url. (default: ‘ui’)

class trame.widgets.client.SizeObserver(_name, **kwargs)

Bases: AbstractElement

SizeObserver allow to monitor the space available in the UI and bind that information onto a state variable.


_name – Name of the state variable to bound the component size to

class trame.widgets.client.Style(css_content=None, **kwargs)

Bases: AbstractElement

Provide means to inject global CSS rules


Update style content

property var_name

Name the the state variable used by this widget