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 Button 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.Button(id='input', children='Click me'),
])

# Callback for Button
@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 [f'n_clicks value: {n_clicks_flat}. n_clicks_prev value: {n_clicks_flat_prev}']
    else:
        return ['n_clicks value: ']

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

Material-UI components ported to Dash

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

Examples - Outdated, need to update with v4.0.0 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 @dwkaminsky