done
This commit is contained in:
@ -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.
|
5
lib/python3.11/site-packages/examples/gallery/README.md
Normal file
5
lib/python3.11/site-packages/examples/gallery/README.md
Normal 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.
|
@ -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.
|
@ -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.
|
Reference in New Issue
Block a user