The code below should to my understanding work, ie the dropdown value should be reflected in the Jumbotron subtitle.
from typing import Literal
from dash import html
import vizro.models as vm
from vizro import Vizro
from vizro.models.types import capture
from dash import callback, Input, Output
@capture("action")
def subtitle_changer(subtitle: str):
"""Custom action."""
print("SUBTITLE",subtitle)
return subtitle
# 1. Create new custom component
class Jumbotron(vm.VizroBaseModel):
"""New custom component `Jumbotron`."""
type: Literal["jumbotron"] = "jumbotron"
title: str
subtitle: str
text: str
def build(self):
return html.Div(
[
html.H2(self.title),
html.H3(id = "subtitle_id_to_target",children=self.subtitle),
html.P(self.text),
]
)
# 2. Add new components to expected type - here the selector of the parent components
vm.Page.add_type("components", Jumbotron)
vm.Page.add_type("controls", vm.Dropdown)
page = vm.Page(
title="Custom Component",
components=[
Jumbotron(
id="my_jumbotron",
title="Jumbotron",
subtitle="This is a subtitle to summarize some content.",
text="This is the main body of text of the Jumbotron.",
),
vm.Card(id="my_card", text="Click on a point on the above graph."),
],
controls=[vm.Dropdown(
id = "my_dropdown",
options = ["Subtitle 1", "Subtitle 2", "Subtitle 3"],
multi = False,
actions = [
vm.Action(
function = subtitle_changer(),
inputs = ["my_dropdown.value"],
outputs = ["subtitle_id_to_target.children"],
),
]
)],
)
dashboard = vm.Dashboard(pages=[page])
Vizro().build(dashboard).run()
Expected behavior
Expected behaviour as described above.
Interestingly the custom action works when we use the Dropdown inside a Filter or Parameter and overwrite the pre-defined action there.
Defining a dash callback with the relevant Input and Output also works!
Description
The code below should to my understanding work, ie the dropdown value should be reflected in the Jumbotron subtitle.
Expected behavior
Expected behaviour as described above.
Interestingly the custom action works when we use the
Dropdown
inside aFilter
orParameter
and overwrite the pre-defined action there.Defining a dash
callback
with the relevantInput
andOutput
also works!Which package?
vizro
Package version
0.1.14.dev0
Python version
3.9.12
OS
Mac
How to Reproduce
See above
Output
No response
Code of Conduct