This commit is contained in:
2025-09-07 22:09:54 +02:00
parent e1b817252c
commit 2fc0d000b6
7796 changed files with 2159515 additions and 933 deletions

View File

@ -0,0 +1,36 @@
# 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.

View File

@ -0,0 +1,5 @@
# README
This directory contains a collection of example apps that demonstrate usage of `dash-bootstrap-components`. Many of the apps have dependencies that are not dependencies of `dash-bootstrap-components` itself, each app has its own `requirements.txt` file containing these dependencies. You can easily install them with `pip install -r requirements.txt`.
Apps are written for Python 3.6+, they may happen to work with older versions of Python, but this is not tested or guaranteed.

View File

@ -0,0 +1,4 @@
# App templates
These examples have minimal content, but are intended to demonstrate how you
could structure layouts in your apps using dash-bootstrap-components.

View File

@ -0,0 +1,37 @@
# Multi-page apps
This directory contains some multi-page example apps, demonstrating how the
navigation components in *dash-bootstrap-components* can be used to create easy
to navigate dashboards.
## `navbar.py`
This example creates a multipage app with a navbar for navigation. It uses a
Dash callback to toggle the `active` property of the `NavLink` components,
allowing users to easily see which page they are on.
## `simple_sidebar.py`
This example creates a simple sidebar with vertically stacked links for
navigation. A callback is again used to set the `active` property of the
`NavLink` components, with the "pill" style applied to the active link.
## `sidebar-with-submenus`
This is like the simple sidebar, but the navlinks are gathered into collapsible
collections which can be hidden or revealed by clicking. The app uses chevron
icons fontawesome to indicate that the collapsible elements can be expanded or
collapsed.
## `responsive-sidebar`
This is also like the simple sidebar, but adapts to smaller screen sizes
(either when the browser window is resized, or the app is viewed on a mobile
device). On smaller screens, the sidebar becomes a top navbar with the links
becoming collapsible. Visit a deployed version on a mobile device, or toggle
the device toolbar in your browser's developer tools to check it out!
## `responsive-collapsible-sidebar`
This is like the responsive sidebar example, but on large screens the sidebar
is also collapsible.