diff --git a/docs/template_usage.rst b/docs/template_usage.rst index 7e6fcd0e..802fd93a 100644 --- a/docs/template_usage.rst +++ b/docs/template_usage.rst @@ -194,3 +194,62 @@ Other ipywidgets can be embedded by setting them in a trait and adding widget_se """ MyComponent() + +Composing with templates +------------------------ + +Just as ipywidgets can be embedded into a component, components can be embedded into each other by setting them in a ``components`` dictionary trait and adding class_component_serialization, accessing them under their component name: + +.. code-block:: python + + import ipyvuetify as v + import traitlets + + class FruitSelector(v.VuetifyTemplate): + fruits = traitlets.List(traitlets.Unicode(), default_value=['Apple', 'Pear']).tag(sync=True) + selected = traitlets.Unicode(default_value=None, allow_none=True).tag(sync=True) + @traitlets.default('template') + def _template(self): + return ''' + + ''' + + class MyComponent(v.VuetifyTemplate): + + components = traitlets.Dict( + { + 'fruit-selector': FruitSelector() + } + ).tag(sync=True, **v.VuetifyTemplate.class_component_serialization) + + @traitlets.default('template') + def _template(self): + return """ + + """ + + MyComponent()