Layouts
This page explains the multiple layouts components and all the options to control the layout of the dashboard.
There are 4 main components of Jupyter-flex Dashboard: Pages, Sections, Cards and Cells and they have that ordered hierarchy meaning that Pages contain one or more Sections, Sections contain or or multiple Cards and Cards contain one or multiple cells.
Cells are pretty self explanatory as they are the same as in Jupyter, it can be Markdown or Code cells and can contain one output.
Cards¶
A Card is an object that holds one or more Cells, these can be markdown cells or code cells that have outputs such as plots, text, widgets and more.
To define a new Card you use a level-3 markdown header (###
). Each card belongs in a Section and one Section can have one or more Cards.
Any tagged Cell will be added to the current Card until a new Card, Section or Page is defined.
The components of a Card are:
- Title: Based on the value of level-3 markdown header (
###
) used to define it - One (or more) code cells tagged with
body
that contain outputs - One (or more) markdown cells tagged with
body
that contain some narrative for the dashboard - Footer: one or more markdown or code cells tagged with
footer
- Help modal: one or more markdown or code cells tagged with
help
For example take this notebook with one Card, two plots and some text. Note that code cells get expanded to ocupy all the space in the Card while markdown cells get just use the space they need to display its content.
import plotly
import plotly.express as px
df = px.data.iris()
### Card header
"This is a markdown cell, **all** *regular* syntax ~~should~~ works."
'This is a markdown cell, **all** *regular* syntax ~~should~~ works.'
"This is another markdown cell, you can add multiple markdown cells and the main chart is expanded."
'This is another markdown cell, you can add multiple markdown cells and the main chart is expanded.'
fig = px.scatter(df, x="sepal_width", y="sepal_length")
fig.show()