diff --git a/vizro-core/changelog.d/20241118_113651_huong_li_nguyen_button_alignment.md b/vizro-core/changelog.d/20241118_113651_huong_li_nguyen_button_alignment.md new file mode 100644 index 000000000..7c0d58d4f --- /dev/null +++ b/vizro-core/changelog.d/20241118_113651_huong_li_nguyen_button_alignment.md @@ -0,0 +1,48 @@ + + + + + + + + + diff --git a/vizro-core/examples/scratch_dev/app.py b/vizro-core/examples/scratch_dev/app.py index 84e70e6aa..67d50daea 100644 --- a/vizro-core/examples/scratch_dev/app.py +++ b/vizro-core/examples/scratch_dev/app.py @@ -1,45 +1,15 @@ """Dev app to try things out.""" -import pandas as pd import vizro.models as vm -import vizro.plotly.express as px from vizro import Vizro -from vizro._themes._color_values import COLORS - -pastry = pd.DataFrame( - { - "pastry": [ - "Scones", - "Bagels", - "Muffins", - "Cakes", - "Donuts", - "Cookies", - "Croissants", - "Eclairs", - "Brownies", - "Tarts", - "Macarons", - "Pies", - ], - "Profit Ratio": [-0.10, -0.15, -0.05, 0.10, 0.05, 0.20, 0.15, -0.08, 0.08, -0.12, 0.02, -0.07], - } -) page = vm.Page( - title="Charts UI", + title="Button Styling", + layout=vm.Layout(grid=[[0, 1]]), components=[ - vm.Graph( - figure=px.bar( - pastry.sort_values("Profit Ratio"), - orientation="h", - x="Profit Ratio", - y="pastry", - color="Profit Ratio", - color_continuous_scale=COLORS["DIVERGING_RED_CYAN"], - ), - ), + vm.Button(), + vm.Button(text="Take me home", href="/"), ], ) diff --git a/vizro-core/src/vizro/models/_components/button.py b/vizro-core/src/vizro/models/_components/button.py index 500c8800b..8b47cc085 100644 --- a/vizro-core/src/vizro/models/_components/button.py +++ b/vizro-core/src/vizro/models/_components/button.py @@ -1,5 +1,5 @@ from typing import Literal - +from dash import dcc, get_relative_path import dash_bootstrap_components as dbc try: @@ -24,6 +24,7 @@ class Button(VizroBaseModel): type: Literal["button"] = "button" text: str = Field("Click me!", description="Text to be displayed on button.") + href: str = Field("", description="URL (relative or absolute) to navigate to.") actions: list[Action] = [] # Re-used validators @@ -31,4 +32,5 @@ class Button(VizroBaseModel): @_log_call def build(self): - return dbc.Button(id=self.id, children=self.text) + return dbc.Button(id=self.id,children=self.text, href=get_relative_path(self.href) if self.href.startswith("/") else self.href, + target="_top")