37 lines
1.6 KiB
Markdown
37 lines
1.6 KiB
Markdown
# Advanced component usage
|
|
|
|
This directory contains more examples of how to use the components available
|
|
in `dash-bootstrap-components`, covering more advanced usage patterns and going
|
|
into more details on some features than there is space to do in the
|
|
documentation.
|
|
|
|
## `graphs_in_tabs.py`
|
|
|
|
Shows how to render tab content dynamically using a callback. This can help
|
|
prevent a common problem with graphs not being sized correctly when the tab is
|
|
switched. The example shows how a `dcc.Store` can be used to cache results
|
|
client side in case the graph generation process is expensive.
|
|
|
|
## `navbars.py`
|
|
|
|
A simple app demonstrating how to manually construct a navbar with a customised
|
|
layout using the `Navbar` component and the supporting `Nav`, `NavItem`,
|
|
`NavLink`, `NavbarBrand`, and `NavbarToggler` components.
|
|
|
|
## `toast.py`
|
|
|
|
This app demonstrates how you can display dismissable messages to the user
|
|
using the Toast component.
|
|
|
|
The key idea is to maintain a list of the messages in memory on the client side
|
|
using dash_core_components.Store. Each time the Store is updated, a callback
|
|
renders all of the messages that are in the Store.
|
|
|
|
The displayed messages can then be controlled by controlling what is in the
|
|
Store. In this example we use a pattern-matching callback that responds to both
|
|
the main button being clicked, but also any of the dismiss buttons of the Toast
|
|
components. With dash.callback_context we can determine what was pressed, and
|
|
add or remove a message from the Store accordingly. Using this same pattern you
|
|
can add or remove messages from the message store in response to all kinds of
|
|
different events.
|