from vizro import Vizro
import vizro.models as vm
justify_options = [
"start",
"end",
"center",
"between",
# "around",
# "evenly",
]
align_options = [
"start",
"end",
"center",
"stretch"
]
class Flex(vm.Flex):
justify: str
align: str
def build(self):
flex = super().build()
flex.className += f" justify-content-{self.justify} align-items-{self.align}"
return flex
page = vm.Page(
title="Different justification option",
layout=vm.Flex(direction="column"),
components = [
vm.Container(
layout=Flex(direction="row", justify=justify, align=align),
title=f"{justify=} {align=}",
components=[vm.Card(text="text")] * 2 + [vm.Card(text="text\n\ntext")]
)
for justify in justify_options for align in align_options
]
)
dashboard = vm.Dashboard(pages=[page])
Vizro().build(dashboard).run()