client

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

Bases: AbstractElement

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

Parameters:

  • 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

Parameters:

  • 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

Parameters:

method – Key used in the kwargs at construction time

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

Bases: AbstractElement

Create a deeply reactive state from state variable name. The provided name can not be reactive. It needs to be statically defined in Python like in the example blow.

This component only works with client_type=”vue3”.

with DeepReactive(my_nested_var):

html.Input(v_model=my_nested_var.txt_1) html.Input(v_model=my_nested_var.txt_2)

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

Parameters:

  • 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.

Parameters:

  • 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

Parameters:

message – Content of the message

class trame.widgets.client.Script(script_content=None, **kwargs)

Bases: AbstractElement

Provide means to inject a global script tag

update(script_content)

Update style content

property var_name

Name the the state variable used by this widget

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

Bases: AbstractElement

Template content presentation

Parameters:

  • 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.

Parameters:

_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(css_content)

Update style content

property var_name

Name the the state variable used by this widget