ssword / sd-material-ui

StratoDem Analytics implementations of material-ui components for Dash

sd-material-ui

StratoDem Analytics Dash implementation of material-ui components.

Dash wrappers around the excellent material-ui package

Installation and usage

$ pip install sd-material-ui

import dash
import dash_html_components as html

import sd_material_ui

my_app = dash.Dash()

# A FlatButton on Paper
my_app.layout = sd_material_ui.Paper([
    html.Div(children=[
        html.P(id='output', children=['n_clicks value: . n_clicks_previous value: '])
    ]),
    
    sd_material_ui.FlatButton(id='input', label='Click me', backgroundColor='orange'),
])

# Callback for FlatButton
@app.callback(
    dash.dependencies.Output('output', 'children'),
    [dash.dependencies.Input('input', 'n_clicks')],
    [dash.dependencies.State('input', 'n_clicks_previous')])
def display_clicks_flat(n_clicks_flat: int, n_clicks_flat_prev: int):
    if n_clicks_flat:
        return ['n_clicks value: {}. n_clicks_prev value: {}'.format(n_clicks_flat,
                                                                     n_clicks_flat_prev)]
    else:
return ['n_clicks value: ']

if __name__ == '__main__':
    my_app.run_server()

Material-UI components ported to Dash

• AutoComplete
• BottomNavigation
• Checkbox
• CircularProgress
• Dialog
• Divider
• Drawer
• DropDownMenu
• FlatButton
• FontIcon
• IconButton
• Paper
• RaisedButton
• Snackbar
• Subheader
• Toggle

Examples

Dash

Go to this link to learn about Dash.

Dash help

See the dash-components-archetype repo for more information.

Contributing

To set up the development environment:

$ npm install
# Run webpack to create the Dash React bundle
$ npm run build-dist
# Set up a virtualenv
$ virtualenv venv -p python3
$ source venv/bin/activate
# Install the local Python Dash package
$ npm run install-local

Running a local server

Run usage.py in the virtual environment

$ source venv/bin/activate
$ python usage.py

Contributors

@mjclawar @coralvanda @SreejaKeesara