trame.html

This module provides the fundamental elements for HTML and the root class for the trame.html submodules.

__init__.py

trame.html.js2py_key(key)[source]
trame.html.build_attr_names(name_prefix, key_names, kwargs)[source]

Used to generate a list of attr_names with a common name_prefix.

class trame.html.AbstractElement(_elem_name, children=None, **kwargs)[source]

Bases: object

A Vue component which can integrate with the rest of trame

See Vue docs here for more info

Parameters
  • name (str) – The name of the element, like ‘div’ for a <div/> element

  • children (str | list[trame.html.*] | trame.html.* | None) – The children nested within this element

  • __properties – Provide more attribute names that should be handle

  • __events – Provide more event names that should be handle

Html attributes - See here for more info

Parameters
  • id – See here for more info

  • classes – Match the HTML class attribute. See here for more info

  • style – See here for more info

Vue attributes - See here for more info

Parameters
  • ref – See here for more info

  • v_model – See here for more info

  • v_if – See here for more info

  • v_show – See here for more info

  • v_for – See here for more info

  • v_on – See here for more info

  • v_bind – See here for more info

  • key – See here for more info

Events - See here for more info

Parameters
  • click – See here for more info

  • mousedown – See here for more info

  • mouseup – See here for more info

  • mouseenter – See here for more info

  • mouseleave – See here for more info

  • contextmenu – See here for more info

ttsSensitive()[source]

Calling this function on an element will make it fully recreate itself every time the layout update. Internally it is managed by adding a key= attribute which use a layout timestamp.

This is especially useful for component that manage other elements outside of themself like VSelect in Vuetify.

attrs(*names)[source]

Calling this function will process the provided attribute names and configure its internal so the macthing HTML string could easily be generated later on.

Parameters

names (*str) – The names attribute to process

events(*names)[source]

Calling this function will process the provided event names and configure its internal so the macthing HTML string could easily be generated later on.

Parameters

names (*str) – The names events to process

clear()[source]

Remove all children

hide()[source]

Hide element while keeping it in the DOM. (display: none)

add_child(child)[source]

Add a component to this component’s children

Parameters

child (str | AbstractElement) – The component to add as a child

add_children(children)[source]

Add components to this component’s children. The provided children is expected to be a list.

Parameters

children (list) – The list of components to add to the children

property children

Children components

set_text(value)[source]

Replace children with a single text child element

Parameters

value (str) – The text for the new text child element

property html

Return a string representation of the HTML component

class trame.html.Element(_elem_name, children=None, **kwargs)[source]

Bases: trame.html.AbstractElement

Any html element you would like to use in trame

Parameters
  • _elem_name (str) – The name of the element, like ‘div’ for a <div/> element

  • children (str | list[trame.html.*] | trame.html.* | None) – The children nested within this element

class trame.html.Div(children=None, **kwargs)[source]

Bases: trame.html.AbstractElement

The standard html content div element

Parameters

children (str | list[trame.html.*] | trame.html.* | None) – The children nested within this element

class trame.html.Span(children=None, **kwargs)[source]

Bases: trame.html.AbstractElement

The standard html content span element

Parameters

children (str | list[trame.html.*] | trame.html.* | None) – The children nested within this element

class trame.html.Form(children=None, **kwargs)[source]

Bases: trame.html.AbstractElement

The standard html form element

Parameters

children (str | list[trame.html.*] | trame.html.* | None) – The children nested within this element

class trame.html.Label(children=None, **kwargs)[source]

Bases: trame.html.AbstractElement

The standard html input label element

Parameters

children (str | list[trame.html.*] | trame.html.* | None) – The children nested within this element

class trame.html.Input(children=None, **kwargs)[source]

Bases: trame.html.AbstractElement

The standard html input (form input) element

Parameters

children (str | list[trame.html.*] | trame.html.* | None) – The children nested within this element

class trame.html.Template(children=None, **kwargs)[source]

Bases: trame.html.AbstractElement

The standard html content template element. This is mostly used by vue's slot system.

Parameters
  • children (str | list[trame.html.*] | trame.html.* | None) – The children nested within this element

  • v_slot – The slot this template corresponds to

slot_names = {'action', 'actions', 'activator', 'append', 'append-item', 'append-outer', 'appendIcon', 'badge', 'body', 'body.append', 'body.prepend', 'category', 'close', 'counter', 'day', 'day-body', 'day-header', 'day-label', 'day-label-header', 'day-month', 'default', 'divider', 'event', 'expanded-item', 'extension', 'foot', 'footer', 'footer.page-text', 'footer.prepend', 'group', 'group.header', 'group.summary', 'header', 'header.<name>', 'header.data-table-select', 'icon', 'img', 'input', 'interval', 'item', 'item.<name>', 'item.data-table-expand', 'item.data-table-select', 'label', 'loader', 'loading', 'message', 'next', 'no-data', 'no-results', 'opposite', 'page-text', 'placeholder', 'prepend', 'prepend-inner', 'prepend-item', 'prependIcon', 'prev', 'progress', 'selection', 'thumb-label', 'top'}
class trame.html.StateChange(name, **kwargs)[source]

Bases: trame.html.AbstractElement

Component to react when a state entry change so an event can be triggered

Parameters

name (str) – Which part of the state to listen to

Events

Parameters

change (function) – Function to run if state changes

class trame.html.Triggers(ref, triggers={}, **kwargs)[source]

Bases: trame.html.AbstractElement

Component to trigger JS actions from Python

Parameters
  • ref (str) – Name for Vue reference to this object

  • triggers (dict[str, str]) – Mapping from names of triggers to expressions or methods in JS which they will call

>>> triggers = trame.html.Triggers(ref="all_triggers", triggers={ "reset_camera": "$refs.view.resetCamera()" })
add(name, call)[source]

Add a trigger which can call JS from Python

Parameters
  • name (str) – Reference for this JS method or expression trigger

  • call (str) – JS method or expression to call when triggered

>>> triggers.add("created", "console.log('UI is created')")
>>> triggers.add("mounted", "console.log('UI is mounted')")
>>> triggers.add("beforeDestroy", "console.log('UI is going away')")
call(name, *args)[source]

Trigger JS code previously added to this object

Parameters
  • name (str) – Reference for this JS method or expression trigger

  • args – Parameters passed to JS method

>>> triggers.call("reset_camera")
class trame.html.VTKLoading(message='', **kwargs)[source]

Bases: trame.html.AbstractElement

Component to show the 3 spinning partial circles using the ParaView Red/Green/Yellow colors.

Parameters

message (str) – Message to put below the spinning circles