Dash是一个Web应用程序框架,提供围绕HTML,CSS和JavaScript的纯Python抽象。
用户可以使用Python结构和dash-html-components库来构建布局,而不是编写HTML或使用HTML模板引擎 。
样例1:简单的HTML结构 使用Python结构和dash-html-components库替代HTML或HTML模板引擎 import dash_html_components as html html.Div([ html.H1('Hello Dash'), html.Div([ html.P('Dash converts Python classes into HTML'), html.P('This conversion happens behind the scenes by Dash's JavaScript front-end') ]) ]) <div> <h1>Hello Dash</h1> <div> <p>Dash converts Python classes into HTML</p> <p>This conversion happens behind the scenes by Dash's JavaScript front-end</p> </div> </div>用户不适应HTML的替代选择:使用恰当的元素和属性来替代95%的HTML。
样例2.1:Markdown支持 import dash import dash_core_components as dcc import dash_html_components as html external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css'] app = dash.Dash(__name__, external_stylesheets=external_stylesheets) app.layout = html.Div([dcc.Markdown(''' #### Dash and Markdown Dash supports [Markdown](http://commonmark.org/help). Markdown is a simple way to write and format text. It includes a syntax for things like **bold text** and *italics*, [links](http://commonmark.org/help), inline `code` snippets, lists, quotes, and more. ''')]) if __name__ == '__main__': app.run_server(debug=True) 样例2.2:Markdown支持 import dash import dash_core_components as dcc import dash_html_components as html external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css'] app = dash.Dash(__name__, external_stylesheets=external_stylesheets) markdown_text = ''' ### Dash and Markdown Dash apps can be written in Markdown. Dash uses the [CommonMark](http://commonmark.org/) specification of Markdown. Check out their [60 Second Markdown Tutorial](http://commonmark.org/help/) if this is your first introduction to Markdown! ''' app.layout = html.Div([ dcc.Markdown(children=markdown_text) ]) if __name__ == '__main__': app.run_server(debug=True) 样例3:与HTML的许多关键性的差异 Python类有所有的HTML组件,如style,class以及id。HTML元素和Dash类是大致相似的但是也存在许多关键性的差异。 style属性是字典属性 style字典是[小]驼峰式命名法(lower camel case) class键重命名为className 以像素为单位的Style属性只需要提供数字,不要以px单位 import dash_html_components as html html.Div([ html.Div('Example Div', style={'color': 'blue', 'fontSize': 14}), html.P('Example P', className='my-class', id='my-p-element') ], style={'marginBottom': 50, 'marginTop': 25}) <div style="margin-bottom: 50px; margin-top: 25px;"> <div style="color: blue; font-size: 14px"> Example Div </div> <p class="my-class", id="my-p-element"> Example P </p> </div>更多源码,请下载:https://github.com/plotly/dash-html-components 更多资料,请访问:https://dash.plot.ly/dash-html-components