（数据科学学习手札110）Python+Dash快速web应用开发——静态部件篇（下）

本文示例代码已上传至个人Github仓库https://github.com/CNFeffery/DataScienceStudyNotes

1 简介

　　 这是个人系列教程Python+Dash快速web应用开发的第八期，在上一期的文章中，咱们对Dash生态里经常使用的渲染网页静态表格的方法作了一系列的介绍，使得咱们能够配合pandas渲染出灵活丰富的网页静态表格。

　　而在今天的教程内容做为静态部件篇三部曲的最后一篇，我将带你们学习Dash生态中经常使用的若干辅助性质的静态部件，有了它们，咱们搭建出的Dash应用会更加完善和正式~

图1

2 Dash中经常使用的辅助性静态部件

　　咱们前两期介绍的众多静态部件，主要都是用来做为某种具体类型内容的容器，譬如文字、图片、视频等。

　　但在平常使用中你们都会见识过一些在网页中起辅助做用的内容，他们对网页主题内容起到提示补充等辅助性功能。而在Dash生态中经常使用的有：

2.1 Tooltip()提示框

　　dash-bootstrap-components中封装的Tooltip()，能够帮助咱们无需回调便可建立悬浮提示框。而提示框须要绑定其余的部件来触发，这样的部件即为Tooltip()的目标部件，咱们只须要将目标部件的id做为Tooltip()的target参数传入，便可在鼠标悬停于目标部件时自动弹出提示框：

app1.py

import dash
import dash_bootstrap_components as dbc
import dash_html_components as html

app = dash.Dash(__name__)

app.layout = html.Div(
    dbc.Container(
        [
            html.Br(),
            html.Br(),
            html.Br(),
            html.P(
                [
                    '在',
                    html.A('Dash',
                           href='https://dash.plotly.com/',
                           id='dash'),
                    '中，咱们可使用',
                    html.A('dash_bootstrap_components',
                           href='https://github.com/facultyai/dash-bootstrap-components',
                           id='dash_bootstrap_components'),
                    '来快速完成基于网格系统的页面布局！',
                    dbc.Tooltip('Dash是一整套基于Python的web应用快速搭建方案。',
                                target='dash'),
                    dbc.Tooltip('dash_bootstrap_components是Dash第三方拓展中对bootstrap诸多特性的迁移。',
                                target='dash_bootstrap_components')
                ]
            )
        ]
    )
)

if __name__ == '__main__':
    app.run_server(debug=True)

　　能够看到咱们分别给两个html.A()部件绑定上相应的提示框，从而实现了鼠标悬停显示提示框内容。

图2

　　Tooltip()还具备一些额外参数能够帮助咱们自定义显示效果，经常使用的有：

• placement

　　参数placement用于设置提示框弹出方向，基础的可选参数有left、right、top以及bottom，分别表明左右上下弹出，你还能够在设定方向以后加上后缀-start或-end来对提示框箭头位置作进一步调整。

• autohide

　　autohide是一个Bool型参数，用于设置是否在鼠标移出目标部件悬停区域后马上关闭，默认为True，当设置为False后，鼠标快速移动到提示框之上不会关闭，从而方便用户进行一些复制操做。

• delay

　　delay参数接受字典输入，格式如{'show': 数值, 'hide': 数值}，可分别来设置悬浮后提示框显示，以及鼠标移出后提示框隐藏的动画时长，单位毫秒，默认为{'show': 0, 'hide': 250}。

　　你能够结合本身的实际需求定制出想要的提示框效果。

2.2 Spinner()建立加载动画

　　在不少状况下，咱们在web应用中执行某些耗时明显的操做时，最好是给对应的区域加载一些动画用来提示用户web应用正在计算中或者某一块内容正在加载中，这在Dash中能够利用部件Spinner()来实现。

　　使用起来很简单，由于咱们的web应用所谓的异步计算中或加载中状态，其实就是某个回调在完成输出前的计算状态。

　　所以Spinner()的逻辑是将其嵌套在内的子元素视为监听目标，当子元素中至少有一个元素处于回调计算中状态时，就会显示加载动画，默认动画是旋转的未闭合圆圈，对应默认参数type='border'，而另外一种可选的参数type='grow'则会显示为不断浮现又消失的圆；还可用color参数设置颜色，以及设置fullscreen=True来实现全屏加载动画：

