Dash Blueprint Components

Dash Python
,
22

Hi Tobs, I am going to add the style prop to all the components in the next release (in the next days/early next week).

About the other issues:

  1. The component has been developed in uncontrolled mode, that is way it does not update when changing the text prop. I decided to do not use the controlled mode because in that case the value prop must be updated manually, and the debounce functionality cannot be implemented. I’m thinking of moving anyway the component to controlled mode, and add two different fields , value and text, the first that is updated every time the value changes, the second only when the Enter key is pressed or the input loses focus.
  2. I get the point. When I wrote the documentation I decided to be as close as possibile to the original one, but I agree this is an enhancement that can help a lot the users.
  3. The props descriptions are taken directly from the props annotations in the JS file of the components.
23

Hi everyone, I released a new version of the library (0.1.0).

Changes on the new release:

  • Added style prop to all the components.
  • Moved InputGroup, NumericInput and TextArea from uncontrolled to controlled mode.

The second point fixes the issues described by @Tobs in the post:
inputgroup

import dash_blueprint_components as dbpc
import dash
from dash import html, callback, Input, Output

app = dash.Dash(__name__)

app.layout = html.Div(
    children=[
        dbpc.InputGroup(
            id='input-group',
            placeholder='insert text',
            leftIcon='filter',
            addOnBlur=True,
            rightElement=dbpc.Button(
                id='reset',
                text='Reset'
            )
        ),
        dbpc.FormGroup(
            id='output',
            label='Updated on every user interaction: (value prop)',
        ),
        dbpc.FormGroup(
            id='output-debounce',
            label='Updated only when the input loses focus or Enter key is pressed: (text prop)'
        )
    ],
    style={
        'width': '400px'
    }
)

@callback(
    Output('input-group', 'value'),
    Input('reset', 'n_clicks')
)
def getvalue(_):
    return ''

@callback(
    Output('output', 'children'),
    Input('input-group', 'value')
)
def getvalue(value):
    return value

@callback(
    Output('output-debounce', 'children'),
    Input('input-group', 'text')
)
def gettext(text):
    return text

app.run(debug=True)
24

Awesome, I will try it out.