Dash

Dash is the original low-code framework for rapidly building data apps in Python

Components

Descriptions as in the python docstring.

Collapse

💬 A Collapse component. Hide or show content with a vertical collapsing animation. Visibility of the children is controlled by the is_open prop which can be targetted by callbacks.

Keyword arguments:

  • children (a list of or a singular dash component, string or number; optional): The children of this component.

  • id (string; optional): The ID of this component, used to identify dash components in callbacks. The ID needs to be unique across all of the components in an app.

  • class_name (string; optional): Often used with CSS to style elements with common properties.

  • is_open (boolean; optional): Whether collapse is currently open.

  • key (string; optional): A unique identifier for the component, used to improve performance by React.js while rendering components See https://reactjs.org/docs/lists-and-keys.html for more info.

  • loading_state (dict; optional): Object that holds the loading state object coming from dash-renderer.

    loading_state is a dict with keys:

    • component_name (string; optional): Holds the name of the component that is loading.

    • is_loading (boolean; optional): Determines if the component is loading or not.

    • prop_name (string; optional): Holds which property is loading.

  • 👉 navbar (boolean; optional): Set to True when using a collapse inside a navbar.

  • style (dict; optional): Defines CSS styles which will override styles previously set.

Container

A Container component. Containers provide a means to center and horizontally pad your site’s contents.

Keyword arguments:

  • children (a list of or a singular dash component, string or number; optional): The children of this component.

  • id (string; optional): The ID of this component, used to identify dash components in callbacks. The ID needs to be unique across all of the components in an app.

  • class_name (string; optional): Often used with CSS to style elements with common properties.

  • 👉 fluid (boolean | string; optional): If True the container-fluid class will be applied, and the Container will expand to fill available space. A non-fluid container resizes responsively to a fixed width at the different breakpoints. You can also set the fluid property to one of the Bootstrap breakpoints: "sm", "md", "lg", "xl" or "xxl", so that the container fluidly expands to fill the screen until the specified breakpoint, then resize responsively at higher breakpoints.

  • key (string; optional): A unique identifier for the component, used to improve performance by React.js while rendering components See https://reactjs.org/docs/lists-and-keys.html for more info.

  • loading_state (dict; optional): Object that holds the loading state object coming from dash-renderer.

    loading_state is a dict with keys:

    • component_name (string; optional): Holds the name of the component that is loading.

    • is_loading (boolean; optional): Determines if the component is loading or not.

    • prop_name (string; optional): Holds which property is loading.

  • style (dict; optional): Defines CSS styles which will override styles previously set.

  • tag (string; optional): HTML tag to apply the container class to, default: div.

💬 A Nav component. Nav can be used to group together a collection of navigation links.

Keyword arguments:

  • children (a list of or a singular dash component, string or number; optional): The children of this component.

  • id (string; optional): The ID of this component, used to identify dash components in callbacks. The ID needs to be unique across all of the components in an app.

  • card (boolean; optional): Set to True when using Nav with pills styling inside a CardHeader.

  • class_name (string; optional): Often used with CSS to style elements with common properties.

  • fill (boolean; optional): Expand the nav items to fill available horizontal space.

  • horizontal (a value equal to: 'start', 'center', 'end', 'between', 'around'; optional): Specify the horizontal alignment of the NavItems. Options are 'start', 'center', or 'end'.

  • justified (boolean; optional): Expand the nav items to fill available horizontal space, making sure every nav item has the same width.

  • key (string; optional): A unique identifier for the component, used to improve performance by React.js while rendering components See https://reactjs.org/docs/lists-and-keys.html for more info.

  • loading_state (dict; optional): Object that holds the loading state object coming from dash-renderer.

    loading_state is a dict with keys:

    • component_name (string; optional): Holds the name of the component that is loading.

    • is_loading (boolean; optional): Determines if the component is loading or not.

    • prop_name (string; optional): Holds which property is loading.

  • navbar (boolean; optional): Set to True if using Nav in Navbar component. This applies the navbar-nav class to the Nav which uses more lightweight styles to match the parent Navbar better.

  • navbar_scroll (boolean; optional): Enable vertical scrolling within the toggleable contents of a collapsed Navbar.

  • pills (boolean; optional): Apply pill styling to nav items. Active items will be indicated by a pill.

  • style (dict; optional): Defines CSS styles which will override styles previously set.

  • vertical (boolean | string; optional): Stack NavItems vertically. Set to True for a vertical Nav on all screen sizes, or pass one of the Bootstrap breakpoints ('xs', 'sm', 'md', 'lg', 'xl') for a Nav which is vertical at that breakpoint and above, and horizontal on smaller screens.

💬 A Navbar component. The Navbar component can be used to make fully customisable navbars.

Keyword arguments:

  • children (a list of or a singular dash component, string or number; optional): The children of this component.

  • id (string; optional): The ID of this component, used to identify dash components in callbacks. The ID needs to be unique across all of the components in an app.

  • class_name (string; optional): Often used with CSS to style elements with common properties.

  • color (string; default 'light'): Sets the color of the Navbar. Main options are primary, light and dark, default light. You can also choose one of the other contextual classes provided by Bootstrap (secondary, success, warning, danger, info, white) or any valid CSS color of your choice (e.g. a hex code, a decimal code or a CSS color name).

  • dark (boolean; optional): Applies the navbar-dark class to the Navbar, causing text in the children of the Navbar to use light colors for contrast / visibility.

  • expand (boolean | string; default 'md'): Specify screen size at which to expand the menu bar, e.g. sm, md, lg etc.

  • fixed (string; optional): Fix the navbar's position at the top or bottom of the page, options: top, bottom.

  • key (string; optional): A unique identifier for the component, used to improve performance by React.js while rendering components See https://reactjs.org/docs/lists-and-keys.html for more info.

  • light (boolean; default True): Applies the navbar-light class to the Navbar, causing text in the children of the Navbar to use dark colors for contrast / visibility.

  • loading_state (dict; optional): Object that holds the loading state object coming from dash-renderer.

    loading_state is a dict with keys:

    • component_name (string; optional): Holds the name of the component that is loading.

    • is_loading (boolean; optional): Determines if the component is loading or not.

    • prop_name (string; optional): Holds which property is loading.

  • role (string; optional): The ARIA role attribute.

  • sticky (a value equal to: 'top'; optional): Position the navbar at the top of the viewport, but only after scrolling past it. A convenience prop for the sticky-top positioning class. Not supported in <= IE11 and other older browsers With sticky, the navbar remains in the viewport when you scroll. By contrast, with fixed, the navbar will remain at the top or bottom of the page. sticky='top'.

  • style (dict; optional): Defines CSS styles which will override styles previously set.

  • tag (string; optional): HTML tag to use for the Navbar, default 'nav'.

💬 A NavbarBrand component. Call out attention to a brand name or site title within a navbar.

Keyword arguments:

  • children (a list of or a singular dash component, string or number; optional): The children of this component.

  • id (string; optional): The ID of this component, used to identify dash components in callbacks. The ID needs to be unique across all of the components in an app.

  • class_name (string; optional): Often used with CSS to style elements with common properties.

  • external_link (boolean; optional): If True, the browser will treat this as an external link, forcing a page refresh at the new location. If False, this just changes the location without triggering a page refresh. Use this if you are observing dcc.Location, for instance. Defaults to True for absolute URLs and False otherwise.

  • href (string; optional): URL of the linked resource.

  • key (string; optional): A unique identifier for the component, used to improve performance by React.js while rendering components See https://reactjs.org/docs/lists-and-keys.html for more info.

  • loading_state (dict; optional): Object that holds the loading state object coming from dash-renderer.

    loading_state is a dict with keys:

    • component_name (string; optional): Holds the name of the component that is loading.

    • is_loading (boolean; optional): Determines if the component is loading or not.

    • prop_name (string; optional): Holds which property is loading.

  • style (dict; optional): Defines CSS styles which will override styles previously set.

A NavItem component. Create a single item in a Nav.

Keyword arguments:

  • children (a list of or a singular dash component, string or number; optional): The children of this component.

  • id (string; optional): The ID of this component, used to identify dash components in callbacks. The ID needs to be unique across all of the components in an app.

  • class_name (string; optional): Often used with CSS to style elements with common properties.

  • key (string; optional): A unique identifier for the component, used to improve performance by React.js while rendering components See https://reactjs.org/docs/lists-and-keys.html for more info.

  • loading_state (dict; optional): Object that holds the loading state object coming from dash-renderer.

    loading_state is a dict with keys:

    • component_name (string; optional): Holds the name of the component that is loading.

    • is_loading (boolean; optional): Determines if the component is loading or not.

    • prop_name (string; optional): Holds which property is loading.

  • style (dict; optional): Defines CSS styles which will override styles previously set.

A NavbarToggler component. Use this component to create a navbar toggle to show navlinks when the navbar collapses on smaller screens.

Keyword arguments:

  • children (a list of or a singular dash component, string or number; optional): The children of this component.

  • id (string; optional): The ID of this component, used to identify dash components in callbacks. The ID needs to be unique across all of the components in an app.

  • class_name (string; optional): Often used with CSS to style elements with common properties.

  • key (string; optional): A unique identifier for the component, used to improve performance by React.js while rendering components See https://reactjs.org/docs/lists-and-keys.html for more info.

  • loading_state (dict; optional): Object that holds the loading state object coming from dash-renderer.

    loading_state is a dict with keys:

    • component_name (string; optional): Holds the name of the component that is loading.

    • is_loading (boolean; optional): Determines if the component is loading or not.

    • prop_name (string; optional): Holds which property is loading.

  • n_clicks (number; default 0): An integer that represents the number of times that this element has been clicked on.

  • n_clicks_timestamp (number; default -1): An integer that represents the time (in ms since 1970) at which n_clicks changed. This can be used to tell which button was changed most recently.

  • style (dict; optional): Defines CSS styles which will override styles previously set.

  • type (string; optional): Toggle type, default: button.