ComponentTemplate

class dash_component_template.ComponentTemplate(*args, parent=None, **kwargs)

Bases: dash_component_template.template.Template, dash_component_template.template.ComponentFactoryMixin

A component class for Dash component type.

Instances of this class is typically created from calling the Template.child() method, which allows declaring a tree of components with automatic unique ids.

Subclasses of this class that wraps a single Dash component class is typically created automatically when used by the child() call. Instances of these classes serves as a lazy evaluation proxy around the native Dash component class. Dash component properties on the template instance are passed to the Dash component class constructor when the layout property is queried.

User code can define subclass of this class that implement the setup_layout() method, in which a set of interrelated Dash components and their related callbacks can be defined. Such class acts as a “template” and one can use of multiple instances of it in a single page application, without the need to worrying about possible confliction in the ids.

Attributes Summary

children	All child nodes.
dash_component_info
layout	The layout generated from traversing the component tree.
parent	Parent Node.

Methods Summary

set_wildcard_prop(name, value)	Set the wildcard props of the component.
setup_layout(app)	Implement this to declare layout components and their callbacks.

Attributes Documentation

children

All child nodes.

>>> from anytree import Node
>>> n = Node("n")
>>> a = Node("a", parent=n)
>>> b = Node("b", parent=n)
>>> c = Node("c", parent=n)
>>> n.children
(Node('/n/a'), Node('/n/b'), Node('/n/c'))

Modifying the children attribute modifies the tree.

Detach

The children attribute can be updated by setting to an iterable.

>>> n.children = [a, b]
>>> n.children
(Node('/n/a'), Node('/n/b'))

Node c is removed from the tree. In case of an existing reference, the node c does not vanish and is the root of its own tree.

>>> c
Node('/c')

Attach

>>> d = Node("d")
>>> d
Node('/d')
>>> n.children = [a, b, d]
>>> n.children
(Node('/n/a'), Node('/n/b'), Node('/n/d'))
>>> d
Node('/n/d')

Duplicate

A node can just be the children once. Duplicates cause a TreeError:

>>> n.children = [a, b, d, a]
Traceback (most recent call last):
    ...
anytree.node.exceptions.TreeError: Cannot add node Node('/n/a') multiple times as child.

dash_component_info = None

layout

The layout generated from traversing the component tree.

The traversing is depth first.

Note

Properties with callable values are evaluated the time the property is queried.

parent

Parent Node.

On set, the node is detached from any previous parent node and attached to the new node.

>>> from anytree import Node, RenderTree
>>> udo = Node("Udo")
>>> marc = Node("Marc")
>>> lian = Node("Lian", parent=marc)
>>> print(RenderTree(udo))
Node('/Udo')
>>> print(RenderTree(marc))
Node('/Marc')
└── Node('/Marc/Lian')

Attach

>>> marc.parent = udo
>>> print(RenderTree(udo))
Node('/Udo')
└── Node('/Udo/Marc')
    └── Node('/Udo/Marc/Lian')

Detach

To make a node to a root node, just set this attribute to None.

>>> marc.is_root
False
>>> marc.parent = None
>>> marc.is_root
True

Methods Documentation

set_wildcard_prop(name, value)

Set the wildcard props of the component.

This is necessary because we do not have mechanism to handle those.

setup_layout(app)

Implement this to declare layout components and their callbacks.

This base implementation has to be called in the subclass implementation to ensure any child templates also get properly setup. This is particularly important for templates that contain templates in their descendants.

The convention is to structure the implementation in the following way:

def setup_layout(self, app):
    child0 = self.child(some_dash_type, ...)
    child1 = child0.child(some_template_cls, ...)
    # This will trigger `setup_layout` call to all the children,
    # which may make available some attributes
    super().setup_layout(app)

    @app.callback(...)
    def some_callback(...):
        return