Created
June 11, 2021 03:01
-
-
Save gitumarkk/44381082cbbfc98f40c067942356fa5b to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
from datetime import date | |
import dash | |
import dash_core_components as dcc | |
import dash_html_components as html | |
from dash.dependencies import Input, Output | |
from custom_components import MyCustomComponent, MyEditor, MyCalendar | |
external_stylesheets = ["https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css"] | |
app = dash.Dash(__name__, external_stylesheets=external_stylesheets) | |
app.layout = html.Div( | |
className="text-center", | |
children=[ | |
html.H1( | |
children="Hello Dash", | |
className="p-4 text-indigo-700 text-xl w-full", | |
), | |
html.Div( | |
children=[ | |
MyCustomComponent( | |
id="my-custom-component", | |
label="label is required", | |
value="", | |
) | |
], | |
className="p-4 bg-gray-100 w-full", | |
), | |
html.Div(MyEditor(id="my-editor"), className="w-3/5 my-5 mx-auto"), | |
html.Div(MyCalendar(id="my-calendar"), className="w-72 mx-auto"), | |
html.Div(id="input-result", className="my-5"), | |
html.Button( | |
"Reset", | |
id="clear-input-button", | |
className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded", | |
), | |
], | |
) | |
@app.callback( | |
Output("input-result", "children"), | |
[ | |
Input("my-custom-component", "value"), | |
Input("my-calendar", "date"), | |
Input("my-editor", "value"), | |
], | |
) | |
def display_input_value(input_value, date_value, editor_value): | |
return html.Div( | |
children=[ | |
html.Div(f"Input Value: {input_value}", className=""), | |
html.Div(f"Date Value: {date_value}", className=""), | |
html.Div(f"Date Value: {editor_value}", className=""), | |
] | |
) | |
@app.callback( | |
[ | |
Output("my-custom-component", "value"), | |
Output("my-calendar", "date"), | |
Output("my-editor", "value"), | |
], | |
[Input("clear-input-button", "n_clicks")], | |
) | |
def clear_input_value(n_clicks): | |
today = date.today().strftime("%d-%b-%Y") | |
if n_clicks: | |
return "", today, "" | |
return "", today, "" | |
if __name__ == "__main__": | |
app.run_server(debug=True) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment