Components

Components#

On this page I’ll be exploring the possibilities of using different Plotly components.

Sources#

Button#

It’s common not to use the button’s n_clicks property as a trigger for the callback.

So in the following example, there is a button that translates the n_clicks property to text in the p element.

from dash import Dash, html, callback, Input, Output
from IPython.display import clear_output

app = Dash(__name__)
app.layout = html.Div([
    html.Button(
        "Example button", 
        id="test-button", 
        n_clicks=0 # you can set any nuber for start
    ),
    html.P("", id="result-p")
])
@callback(
    Output("result-p", "children"),
    Input("test-button", "n_clicks")
)
def test_callback(n_clicks):
    return n_clicks

app.run(debug=False, port = 8054)
clear_output()

Checklist#

from jupyter_dash import JupyterDash
from dash import dcc, html
from IPython.display import clear_output

my_list = [
    "BelarusSales",
    "SalesNetworkBelarus",
    "BelSalesNetwork",
    "SalesNetworkBel",
    "SalesOfBelarus",
    "BelSalesNetworks",
    "BelarusSalesNetwork",
    "SalesInBelarus",
]

app = JupyterDash(__name__)

app.layout = html.Div([
    dcc.Checklist(
        my_list,
        style = {
            "font-size": "150%", 
            "height":"5cm",
            "border" : "solid",
            "overflow":"auto"
        }
    )
])

app.run_server(debug=False, port = 8052)

Dash app running on http://127.0.0.1:8052/

Details#

Basic example#

dash.html.Details allows you to define a group of elements that hide some other components and show them on click.

from jupyter_dash import JupyterDash
from dash import dcc, html
from IPython.display import clear_output

my_list = [
    "BelarusSales",
    "SalesNetworkBelarus",
    "BelSalesNetwork",
    "SalesNetworkBel",
    "SalesOfBelarus",
    "BelSalesNetworks",
    "BelarusSalesNetwork",
    "SalesInBelarus",
]

app = JupyterDash(__name__)

app.layout = html.Details(
    [html.H3(i) for i in my_list],
)

app.run_server(debug=False, port = 8053)
clear_output()

Summary (caption)#

If you want to change the caption of the details (text near the arrow), you should create a Summary object as a child of the Details tag. The important feature is that you can put other objects (like buttons and so on) in the Summary.

Read more:

So in the following example there is a Details with the caption “My details” and an additional button in the header.

from jupyter_dash import JupyterDash
from dash import dcc, html
from IPython.display import clear_output

my_list = [
    "BelarusSales",
    "SalesNetworkBelarus",
    "BelSalesNetwork",
    "SalesNetworkBel",
    "SalesOfBelarus",
    "BelSalesNetworks",
    "BelarusSalesNetwork",
    "SalesInBelarus",
]

app = JupyterDash(__name__)

contents = [html.H3(i) for i in my_list]
summary = [
    html.Summary([
        "My details", 
        html.Button("Summary button")
    ])
]

app.layout = html.Details(contents + summary)

app.run_server(debug=False, port = 8054)
clear_output()

Overlapping#

You can put any content in the Details section, and when the element is scrolled it should move any content that follows it. So in the example below I use both simple strings and other dash components.

from jupyter_dash import JupyterDash
from dash import dcc, html
from IPython.display import clear_output

app = JupyterDash(__name__)

contents1 = [elem for i in range(10) for elem in [f"line{i}", html.Br()]]

contents2 = [dcc.Checklist(
    options = [f"Checkbox{i}" for i in range(10)]
)]

app.layout = html.Div([
        html.Details(contents1 + contents2),
    "Some other contents"
])

app.run_server(debug=False, port = 8055)
clear_output()
Contents