app2.py

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

app = dash.Dash(__name__)

app.layout = html.Div(
    dbc.Container(
        [
            html.Br(),
            html.Br(),
            html.Br(),
            dbc.Row(dbc.Spinner(color='grey')),
            dbc.Row(dbc.Spinner(color='red', type='grow')),
            dbc.Row(dbc.Button('点击计算', id='start')),
            dbc.Row(dbc.Spinner(html.P('计算结果', id='output'))),
            dbc.Row(dbc.Button('全屏点击计算', id='start-fullscreen')),
            dbc.Row(dbc.Spinner(html.P('计算结果', id='output-fullscreen'), fullscreen=True)),
        ]
    )
)

@app.callback(
    Output('output', 'children'),
    Input('start', 'n_clicks'),
    prevent_initial_call=True
)
def loading(n_clicks):

    time.sleep(1)

    return '计算完成！'

@app.callback(
    Output('output-fullscreen', 'children'),
    Input('start-fullscreen', 'n_clicks'),
    prevent_initial_call=True
)
def loading(n_clicks):

    time.sleep(1)

    return '计算完成！'

if __name__ == '__main__':
    app.run_server(debug=True)

图3

　　而Spinner()中虽然只提供了上述两种样式的加载动画，但其实提供了fullscreen_style与spinner_style参数来供用户自定义css来实现更多样的加载动画效果，关于这部份内容咱们将在以后单独写一期教程，到时还会与Dash自带的Loading()部件进行比较。

2.3 Tabs()+Tab()建立多选项卡

　　在Dash中咱们可使用dash-bootstrap-components中的Tabs()来组织Tab()子元素，这时每一个Tab()之下的子元素就能够视为单独的页面，从而经过点击对应选项卡进入其余选项卡页面，使得咱们的应用形式更加丰富：

app3.py

import dash
import dash_html_components as html
import dash_bootstrap_components as dbc

app = dash.Dash(__name__)

app.layout = html.Div(
    dbc.Container(
        dbc.Tabs(
            [
                dbc.Tab(
                    [
                        html.Br(),
                        html.P('这是选项卡1')
                    ],
                    label='选项卡1'
                ),
                dbc.Tab(
                    [
                        html.Br(),
                        html.P('这是选项卡2')
                    ],
                    label='选项卡2'
                ),
                dbc.Tab(
                    [
                        html.Br(),
                        html.P('这是选项卡3')
                    ],
                    label='选项卡3'
                ),
            ]
        ),
        style={'margin-top': '100px'}
    )
)

if __name__ == '__main__':
    app.run_server(debug=True)

　　这时每一个Tab()下组织的内容就至关于独立的界面，很是的方便：

图4

　　而且Tab()提供了参数tab_style、label_style以及active_tab_style参数，使得咱们能够分别设置选项卡容器、选项卡标签以及切换到对应选项卡后的标签样式：

app4.py

import dash
import dash_bootstrap_components as dbc
import dash_html_components as html

app = dash.Dash(__name__)

app.layout = html.Div(
    dbc.Container(
        dbc.Tabs(
            [
                dbc.Tab(label='选项卡1', tab_style={'background-color': 'lightgrey'}),
                dbc.Tab(label='选项卡2', label_style={'color': 'red'}),
                dbc.Tab(label='选项卡3',
                        tab_style={'margin-left': 'auto'},
                        active_label_style={'color': 'green'}),
            ]
        ),
        style={'margin-top': '100px'}
    )
)


if __name__ == '__main__':
    app.run_server(debug=True)

图5

　　这个例子涉及的部份内容可能你如今还不熟悉，不过不要紧，咱们会在以后专门单独的详细教程~

---

　　静态部件在Dash经常使用部件中虽然不承担更具功能性和交互性的做用，可是咱们给编写的Dash应用增光添彩不可或缺的内容，这三期介绍的只是相对经常使用的一些静态部件，还有更多咱们将会在以后偶然使用到时再说起，以后就会进入到Dash中承担web应用主要功能的各类交互部件的教程，敬请期待~

　　以上就是本文的所有内容，欢迎在评论区与咱们进行讨论！