class trame.layouts.AbstractLayout(_root_elem, name, favicon=None, on_ready=None)[source]

Bases: object

property root

Top level Vue component. Useful for providing / injecting into children components. Setting makes old root child of new root.

property html

Compute corresponding layout String which represent the html part.

property state

Return App state as a dictionary or extend it when setting. This is a safe way to build the state incrementaly.

>>> layout.state = { "a": 1, "b": 2 }
>>> print(layout.state)
... {"a": 1, "b": 2}
>>> layout.state = { "c": 3, "d": 4 }
>>> print(layout.state)
... {"a": 1, "b": 2, "c": 3, "d": 4}

Push new content to client

start(port=None, debug=None, **kwargs)[source]

Start the application server.

  • port – Which port to run the server on

  • debug (bool or None) – Whether to enable debugging tools. Defaults to None, in which case it is set to True if the –dev flag was passed as a command line argument.

  • kwargs – arguments to forward to run_server()

Some of the kwargs that may be forwarded to run_server() include:

  • exec_mode (str): “main” (default) or “task” for running in an

    environment that already has an event loop, such as a Jupyter notebook.

The kwargs will also be forwarded to print_server_info(), so that the server kwarg may be used to indicate whether a new window should be opened.

start_thread(port=None, print_server_info=False, on_server_listening=None, **kwargs)[source]
start_desktop_window(on_msg=None, **kwargs)[source]
add_route(name, path, template)[source]
with_route(name, path, root)[source]
class trame.layouts.FullScreenPage(name, favicon=None, on_ready=None)[source]

Bases: trame.layouts.core.AbstractLayout

A layout that takes the whole screen.

  • name (str) – Text for this page’s browser tab (required)

  • favicon (str) – Filename of image for this page’s browser tab

  • on_ready (function) – Function to run on startup

>>> FullScreenPage("Simple Page").start()
class trame.layouts.SinglePage(name, favicon=None, on_ready=None)[source]

Bases: trame.layouts.core.FullScreenPage

A layout that takes the whole screen, adding a vuetify app bar for a toolbar, a VMain as content and a VFooter as a footer.


name (str) – Text for this page’s browser tab (required)

>>> layout = SinglePage("Page with header / app bar")

The toolbar starts with 2 children, a logo and a title which are accessible at the root of the layout object.

>>> layout.toolbar.children += ["More stuff to the toolbar"]
>>> layout.logo.children = [VIcon("mdi-menu")]
>>> layout.title.set_text("My Super App")

Then we have content and footer. Content is by default empty but the footer has the default trame information regarding its versions and feature feedback on when the server is busy with a spining progress.

You can quickly hide the footer by calling the following.

>>> layout.footer.hide()
class trame.layouts.SinglePageWithDrawer(name, favicon=None, on_ready=None, show_drawer=True, width=200, show_drawer_name='drawerOpen')[source]

Bases: trame.layouts.core.SinglePage

A layout that takes the whole screen, adding a vuetify app bar for a toolbar, a content, a drawer, and a footer.

  • name (str) – Text for this page’s browser tab (required)

  • show_drawer (bool) – Whether the drawer is open. Default True

  • width (Number) – How many pixels wide the drawer should be

  • show_drawer_name (str) – The name referencing the drawer’s state. Default “drawerOpen”.

>>> SinglePageWithDrawer("Page with drawer").start()

Flush layout to the client


layout (str | trame.layouts.*) – UI content for your application

>>> layout.title.set_text("Workload finished!")
>>> update_layout(layout)