Dash Bootstrap Components

The Badge component allows you to create small labels or counters. It can be used standalone, inside buttons, or as links.

Key features include:

• Sizing: Scales relative to the parent container.
• Styling: Supports contextual background and text colors.
• Shapes: Can be rendered as 'pill' badges for rounded corners.
• Interactivity: Can be turned into links using the href argument.

You can create stacked progress bars by nesting Progress components. When nesting, you must set bar=True on each child component to ensure they render as progress bars within the parent container.

from dash_bootstrap_components import Progress

# Example of nested progress bars
stacked_progress = Progress(
    value=50,
    children=[
        Progress(value=30, bar=True),
        Progress(value=20, bar=True),
    ]
)

Layout in dash-bootstrap-components is based on the Bootstrap 12-column grid system. It consists of three main components:

1. Container: Used to center and horizontally pad your app's content. By default, it has a responsive pixel width. Use fluid=True to make the container fill the entire available horizontal space.
2. Row: A wrapper for columns. Your layout should be built as a series of rows.
3. Col: A wrapper for your content that ensures it takes up the correct amount of horizontal space.

Best Practices:

• Only use Row and Col inside a Container.
• The immediate children of any Row component should always be Col components. Place your actual content inside the Col components.

The ListGroup component is used to display a series of content items using ListGroupItem components. A basic implementation consists of a ListGroup container wrapping multiple ListGroupItem children.

from dash_bootstrap_components import ListGroup, ListGroupItem
import dash_html_components as html

layout = ListGroup(
    [ListGroupItem("Item 1"), ListGroupItem("Item 2")],
)

The DropdownMenu component allows you to organize lists of links and buttons into a toggleable overlay. It renders a button that acts as a toggle; clicking this button opens or closes the menu without requiring manual Dash callbacks.

Note: This component is named DropdownMenu to avoid naming conflicts with the Dropdown component in dash_core_components.

from dash_bootstrap_components import DropdownMenu, DropdownMenuItem

dropdown = DropdownMenu(
    children=[DropdownMenuItem("Item 1"), DropdownMenuItem("Item 2")],
    label="Menu Label",
)

Dash Bootstrap Components provides two ways to create navigation headers:

1. NavbarSimple: Best for standard use cases. It provides a pre-built layout with a 'brand' on the left and navigation items as children. It handles responsive collapsing and toggling automatically.
2. Navbar: Best for specialized or highly customized layouts. It offers full control over children but requires more boilerplate code and manual callback implementation to handle responsive behavior (like the mobile toggle).

Note: Do not confuse Navbar with the Nav component. Nav is used to group links together (horizontally or vertically), while Navbar represents the top-level application navigation bar, which often contains a Nav component.

You can control which accordion item is open when the application starts:

• To have no items open on startup, set start_collapsed=True on the Accordion component.
• To open a specific item on startup, provide its item_id to the active_item property of the Accordion component.

If active_item is not defined and start_collapsed is not True, the first item will be open by default.

# Start with all items collapsed
Accordion(
    AccordionItem("Section 1", "Content 1", item_id="item-1"),
    AccordionItem("Section 2", "Content 2", item_id="item-2"),
    start_collapsed=True
)

# Start with a specific item open
Accordion(
    AccordionItem("Section 1", "Content 1", item_id="item-1"),
    AccordionItem("Section 2", "Content 2", item_id="item-2"),
    active_item="item-1"
)

The is_open property of the Collapse component can be controlled via complex Dash callbacks. This allows for:

• One-to-Many: A single button or input controlling multiple Collapse components.
• Many-to-One: Multiple buttons or inputs sharing control over a single Collapse component.

To display text overlays on your slides, include heading and caption keys within the dictionaries provided to the items property of the Carousel component.

• heading: Rendered inside an <h5> element.
• caption: Rendered inside a <p> element.

dbc.Carousel(
    items=[
        {
            "src": "image1.jpg",
            "heading": "Slide Title",
            "caption": "This is a slide caption.",
        },
        {
            "src": "image2.jpg",
            "heading": "Another Title",
            "caption": "More descriptive text.",
        },
    ]
)

You can override the default dismissal behaviors of the Offcanvas component using the following props:

• close_button=False: Removes the close button in the header.
• backdrop="static": Prevents dismissal when clicking the backdrop.
• keyboard=False: Prevents dismissal when pressing the Escape key.

You can control which tab is currently selected by using the active_tab property of the Tabs component. This is useful for:

• Recalculating or recomputing content via Dash callbacks when a user switches tabs.
• Triggering side effects elsewhere on the page that are not contained within the tab pane.

# Example concept: using active_tab in a callback
Tabs(id='tabs-id', active_tab='tab-1', children=[...])

# In a callback:
@callback(
    Output('some-other-component', 'children'),
    Input('tabs-id', 'active_tab')
)
def update_output(active_tab):
    return f'You are on {active_tab}'