【数据科学系列】基于Python的Web应用框架Dash-Dash HTML Components快速入门

Dash HTML Components

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