一、学习内容:
“人靠衣装,佛靠金装”,在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)
结果:
结果说明:此美化结果并未尽如人意,一些代码的美化效果没有呈现出来!!!需要后续跟进,探索代码失效的原因。