Python Dash（五进阶）

一、学习内容：

“人靠衣装，佛靠金装”，在Python Dash（五）中我们实现了长度单位换算的功能，本节我们用bootstrap给该工具穿上美丽的衣服。

二、学习过程

相关代码模板网址：https://dash-bootstrap-components.opensource.faculty.ai/

代码：

# author : 高冷男孩不吃苹果


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

app = dash.Dash(__name__)

# #技巧一：使用函数生成重复html代码
# def item(name):
#     return html.Div([name,html.Span('--',id=name)])
#
# app.layout = html.Div([
#     html.H3('长度单位换算器'),
#     dcc.Input(value=0,id='m',type='number'),
#     item("mm"),
#     item("cm"),
#     item("dm"),
#     item("km")
# ])

def item(name):
    return dbc.ListGroupItem([
        html.H5(name),
        html.H5("--",id=name,className="float-right")
    ])

list_group = dbc.ListGroup(
    [
        dbc.ListGroupItem(children=[
            html.H1('长度单位换算器'),
            html.P("Input:"),
            dcc.Input(value=0,id='m',type='number'),
            html.P("Output:")
        ],action=True),
        item('mm'),
        item('cm'),
        item('dm'),
        item('km')
    ],
    className='shadow'
)

app.layout = dbc.Container([list_group],style={"padding-Top":"3rem"})

#技巧二：长字符串用变量存储
NODE = 'children'
@app.callback(
    output = [Output("mm",NODE),Output("cm",NODE),Output("dm",NODE),Output("km",NODE)],
    inputs = [Input('m','value')]
)
def calc(value):
    if value == '':
        value = 0
    return (
        "{}mm".format(value*0.001),
        "{}cm".format(value*0.01),
        "{}dm".format(value*0.1),
        "{}km".format(value*10.0),
    )


app.run_server(debug=True)

结果：

 结果说明：此美化结果并未尽如人意，一些代码的美化效果没有呈现出来！！！需要后续跟进，探索代码失效的原因。