Layouts

BootstrapLayout

class dasher.layout.bootstrap.BootstrapLayout(title, widget_spec=OrderedDict([((<class 'dash.development.base_component.Component'>, <class 'dasher.base.CustomWidget'>), <class 'dasher.layout.bootstrap.widgets.PassthroughWidget'>), (<class 'bool'>, <class 'dasher.layout.bootstrap.widgets.BoolWidget'>), (<class 'str'>, <class 'dasher.layout.bootstrap.widgets.StringWidget'>), ((<class 'numbers.Real'>, <class 'numbers.Integral'>), <class 'dasher.layout.bootstrap.widgets.NumberWidget'>), (<class 'tuple'>, <class 'dasher.layout.bootstrap.widgets.TupleWidget'>), (<class 'collections.abc.Iterable'>, <class 'dasher.layout.bootstrap.widgets.IterableWidget'>)]), credits=True, include_stylesheets=True, widget_cols=2)[source]

Dasher boostrap layout. This layout utilizes dash_bootstrap_components to build the app layout.

Parameters:
  • title (str) – Title of the app.
  • widget_spec (OrderedDict, optional) – Widget specification. Default: dasher.layout.bootstrap.widgets.WIDGET_SPEC.
  • credits (bool, optional) – If true, shows a link to dasher’s github page in the navigation bar. Default: True.
  • include_stylesheets (bool, optional) – If true, includes the standard bootstrap theme as external stylesheets. Set it to false to use a customized bootstrap theme. Default: True.
  • widget_cols (int, optional) – Group the interactive components into widget_cols number of columns. Default: 2.
Variables:
  • widget_cols (int) – Group the interactive components into widget_cols number of columns.
  • include_stylesheets (bool) – If true, includes the standard bootstrap theme as external stylesheets.
  • external_stylesheets (list of str, optional) – Only present of include_stylesheets is True. It contains a list with the standard bootstrap theme as its’ only value.
  • navbar (dash_bootstrap_components.NavbarSimple) – Navigation bar of the layout.
  • body (dash_bootstrap_components.Container) – Container for the body of the app, containing the tab control and the tab contents div.
  • layout (dash_html_components.Div) – Layout of the app. The div contains navbar and body.
  • tabs (dash_bootstrap_components.Tabs) – Tab control to separate the layout of the callbacks.
  • tabs_content (dash_html_components.Div) – Content div used to render the selected tab.
  • callbacks (dict of DasherCallback) – Dictionary containing the callbacks present in the layout.
add_callback(callback, app, **kwargs)[source]

Add callback to the layout.

Parameters:
  • callback (DasherCallback) – The dasher callback to add to the layout.
  • app (dash.Dash) – The dash app.
  • **kwargs – Keyword arguments to override default layout settings for a callback.
render_base_layout()[source]

Create base layout with navigation bar and body container.

render_callback(name)[source]

Callback method to switch between tabs.

Parameters:name (str) – Name of the callback to render.
Returns:dash.development.base_component.Component – Layout of the callback.
render_card(callback, **kwargs)[source]

Renders a card with the interactive components and the output container.

Parameters:
  • callback (dasher.base.Callback) – The callback to render the card for.
  • **kwargs – Keyword arguments to override default layout settings.
Returns:

dash_bootstrap_components.Card – Layout of the card.

Widgets and WIDGET_SPEC

Widget specification and implementation of the interactive dasher widgets based on dash_bootstrap_components.

The widget specification supports the following types and generates the corresponding interactive widgets:

  • bool: Radio Items
  • str: Input field
  • int: Slider, integer
  • float: Slider, floats
  • tuple: Slider Can be (min, max) or (min, max, step). The type of all the tuple entries must either be int or float, which determines whether an integer or float slider will be generated.
  • collections.Iterable: Dropdown menu Typically a list or anything iterable.
  • collections.Mapping: Dropdown menu Typically a dict. A mapping will use the keys as labels shown in the dropdown menu, while the values will be used as arguments to the callback function.
  • dash.development.base_component.Component: custom dash component Any dash component will be used as-is. This allows full customization of a widget if desired. The widgets value will be used as argument to the callback function.
class dasher.layout.bootstrap.widgets.BoolWidget(name, x, label=None, dependency='checked')[source]

RadioItems component used for booleans.

Parameters:
  • name (str) – Name of the widget.
  • x (tuple of int or float) – Tuple used to configure the slider.
  • label (str, optional) – The label for the component.
  • dependency (str, optional) – The attribute used for the dash.dependencies.Input dependency. Default: “checked”.
component

Abstract property. The implementation of the getter method in the child class must return the concrete component.

Returns:dash.development.base_component.Component – Generated dash component.
layout

Abstract property. The implementation of the getter method in the child class must return the final layout of the widget.

Returns:dash.development.base_component.Component – Generated dash component.
class dasher.layout.bootstrap.widgets.BootstrapWidget(name, x, label=None, dependecy='value')[source]

Abstract base class for Bootstrap widgets. Implements the default layout property, which is used by most the widgets.

layout

Abstract property. The implementation of the getter method in the child class must return the final layout of the widget.

Returns:dash.development.base_component.Component – Generated dash component.
class dasher.layout.bootstrap.widgets.IterableWidget(name, x, label=None, dependecy='value')[source]

Dropdown component used for iterables and mappings.

component

Abstract property. The implementation of the getter method in the child class must return the concrete component.

Returns:dash.development.base_component.Component – Generated dash component.
class dasher.layout.bootstrap.widgets.NumberWidget(name, x, label=None, dependency='value')[source]

Widget used for numbers.

class dasher.layout.bootstrap.widgets.PassthroughWidget(name, x, label=None)[source]

Passthrough for custom dash components.

class dasher.layout.bootstrap.widgets.StringWidget(name, x, label=None, dependecy='value')[source]

Input field component used for for strings.

component

Abstract property. The implementation of the getter method in the child class must return the concrete component.

Returns:dash.development.base_component.Component – Generated dash component.
class dasher.layout.bootstrap.widgets.TupleWidget(name, x, label=None, dependency='value', slider_max_ticks=8, slider_float_steps=60)[source]

Slider components used for tuples of numbers.

Parameters:
  • name (str) – Name of the widget.
  • x (tuple of int or float) – Tuple used to configure the slider.
  • label (str, optional) – The label for the component.
  • dependency (str, optional) – The attribute used for the dash.dependencies.Input dependency. Default: “value”.
  • slider_max_ticks (int, default 8) – Maximum number of ticks to draw for the slider.
  • slider_float_steps (int, default 60) – Number of float steps to use if step is not defined explicity.
component

Abstract property. The implementation of the getter method in the child class must return the concrete component.

Returns:dash.development.base_component.Component – Generated dash component.
dasher.layout.bootstrap.widgets.WIDGET_SPEC = OrderedDict([((<class 'dash.development.base_component.Component'>, <class 'dasher.base.CustomWidget'>), <class 'dasher.layout.bootstrap.widgets.PassthroughWidget'>), (<class 'bool'>, <class 'dasher.layout.bootstrap.widgets.BoolWidget'>), (<class 'str'>, <class 'dasher.layout.bootstrap.widgets.StringWidget'>), ((<class 'numbers.Real'>, <class 'numbers.Integral'>), <class 'dasher.layout.bootstrap.widgets.NumberWidget'>), (<class 'tuple'>, <class 'dasher.layout.bootstrap.widgets.TupleWidget'>), (<class 'collections.abc.Iterable'>, <class 'dasher.layout.bootstrap.widgets.IterableWidget'>)])

Widget specification.