PyCafe - Vizro - Button Link Examples with Vizro

app.py
requirements.txt
app.py
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
# Vizro is an open-source toolkit for creating modular data visualization applications.
# check out https://github.com/mckinsey/vizro for more info about Vizro
# and checkout https://vizro.readthedocs.io/en/stable/ for documentation.

from typing_extensions import Literal
import dash_bootstrap_components as dbc
from dash import get_relative_path

import vizro.models as vm
from vizro import Vizro

try:
    from pydantic.v1 import Field
except ImportError:  # pragma: no cov
    from pydantic import Field

class ButtonLink(vm.VizroBaseModel):
    type: Literal["buttonlink"] = "buttonlink"
    text: str = Field("Click me!", description="Text to be displayed on button.")
    href: str = Field("", description="URL (relative or absolute) to navigate to.")

    def build(self):
        return dbc.Button(
            id=self.id,
            children=self.text,
            href=get_relative_path(self.href) if self.href.startswith("/") else self.href,
            target="_top",
        )

vm.Page.add_type("components", ButtonLink)  


page_one = vm.Page(
    title="Card",
    components=[
        vm.Card(text="HELLO")
    ],
)

page_two = vm.Page(
    title="Button Styling",
    layout=vm.Layout(grid=[[0, 1]]),
    components=[
        ButtonLink(text="Google", href="https://google.com"),
        ButtonLink(text="Take me home", href="/"),
    ],
)

dashboard = vm.Dashboard(pages=[page_one, page_two])

Vizro().build(dashboard).run()
Py.Cafe

vizro-button-link-examples

Button Link Examples with Vizro
