Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add addon_type prop to DropdownMenu #59

Merged
merged 8 commits into from
Nov 17, 2018
Merged

Conversation

pbugnion
Copy link
Member

@pbugnion pbugnion commented Nov 16, 2018

Passing the addon_type prop to DropdownMenu allows embedding dropdowns in input groups. For instance:

screen shot 2018-11-16 at 13 41 44

See below for the code used to generate that app. The value in the Input is generated dynamically as the dropdown changes.

This PR also adds unit tests for DropdownMenu.

This resolves issue #52 and allows me to finish PR #51 .


Test code:

import dash
import dash_bootstrap_components as dbc
import dash_html_components as html
import dash_core_components as dcc
from dash.dependencies import Input, Output

app = dash.Dash(
    __name__, 
    external_stylesheets=['https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css']
)

app.layout = dbc.Container([
    html.H2('Dropdown add on type demonstration'),
    dbc.InputGroup(
        [
            dbc.DropdownMenu(
                [
                    dbc.DropdownMenuItem("hello", id="demo-input-hello"),
                    dbc.DropdownMenuItem("world", id="demo-input-world")
                ],
                addon_type="prepend",
                label="Label"
            ),
            dbc.Input(placeholder='username', id="demo-output")
        ]
    )
])


@app.callback(
    Output("demo-output", "value"),
    [Input("demo-input-hello", "n_clicks_timestamp"), Input("demo-input-world", "n_clicks_timestamp")]
)
def _(t_click_hello, t_click_world):
    if not t_click_hello and not t_click_world:
        return ''
    elif t_click_hello is None:
        return 'world'
    elif t_click_world is None:
        return 'hello'
    elif t_click_hello <= t_click_world:
        return 'world'
    else:
        return 'hello'
    
    
if __name__ == '__main__':
    app.run_server(port=8888, debug=True)

@pbugnion pbugnion changed the title [WIP] Add addon_type prop to DropdownMenu Add addon_type prop to DropdownMenu Nov 16, 2018
@tcbegley
Copy link
Collaborator

Looks great!

@pbugnion pbugnion merged commit addbea9 into master Nov 17, 2018
@pbugnion pbugnion deleted the add-dropdown-addon-type branch November 17, 2018 12:58
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants