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.
2 Likes
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)
4 Likes
24

Awesome, I will try it out.